/* =================================================================
   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);
}

/* ---------- 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] > * {
    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 {
    transform: none !important;
    box-shadow: 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;
  }
}