/* =========================================================================
   TIMBER TRAILS — ANIMATION LAYER
   Tasteful, editorial motion only. Everything here is opt-in via a data
   attribute or class toggled by animation.js, and everything degrades to
   a static, fully legible state when prefers-reduced-motion is set.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SCROLL REVEAL
   Elements start slightly offset and faded; animation.js adds
   .is-visible via IntersectionObserver as each enters the viewport.
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal='fade'] { transform: none; }

[data-reveal='left'] { transform: translateX(-32px); }
[data-reveal='left'].is-visible { transform: translateX(0); }

[data-reveal='right'] { transform: translateX(32px); }
[data-reveal='right'].is-visible { transform: translateX(0); }

[data-reveal='scale'] { transform: scale(0.94); }
[data-reveal='scale'].is-visible { transform: scale(1); }

/* Staggered children — animation.js sets --stagger-index per item */
[data-reveal-group] > * {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

/* -------------------------------------------------------------------------
   HERO TEXT REVEAL — headline lines mask in on load
   ------------------------------------------------------------------------- */
.hero__title .line-mask {
  display: block;
  overflow: hidden;
}

.hero__title .line-inner {
  display: block;
  transform: translateY(110%);
  animation: lineReveal var(--dur-slower) var(--ease-out-expo) forwards;
}

.hero__eyebrow,
.hero__lede,
.hero__actions {
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-expo) forwards;
}

.hero__eyebrow { animation-delay: 0.5s; }
.hero__lede { animation-delay: 0.85s; }
.hero__actions { animation-delay: 1.05s; }

@keyframes lineReveal {
  to { transform: translateY(0); }
}

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

/* -------------------------------------------------------------------------
   HERO ORGANIC BACKGROUND — slow gradient drift + tree-ring pulse
   ------------------------------------------------------------------------- */
.hero__canvas-wrap svg .ring {
  transform-origin: center;
  animation: ringPulse 14s var(--ease-soft) infinite;
}

.hero__canvas-wrap svg .ring--2 { animation-duration: 18s; animation-delay: -3s; }
.hero__canvas-wrap svg .ring--3 { animation-duration: 22s; animation-delay: -7s; }

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.03); opacity: 0.75; }
}

.hero__canvas-wrap svg .drift {
  animation: driftMove 40s linear infinite;
}

@keyframes driftMove {
  from { transform: translate(0, 0); }
  to { transform: translate(-60px, -40px); }
}

.hero__scrim {
  background-size: 200% 200%;
  animation: mistShift 20s var(--ease-soft) infinite alternate;
}

@keyframes mistShift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

/* Subtle parallax layer — animation.js updates --parallax-y on scroll */
.hero__canvas-wrap {
  transform: translateY(calc(var(--parallax-y, 0) * 1px));
}

/* -------------------------------------------------------------------------
   SCROLL CUE
   ------------------------------------------------------------------------- */
@keyframes scrollCue {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* -------------------------------------------------------------------------
   TIMELINE PROGRESS LINE
   ------------------------------------------------------------------------- */
.timeline__track::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 1px;
  height: var(--timeline-progress, 0%);
  background: var(--brand-primary);
  transition: height var(--dur-base) var(--ease-soft);
}

/* -------------------------------------------------------------------------
   BUTTON GLASS REFLECTION SWEEP
   ------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; }

.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-slow) var(--ease-soft);
  pointer-events: none;
}

.btn:hover::before { left: 130%; }

/* -------------------------------------------------------------------------
   PAGE-LEVEL TRANSITIONS
   ------------------------------------------------------------------------- */
body {
  animation: pageIn var(--dur-slow) var(--ease-out-expo) both;
}

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

/* -------------------------------------------------------------------------
   CARD LIFT HOVER (used across topic, library and pillar cards)
   ------------------------------------------------------------------------- */
.topic-card, .pillar, .library-card {
  will-change: transform;
}

/* -------------------------------------------------------------------------
   LOGO MARK — gentle growth-ring rotation on load
   ------------------------------------------------------------------------- */
.nav__brand-mark .ring-rotate {
  transform-origin: center;
  animation: markSpin 60s linear infinite;
}

@keyframes markSpin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   REDUCED MOTION — final authority: strip everything decorative
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__title .line-inner {
    transform: none !important;
    animation: none !important;
  }

  .hero__eyebrow, .hero__lede, .hero__actions {
    opacity: 1 !important;
    animation: none !important;
  }

  .hero__canvas-wrap svg .ring,
  .hero__canvas-wrap svg .drift,
  .hero__scrim,
  .nav__brand-mark .ring-rotate,
  body {
    animation: none !important;
  }

  .hero__canvas-wrap { transform: none !important; }

  .btn::before { display: none; }
}