/* =================================================================
   CrossAIHub — animations
   Calm, devotional motion. Nothing bouncy. Nothing demanding attention.
   Every animation honors prefers-reduced-motion.
   ================================================================= */

/* ---------- Tokens ----------------------------------------------- */

:root {
  --ease-calm:    cubic-bezier(0.22, 0.61, 0.36, 1);      /* slow start, gentle settle */
  --ease-breath:  cubic-bezier(0.45, 0, 0.55, 1);          /* sinusoidal-feeling */
  --d-fast:       180ms;
  --d-med:        320ms;
  --d-slow:       600ms;
}

/* ---------- 1. Fade-in on scroll (data-reveal) ------------------- */
/* JS adds .is-revealed when the element enters the viewport. */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--d-slow) var(--ease-calm),
    transform var(--d-slow) var(--ease-calm);
  will-change: opacity, transform;
}

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

/* Staggered child reveals — applied to .threeup, .tools-grid, .channels, .season-list */
[data-reveal-children] > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--d-slow) var(--ease-calm),
    transform var(--d-slow) var(--ease-calm);
}

[data-reveal-children].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-children].is-revealed > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-children].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-children].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-children].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-children].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-children].is-revealed > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-children].is-revealed > *:nth-child(8) { transition-delay: 560ms; }

[data-reveal-children].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 2. Hero title — slow breathing ----------------------- */
/* ~4-second sinusoidal scale of about 1%. Slower than calm breath
   on purpose — visible only if you sit with it for a moment. */

@keyframes hero-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.010); }
}

.hero__title.hero-breathe {
  animation: hero-breathe 4200ms var(--ease-breath) infinite;
  transform-origin: center bottom;
}

/* ---------- 3. Liturgical wheel — slow scroll-linked rotation ---- */
/* JS sets --wheel-rot in degrees as the user scrolls. Range: 0 to ~5deg. */

.year-wheel {
  transform: rotate(var(--wheel-rot, 0deg));
  transition: transform 80ms linear;
  transform-origin: center;
}

/* The center cross + year label stay upright — counter-rotate them. */
.year-wheel .center-group {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(calc(-1 * var(--wheel-rot, 0deg)));
  transition: transform 80ms linear;
}

/* The text labels too — keep them upright */
.year-wheel .arc-labels {
  transform-box: fill-box;
  transform-origin: 250px 250px;
  transform: rotate(calc(-1 * var(--wheel-rot, 0deg)));
  transition: transform 80ms linear;
}

/* ---------- 4. Card hover lift ----------------------------------- */
/* The base .card, .tool, .channel already have a hover transform.
   Here we extend it with a soft shadow that fades in. */

.card,
.tool,
.channel {
  box-shadow: 0 0 0 rgba(13, 17, 23, 0);
  transition:
    transform var(--d-med) var(--ease-calm),
    border-color var(--d-med) var(--ease-calm),
    box-shadow var(--d-med) var(--ease-calm),
    background var(--d-med) var(--ease-calm);
}

.card:hover,
.tool:hover,
.channel:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px -8px rgba(13, 17, 23, 0.18);
}

.card:focus-within,
.tool:focus-within,
.channel:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px -8px rgba(13, 17, 23, 0.18);
}

/* ---------- 5. View Transitions (page fades) --------------------- */
/* Browsers that support View Transitions get a soft cross-fade
   between pages. Older browsers see instant navigation, as before. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-calm);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* ---------- 6. Body-link underline reveal ------------------------ */
/* Prose links underline animates from left to right on hover.
   The base CSS already shows a static underline; here we replace it
   with a CSS-only animation. */

.prose a,
.channel__note a,
.disclaimer-strip a,
.season__output a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size 220ms var(--ease-calm), color var(--d-fast);
}

.prose a:hover,
.prose a:focus-visible,
.channel__note a:hover,
.disclaimer-strip a:hover,
.season__output a:hover {
  background-size: 100% 1px;
  color: var(--gold-deep);
}

/* Footer links — already on dark background; same treatment but gold underline. */
.site-footer a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  text-decoration: none;
  transition: background-size 220ms var(--ease-calm), color var(--d-fast);
}
.site-footer a:hover {
  background-size: 100% 1px;
  color: var(--gold);
}

/* Top nav links keep their bottom-border treatment (already animated via border-bottom transition). */

/* ---------- 7. Disclaimer strip — fade-in on scroll into view ---- */
/* Already covered by [data-reveal]; nothing extra here. */

/* ---------- 8. Newsletter button — calm press feedback ----------- */

.newsletter button,
.btn {
  transition:
    background var(--d-med) var(--ease-calm),
    border-color var(--d-med) var(--ease-calm),
    color var(--d-med) var(--ease-calm),
    transform 80ms var(--ease-calm);
}
.newsletter button:active,
.btn:active {
  transform: translateY(1px);
}

/* ---------- 10. Mix cards (60/30/10) — staggered reveal ----------- */

.mix, .track, .start-card {
  box-shadow: 0 0 0 rgba(13, 17, 23, 0);
  transition:
    transform var(--d-med) var(--ease-calm),
    border-color var(--d-med) var(--ease-calm),
    box-shadow var(--d-med) var(--ease-calm),
    background var(--d-med) var(--ease-calm);
}

/* ---------- 11. Pulse on lesson "Coming soon" pill ---------------- */
/* very subtle, gold-tint */
@keyframes pill-pulse {
  0%, 100% { background: var(--gold-tint); }
  50%      { background: var(--gold-bg); }
}
.lesson__pill { animation: pill-pulse 4800ms var(--ease-breath) infinite; }

/* ---------- 12. Hero v2 subtitle — calmer breathing ---------------- */
@keyframes hero-breathe-sub {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.00; }
}
.hero-v2__lede.hero-breathe-sub {
  animation: hero-breathe-sub 5200ms var(--ease-breath) infinite;
}

/* =================================================================
   v3 — TECH LIFE
   Particle field, animated illustrations, flow diagram, accordion,
   stronger reveal motion. All reduced-motion aware below.
   ================================================================= */

/* ---------- Hero particle canvas --------------------------------- */

.hero-v2__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.65;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-v2 .container { position: relative; z-index: 2; }
.hero-v2::before { z-index: 1; } /* dot grid above canvas */

/* ---------- Bible illustration — slow breathing ------------------ */

@keyframes illus-bible-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.012); }
}
.illus-bible__breathe {
  transform-box: fill-box;
  transform-origin: center center;
  animation: illus-bible-breathe 8000ms var(--ease-breath) infinite;
}

/* ---------- Chat cursor blink ------------------------------------ */

@keyframes illus-chat-blink {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
.illus-chat__cursor {
  animation: illus-chat-blink 1100ms steps(1, end) infinite;
}

/* preview-frame chat cursor — homepage featured tool block */
.preview-msg__cursor {
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 4px;
  background: var(--navy);
  vertical-align: text-bottom;
  animation: illus-chat-blink 1100ms steps(1, end) infinite;
}

/* ---------- Neural network — sequential node pulses -------------- */

@keyframes neural-pulse {
  0%, 80%, 100% { filter: drop-shadow(0 0 0 rgba(212,168,67,0)); opacity: 0.85; }
  10%, 30%      { filter: drop-shadow(0 0 4px rgba(212,168,67,0.9)); opacity: 1; }
}
.illus-neural .neural-node {
  animation: neural-pulse 5600ms var(--ease-breath) infinite;
}
.illus-neural .neural-node--1 { animation-delay: 0ms; }
.illus-neural .neural-node--2 { animation-delay: 350ms; }
.illus-neural .neural-node--3 { animation-delay: 700ms; }
.illus-neural .neural-node--4 { animation-delay: 1050ms; }
.illus-neural .neural-node--5 { animation-delay: 1400ms; }
.illus-neural .neural-node--6 { animation-delay: 1750ms; }
.illus-neural .neural-node--7 { animation-delay: 2100ms; }
.illus-neural .neural-node--8 { animation-delay: 2450ms; }

/* ---------- Compass needle — slow oscillation -------------------- */

@keyframes compass-oscillate {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.illus-compass .compass-needle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: compass-oscillate 6000ms var(--ease-breath) infinite;
}

/* ---------- Flow diagram (value-prop) ---------------------------- */

.flow-wrap {
  width: 100%;
  overflow-x: auto;
  padding: var(--s-4) 0;
}
.flow-diagram {
  width: 100%;
  min-width: 760px;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.flow-diagram text { font-family: var(--sans); }

@keyframes flow-pulse-move {
  0%   { transform: translateX(0);    opacity: 0; }
  10%  {                              opacity: 1; }
  90%  {                              opacity: 1; }
  100% { transform: translateX(220px); opacity: 0; }
}
.flow-pulse {
  animation: flow-pulse-move 3600ms var(--ease-calm) infinite;
}
.flow-pulse--1 { animation-delay: 0ms; }
.flow-pulse--2 { animation-delay: 900ms; }
.flow-pulse--3 { animation-delay: 1800ms; }
.flow-pulse--4 { animation-delay: 2700ms; }

/* ---------- Gold accent dot — slow pulse ------------------------- */

@keyframes gold-dot-pulse {
  0%, 100% { transform: scale(0.95); opacity: 0.85; }
  50%      { transform: scale(1.0);  opacity: 1; }
}
.kicker__dot,
.kicker__bar {
  animation: gold-dot-pulse 8000ms var(--ease-breath) infinite;
}

/* ---------- Section heading — slide-up + fade (sub-stagger) ------- */

[data-reveal] .section-title,
[data-reveal] h1.section-title,
[data-reveal] .hero-v2__title,
[data-reveal] .section-lede,
[data-reveal] .hero-v2__lede {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 700ms var(--ease-calm),
    transform 700ms var(--ease-calm);
}

[data-reveal].is-revealed .kicker             { transition-delay: 0ms; }
[data-reveal].is-revealed .section-title,
[data-reveal].is-revealed h1.section-title,
[data-reveal].is-revealed .hero-v2__title     {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 120ms;
}
[data-reveal].is-revealed .section-lede,
[data-reveal].is-revealed .hero-v2__lede      {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 240ms;
}

/* ---------- Page transitions — fade + subtle blur ---------------- */

@keyframes vt-fade-blur-out {
  to { opacity: 0; filter: blur(2px); }
}
@keyframes vt-fade-blur-in {
  from { opacity: 0; filter: blur(2px); }
}

/* ---------- 9. Reduced motion — DISABLES EVERYTHING -------------- */
/* Important for accessibility — elderly readers, vestibular sensitivity. */

@media (prefers-reduced-motion: reduce) {
  /* Kill every animation, transition, and transform-based motion.
     Keep colors, opacity-only changes, and hover states. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable reveal: show content immediately */
  [data-reveal],
  [data-reveal-children] > *,
  [data-reveal] .section-title,
  [data-reveal] h1.section-title,
  [data-reveal] .hero-v2__title,
  [data-reveal] .section-lede,
  [data-reveal] .hero-v2__lede {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable hero breathing */
  .hero__title.hero-breathe {
    animation: none !important;
  }

  /* Disable wheel rotation */
  .year-wheel,
  .year-wheel .center-group,
  .year-wheel .arc-labels {
    transform: none !important;
  }

  /* Disable hover lift */
  .card:hover,
  .tool:hover,
  .channel:hover,
  .mix:hover,
  .track:hover,
  .start-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Disable pill pulse + sub-breath */
  .lesson__pill,
  .hero-v2__lede.hero-breathe-sub {
    animation: none !important;
  }

  /* Restore static underline for links */
  .prose a,
  .channel__note a,
  .site-footer a,
  .disclaimer-strip a,
  .season__output a {
    background: none !important;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  /* Disable view transitions */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  /* v3 — Disable particle canvas (JS already short-circuits, but hide canvas just in case) */
  .hero-v2__canvas { display: none !important; }

  /* v3 — Disable illustration animations */
  .illus-bible__breathe,
  .illus-chat__cursor,
  .illus-neural .neural-node,
  .illus-compass .compass-needle,
  .flow-pulse,
  .kicker__dot,
  .kicker__bar,
  .preview-msg__cursor {
    animation: none !important;
    transform: none !important;
  }
  .preview-msg__cursor { display: none !important; }

  /* v3 — Disable SVG SMIL motion on circuit pulses */
  .circuit-pulse animateMotion { animation: none !important; }
  .circuit-pulse { display: none !important; }
}