/* ==========================================================================
   Motion language taken from the reference:
   - hero copy rises in (animmate_In_Up), hero media drops in (animmate_In_Down)
   - cards fade down into place on scroll (WOW fadeInDown)
   - sticky header drops in once the page scrolls
   Everything is opt-in via .js so content stays visible without scripts.
   ========================================================================== */

@keyframes headerDrop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes paperIn {
  from { opacity: 0; transform: translateY(30px) rotate(-7deg); }
  to { opacity: 1; transform: translateY(0) rotate(-3deg); }
}

@keyframes waRing {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.25, 1.45); }
}

@keyframes floatY {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* ---------- Hero entrance (replays on every tab change) ---------- */
.js .hero__slide.is-active .hero-anim { animation: riseIn 0.9s var(--ease-out) both; }
.js .hero__slide.is-active .hero-anim:nth-child(2) { animation-delay: 0.08s; }
.js .hero__slide.is-active .hero-anim:nth-child(3) { animation-delay: 0.16s; }
.js .hero__slide.is-active .hero-anim--down { animation-name: dropIn; animation-delay: 0.26s; }
.js .hero__slide.is-active .hero__media { animation: dropIn 1s var(--ease-out) both; }
.js .hero__slide.is-active .notebook { animation: paperIn 1s 0.35s var(--ease-out) both; }

/* handwriting: each line is revealed left to right like ink going down */
.js .notebook__line,
.js .paper-page [data-write] {
  clip-path: inset(0 100% 0 0);
}
.js .is-writing .notebook__line,
.js .is-writing [data-write] {
  animation: write var(--write-dur, 1.4s) steps(28, end) forwards;
  animation-delay: var(--write-delay, 0s);
}
@keyframes write {
  to { clip-path: inset(0 0 0 0); }
}

.doodle--star { animation: floatY 5s ease-in-out infinite; }
.doodle--sparkle { animation: floatY 6s 1s ease-in-out infinite; }
.doodle--pen { animation: floatY 7s 0.5s ease-in-out infinite; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="up"] { transform: translateY(30px); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .notebook__line,
  .js .paper-page [data-write] { clip-path: none; }
  .js .footer__script { clip-path: none; }
  .footer__script::after { transform: none; }
}