/* ============================================================
   FX — light, depth and motion for the black & yellow theme.

   Loaded after every other stylesheet. Built only from the tokens in
   styles.css :root. Pieces:

     1. Motion switches (reduced motion, paused, hidden tab, media playing)
     2. Atmosphere      .fx-atmo  (components/fx/atmosphere.ts)
     3. Brand emblem    .fx-emblem
     4. Lit panel       .fx-panel  (+ the sign-in card)
     5. Luminous button .fx-cta    (+ the app's primary buttons)
     6. Fields
     7. Cards
     8. Navigation
     9. Progress
    10. Screen-specific light (home hero, quiz, message, video, chat)

   Intensity follows the screen: sign-in, home hero and the important
   message are the most expressive; products, quiz, navigation medium;
   journal, chat, long text and video surroundings stay calm.
   ============================================================ */

/* ---------- 1. Motion switches ---------- */
:root {
  --fx-run: running;
}
html.fx-off,
html.fx-hidden,
html.fx-media { --fx-run: paused; }
html.fx-off .fx-atmo *,
html.fx-off .fx-emblem *,
html.fx-hidden .fx-atmo *,
html.fx-media .fx-atmo *,
html.fx-media .fx-emblem * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-atmo *,
  .fx-emblem *,
  .fx-panel-edge,
  .fx-cta::after { animation: none !important; transition: none !important; }
  .fx-toggle { display: none; }
}

/* ---------- 2. Atmosphere ---------- */
.fx-atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.fx-atmo > * { position: absolute; pointer-events: none; }

/* A — black foundation with a little charcoal movement in it */
.fx-atmo-base {
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(40, 38, 28, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(30, 30, 24, 0.5), transparent 70%),
    var(--canvas);
}

/* B — the broad light behind the upper half of the content */
.fx-atmo-light {
  left: 50%;
  top: calc(var(--fx-ly, 160px) - 460px);
  width: min(1300px, 170vw);
  height: 920px;
  margin-left: calc(min(1300px, 170vw) / -2);
  background:
    radial-gradient(closest-side, rgba(255, 236, 90, 0.42), rgba(255, 214, 0, 0.2) 30%, rgba(255, 186, 0, 0.07) 60%, transparent 100%);
  animation: fxDrift 20s ease-in-out infinite alternate;
  will-change: transform;
}

/* C — a smaller, weaker warm light low in a corner, for asymmetry */
.fx-atmo-light2 {
  right: -14%;
  bottom: -18%;
  width: min(720px, 110vw);
  height: min(720px, 110vw);
  background: radial-gradient(closest-side, rgba(255, 176, 0, 0.13), rgba(255, 176, 0, 0.04) 55%, transparent 100%);
  animation: fxDrift2 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes fxDrift {
  0% { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.92; }
  50% { transform: translate3d(2%, 2%, 0) scale(1.05); opacity: 1; }
  100% { transform: translate3d(4%, -1%, 0) scale(0.98); opacity: 0.9; }
}
@keyframes fxDrift2 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-8%, -6%, 0); }
}

/* D — concentric rings around the focal point; arcs of light travel round them */
.fx-rings {
  left: 50%;
  top: 0;
  width: min(1200px, 180vw);
  height: min(1200px, 180vw);
  margin-left: calc(min(1200px, 180vw) / -2);
  transform: translateY(calc(var(--fx-cy, 300px) - 50%));
  overflow: visible;
}
.fx-ring-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: fxSpin 42s linear infinite;
}
.fx-ring-spin-b { animation-duration: 64s; animation-direction: reverse; }
.fx-ring-spin-c { animation-duration: 90s; }
.fx-arc { filter: drop-shadow(0 0 4px rgba(255, 214, 0, 0.6)); }
.fx-arc-dim { opacity: 0.55; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* E — suspended points of light, in the outer band only */
.fx-particles { inset: 0; }
.fx-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #FFF1A0;
  box-shadow: 0 0 6px 1px rgba(255, 214, 0, 0.7), 0 0 14px 3px rgba(255, 196, 0, 0.25);
  opacity: 0;
  animation: fxFloat var(--d) ease-in-out var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes fxFloat {
  0% { transform: translate3d(0, 10px, 0); opacity: 0; }
  20% { opacity: 0.85; }
  50% { transform: translate3d(8px, -18px, 0); opacity: 0.55; }
  80% { opacity: 0.8; }
  100% { transform: translate3d(-4px, -40px, 0); opacity: 0; }
}

/* F — vignette: the edges fall back to black */
.fx-vignette {
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* variants: where the focal point sits and how loud it is */
.fx-atmo--login { --fx-cy: 230px; --fx-ly: 150px; }
.fx-atmo--setup { --fx-cy: 40px; }
.fx-atmo--setup { --fx-ly: -40px; }
.fx-atmo--setup .fx-atmo-light { opacity: 0.75; }
.fx-atmo--setup .fx-rings { opacity: 0.55; }
.fx-atmo--setup .fx-particles i:nth-child(n + 7) { display: none; }
.fx-atmo--message { --fx-cy: 260px; }
.fx-atmo--message { --fx-ly: 200px; }
.fx-atmo--message .fx-atmo-light { left: 34%; }
.fx-atmo--video { --fx-cy: 120px; }
.fx-atmo--video { --fx-ly: -60px; }
.fx-atmo--video .fx-atmo-light { opacity: 0.8; }
.fx-atmo--video .fx-rings { opacity: 0.4; }
.fx-atmo--video .fx-particles { display: none; }

/* the home hero: the light lives in the hero, not fixed to the screen */
.fx-atmo--hero { position: absolute; contain: paint; --fx-cy: 46%; }
.fx-atmo--hero .fx-atmo-base { display: none; }
.fx-atmo--hero .fx-rings { top: 0; transform: translateY(-14%); width: min(1100px, 190vw); height: min(1100px, 190vw); margin-left: calc(min(1100px, 190vw) / -2); }
.fx-atmo--hero { --fx-ly: 38%; }
.fx-atmo--hero .fx-atmo-light { top: calc(38% - 460px); }
.fx-atmo--hero .fx-vignette { background: linear-gradient(to bottom, transparent 70%, var(--page) 100%); }

@media (max-width: 640px) {
  .fx-particles i:nth-child(n + 8) { display: none; }
  .fx-ring-spin-c { display: none; }
}

/* content above the light */
.fx-stage { position: relative; z-index: 1; }

/* pause switch — quiet, bottom-left, for people who want stillness */
.fx-toggle {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(16, 16, 13, 0.7);
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.fx-toggle:hover { color: var(--text-primary); border-color: var(--line-strong); }
.fx-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fx-toggle svg { width: 12px; height: 12px; }
.fx-toggle .fx-toggle-play,
html.fx-off .fx-toggle .fx-toggle-pause { display: none; }
html.fx-off .fx-toggle .fx-toggle-play { display: block; }
.fx-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Brand emblem ---------- */
.fx-emblem {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size, 64px);
  height: var(--size, 64px);
}
.fx-emblem-mark {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.45));
}
.fx-emblem-halo {
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 232, 59, 0.42), rgba(255, 196, 0, 0.14) 45%, transparent 75%);
  animation: fxBreathe 8.5s ease-in-out infinite;
  will-change: transform, opacity;
}
.fx-emblem-orbit {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 1px solid rgba(255, 232, 59, 0.12);
  -webkit-mask: conic-gradient(from 0deg, transparent 0 62%, #000 78%, transparent 92%);
          mask: conic-gradient(from 0deg, transparent 0 62%, #000 78%, transparent 92%);
  box-shadow: 0 0 12px rgba(255, 214, 0, 0.35), inset 0 0 12px rgba(255, 214, 0, 0.2);
  border-color: rgba(255, 232, 59, 0.75);
  animation: fxSpin 14s linear infinite;
}
@keyframes fxBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* ---------- 4. Lit panel ---------- */
.fx-panel,
.auth-card {
  position: relative;
  isolation: isolate;
  background: var(--panel-grad) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-panel) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fx-panel,
  .auth-card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
/* a lit section of the edge, travelling slowly along the top */
.fx-panel-edge {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--fx-edge, 200deg) at 50% 50%, transparent 0deg, rgba(255, 232, 59, 0.9) 24deg, rgba(255, 196, 0, 0.35) 52deg, transparent 90deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: fxEdge 18s ease-in-out infinite alternate;
}
@property --fx-edge { syntax: '<angle>'; inherits: false; initial-value: 200deg; }
@keyframes fxEdge { from { --fx-edge: 190deg; } to { --fx-edge: 330deg; } }
/* soft inner top highlight */
.fx-panel::before,
.auth-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 232, 59, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---------- 5. Luminous button ---------- */
.fx-cta,
.auth-submit,
.ob-cta,
.ch-send {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-cta) !important;
  color: var(--on-accent) !important;
  border: 0 !important;
  box-shadow: var(--glow-cta) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), filter var(--t-fast) ease !important;
}
/* the reflective sweep — once on hover, never on a loop */
.fx-cta::after,
.auth-submit::after,
.ob-cta::after,
.ch-send::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 34%;
  z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.fx-cta > *,
.auth-submit > *,
.ob-cta > *,
.ch-send > * { position: relative; z-index: 1; }
.fx-cta svg,
.auth-submit svg,
.ob-cta svg,
.ch-send svg { transition: transform var(--t-med) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .fx-cta:hover:not([disabled]),
  .auth-submit:hover:not([disabled]),
  .ob-cta:hover:not([disabled]),
  .ch-send:hover:not([disabled]) {
    transform: translateY(-1.5px);
    box-shadow: var(--glow-cta-hover) !important;
  }
  .fx-cta:hover:not([disabled])::after,
  .auth-submit:hover:not([disabled])::after,
  .ob-cta:hover:not([disabled])::after,
  .ch-send:hover:not([disabled])::after {
    transform: translateX(520%) skewX(-18deg);
    transition: transform 0.85s var(--ease-out);
  }
  .fx-cta:hover:not([disabled]) svg,
  .auth-submit:hover:not([disabled]) svg,
  .ob-cta:hover:not([disabled]) svg { transform: translateX(3px); }
}
.fx-cta:active:not([disabled]),
.auth-submit:active:not([disabled]),
.ob-cta:active:not([disabled]),
.ch-send:active:not([disabled]) {
  transform: translateY(0) !important;
  background: var(--grad-cta-pressed) !important;
  box-shadow: var(--glow-cta-pressed) !important;
}
.fx-cta:focus-visible,
.auth-submit:focus-visible,
.ob-cta:focus-visible,
.ch-send:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}
/* loading keeps its light; unavailable turns to charcoal */
.ob-cta[aria-busy='true'],
.auth-submit[aria-busy='true'] { filter: saturate(0.85) brightness(0.95); cursor: progress; }
.ob-cta[disabled]:not([aria-busy='true']),
.ch-send[disabled] {
  background: var(--surface-selected) !important;
  color: var(--disabled) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
  text-shadow: none;
}
/* one entrance sweep on the sign-in button */
.auth-submit::after { animation: fxSweepOnce 1.1s var(--ease-out) 0.9s 1 both; }
@keyframes fxSweepOnce {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(520%) skewX(-18deg); }
}

/* the app's other primary buttons (they all paint with --gold-gradient) */
/* generated list → see the block at the end of this file */

/* ---------- 6. Fields ---------- */
.auth-field input,
.qz-input,
.qz-textarea,
.ch-field textarea,
.acc-field input:not([disabled]),
.shell-body textarea,
.shell-body input[type='text'],
.shell-body input[type='email'],
.shell-body input[type='search'] {
  background: var(--inset-grad) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-med) var(--ease-out) !important;
}
.auth-field input:hover,
.qz-input:hover,
.qz-textarea:hover,
.ch-field textarea:hover,
.shell-body textarea:hover { border-color: #4D4D40 !important; }
.auth-field input:focus,
.qz-input:focus,
.qz-textarea:focus,
.ch-field textarea:focus,
.acc-field input:focus,
.shell-body textarea:focus,
.shell-body input[type='text']:focus,
.shell-body input[type='email']:focus,
.shell-body input[type='search']:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), var(--glow-focus) !important;
}
.qz-input[aria-invalid='true'],
.qz-textarea[aria-invalid='true'],
.auth-field input[aria-invalid='true'] {
  border-color: var(--danger) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 107, 94, 0.16) !important;
}

/* quieter actions still answer the hand */
.auth-help-btn,
.vs-close,
.ch-retry,
.pv-jump a {
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) ease;
}
@media (hover: hover) {
  .auth-help-btn:hover,
  .pv-jump a:hover { box-shadow: 0 0 0 1px rgba(255, 214, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.4); }
  .auth-fab:hover { box-shadow: 0 0 0 1px rgba(255, 214, 0, 0.3), 0 0 22px rgba(255, 200, 0, 0.22); }
}
.auth-fab svg,
.auth-help-btn svg { color: var(--accent); filter: drop-shadow(0 0 4px rgba(255, 214, 0, 0.45)); }

/* ---------- 7. Cards ---------- */
.pv-card,
.bn-card,
.home-lib-card,
.session-card,
.home-journey,
.progress-card,
.acc-card {
  background: var(--surface-grad) !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 34px rgba(0, 0, 0, 0.45);
}
/* a corner catching the light */
.pv-card,
.bn-card,
.home-journey {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pv-card::after,
.bn-card::after,
.home-journey::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60px;
  left: var(--mx, -40px);
  width: 220px;
  height: 160px;
  background: radial-gradient(closest-side, rgba(255, 214, 0, 0.14), transparent 75%);
  pointer-events: none;
  transition: opacity var(--t-med) ease, left 0.08s linear;
}
.home-journey::after { left: auto; right: -60px; width: 320px; height: 220px; top: -80px; background: radial-gradient(closest-side, rgba(255, 214, 0, 0.18), transparent 75%); }
@media (hover: hover) and (pointer: fine) {
  a.pv-card,
  a.bn-card,
  .session-card { transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) ease, box-shadow var(--t-med) var(--ease-out) !important; }
  a.pv-card:hover,
  a.bn-card:hover,
  .session-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 214, 0, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 214, 0, 0.2), 0 18px 44px rgba(0, 0, 0, 0.55), 0 10px 40px rgba(255, 196, 0, 0.10) !important;
  }
  a.pv-card:hover::after,
  a.bn-card:hover::after { opacity: 1.6; background: radial-gradient(closest-side, rgba(255, 214, 0, 0.22), transparent 75%); }
  a.bn-card:hover .bn-card-art svg { transform: scale(1.04); }
}
.bn-card-art svg { transition: transform 0.5s var(--ease-out); }
.pv-icon {
  background: radial-gradient(circle at 50% 30%, rgba(255, 214, 0, 0.18), rgba(255, 214, 0, 0.04) 70%) !important;
  border-color: rgba(255, 214, 0, 0.28) !important;
  color: var(--y-luminous) !important;
  box-shadow: 0 0 18px rgba(255, 200, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- 8. Navigation ---------- */
.shell-bottom {
  background: linear-gradient(180deg, rgba(30, 30, 24, 0.94), rgba(14, 14, 11, 0.97)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.6) !important;
}
.shell-bot { position: relative; }
.shell-bot.is-active {
  color: var(--text-primary) !important;
  background: linear-gradient(180deg, rgba(255, 214, 0, 0.16), rgba(255, 214, 0, 0.05)) !important;
}
.shell-bot.is-active svg { color: var(--y-luminous); filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.55)); }
.shell-bot.is-active::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 18px;
  height: 3px;
  margin-left: -9px;
  border-radius: 3px;
  background: var(--grad-fill);
  box-shadow: 0 0 10px rgba(255, 214, 0, 0.9);
}
.shell-topbar {
  background: linear-gradient(180deg, rgba(9, 9, 9, 0.96), rgba(9, 9, 9, 0.86)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.shell-side {
  background: linear-gradient(180deg, #0F0F0C, #0A0A08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.shell-link.is-active {
  color: var(--text-primary) !important;
  background: linear-gradient(90deg, rgba(255, 214, 0, 0.16), rgba(255, 214, 0, 0.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 0, 0.14);
}
.shell-link.is-active svg { color: var(--y-luminous); filter: drop-shadow(0 0 5px rgba(255, 214, 0, 0.5)); }
.shell-link.is-active::before {
  background: var(--grad-fill) !important;
  box-shadow: 0 0 10px rgba(255, 214, 0, 0.85);
}
.shell-brand-mark svg { filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.45)); }

/* ---------- 9. Progress ---------- */
.home-journey-track,
.progress-bar,
.player-progress,
.qz-progress {
  background: #0B0B09 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.04);
}
.home-journey-fill,
.progress-fill,
.player-progress-fill,
.qz-progress span {
  position: relative;
  background: var(--grad-fill) !important;
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.45);
}
.home-journey-fill::after,
.progress-fill::after,
.qz-progress span::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #FFFBE0;
  box-shadow: 0 0 10px 2px rgba(255, 232, 59, 0.85);
}
.home-journey-fill[style*='width:0%']::after,
.progress-fill[style*='width: 0%']::after,
.progress-fill[style*='width:0%']::after { display: none; }

/* ---------- 10. Screen-specific light ---------- */

/* home hero: the light and the rings behind the opening words */
.home-hero { isolation: isolate; }
.home-hero > .fx-atmo { z-index: -1; }
.home-hero-glow { display: none; }
.home-title .gradient-text {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(255, 200, 0, 0.25));
}
.home-word {
  background: linear-gradient(170deg, rgba(34, 34, 27, 0.85), rgba(16, 16, 13, 0.9)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.home-word-label { text-shadow: 0 0 12px rgba(255, 214, 0, 0.5); }

/* quiz: selected answers are lit */
.qz-opt input:checked + .qz-opt-box {
  background: linear-gradient(165deg, rgba(255, 214, 0, 0.14), rgba(255, 214, 0, 0.04)) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--glow-selected) !important;
}
.qz-opt input:checked + .qz-opt-box .qz-opt-dot {
  background: radial-gradient(circle at 40% 35%, #FFF6A0, #FFD600 60%, #FFC400) !important;
  box-shadow: 0 0 10px rgba(255, 214, 0, 0.7);
}
.qz-step { position: relative; z-index: 1; }

/* important message: richer badge, lit checkmarks */
.ms-badge {
  background: linear-gradient(110deg, rgba(255, 232, 59, 0.22), rgba(255, 196, 0, 0.10)) !important;
  border: 1px solid rgba(255, 214, 0, 0.6) !important;
  color: var(--y-luminous) !important;
  box-shadow: 0 0 22px rgba(255, 200, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 10px rgba(255, 214, 0, 0.45);
}
.ms-check-dot {
  background: radial-gradient(circle at 38% 30%, rgba(255, 246, 160, 0.35), rgba(255, 214, 0, 0.14) 60%, rgba(255, 196, 0, 0.06)) !important;
  border: 1px solid rgba(255, 214, 0, 0.55) !important;
  color: var(--y-luminous) !important;
  box-shadow: 0 0 14px rgba(255, 200, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.ms-main .ob-headline { text-shadow: 0 0 40px rgba(255, 200, 0, 0.12); }

/* video: light behind the frame, never over the picture */
.vs-stage-wrap { position: relative; isolation: isolate; }
.vs-stage-wrap::before {
  content: '';
  position: absolute;
  inset: -18% 0; /* never wider than the column: on phones it widened the page */
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 214, 0, 0.16), rgba(255, 176, 0, 0.05) 55%, transparent 80%);
  pointer-events: none;
}
.vs-stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 26px 60px rgba(0, 0, 0, 0.7) !important; }
.vs-close { background: linear-gradient(180deg, #23231C, #141410) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 16px rgba(0, 0, 0, 0.5); }

/* chat: calm — depth only, no moving light */
.ch-msg.is-them .ch-bubble { background: linear-gradient(170deg, #22221B, #1A1A15) !important; }
.ch-msg.is-me .ch-bubble {
  background: linear-gradient(170deg, rgba(255, 214, 0, 0.14), rgba(255, 214, 0, 0.06)) !important;
  border-color: rgba(255, 214, 0, 0.32) !important;
}

/* sign-in: emblem on top, card enters once */
.auth-mark { position: relative; z-index: 1; display: flex; justify-content: center; }
.auth-card { animation: fxRise 0.55s var(--ease-out) both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-title { letter-spacing: -0.01em; }
.auth-eyebrow { text-shadow: 0 0 12px rgba(255, 214, 0, 0.45); }

/* the pause switch inside the home hero (the tab bar owns the screen's bottom edge) */
.fx-toggle--inline { position: absolute; left: auto; right: var(--gutter); bottom: 18px; z-index: 2; }

/* ---------- 5b. The app's other primary buttons ----------
   Every rule below already paints with --gold-gradient (now the luminous
   gradient); this adds the same light, lift and press as the main CTA. */
.btn-primary, .btn-enter-session, .btn-mark-complete, .player-btn--play,
.home-journey-cta, .product-cta, .acc-btn, .acc-product-link.is-buy,
.bn-go, .cm-send, .cm-sent-go, .jrm-save, .rf-btn,
.ritual-btn-primary, .rp-cta, .gd-start-btn, .gd-btn-main, .gd-start-core,
.rfl-new, .rfl-btn.is-primary, .sv-video-done, .sv-start-btn, .pre-go {
  color: var(--on-accent) !important;
  box-shadow: var(--glow-cta) !important;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), filter var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled), .btn-enter-session:hover:not(:disabled), .btn-mark-complete:hover:not(:disabled),
  .home-journey-cta:hover, .product-cta:hover, .acc-btn:hover, .acc-product-link.is-buy:hover,
  .bn-go:hover, .cm-send:hover:not(:disabled), .cm-sent-go:hover, .jrm-save:hover:not(:disabled), .rf-btn:hover,
  .ritual-btn-primary:hover, .rp-cta:hover, .gd-start-btn:hover, .gd-btn-main:hover,
  .rfl-new:hover, .rfl-btn.is-primary:hover, .sv-video-done:hover, .sv-start-btn:hover, .pre-go:hover {
    transform: translateY(-1.5px);
    box-shadow: var(--glow-cta-hover) !important;
    filter: none;
  }
}
.btn-primary:active, .btn-enter-session:active, .btn-mark-complete:active, .home-journey-cta:active, .product-cta:active,
.acc-btn:active, .bn-go:active, .cm-send:active, .jrm-save:active, .rf-btn:active, .ritual-btn-primary:active, .rp-cta:active,
.gd-start-btn:active, .gd-btn-main:active, .rfl-new:active, .rfl-btn.is-primary:active, .sv-start-btn:active, .pre-go:active {
  transform: translateY(0);
  background: var(--grad-cta-pressed) !important;
  box-shadow: var(--glow-cta-pressed) !important;
}
.jrm-save:disabled, .cm-send:disabled, .btn-mark-complete:disabled {
  background: var(--surface-selected) !important;
  color: var(--disabled) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
}

/* progress fills: horizontal light with a glowing edge */
.acc-progress-track span, .bn-vis-bar span, .bk-progress span, .product-progress-track span,
.prod-bar-track span, .progress-bar-fill, .player-accumulated-fill, .vid-seek-fill {
  background: var(--grad-fill) !important;
  box-shadow: 0 0 10px rgba(255, 200, 0, 0.45);
}

/* selected states: lit, lighter than a button */
.jt-tab.is-on, .hero-box.is-next, .cm-page.is-current, .lang-opt.is-on {
  color: var(--on-accent) !important;
  box-shadow: 0 0 0 1px rgba(255, 214, 0, 0.7), 0 6px 22px rgba(255, 196, 0, 0.22) !important;
}

/* the old dark veil over the home hero would hide the new light */
.home-hero::before { display: none !important; }
/* David Song's hero is drawn by app.js: its veil becomes the light instead */
.song-body .hero::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% -4%, rgba(255, 226, 60, 0.22), rgba(255, 214, 0, 0.06) 45%, transparent 66%),
    radial-gradient(ellipse 50% 40% at 88% 100%, rgba(255, 176, 0, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(14, 14, 11, 0.5) 0%, rgba(12, 12, 10, 0) 100%) !important;
}
.song-body .hero-headline .gradient-text { filter: drop-shadow(0 0 22px rgba(255, 200, 0, 0.28)); }

/* the quiz keeps its corners for Back/Continue: no pause switch there (the
   choice made at sign-in still applies) */
.fx-atmo--setup + .fx-toggle { display: none; }
/* the presentation page stays still behind the video */
.fx-atmo--video * { animation: none !important; }

/* nothing moves under reduced motion, so there is nothing to pause */
@media (prefers-reduced-motion: reduce) {
  .fx-toggle { display: none !important; }
}