body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(to bottom right, #f8f8f8, #b0b0b0);
    color: #fff;
    overflow: hidden;
}

    /* Brick wall overlay */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        background: url('https://backend.proto.ranimusicmx.com/images/graffiti/brick-wall.jpg') no-repeat center center fixed;
        background-size: cover;
        opacity: 0; /* start invisible */
        transition: opacity 5s ease-in-out;
        z-index: -1; /* keep it behind content */
    }

    /* When class is added, fade in */
    body.brick-bg::after {
        opacity: 1;
        background: url('https://backend.proto.ranimusicmx.com/images/graffiti/brick-wall.jpg') no-repeat center center fixed;
    }

    /* Graffiti background override (use correct path from css/ to images/) */
    body.graffiti-bg {
        background: url('../images/graffiti/graffiti-wall.jpg') no-repeat center center fixed;
        background-size: cover;
    }

/* Background hue cycling */
@keyframes bgCycle {
    0% {
        background: linear-gradient(to bottom right, #f8f8f8, #b0b0b0);
    }

    25% {
        background: linear-gradient(to bottom right, #e0f8ff, #80c0ff);
    }

    50% {
        background: linear-gradient(to bottom right, #ffe0f8, #ff80c0);
    }

    75% {
        background: linear-gradient(to bottom right, #f8ffe0, #c0ff80);
    }

    100% {
        background: linear-gradient(to bottom right, #f8f8f8, #b0b0b0);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Left laser sweeps horizontally */
@keyframes sweepLaserLeft {
    0% {
        transform: rotate(10deg) translateX(-30vw);
        opacity: 0.3;
    }

    50% {
        transform: rotate(10deg) translateX(30vw);
        opacity: 0.8;
    }

    100% {
        transform: rotate(10deg) translateX(-30vw);
        opacity: 0.3;
    }
}

/* Right laser sweeps horizontally in opposite direction */
@keyframes sweepLaserRight {
    0% {
        transform: rotate(-10deg) translateX(30vw);
        opacity: 0.3;
    }

    50% {
        transform: rotate(-10deg) translateX(-30vw);
        opacity: 0.8;
    }

    100% {
        transform: rotate(-10deg) translateX(30vw);
        opacity: 0.3;
    }
}

/* Layer order enforced */
.overlay {
    z-index: 0 !important;
}

.spotlight, #oscilloscope {
    z-index: 1 !important;
}

.laser {
    z-index: 2 !important;
}

#crowd {
    z-index: 3 !important;
}

.lens-flare {
    z-index: 3 !important;
}

.container, .top-buttons {
    z-index: 4 !important;
}

/* Audience animations */
@keyframes crowdPulse {
    0%, 100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

@keyframes crowdBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes crowdSway {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}

/* Layer order notes:
   overlay (0), spotlights (1), oscilloscope (1), lasers (2), crowd (3), lens flares (3), panels/buttons (4) */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
    pointer-events: none;
}

#graffiti-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: black; /* or transparent */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Oscilloscope canvas */
#oscilloscope {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(0, 255, 204, 0.35));
}

/* Crowd notes (SVG) */
#crowd {
    overflow: visible;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3; /* raised above overlay/spotlights/oscilloscope/lasers */
    pointer-events: none;
}

    /* Give notes a glow so they pop on dark backgrounds */
    #crowd .note {
        filter: drop-shadow(0 0 6px #00ffcc);
        transform-box: fill-box;
        transform-origin: center;
        will-change: transform;
    }

    /* In case legacy silhouettes exist */
    #crowd .person * {
        fill: #111;
    }

/* Floating notes (legacy wrapper) */
.note-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.note {
    position: absolute;
    z-index: 5;
    font-size: 2em;
    color: #ffffffcc;
    text-shadow: 0 0 6px #ffffff88;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    bottom: -80px; /* was -60px */
}

    .note img {
        max-height: 2em;
        vertical-align: middle;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

/* Center panels */
.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    max-width: 600px;
    width: 90vw;
    padding: 2em;
    text-align: center;
    box-sizing: border-box;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 4; /* above crowd and flares */
    transform-origin: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
    /* Active state */
    .container.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
        margin-bottom: 5vh;
        padding-top: 5em; /* creates space below NAV buttons */
    }

@media screen and (max-width: 800px) {
    .container.active {
        max-width: 500px;
        transform: translate(-50%, -50%) scale(0.9);
        padding-top: 6em;
    }
}

@media screen and (max-width: 600px) {
    .container.active {
        max-width: 400px;
        transform: translate(-50%, -50%) scale(0.8);
        padding-top: 7em;
    }
}

@media screen and (max-width: 400px) {
    .container.active {
        max-width: 320px;
        transform: translate(-50%, -50%) scale(0.7);
        padding-top: 8em;
    }
}

/* Images inside panels */
.container img {
    max-width: 100%;
    max-height: 40vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
    margin-bottom: 1em;
}
/* Links inside panels */
.container a[href*="soundcloud"],
.container a[href*="spotify"],
.container a[href*="mixcloud"],
.container a[href*="twitter"],
.container a[href*="x.com"],
.container a[href*="youtube"],
.container a[href*="facebook"],
.container a[href*="instagram"] {
    color: #00ffcc; /* neon aqua */
    font-weight: bold;
    text-shadow: 0 0 6px #00ffcc88;
}

/* Frog float animation */
.frog-float {
    animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Top buttons */
.top-buttons {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6em;
    z-index: 5 !important; /* above crowd */
    background: rgba(0, 0, 0, 0.4);
    padding: 0.6em 1.2em;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    max-width: 100vw;
    overflow-x: auto;
    white-space: nowrap;
    /* Scrollbar styling for visibility and touch support */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: #00ffcc transparent;
}

    .top-buttons::-webkit-scrollbar {
        height: 6px;
    }

    .top-buttons::-webkit-scrollbar-thumb {
        background-color: #00ffcc;
        border-radius: 3px;
    }

    .top-buttons button {
        flex-shrink: 0; /* prevent collapsing */
        display: inline-block;
        white-space: nowrap;
        font-size: 1em;
        padding: 0.5em 1em;
        background: #00ffcc;
        color: #000;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .top-buttons button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px #00ffcc88;
        }

/* Hide nav buttons when clicked */
.nav-button.hidden { display: none; }

/* Lens flares */
.lens-flare {
    position: fixed;
    top: 40%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    mix-blend-mode: screen;
    animation: flarePulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
    filter: blur(12px);

    /* Start hidden until triggered */
    opacity: 0;
}

.left-flare { left: 10%; }
.right-flare { right: 10%; }

@keyframes flarePulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50%      { transform: scale(1.4); opacity: 0.6; }
}

.spotlight {
    opacity: 0;
    position: fixed;
    top: 0;
    width: 30vw; /* instead of 40vw */
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    transform-origin: top center;
    mix-blend-mode: screen;
    filter: blur(8px);
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.6) 0%, transparent 80%);
}

/* Position centers at 1/3 and 2/3 */
.spotlight.left {
    left: 30%;
    transform: translateX(-50%);
    opacity: 0; /* start hidden */
}

.spotlight.right {
    left: 70%;
    transform: translateX(-50%);
    opacity: 0; /* start hidden */
}

/* Left spotlight sweeps wider */
@keyframes sweepLeft {
    0%   { transform: translateX(-50%) rotate(-40deg); background: radial-gradient(ellipse at top, rgba(255,0,0,0.6) 0%, transparent 80%); }
    25%  { transform: translateX(-50%) rotate(40deg);  background: radial-gradient(ellipse at top, rgba(0,255,0,0.6) 0%, transparent 80%); }
    50%  { transform: translateX(-50%) rotate(-35deg); background: radial-gradient(ellipse at top, rgba(0,0,255,0.6) 0%, transparent 80%); }
    75%  { transform: translateX(-50%) rotate(35deg);  background: radial-gradient(ellipse at top, rgba(255,255,0,0.6) 0%, transparent 80%); }
    100% { transform: translateX(-50%) rotate(-40deg); background: radial-gradient(ellipse at top, rgba(255,0,255,0.6) 0%, transparent 80%); }
}

/* Right spotlight sweeps opposite */
@keyframes sweepRight {
    0%   { transform: rotate(40deg);  background: radial-gradient(ellipse at top, rgba(255,0,0,0.6) 0%, transparent 80%); }
    25%  { transform: rotate(-40deg); background: radial-gradient(ellipse at top, rgba(0,255,0,0.6) 0%, transparent 80%); }
    50%  { transform: rotate(35deg);  background: radial-gradient(ellipse at top, rgba(0,0,255,0.6) 0%, transparent 80%); }
    75%  { transform: rotate(-35deg); background: radial-gradient(ellipse at top, rgba(255,255,0,0.6) 0%, transparent 80%); }
    100% { transform: rotate(40deg);  background: radial-gradient(ellipse at top, rgba(255,0,255,0.6) 0%, transparent 80%); }
}

.fog-layer {
    mix-blend-mode: screen;
    filter: blur(12px);
    opacity: 0; /* start hidden */
    z-index: 2; /* raise above spotlight but below crowd/buttons */
}

.fog-back  { background-image: url('/images/fog/fog-back.png'); }
.fog-mid   { background-image: url('/images/fog/fog-mid.png'); }
.fog-front { background-image: url('/images/fog/fog-front.png'); }


@keyframes fogDrift { 0% { background-position: 0 0; } 100% { background-position: 1000px 0; } }

/* Lasers anchored at bottom */
.laser {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(45deg, transparent 30%, rgba(0,255,204,0.8) 50%, transparent 70%);
    opacity: 0; /* hidden until triggered */
    mix-blend-mode: screen;
    filter: blur(8px);
    transform-origin: bottom center;
}

/* no animation here by default */
.left-laser {transform: rotate(10deg); opacity: 0.8; /* make visible */}
.left-laser {
    transform: rotate(-10deg);
    animation: sweepLaserRight 12s infinite linear;
    animation-delay: 13s; /* stagger for drama */
    opacity: 0.8; /* make visible */
}

.right-laser {transform: rotate(-10deg); opacity: 0.8; /* make visible */}
/* Right laser sweeps horizontally in opposite direction */
.right-laser {
    transform: rotate(-10deg);
    animation: sweepLaserRight 12s infinite linear;
    animation-delay: 30s; /* stagger for drama */
    opacity: 0.8; /* make visible */
}

/* Keyframes for left/right sweeps */
@keyframes sweepLaserLeft {
    0%   { transform: rotate(10deg) translateX(-30vw); opacity: 0.3; }
    50%  { transform: rotate(10deg) translateX(30vw); opacity: 0.8; }
    100% { transform: rotate(10deg) translateX(-30vw); opacity: 0.3; }
}

@keyframes sweepLaserRight {
    0%   { transform: rotate(-10deg) translateX(30vw); opacity: 0.3; }
    50%  { transform: rotate(-10deg) translateX(-30vw); opacity: 0.8; }
    100% { transform: rotate(-10deg) translateX(30vw); opacity: 0.3; }
}

/* Typography */
h1 { font-size: 2.5em; margin-bottom: 0.2em; text-shadow: 0 0 4px rgba(0,0,0,0.3); }
h2 { font-size: 2em; margin-bottom: 0.5em; text-shadow: 0 0 4px rgba(0,0,0,0.3); }
p { font-size: 1.2em; opacity: 0.9; text-shadow: 0 0 3px rgba(0,0,0,0.2); }
footer { margin-top: 2em; font-size: 0.9em; opacity: 0.6; text-shadow: 0 0 2px rgba(0,0,0,0.2); }
ul { list-style: none; padding: 0; margin-top: 1em; }
li { margin: 0.5em 0; font-size: 1.1em;} /* #00ffcc */

/* When graffiti wall is active, make panels less transparent */
body.graffiti-bg .container {
    background: rgba(0,0,0,0.80) !important; /* darker, more opaque background on the Frog Panel */
}

/* Show the brick background when either class is present */
/* Brick wall on page load */
body.brick-wall {
    background-image: url("https://frontend.proto.ranimusic.com/images/graffiti/brick-wall.jpg"); /* <-- correct file name */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Graffiti layer behind content */
#graffiti-wall {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background-image 1s ease-in-out;
}