/* ================================================================
   Elysium Circle — Scroll FX Layer
   Refined, reversible scroll-driven animations.
   Loaded AFTER styles.css so selectors win where needed.
   Easing: cubic-bezier(0.22, 1, 0.36, 1) — calm, premium decel.
   ================================================================ */

:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-dur:  900ms;
  --fx-rise: 30px;
  --fx-stagger: 110ms;
}

/* -------- Reveal: override styles.css root-only reveal ----------
   styles.css hides the .reveal wrapper, then fades it as a block.
   We invert that: the wrapper is always visible (so backgrounds &
   structural elements never blink), but each direct child fades
   and rises in a staggered cascade. The cascade REVERSES naturally
   when the section leaves the viewport.
   ---------------------------------------------------------------- */
.reveal-init {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal-init > * {
  opacity: 0;
  transform: translateY(var(--fx-rise));
  transition:
    opacity var(--fx-dur) var(--fx-ease),
    transform var(--fx-dur) var(--fx-ease),
    filter var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--stagger-i, 0) * var(--fx-stagger));
  will-change: opacity, transform;
}
.reveal-init.is-visible > * {
  opacity: 1;
  transform: none;
}

/* The accordion is itself a child of .reveal — when it animates
   in, we don't want its internals to feel wobbly, so we let the
   accordion item rows stagger their own slight rise. */
.reveal-init.is-visible .acc-item {
  animation: fx-row-in 1100ms var(--fx-ease) both;
  animation-delay: calc(var(--row-i, 0) * 80ms + 200ms);
}
@keyframes fx-row-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* -------- Card highlighting --------------------------------------
   Cards in scroll-driven groups have three states:
     default     -> subtly dimmed, neutral border
     .is-near    -> in viewport but not centered
     .is-active  -> closest to viewport center, gold edge glow + lift
   When you scroll back upward, the highlight moves back accordingly.
   ---------------------------------------------------------------- */
.fx-card-group .fx-card {
  opacity: 0.62;
  transform: translateY(0);
  transition:
    opacity 700ms var(--fx-ease),
    transform 800ms var(--fx-ease),
    border-color 700ms var(--fx-ease),
    box-shadow 800ms var(--fx-ease),
    background-color 700ms var(--fx-ease);
  will-change: transform, opacity, box-shadow;
}
.fx-card-group .fx-card.is-near {
  opacity: 0.86;
}
.fx-card-group .fx-card.is-active {
  opacity: 1;
  transform: translateY(-6px);
  border-color: rgba(201, 168, 106, 0.55);
  box-shadow:
    0 30px 90px -40px rgba(201, 168, 106, 0.45),
    0 0 0 1px rgba(201, 168, 106, 0.22),
    inset 0 0 100px -50px rgba(201, 168, 106, 0.18);
}

/* Codex cards have no border by default (they share a 1px grid gap).
   Use a subtle inner ring for the gold glow instead of a hard border. */
.codex-grid.fx-card-group .fx-card.is-active {
  background-color: var(--bg-2);
  box-shadow:
    inset 0 0 0 1px rgba(201, 168, 106, 0.45),
    0 24px 70px -40px rgba(201, 168, 106, 0.4),
    inset 0 0 120px -60px rgba(201, 168, 106, 0.22);
}

/* Pillars: a touch stronger because they're larger surfaces */
.pillars.fx-card-group .fx-card.is-active {
  box-shadow:
    0 40px 110px -50px rgba(201, 168, 106, 0.5),
    0 0 0 1px rgba(201, 168, 106, 0.32),
    inset 0 0 140px -70px rgba(201, 168, 106, 0.22);
}

/* Path / process steps — same family, step number brightens */
.path-grid.fx-card-group .fx-card .step-num {
  transition: color 700ms var(--fx-ease), opacity 700ms var(--fx-ease), transform 800ms var(--fx-ease);
}
.path-grid.fx-card-group .fx-card.is-active .step-num {
  color: var(--gold-bright);
  opacity: 1;
  transform: translateY(-2px);
}

/* Threshold principle cards — refine the gold corner accents on active */
.threshold-principles.fx-card-group .fx-card .corner {
  transition: opacity 700ms var(--fx-ease), border-color 700ms var(--fx-ease);
}
.threshold-principles.fx-card-group .fx-card.is-active .corner {
  opacity: 1;
  border-color: var(--gold);
}

/* Ranks: list items dim, active one is illuminated */
.ranks-list.fx-card-group .fx-rank {
  transition:
    opacity 600ms var(--fx-ease),
    color 600ms var(--fx-ease),
    transform 700ms var(--fx-ease);
  opacity: 0.5;
}
.ranks-list.fx-card-group .fx-rank.is-near { opacity: 0.78; }
.ranks-list.fx-card-group .fx-rank.is-active {
  opacity: 1;
  transform: translateX(6px);
}
.ranks-list.fx-card-group .fx-rank.is-active .name {
  color: var(--gold-bright);
}

/* -------- Growing gold accent line ----------------------------- */
.rule-short {
  transform-origin: left center;
  transform: scaleX(0.08);
  opacity: 0.35;
  transition:
    transform 1100ms var(--fx-ease),
    opacity 1100ms var(--fx-ease);
}
.reveal-init.is-visible .rule-short {
  transform: scaleX(1);
  opacity: 1;
}

/* Contrast rows — gold rule beneath each label expands on enter */
.contrast-row {
  position: relative;
}
.contrast-row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 60%, transparent 100%);
  transition: width 1200ms var(--fx-ease);
  transition-delay: calc(var(--row-i, 0) * 90ms + 200ms);
}
.reveal-init.is-visible .contrast-row.is-on::after {
  width: 100%;
}

/* -------- CTA section glow ------------------------------------- */
.closing-section .btn.solid,
.fx-cta-glow .btn.solid {
  transition:
    background 320ms ease,
    color 320ms ease,
    box-shadow 900ms var(--fx-ease),
    transform 600ms var(--fx-ease);
}
.fx-cta-glow.is-centered .btn.solid {
  box-shadow:
    0 0 0 1px rgba(201, 168, 106, 0.5),
    0 18px 60px -18px rgba(228, 203, 148, 0.55),
    0 0 60px -10px rgba(201, 168, 106, 0.35),
    inset 0 0 40px -22px rgba(255, 240, 200, 0.4);
}

/* The closing sigil drifts upward gently as the CTA centers */
.fx-cta-glow .closing-sigil {
  transition: transform 1400ms var(--fx-ease), opacity 1400ms var(--fx-ease);
}
.fx-cta-glow.is-centered .closing-sigil {
  transform: translateY(-12px) scale(1.02);
}

/* -------- Parallax helpers (CSS-side smoothing) ---------------- */
[data-fx-parallax] {
  will-change: transform;
  transition: transform 120ms linear; /* tiny smoothing — JS already rAFs */
}

/* -------- Mobile: gentler movement ----------------------------- */
@media (max-width: 720px) {
  :root {
    --fx-rise: 18px;
    --fx-stagger: 80ms;
    --fx-dur: 800ms;
  }
}

/* -------- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-init > *,
  .fx-card-group .fx-card,
  .ranks-list.fx-card-group .fx-rank,
  .rule-short,
  .contrast-row::after,
  .fx-cta-glow .closing-sigil,
  [data-fx-parallax] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .contrast-row::after { width: 100%; }
  .rule-short { transform: scaleX(1); }
  .reveal-init > * { opacity: 1; }
}