/* =========================================================================
   animations.css — motion system
   Everything here is an enhancement. If JavaScript never runs, the
   .no-js rules at the bottom guarantee all content is visible and static.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Keyframes
   ---------------------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes maskUp {
  from { opacity: 0; transform: translate3d(0, 105%, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bookRise {
  from { opacity: 0; transform: translate3d(0, 60px, 0) rotateY(-24deg) rotateX(6deg) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateY(-13deg) rotateX(0deg) scale(1); }
}

@keyframes navItemIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ruleGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.4deg); }
}

@keyframes swayFlip {
  0%, 100% { transform: scaleX(-1) rotate(0deg); }
  50%      { transform: scaleX(-1) rotate(1.6deg); }
}

@keyframes drawLine {
  from { stroke-dashoffset: var(--dash, 1200); }
  to   { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------------------
   Scroll reveals
   JS adds .is-in when the element enters the viewport (IntersectionObserver).
   ---------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Variants */
[data-reveal="fade"]      { transform: none; }
[data-reveal="left"]      { transform: translate3d(-30px, 0, 0); }
[data-reveal="right"]     { transform: translate3d(30px, 0, 0); }
[data-reveal="scale"]     { transform: scale(0.965); }
[data-reveal="rule"]      { opacity: 1; transform: scaleX(0); transform-origin: left; }
[data-reveal="rule"].is-in{ transform: scaleX(1); }

/* Text mask reveal: each line sits in an overflow-hidden wrapper */
.mask-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.mask-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  opacity: 0;
  transition:
    transform 1000ms var(--ease-out),
    opacity 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in .mask-line > span,
.is-in > .mask-line > span,
.hero.is-ready .mask-line > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Staggering helper — set by JS on grouped children */
[data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 90ms); }

/* -------------------------------------------------------------------------
   Hero entrance sequence
   Quick and cinematic: nav, label, title lines, copy, actions, then the book.
   ---------------------------------------------------------------------- */

.hero__label,
.hero__byline,
.hero__copy,
.hero__actions,
.hero__meta {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.hero.is-ready .hero__label,
.hero.is-ready .hero__byline,
.hero.is-ready .hero__copy,
.hero.is-ready .hero__actions,
.hero.is-ready .hero__meta {
  animation: fadeUp 800ms var(--ease-out) forwards;
}
.hero.is-ready .hero__label   { animation-delay: 60ms; }
.hero.is-ready .hero__byline  { animation-delay: 620ms; }
.hero.is-ready .hero__copy    { animation-delay: 720ms; }
.hero.is-ready .hero__actions { animation-delay: 820ms; }
.hero.is-ready .hero__meta    { animation-delay: 920ms; }

.hero .mask-line:nth-of-type(1) > span { --reveal-delay: 180ms; }
.hero .mask-line:nth-of-type(2) > span { --reveal-delay: 300ms; }
.hero .mask-line:nth-of-type(3) > span { --reveal-delay: 420ms; }

.hero__book-wrap { opacity: 0; }
.hero.is-ready .hero__book-wrap { animation: fadeIn 200ms linear 400ms forwards; }
.hero.is-ready .book { animation: bookRise 1400ms var(--ease-out) 400ms backwards; }

.site-header { opacity: 0; animation: fadeIn 700ms var(--ease-out) 120ms forwards; }
.scroll-cue { opacity: 0; animation: fadeUp 900ms var(--ease-out) 1200ms forwards; }

/* -------------------------------------------------------------------------
   Ambient background motion — slow, low-amplitude, never distracting
   ---------------------------------------------------------------------- */

.hero-leaves-tl { animation: sway 13s var(--ease-soft) infinite; }
.hero-leaves-tr { animation: swayFlip 16s var(--ease-soft) infinite; }
.decor-glow     { animation: drift 22s var(--ease-soft) infinite; }

/* Line-drawing for decorative SVG strokes */
.draw path,
.draw line,
.draw polyline {
  stroke-dasharray: var(--dash, 1200);
  stroke-dashoffset: var(--dash, 1200);
}
.draw.is-in path,
.draw.is-in line,
.draw.is-in polyline {
  animation: drawLine 2400ms var(--ease-out) forwards;
}

/* -------------------------------------------------------------------------
   Mobile navigation item stagger
   ---------------------------------------------------------------------- */

.mobile-nav.is-open .mobile-nav__link {
  animation-delay: calc(90ms + var(--i, 0) * 55ms);
}

/* -------------------------------------------------------------------------
   Micro-interactions
   ---------------------------------------------------------------------- */

.hover-lift {
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Gold rule that extends on hover of its parent */
.rule-extend {
  display: block;
  height: 1px;
  width: 2.5rem;
  background: var(--gold);
  transition: width var(--t-slow) var(--ease-out);
}
a:hover > .rule-extend,
.card:hover .rule-extend,
li:hover > a .rule-extend { width: 5.5rem; }

/* Parallax targets — JS writes --py, CSS applies it */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* -------------------------------------------------------------------------
   Progressive enhancement fallbacks
   ---------------------------------------------------------------------- */

.no-js [data-reveal],
.no-js .hero__label,
.no-js .hero__byline,
.no-js .hero__copy,
.no-js .hero__actions,
.no-js .hero__meta,
.no-js .hero__book-wrap,
.no-js .site-header,
.no-js .scroll-cue {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.no-js .mask-line > span { opacity: 1; transform: none; }
.no-js .draw path,
.no-js .draw line,
.no-js .draw polyline { stroke-dashoffset: 0; }
.no-js .accordion__panel { height: auto; }

/* -------------------------------------------------------------------------
   Reduced motion — accessibility wins over art direction
   Content appears immediately; functional transitions stay but become instant.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .hero__label,
  .hero__byline,
  .hero__copy,
  .hero__actions,
  .hero__meta,
  .hero__book-wrap,
  .site-header,
  .scroll-cue {
    opacity: 1 !important;
    transform: none !important;
  }
  .mask-line > span { opacity: 1 !important; transform: none !important; }
  .draw path, .draw line, .draw polyline { stroke-dashoffset: 0 !important; }

  /* No pointer-tracked perspective, no parallax, no ambient drift */
  .book { transform: none !important; }
  [data-parallax] { transform: none !important; }
  .hero-leaves-tl,
  .hero-leaves-tr,
  .decor-glow { animation: none !important; }

  /* Interactions the interface depends on stay usable, just instant */
  .accordion__panel { transition: none; }
  .mobile-nav { transition: none; }
}