/* ================= sky: stars, aurora, oracle orb, mist ================= */
.sky { position: absolute; inset: -6% -14%; pointer-events: none; transform: translateX(calc(var(--i, 0) * -.45cqw)); transition: transform 1.4s cubic-bezier(.6,0,.2,1); }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); animation: twinkle var(--d) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes twinkle { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * .2); } }
.aurora-wrap { position: absolute; inset: 0; pointer-events: none; transition: transform 1.5s cubic-bezier(.6,0,.2,1); }
.aurora-wrap { transform: translate(calc(var(--i, 0) * -1.1cqw), calc(var(--i, 0) * -.15cqh)); }
.aurora { position: absolute; left: -20cqw; width: 140cqw; border-radius: 50%; filter: blur(4.5cqw); mix-blend-mode: screen; opacity: .34; will-change: transform; }
.aurora.r1 { top: 9cqh; height: 17cqh; background: linear-gradient(90deg, transparent 10%, rgba(90,160,150,.55) 36%, rgba(120,98,200,.6) 62%, transparent 88%); animation: wave1 34s ease-in-out infinite alternate; }
.aurora.r2 { top: 25cqh; height: 14cqh; background: linear-gradient(90deg, transparent 14%, rgba(110,90,190,.55) 40%, rgba(80,140,150,.35) 64%, transparent 90%); animation: wave2 46s ease-in-out infinite alternate; }
@keyframes wave1 { from { transform: rotate(-8deg) translateX(-3cqw) scaleY(1); } to { transform: rotate(-5deg) translateX(4cqw) scaleY(1.3); } }
@keyframes wave2 { from { transform: rotate(5deg) translateX(2cqw) scaleY(1.1); } to { transform: rotate(2deg) translateX(-4cqw) scaleY(.85); } }

/* ---- the oracle orb (eclipse -> moon) ---- */
.orb { --osz: 19.5cqw; --ox: 50cqw; --oy: 29cqh; --os: 1;
  position: absolute; left: 0; top: 0; width: var(--osz); height: var(--osz); z-index: 2; pointer-events: none;
  transform: translate(calc(var(--ox) - 50%), calc(var(--oy) - 50%)) scale(var(--os));
  transition: transform 1.1s cubic-bezier(.7,0,.2,1); will-change: transform; }
.deck[data-state="inner"] .orb { --ox: 92cqw; --oy: 10.5cqh; --os: .4; }
.orb > * { position: absolute; }
.orb-intro { position: absolute; inset: 0; }
.deck.intro .orb-intro { animation: ignite 2s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes ignite { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.orb .eglow { inset: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(233,205,150,.22), rgba(90,160,150,.1) 38%, rgba(120,98,200,.08) 58%, transparent 74%); animation: breathe 7s ease-in-out infinite alternate; transition: opacity 1.2s ease; }
.deck[data-state="inner"] .orb .eglow { opacity: .3; }
@keyframes breathe { from { opacity: .65; } to { opacity: 1; } }
.orb .corona { inset: 0; transition: opacity 1s ease; }
.deck[data-state="inner"] .orb .corona { opacity: 0; }
.flare { position: absolute; inset: -40%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,232,178,.6) 12%, transparent 18% 40%, rgba(90,170,160,.45) 47%, transparent 55% 72%, rgba(130,105,210,.5) 80%, transparent 88%); -webkit-mask: radial-gradient(circle closest-side, transparent 0 26%, #000 29%, #000 36%, transparent 60%); mask: radial-gradient(circle closest-side, transparent 0 26%, #000 29%, #000 36%, transparent 60%); filter: blur(1cqw); opacity: .8; animation: spin 32s linear infinite; }
.flare.f2 { animation-duration: 51s; animation-direction: reverse; opacity: .45; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb .moonglow { inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,232,205,.26), rgba(190,190,230,.08) 42%, transparent 68%); opacity: 0; transition: opacity 1s ease .15s; }
.deck[data-state="inner"] .orb .moonglow { opacity: 1; }
.orb .disc { fill: #04050a; transition: fill 1.2s ease; }
.deck[data-state="inner"] .orb .disc { fill: #0b0d18; }
.orb .earth { opacity: 0; transition: opacity 1s ease; }
.deck[data-state="inner"] .orb .earth { opacity: .12; }
.orb .rim { transition: opacity 1s ease; }
.deck[data-state="inner"] .orb .rim { opacity: .08; }

.deck[data-state="finale"] .orb { --ox: 50cqw; --oy: 28cqh; --os: .92; }
.deck[data-state="finale"] .orb .corona { opacity: 0; }
.deck[data-state="finale"] .orb .moonglow { opacity: 1; }
.deck[data-state="finale"] .orb .disc { fill: #0b0d18; }
.deck[data-state="finale"] .orb .earth { opacity: .12; }
.deck[data-state="finale"] .orb .rim { opacity: .08; }

/* ---- mist (WebGL) + CSS fallback ---- */
.mist { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: .95; }
.mist-fallback { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none;
  background: radial-gradient(120% 45% at 30% 100%, rgba(80,150,150,.32), transparent 70%), radial-gradient(110% 40% at 80% 100%, rgba(110,95,190,.28), transparent 70%); }
.deck.no-webgl .mist { display: none; }
.deck.no-webgl .mist-fallback { display: block; animation: breathe 9s ease-in-out infinite alternate; }
.vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(125% 100% at 50% 42%, transparent 50%, rgba(0,0,0,.7) 100%); }
.grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

@container deck (orientation: portrait) {
  .orb { --osz: 46cqw; --oy: 24cqh; }
  .deck[data-state="inner"] .orb { --ox: 86cqw; --oy: 6.2cqh; --os: .3; }
  .deck[data-state="finale"] .orb { --ox: 50cqw; --oy: 22cqh; --os: .8; }
  .aurora { left: -60cqw; width: 220cqw; filter: blur(8cqw); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora, .star, .flare, .orb .eglow, .deck.no-webgl .mist-fallback { animation: none !important; }
  .orb, .sky, .aurora-wrap { transition-duration: .01ms !important; }
}