/* ════════════════════════════════════════════════════════════════
   MobiusQuest — Ambient decorative layer
   Purely visual. No functional CSS is overridden.
   All effects scoped to the dark theme; hidden under .theme-brutal.
   Tunable via CSS custom properties (driven by the Tweaks panel).
   ════════════════════════════════════════════════════════════════ */

:root {
  --mq-i:      1;     /* master intensity 0 → 1.5 */
  --mq-glow:   1;     /* card / button glow strength */
  --mq-hue-a:  265;   /* primary ambient hue (violet) */
  --mq-hue-b:  190;   /* secondary ambient hue (cyan) */
  --mq-motion: running;
  --mq-star-a: 260px 220px;
  --mq-star-b: 360px 280px;
  --mq-star-c: 420px 320px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --mq-motion: paused; }
}

/* keep app content above the ambient layer */
#app {
  position: relative;
  z-index: 10;
}

/* ── Ambient stage ───────────────────────────────── */
.mq-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
}
body.theme-brutal .mq-ambient { display: none; }

/* ── Aurora orbs : big, soft, drifting volumes ───── */
.mq-orb {
  position: absolute;
  border-radius: 50%;
  opacity: calc(.42 * var(--mq-i));
  will-change: transform;
  animation-play-state: var(--mq-motion);
}
.mq-orb-1 {
  width: 46vw;
  height: 46vw;
  left: -8vw;
  top: -12vh;
  background: radial-gradient(circle at 50% 50%,
    hsla(var(--mq-hue-a), 92%, 60%, .34) 0%,
    hsla(var(--mq-hue-a), 92%, 60%, .18) 34%,
    transparent 72%);
  animation: mqDrift1 26s ease-in-out infinite;
}
.mq-orb-2 {
  width: 40vw;
  height: 40vw;
  right: -10vw;
  top: -6vh;
  background: radial-gradient(circle at 50% 50%,
    hsla(var(--mq-hue-b), 90%, 58%, .30) 0%,
    hsla(var(--mq-hue-b), 90%, 58%, .14) 36%,
    transparent 72%);
  animation: mqDrift2 32s ease-in-out infinite;
}
.mq-orb-3 {
  width: 52vw;
  height: 52vw;
  left: 28vw;
  bottom: -26vh;
  background: radial-gradient(circle at 50% 50%,
    hsla(calc(var(--mq-hue-a) + 22), 88%, 62%, .28) 0%,
    hsla(calc(var(--mq-hue-a) + 22), 88%, 62%, .13) 36%,
    transparent 72%);
  opacity: calc(.4 * var(--mq-i));
  animation: mqDrift3 38s ease-in-out infinite;
}

@keyframes mqDrift1 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(8vw, 6vh, 0) scale(1.12); }
}
@keyframes mqDrift2 {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); }
  50%     { transform: translate3d(-7vw, 9vh, 0) scale(.92); }
}
@keyframes mqDrift3 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-9vw, -7vh, 0) scale(1.15); }
}

/* ── 3D perspective depth grid (floor) ──────────── */
.mq-grid3d {
  position: absolute;
  left: 50%;
  bottom: -4vh;
  width: 260%;
  height: 62vh;
  transform: translateX(-50%);
  perspective: 340px;
  perspective-origin: 50% -12%;
  opacity: calc(.55 * var(--mq-i));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 14%, transparent 80%);
          mask-image: linear-gradient(to top, #000 0%, #000 14%, transparent 80%);
}
.mq-grid3d::before {
  content: '';
  position: absolute;
  inset: -120% -40% 0 -40%;
  transform: rotateX(75deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(0deg, hsla(var(--mq-hue-b), 90%, 66%, .5) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--mq-hue-a), 92%, 70%, .5) 1px, transparent 1px);
  background-size: 66px 66px;
  animation: mqGridMove 7s linear infinite;
  animation-play-state: var(--mq-motion);
}
@keyframes mqGridMove {
  from { background-position: 0 0; }
  to   { background-position: 0 66px; }
}

/* ── Particle / star-dust canvas ─────────────────── */
.mq-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(.9 * var(--mq-i));
}

/* ── Vignette : focuses the eye, adds premium depth ── */
.mq-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 90% at 50% 18%, transparent 52%, rgba(4,3,10,.55) 100%);
}

/* Chrome can mis-composite fixed 3D/canvas layers at high page zoom.
   Keep the ambience, but remove the two tile-prone surfaces while zoomed. */
html.mq-zoom-guard .mq-particles {
  display: none;
}
html.mq-zoom-guard .mq-grid3d {
  perspective: none;
  transform: translateX(-50%);
}
html.mq-zoom-guard .mq-grid3d::before {
  inset: auto -10% 0 -10%;
  height: 58vh;
  transform: none;
  background-size: 52px 52px;
  opacity: .5;
}

/* ════════════════════════════════════════════════════════════════
   Soft glow behind cards & buttons  (box-shadow / filter only —
   never overlays content, never shifts layout)
   ════════════════════════════════════════════════════════════════ */

body.theme-dark .set-card,
body.theme-dark .mode-card,
body.theme-dark .mc-front,
body.theme-dark .study-card,
body.theme-dark .stats-widget {
  box-shadow:
    var(--shadow-card),
    0 0 28px -14px hsla(var(--mq-hue-a), 80%, 55%, calc(.5 * var(--mq-glow)));
}
body.theme-dark .set-card:hover,
body.theme-dark .mode-card:hover,
body.theme-dark .mc-card:hover .mc-front {
  box-shadow:
    var(--shadow-pop),
    0 0 0 1px hsla(var(--mq-hue-a), 85%, 72%, calc(.30 * var(--mq-glow))),
    0 26px 64px -18px hsla(var(--mq-hue-a), 88%, 56%, calc(.70 * var(--mq-glow)));
}

/* Breathing glow on the primary action buttons.
   NOTE: never apply `filter` to .mode-card-play — those buttons live inside the
   .mc-card 3D flip context, and a filter flattens that context, breaking
   backface-visibility (the mirrored back-face button bleeds through). */
body.theme-dark .hero-cta,
body.theme-dark .btn-new-set {
  animation: mqBtnBreath 4.2s ease-in-out infinite;
  animation-play-state: var(--mq-motion);
}
@keyframes mqBtnBreath {
  0%,100% { filter: drop-shadow(0 4px 14px hsla(var(--mq-hue-a), 85%, 55%, calc(.35 * var(--mq-glow)))); }
  50%     { filter: drop-shadow(0 7px 24px hsla(var(--mq-hue-a), 90%, 62%, calc(.62 * var(--mq-glow)))); }
}

/* Living aura behind the hero */
body.theme-dark .home-hero::before {
  animation: mqHeroAura 13s ease-in-out infinite alternate;
  animation-play-state: var(--mq-motion);
}
@keyframes mqHeroAura {
  from { transform: translate3d(-4%, -1%, 0) scale(1);    }
  to   { transform: translate3d( 4%,  2%, 0) scale(1.08); }
}

/* Gentle life in the nav logo mark */
/* filter: drop-shadow is GPU-composited (unlike box-shadow) — no repaint per frame */
body.theme-dark .nav-logo-icon {
  will-change: filter;
  animation: mqLogoPulse 5.5s ease-in-out infinite;
  animation-play-state: var(--mq-motion);
}
@keyframes mqLogoPulse {
  0%,100% { filter: drop-shadow(0 4px 10px hsla(var(--mq-hue-a),85%,55%,.65)); }
  50%     { filter: drop-shadow(0 5px 18px hsla(var(--mq-hue-a),90%,62%,.95)); }
}