/* One entrance per page load. Nothing is hidden before JS starts a sequence.
   Individual translate/scale/rotate compose with the existing transforms. */
@supports (translate: 0 1px) and (scale: 1) and (clip-path: inset(0)) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-book-first {
      --hero-brush-delay: 2100ms;
      --hero-underline-delay: 2390ms;
      --hero-star-delay: 1760ms;
      --hero-cta-delay: 2860ms;
    }
    .hero-book-first.hero-motion-book .book-showcase-halo {
      animation: hero-halo-in 680ms cubic-bezier(.2,.7,.2,1) both;
      transform-origin: 50% 55%;
    }
    .hero-book-first.hero-motion-book .hero-main-book {
      animation: hero-book-in 820ms 180ms cubic-bezier(.18,.72,.2,1) both;
      transform-origin: 50% 80%;
    }
    .hero-book-first.hero-motion-book .book-showcase-note {
      animation: hero-note-in 500ms 500ms ease-out both;
    }
    .hero-book-first.hero-motion-book .hero-reader-woman {
      animation: hero-reader-left-in 600ms 760ms cubic-bezier(.18,.72,.2,1) both;
    }
    .hero-book-first.hero-motion-book .hero-reader-man {
      animation: hero-reader-right-in 600ms 940ms cubic-bezier(.18,.72,.2,1) both;
    }
    .hero-book-first.hero-motion-book .hero-proof-sale {
      animation: hero-message-in 520ms 1120ms ease-out both;
    }
    .hero-book-first.hero-motion-book .hero-proof-progress {
      animation: hero-message-in 520ms 1260ms ease-out both;
    }
    .hero-book-first.hero-motion-book .hero-book-showcase .seal {
      animation: hero-seal-in 650ms 1460ms cubic-bezier(.2,.72,.25,1) both;
    }

    /* Only the paint moves. The actual headline is readable at every frame. */
    .hero-book-first.hero-motion-copy h1 .marker {
      position: relative;
      isolation: isolate;
      background: transparent;
    }
    .hero-book-first.hero-motion-copy h1 .marker::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: var(--yellow);
      clip-path: inset(0);
      animation: hero-brush-sweep 700ms var(--hero-brush-delay) cubic-bezier(.3,.1,.2,1) both;
    }
    .hero-book-first.hero-motion-copy h1 .marker::after {
      animation: hero-brush-sweep 550ms var(--hero-underline-delay) ease-out both;
    }
    .hero-book-first.hero-motion-copy h1 .burst {
      animation: hero-star-twinkle 950ms var(--hero-star-delay) cubic-bezier(.25,.65,.3,1) both;
    }
    /* Keep the button clickable, legible, and in place throughout. */
    .hero-book-first.hero-motion-cta .hero-copy > .button-main {
      animation: hero-cta-attention 850ms var(--hero-cta-delay) ease-in-out both;
    }
    .hero-book-first.hero-motion-cta .hero-copy > .button-main > span {
      animation: hero-cta-arrow 850ms var(--hero-cta-delay) ease-in-out both;
    }
  }
}

/* Mobile reads the headline, then book, then CTA in separate viewports. Each
   visible group gets its own short entrance instead of waiting for unseen art. */
@media (max-width: 600px) {
  .hero-book-first {
    --hero-brush-delay: 120ms;
    --hero-underline-delay: 400ms;
    --hero-star-delay: 620ms;
    --hero-cta-delay: 220ms;
  }
}

@keyframes hero-halo-in {
  from { opacity: 0; scale: .88; }
  to { opacity: 1; scale: 1; }
}
@keyframes hero-book-in {
  from { opacity: 0; translate: 0 26px; scale: .97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes hero-note-in {
  from { opacity: 0; translate: 0 7px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-reader-left-in {
  from { opacity: 0; translate: -16px 12px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes hero-reader-right-in {
  from { opacity: 0; translate: 16px 12px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes hero-message-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-seal-in {
  0% { opacity: 0; scale: .78; rotate: -14deg; }
  72% { opacity: 1; scale: 1.025; rotate: 2deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes hero-brush-sweep {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
@keyframes hero-star-twinkle {
  0% { scale: 1; rotate: 0deg; }
  35% { scale: 1.14; rotate: 34deg; }
  70% { scale: .97; rotate: 62deg; }
  100% { scale: 1; rotate: 90deg; }
}
@keyframes hero-cta-attention {
  0%, 100% { scale: 1; }
  45% { scale: 1.012; }
}
@keyframes hero-cta-arrow {
  0%, 100% { translate: 0 0; }
  45% { translate: 3px -3px; }
}

/* Also handles an accessibility preference changed while a sequence is active. */
@media (prefers-reduced-motion: reduce) {
  .hero-book-first.hero-motion-book .book-showcase-halo,
  .hero-book-first.hero-motion-book .hero-main-book,
  .hero-book-first.hero-motion-book .book-showcase-note,
  .hero-book-first.hero-motion-book .hero-reader,
  .hero-book-first.hero-motion-book .hero-proof-message,
  .hero-book-first.hero-motion-book .seal,
  .hero-book-first.hero-motion-copy .marker::before,
  .hero-book-first.hero-motion-copy .marker::after,
  .hero-book-first.hero-motion-copy .burst,
  .hero-book-first.hero-motion-cta .button-main,
  .hero-book-first.hero-motion-cta .button-main > span {
    animation: none !important;
  }
}