/* ═══════════════════════════════════════════════════════════
   SCENE SYSTEM — overlay transitions
   ═══════════════════════════════════════════════════════════ */

@keyframes sceneZoomIn {
    /* Layer is immediately opaque — no opacity fade so wall never bleeds through */
    from { transform: scale(0.96); }
    to   { transform: scale(1);    }
}
@keyframes sceneZoomOut {
    from { opacity: 1; transform: scale(1);    }
    to   { opacity: 0; transform: scale(0.96); }
}
@keyframes sceneRing {
    0%,100% { box-shadow: 0 0 0 0   rgba(139,92,246,0.5), 0 0 30px rgba(139,92,246,0.3); }
    50%      { box-shadow: 0 0 0 18px rgba(139,92,246,0),  0 0 60px rgba(139,92,246,0.55); }
}
@keyframes sceneFloat {
    0%,100% { transform: translateY(0);    }
    50%     { transform: translateY(-14px);}
}
@keyframes scenePulse {
    0%,100% { opacity: 1;   }
    50%     { opacity: 0.55;}
}
@keyframes sceneFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Layer container ──────────────────────────────────────── */
.scene-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg, #080c14);
    overflow: hidden;
}
.scene-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% -10%, rgba(139,92,246,.14), transparent),
        radial-gradient(ellipse 55% 55% at 85% 90%, rgba(139,92,246,.08), transparent);
    pointer-events: none;
}
.scene-layer.scene-active {
    display: flex;
    /* No animation on the layer itself — keeps it permanently full-screen opaque
       so the wall is never visible through scale-in edges.
       Content zoom is handled on .scene-inner below. */
}

/* Inner content zooms in; children keep their individual sceneFadeUp delays */
.scene-layer.scene-active .scene-inner {
    animation: sceneZoomIn .5s cubic-bezier(.22,1,.36,1) both;
}
.scene-layer.scene-leaving {
    display: flex;
    animation: sceneZoomOut .4s ease-in forwards;
}

/* ── Shared inner wrapper ─────────────────────────────────── */
.scene-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 56px 48px;
    max-width: 920px;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   RAID SCENE
   ═══════════════════════════════════════════════════════════ */
.scene-raid-badge {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8b5cf6;
    background: rgba(139,92,246,.12);
    border: 1px solid rgba(139,92,246,.35);
    border-radius: 99px;
    padding: 7px 22px;
    animation: scenePulse 2s ease-in-out infinite;
}

.scene-raid-avatar-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    animation: sceneFloat 4s ease-in-out infinite;
    flex-shrink: 0;
}
.scene-raid-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(139,92,246,.55);
    box-shadow: 0 0 70px rgba(139,92,246,.45);
    display: block;
}
.scene-raid-avatar-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(139,92,246,.13);
    border: 4px solid rgba(139,92,246,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 84px;
}
.scene-raid-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(139,92,246,.4);
    animation: sceneRing 2.2s ease-in-out infinite;
    pointer-events: none;
}

.scene-raid-name {
    font-size: clamp(34px, 5.5vw, 68px);
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: -.025em;
    line-height: 1.05;
    animation: sceneFadeUp .6s .15s ease-out both;
}
.scene-raid-subs {
    font-size: 22px;
    font-weight: 600;
    color: #94a3b8;
    animation: sceneFadeUp .6s .3s ease-out both;
}
.scene-raid-pts {
    font-size: 18px;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.28);
    border-radius: 99px;
    padding: 6px 20px;
    animation: sceneFadeUp .6s .45s ease-out both;
}

/* ═══════════════════════════════════════════════════════════
   COUNTDOWN SCENE
   ═══════════════════════════════════════════════════════════ */
.scene-countdown-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #94a3b8;
    animation: sceneFadeUp .5s ease-out both;
}
.scene-countdown-timer {
    font-size: clamp(88px, 17vw, 168px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
    letter-spacing: -.04em;
    line-height: 1;
    text-shadow: 0 0 90px rgba(139,92,246,.45);
    animation: sceneFadeUp .5s .08s ease-out both;
}
.scene-countdown-track {
    width: 100%;
    max-width: 520px;
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
    animation: sceneFadeUp .5s .18s ease-out both;
}
.scene-countdown-bar {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    border-radius: 99px;
    transition: width 1s linear;
}
.scene-countdown-leader {
    font-size: 19px;
    font-weight: 700;
    color: #f59e0b;
    animation: sceneFadeUp .5s .28s ease-out both;
}

/* ═══════════════════════════════════════════════════════════
   COMMANDS SCENE
   ═══════════════════════════════════════════════════════════ */
.scene-commands-title {
    font-size: 30px;
    font-weight: 800;
    color: #e2e8f0;
    animation: sceneFadeUp .5s ease-out both;
}
.scene-commands-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 700px;
}
.scene-cmd-row {
    display: flex;
    align-items: center;
    gap: 22px;
    background: rgba(255,255,255,.038);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    padding: 18px 26px;
    animation: sceneFadeUp .5s ease-out both;
}
.scene-cmd-row:nth-child(1){animation-delay:.08s}
.scene-cmd-row:nth-child(2){animation-delay:.16s}
.scene-cmd-row:nth-child(3){animation-delay:.24s}
.scene-cmd-row:nth-child(4){animation-delay:.32s}
.scene-cmd-row:nth-child(5){animation-delay:.40s}
.scene-cmd-name {
    font-size: 22px;
    font-weight: 800;
    color: #8b5cf6;
    font-family: monospace;
    flex-shrink: 0;
    min-width: 140px;
    text-align: left;
}
.scene-cmd-desc {
    font-size: 16px;
    font-weight: 500;
    color: #94a3b8;
    text-align: left;
    flex: 1;
    line-height: 1.4;
}