/* Phase 20: magazine-style motion for Dolfin Rider Guides. */
.dolfin-guides-motion { max-width: 78rem; overflow: clip; }

.dolfin-guides-motion .blog-list__hero { position: relative; isolation: isolate; margin-bottom: clamp(2rem, 4vw, 3rem); padding: clamp(2.4rem, 5.5vw, 4.5rem) clamp(1.35rem, 6vw, 5rem); overflow: hidden; border-radius: .7rem; color: #fff; background: linear-gradient(130deg, #051923, color-mix(in srgb, var(--blog-primary, #0079b8) 68%, #051923)); box-shadow: 0 1.7rem 3.8rem rgb(1 31 46 / 16%); }
.dolfin-guides-motion .blog-list__hero::before,
.dolfin-guides-motion .blog-list__hero::after { position: absolute; z-index: -1; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; content: ""; }
.dolfin-guides-motion .blog-list__hero::before { width: 22rem; height: 22rem; top: -16rem; left: -7rem; }
.dolfin-guides-motion .blog-list__hero::after { width: 29rem; height: 29rem; right: -17rem; bottom: -21rem; box-shadow: 0 0 0 4.5rem rgb(255 255 255 / 2%); }
.dolfin-guides__eyebrow { display: block; margin-bottom: .8rem; color: var(--blog-accent, #f26a21); font-size: .68rem; font-weight: 800; letter-spacing: .19em; }
.dolfin-guides-motion .blog-list__hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); }
.dolfin-guides-motion .blog-list__hero p { max-width: 43rem; margin-inline: auto; color: rgb(255 255 255 / 72%); }
.dolfin-guides__hero-mark { width: min(12rem, 44%); height: 2px; margin: 1.5rem auto 0; overflow: hidden; background: rgb(255 255 255 / 13%); }
.dolfin-guides__hero-mark i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #29a8e8, #f26a21); transform: scaleX(0); transform-origin: left; transition: transform 1250ms cubic-bezier(.16, 1, .3, 1) 600ms; }

.dolfin-guides-motion .blog-list__grid { gap: clamp(1.35rem, 2.5vw, 2rem); }
.dolfin-guides-motion .blog-list-card { position: relative; border-radius: .7rem; box-shadow: 0 .85rem 2.1rem rgb(1 39 57 / 7%); transition: opacity 720ms ease, transform 1000ms cubic-bezier(.16, 1, .3, 1), border-color 300ms ease, box-shadow 420ms ease; }
.dolfin-guides-motion .blog-list-card::after { position: absolute; inset: auto 0 0; height: .22rem; background: linear-gradient(90deg, #0079b8, #29a8e8, #f26a21); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-guides-motion .blog-list-card:hover { transform: translateY(-.45rem); box-shadow: 0 1.5rem 3rem rgb(0 94 139 / 15%); }
.dolfin-guides-motion .blog-list-card:hover::after { transform: scaleX(1); }
.dolfin-guides-motion .blog-list-card__image { position: relative; overflow: hidden; }
.dolfin-guides-motion .blog-list-card__image::after { position: absolute; inset: 0; background: linear-gradient(110deg, #0b2532, #0079b8); content: ""; transform: translateX(0); }
.dolfin-guides-motion .blog-list-card__image img { transition: transform 900ms cubic-bezier(.16, 1, .3, 1), filter 700ms ease; }
.dolfin-guides-motion .blog-list-card:hover .blog-list-card__image img { transform: scale(1.05); filter: saturate(1.05); }
.dolfin-guides-motion .blog-list-card__body { padding: 1.45rem; }
.dolfin-guides-motion .blog-list-card__date { display: inline-flex; align-self: flex-start; padding: .28rem .5rem; border-radius: 999px; color: #006c9f; background: #eaf7fc; }
.dolfin-guides-motion .blog-list-card__link { transition: color 250ms ease, transform 340ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-guides-motion .blog-list-card:hover .blog-list-card__link { transform: translateX(.25rem); }
.dolfin-guides-motion .blog-list__empty { border: 1px dashed #bfd8e4; border-radius: .7rem; background: linear-gradient(145deg, #f2fafd, #fff); box-shadow: 0 1.1rem 2.6rem rgb(1 39 57 / 7%); }
.dolfin-guides-motion .blog-list__pagination a { transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease, transform 320ms ease; }
.dolfin-guides-motion .blog-list__pagination a:hover { transform: translateY(-.12rem); }

.dolfin-guides-motion-ready [data-dolfin-guides-reveal] { opacity: 0; transform: translateY(2.3rem); }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal="hero"] { transform: translateY(1.25rem) scale(.993); transition: opacity 950ms ease, transform 1250ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal="card"] { transform: perspective(58rem) translateY(2.5rem) rotateX(4deg); transform-origin: bottom; transition-delay: var(--dolfin-guide-card-delay, 0ms); }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal="pagination"] { transition: opacity 700ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal="empty"] { transform: translateY(1.8rem) scale(.985); transition: opacity 820ms ease, transform 1050ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal].dolfin-guides-is-visible { opacity: 1; transform: none; }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal="hero"].dolfin-guides-is-visible .dolfin-guides__hero-mark i { transform: scaleX(1); }
.dolfin-guides-motion-ready [data-dolfin-guides-reveal="card"].dolfin-guides-is-visible .blog-list-card__image::after { animation: dolfin-guide-curtain 1250ms cubic-bezier(.16, 1, .3, 1) calc(160ms + var(--dolfin-guide-card-delay, 0ms)) both; }
.dolfin-guides-motion-ready [data-dolfin-guide-item] { opacity: 0; transform: translateY(.75rem); transition: opacity 560ms ease, transform 740ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(360ms + var(--dolfin-guide-card-delay, 0ms) + var(--dolfin-guide-item-delay, 0ms)); }
.dolfin-guides-motion-ready .dolfin-guides-is-visible [data-dolfin-guide-item] { opacity: 1; transform: none; }

@keyframes dolfin-guide-curtain { 0% { transform: translateX(0); } 100% { transform: translateX(102%); } }

@media (max-width: 35rem) {
  .dolfin-guides-motion .blog-list__hero { padding-inline: 1.1rem; }
  .dolfin-guides-motion .blog-list-card:hover { transform: translateY(-.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .dolfin-guides-motion *,
  .dolfin-guides-motion *::before,
  .dolfin-guides-motion *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .dolfin-guides-motion-ready [data-dolfin-guides-reveal],
  .dolfin-guides-motion-ready [data-dolfin-guide-item] { opacity: 1; transform: none; }
  .dolfin-guides-motion .blog-list-card__image::after { display: none; }
}