/* ═══════════════════════════════════════════════════════════
   SCENE 11 — Celebration
═══════════════════════════════════════════════════════════ */

#scene-11 {
  background: linear-gradient(to bottom, #010215 0%, #04062a 45%, #020318 100%);
  z-index: 50;
  overflow: hidden;
}

body.scene11-active #stage #scene-11 {
  animation: s11FadeIn 1.2s both;
  pointer-events: auto;
}
@keyframes s11FadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Fireworks canvas ───────────────────────────────────── */
#s11-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* ── Celebration text ───────────────────────────────────── */
#s11-text-wrap {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  animation: s11TextReveal 0.9s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes s11TextReveal {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}

#s11-main-text {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 68px;
  letter-spacing: 5px;
  color: #FFD700;
  margin: 0;
  text-shadow:
    0 0 18px rgba(255, 215, 0, 0.95),
    0 0 40px rgba(255, 140, 60, 0.7),
    0 0 70px rgba(255, 80, 120, 0.4),
    4px 4px 0 rgba(0, 0, 0, 0.55);
  animation: s11MainPulse 2.2s ease-in-out 2.6s infinite;
}
@keyframes s11MainPulse {
  0%, 100% {
    text-shadow:
      0 0 18px rgba(255,215,0,0.95),
      0 0 40px rgba(255,140,60,0.7),
      0 0 70px rgba(255,80,120,0.4),
      4px 4px 0 rgba(0,0,0,0.55);
  }
  50% {
    text-shadow:
      0 0 28px rgba(255,215,0,1),
      0 0 60px rgba(255,100,160,0.9),
      0 0 100px rgba(200,80,255,0.5),
      4px 4px 0 rgba(0,0,0,0.55);
  }
}

#s11-sub-text {
  font-family: 'Georgia', serif;
  font-size: 24px;
  color: #f8d8f0;
  margin: 10px 0 0;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(248, 140, 200, 0.8);
  animation: s11SubFloat 2s ease-in-out 2.8s infinite;
}
@keyframes s11SubFloat {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-6px); }
}

/* ── Floating DOM hearts ────────────────────────────────── */
#s11-hearts {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}

.s11-heart {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation-name: s11HeartFloat;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  filter: drop-shadow(0 0 6px currentColor);
  will-change: transform, opacity;
}

@keyframes s11HeartFloat {
  0%   { opacity: 0;   transform: translateY(0)     scale(0.4) rotate(-8deg);  }
  12%  { opacity: 1;   transform: translateY(-18px)  scale(1.1) rotate(5deg);   }
  80%  { opacity: 0.8; transform: translateY(-130px) scale(0.95) rotate(-4deg); }
  100% { opacity: 0;   transform: translateY(-180px) scale(0.7) rotate(10deg);  }
}

/* ── Portrait adjustments ───────────────────────────────── */
@media (orientation: portrait) {
  #s11-main-text { font-size: 52px; letter-spacing: 3px; }
  #s11-sub-text  { font-size: 19px; }
}