/* =============================================
   MIDNIGHT — Shared Neon Stage Effects
   Add <link rel="stylesheet" href="neon-effects.css"> to every page
   ============================================= */

/* === NEON FLOOR LINE === */
.neon-stage {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 26%;
    height: 6px;
    z-index: 5;
    pointer-events: none;
}

.neon-stage .neon-line {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 60, 180, 0.6) 10%,
        #ff4fc8 30%,
        #ff80e0 50%,
        #ff4fc8 70%,
        rgba(255, 60, 180, 0.6) 90%,
        transparent 100%);
    border-radius: 50%;
    box-shadow:
        0 0 6px 2px rgba(255, 80, 200, 0.9),
        0 0 18px 6px rgba(255, 60, 180, 0.7),
        0 0 40px 12px rgba(220, 40, 160, 0.45),
        0 0 80px 24px rgba(180, 20, 130, 0.25);
    animation: neonFlicker 4s ease-in-out infinite;
}

.neon-stage .neon-reflection {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 3px;
    height: 60px;
    background: linear-gradient(180deg,
        rgba(255, 80, 200, 0.35) 0%,
        rgba(200, 40, 160, 0.18) 30%,
        transparent 100%);
    filter: blur(8px);
    border-radius: 0 0 60% 60%;
    animation: neonFlicker 4s ease-in-out infinite;
}

.neon-stage .floor-reflect {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 3px;
    height: 120px;
    background: linear-gradient(180deg,
        rgba(255, 60, 180, 0.22) 0%,
        rgba(180, 20, 130, 0.1) 40%,
        transparent 100%);
    filter: blur(16px);
    transform: scaleY(-1);
    opacity: 0.7;
    animation: neonFlicker 4s ease-in-out infinite 0.3s;
}

@keyframes neonFlicker {
    0%, 100%  { opacity: 1; }
    3%        { opacity: 0.85; }
    6%        { opacity: 1; }
    48%       { opacity: 1; }
    50%       { opacity: 0.7; }
    52%       { opacity: 1; }
    75%       { opacity: 0.92; }
    77%       { opacity: 1; }
}

/* === SPOTLIGHT === */
.scene-spotlight {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 60%;
    height: 75%;
    background: conic-gradient(
        from 180deg at 50% 0%,
        transparent 35%,
        rgba(255, 100, 210, 0.06) 42%,
        rgba(255, 120, 220, 0.1) 50%,
        rgba(255, 100, 210, 0.06) 58%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 5;
    animation: spotlightPulse 6s ease-in-out infinite;
}

@keyframes spotlightPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* === RISING FLOOR SMOKE === */
.scene-floor-smoke {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.scene-floor-smoke span {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(28px);
    opacity: 0;
}

.scene-floor-smoke span:nth-child(1) {
    left: 20%;
    width: 28vw;
    height: 50%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 60, 180, 0.28) 0%, rgba(180, 30, 140, 0.14) 40%, transparent 100%);
    animation: floorRise 9s ease-out infinite 0s;
}
.scene-floor-smoke span:nth-child(2) {
    left: 38%;
    width: 24vw;
    height: 60%;
    background: radial-gradient(ellipse at 50% 100%, rgba(200, 50, 160, 0.22) 0%, rgba(150, 20, 120, 0.1) 40%, transparent 100%);
    animation: floorRise 12s ease-out infinite 2s;
}
.scene-floor-smoke span:nth-child(3) {
    left: 55%;
    width: 26vw;
    height: 45%;
    background: radial-gradient(ellipse at 50% 100%, rgba(240, 70, 190, 0.2) 0%, rgba(170, 30, 130, 0.1) 40%, transparent 100%);
    animation: floorRise 10s ease-out infinite 5s;
}
.scene-floor-smoke span:nth-child(4) {
    left: 10%;
    width: 20vw;
    height: 40%;
    background: radial-gradient(ellipse at 50% 100%, rgba(160, 40, 140, 0.18) 0%, transparent 100%);
    animation: floorRise 14s ease-out infinite 1s;
}
.scene-floor-smoke span:nth-child(5) {
    right: 8%;
    width: 22vw;
    height: 42%;
    background: radial-gradient(ellipse at 50% 100%, rgba(220, 55, 170, 0.2) 0%, transparent 100%);
    animation: floorRise 11s ease-out infinite 7s;
}

@keyframes floorRise {
    0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
    8%   { opacity: 0.9; }
    60%  { opacity: 0.6; transform: translate3d(10px, -55%, 0) scale(1.3); }
    100% { transform: translate3d(-8px, -110%, 0) scale(1.8); opacity: 0; }
}

/* === NEON PAGE TITLE === */
.neon-title {
    color: #fff;
    background: linear-gradient(to right, #fff 0%, #ffaaee 40%, #ff4fc8 60%, #cc44ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter:
        drop-shadow(0 0 8px rgba(255, 80, 200, 0.95))
        drop-shadow(0 0 20px rgba(255, 60, 180, 0.75))
        drop-shadow(0 0 50px rgba(220, 40, 160, 0.5)) !important;
    animation: titleNeonPulse 3s ease-in-out infinite !important;
}

@keyframes titleNeonPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 8px rgba(255, 80, 200, 0.95))
            drop-shadow(0 0 20px rgba(255, 60, 180, 0.75))
            drop-shadow(0 0 50px rgba(220, 40, 160, 0.5));
    }
    15% {
        filter:
            drop-shadow(0 0 4px rgba(255, 80, 200, 0.6))
            drop-shadow(0 0 10px rgba(255, 60, 180, 0.4))
            drop-shadow(0 0 24px rgba(220, 40, 160, 0.3));
    }
    18% {
        filter:
            drop-shadow(0 0 12px rgba(255, 80, 200, 1))
            drop-shadow(0 0 30px rgba(255, 60, 180, 0.9))
            drop-shadow(0 0 70px rgba(220, 40, 160, 0.65));
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(255, 80, 200, 0.88))
            drop-shadow(0 0 24px rgba(255, 60, 180, 0.68))
            drop-shadow(0 0 60px rgba(220, 40, 160, 0.45));
    }
}