/* ── LuvMe Scene Backgrounds ───────────────────────────────────────────
   Scene cosmetics fill the viewport behind the profile card.
   Each class is self-contained — apply to a <div class="scene scene-X">
   positioned fixed; inset: 0; z-index: 0; pointer-events: none;
   Catalog mapping lives in luvme-shared/luvme_shared/scene_catalog.py —
   every class here must have a matching catalog entry (test enforced).
   ─────────────────────────────────────────────────────────────────── */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.5s ease;
}

/* ═══ COMMON · FREE ═════════════════════════════════════════════════ */

/* scene-void — default for all users. Minimal radial tint. */
.scene-void {
  background: radial-gradient(ellipse at 50% 50%, #1a0820 0%, #080608 65%);
}

/* scene-mist — soft gray ambience. */
.scene-mist {
  background: radial-gradient(ellipse at 50% 40%, #1c1720 0%, #0a0a0e 70%);
}
.scene-mist::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(240, 232, 224, 0.04), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(240, 232, 224, 0.03), transparent 50%);
  animation: mist-drift 24s ease-in-out infinite alternate;
}
@keyframes mist-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(4%, -3%); }
}

/* ═══ RARE · BASIC ══════════════════════════════════════════════════ */

/* scene-rose-garden — rose-tinted ambience, the signature LuvMe warmth. */
.scene-rose-garden::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(180,60,80,0.18), rgba(220,120,140,0.12), rgba(140,40,60,0.15));
}
.scene-rose-garden::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(220,80,100,0.14), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(200,60,90,0.1), transparent 50%);
  animation: rose-breathe 16s ease-in-out infinite;
}
@keyframes rose-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* scene-dusk — warm sunset blend. */
.scene-dusk {
  background: linear-gradient(180deg, #2a1230 0%, #4a1e2a 45%, #6b2a1f 80%, #0f0608 100%);
}
.scene-dusk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 85%, rgba(245, 120, 60, 0.2), transparent 60%);
  animation: dusk-pulse 12s ease-in-out infinite;
}
@keyframes dusk-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}

/* scene-twilight — deep blue with static stars. */
.scene-twilight {
  background: linear-gradient(180deg, #050617 0%, #0f1640 60%, #1a0630 100%);
}
.scene-twilight::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 30% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 30%, rgba(200,220,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 20% 75%, rgba(200,220,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 90%, rgba(255,255,255,0.5), transparent);
}

/* ═══ EPIC · PREMIUM ════════════════════════════════════════════════ */

/* scene-nebula — drifting purple/magenta clouds. */
.scene-nebula {
  background: #1a0820;
}
.scene-nebula::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(120,40,160,0.35), transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(200,60,120,0.3), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(60,30,140,0.25), transparent 60%);
  animation: nebula-drift 22s ease-in-out infinite;
}
@keyframes nebula-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(5%, -4%) scale(1.1); }
  66%      { transform: translate(-4%, 3%) scale(0.95); }
}

/* scene-aurora — shifting borealis curtains. */
.scene-aurora {
  background: #050f1a;
}
.scene-aurora::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(45deg,
    rgba(40,180,120,0.18),
    rgba(80,120,200,0.14),
    rgba(160,60,180,0.18),
    rgba(40,180,120,0.18));
  background-size: 300% 300%;
  animation: aurora-shift 14s ease-in-out infinite;
}
.scene-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(40,220,140,0.1), transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(140,60,220,0.1), transparent 50%);
}
@keyframes aurora-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* scene-ocean-depths — caustic underwater light. */
.scene-ocean-depths {
  background: linear-gradient(180deg, #041428 0%, #020a18 60%, #010408 100%);
}
.scene-ocean-depths::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(80,180,220,0.15), transparent 50%),
    radial-gradient(ellipse at 70% 40%, rgba(60,140,200,0.12), transparent 50%),
    radial-gradient(ellipse at 50% 70%, rgba(40,100,180,0.1), transparent 60%);
  animation: ocean-caustic 18s ease-in-out infinite alternate;
}
@keyframes ocean-caustic {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(3%, 2%) scale(1.08); }
}

/* scene-cherry-blossom — falling pink petals. */
.scene-cherry-blossom {
  background: linear-gradient(180deg, #2a1020 0%, #1a0612 100%);
}
.scene-cherry-blossom::before,
.scene-cherry-blossom::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 200%;
  background:
    radial-gradient(3px 3px at 10% 10%,  rgba(255,180,200,0.7), transparent 60%),
    radial-gradient(2px 2px at 25% 20%,  rgba(255,160,180,0.6), transparent 60%),
    radial-gradient(3px 3px at 40% 5%,   rgba(255,200,210,0.7), transparent 60%),
    radial-gradient(2px 2px at 55% 25%,  rgba(255,170,190,0.6), transparent 60%),
    radial-gradient(3px 3px at 70% 15%,  rgba(255,190,200,0.7), transparent 60%),
    radial-gradient(2px 2px at 85% 30%,  rgba(255,160,180,0.5), transparent 60%),
    radial-gradient(2px 2px at 15% 40%,  rgba(255,180,200,0.6), transparent 60%),
    radial-gradient(3px 3px at 60% 50%,  rgba(255,200,210,0.7), transparent 60%),
    radial-gradient(2px 2px at 30% 60%,  rgba(255,170,190,0.5), transparent 60%),
    radial-gradient(2px 2px at 80% 70%,  rgba(255,180,200,0.6), transparent 60%);
  top: -100%;
  animation: petals-fall 16s linear infinite;
}
.scene-cherry-blossom::after {
  animation-delay: -8s;
  animation-duration: 20s;
  opacity: 0.7;
}
@keyframes petals-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

/* scene-ember — warm flickering orange glow. */
.scene-ember {
  background: radial-gradient(ellipse at 50% 100%, #4a1808 0%, #1a0602 60%, #080402 100%);
}
.scene-ember::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 40, 0.25), transparent 50%);
  animation: ember-flicker 3s ease-in-out infinite;
}
@keyframes ember-flicker {
  0%, 100% { opacity: 0.8; }
  25%      { opacity: 1;   }
  50%      { opacity: 0.7; }
  75%      { opacity: 0.95;}
}

/* ═══ LEGENDARY · ACHIEVEMENT ══════════════════════════════════════ */

/* scene-celestial — signature starfield. */
.scene-celestial {
  background: radial-gradient(ellipse at 50% 50%, #0a0826 0%, #080410 70%, #000000 100%);
}
.scene-celestial::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 35% 65%,   rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 55% 15%,   rgba(255,220,150,0.6), transparent),
    radial-gradient(1px 1px at 75% 45%,   rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 25% 85%, rgba(200,220,255,0.6), transparent),
    radial-gradient(1px 1px at 85% 75%,   rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 45% 55%,   rgba(255,200,100,0.4), transparent),
    radial-gradient(1px 1px at 65% 35%,   rgba(200,200,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 8% 48%,    rgba(255,255,255,0.5), transparent);
  animation: starfield 40s linear infinite;
}
.scene-celestial::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(40,40,80,0.25), rgba(10,10,30,0.65));
}
@keyframes starfield {
  from { transform: translate(0, 0); }
  to   { transform: translate(-50%, -50%); }
}

/* scene-sovereign — golden aura, awarded at peak achievement. */
.scene-sovereign {
  background: radial-gradient(ellipse at 50% 70%, #1a0f05 0%, #0a0604 70%, #000 100%);
}
.scene-sovereign::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212,168,98,0.22), transparent 60%),
    radial-gradient(ellipse at 50% 0%,   rgba(184,134,11,0.12), transparent 55%);
  animation: sovereign-breathe 10s ease-in-out infinite;
}
.scene-sovereign::after {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(1.5px 1.5px at 22% 30%, rgba(255,215,0,0.65), transparent),
    radial-gradient(1.5px 1.5px at 68% 70%, rgba(255,215,0,0.55), transparent),
    radial-gradient(1px 1px at 40% 90%,   rgba(255,215,0,0.45), transparent),
    radial-gradient(1px 1px at 85% 20%,   rgba(255,215,0,0.55), transparent),
    radial-gradient(2px 2px at 15% 60%,   rgba(255,215,0,0.65), transparent),
    radial-gradient(1.5px 1.5px at 55% 12%, rgba(255,215,0,0.55), transparent);
  animation: starfield-slow 60s linear infinite;
}
@keyframes starfield-slow {
  from { transform: translate(0, 0); }
  to   { transform: translate(-30%, -30%); }
}
@keyframes sovereign-breathe {
  0%, 100% { opacity: 0.8;  }
  50%      { opacity: 1;    }
}

/* scene-heartbeat — concentric pink waves. Awarded on relationship milestones. */
.scene-heartbeat {
  background: radial-gradient(ellipse at 50% 50%, #280818 0%, #0a0408 75%, #000 100%);
}
.scene-heartbeat::before,
.scene-heartbeat::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 40vmax; height: 40vmax;
  border-radius: 50%;
  border: 2px solid rgba(194,105,122,0.4);
  transform: translate(-50%, -50%) scale(0);
  animation: heartbeat-ripple 4s ease-out infinite;
}
.scene-heartbeat::after {
  animation-delay: -2s;
}
@keyframes heartbeat-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.8; }
  80%  { opacity: 0.1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0;   }
}

/* ═══ EVENT · SEASONAL ═════════════════════════════════════════════ */

/* scene-winter-wonderland — falling snow. */
.scene-winter-wonderland {
  background: linear-gradient(180deg, #0a1a2a 0%, #050a18 60%, #020408 100%);
}
.scene-winter-wonderland::before,
.scene-winter-wonderland::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 200%;
  top: -100%;
  background:
    radial-gradient(2px 2px at 5% 10%,  rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 20% 5%,  rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(2px 2px at 35% 15%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 50% 8%,  rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 65% 20%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 80% 12%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(2px 2px at 95% 5%,  rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 10% 40%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 40% 50%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(2px 2px at 25% 70%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,0.5), transparent 60%);
  animation: snow-fall 18s linear infinite;
}
.scene-winter-wonderland::after {
  animation-delay: -9s;
  animation-duration: 24s;
  opacity: 0.6;
}
@keyframes snow-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

/* scene-valentine — floating hearts drifting up. */
.scene-valentine {
  background: radial-gradient(ellipse at 50% 50%, #2a0618 0%, #140308 70%, #000 100%);
}
.scene-valentine::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(8px 7px at 10% 20%, rgba(255,80,120,0.35), transparent 50%),
    radial-gradient(6px 5px at 25% 45%, rgba(255,100,140,0.3),  transparent 50%),
    radial-gradient(10px 9px at 40% 70%, rgba(255,80,120,0.35), transparent 50%),
    radial-gradient(6px 5px at 55% 30%, rgba(255,120,160,0.3),  transparent 50%),
    radial-gradient(8px 7px at 70% 55%, rgba(255,80,120,0.35),  transparent 50%),
    radial-gradient(6px 5px at 85% 80%, rgba(255,100,140,0.3),  transparent 50%),
    radial-gradient(10px 9px at 15% 90%, rgba(255,80,120,0.35), transparent 50%),
    radial-gradient(6px 5px at 90% 40%, rgba(255,120,160,0.3),  transparent 50%);
  background-size: 100% 200%;
  animation: valentine-drift 20s linear infinite;
}
@keyframes valentine-drift {
  from { background-position: 0 100%; }
  to   { background-position: 0 -100%; }
}

/* ── Reduced motion: freeze all scene animations ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scene *,
  .scene::before,
  .scene::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}