/* ============================================================
   DJTayBae.com — Rave Background Light Show
   Full-screen reactive light show, shown ONLY while live on Twitch
   (body.is-live). Rebuilt 2026-06-21 from the documented spec.

   Layer: #rave-bg is position:fixed, z-index:-1, behind all content,
   mix-blend-mode:screen so it glows through the dark page. Hidden
   unless body.is-live. 10 scenes rotate (~25s) via RaveDirector in
   rave.js; lasers/aurora are CSS, the rest are Canvas 2D (in rave.js).
   Preview toolbar via ?rave=show (styled at bottom). Holiday themes
   (e.g. body.theme-july4) remap the palette vars — see below.

   Palette hand-matched to her real stream lighting:
   hot pink -> magenta -> purple -> violet -> electric blue -> cyan.
   ============================================================ */

:root {
    --rave-pink:    #ff2d95;
    --rave-magenta: #ff00d4;
    --rave-purple:  #9d00ff;
    --rave-violet:  #6a00ff;
    --rave-blue:    #1f6bff;
    --rave-cyan:    #00e5ff;
}

/* ---------- HOLIDAY THEME: July 4th (red / white / blue) ----------
   When body.theme-july4 is set (rave.js, on July 4 or ?rave=july4), remap the
   palette variables so the CSS scenes (lasers + aurora) go patriotic. The
   canvas scenes recolor themselves from the JS palette. Add more themes
   (theme-halloween, theme-christmas, …) the same way. */
body.theme-july4 {
    --rave-pink:    #ff2a2a;   /* red   */
    --rave-magenta: #c1121f;   /* deep red */
    --rave-purple:  #1e5bff;   /* blue  */
    --rave-violet:  #0a3bd4;   /* deep blue */
    --rave-blue:    #ffffff;   /* white */
    --rave-cyan:    #e8e8ff;   /* off-white */
}

/* Summer: bright sky-blue / sunny-yellow palette for the CSS scenes. */
body.theme-summer {
    --rave-pink:    #ffe066;   /* sunny yellow */
    --rave-magenta: #ffd43b;   /* gold */
    --rave-purple:  #4dabf7;   /* sky blue */
    --rave-violet:  #339af0;   /* deeper blue */
    --rave-blue:    #74c0fc;   /* light blue */
    --rave-cyan:    #a5d8ff;   /* pale blue */
}

/* The fixed rave layer — behind everything, glows via screen blend. */
#rave-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
    background: #05010a;            /* deep near-black so colors pop */
    mix-blend-mode: normal;
}

/* Only show the show while she's live. Fade in/out. */
body.is-live #rave-bg { opacity: 1; }

/* ============================================================
   LIVE-ONLY page transparency (fixes the "rave never shows" bug).

   #rave-bg sits at z-index:-1 — BEHIND the page's own solid
   background. The dark theme paints body + every section with an
   opaque near-black (var(--bg-primary/secondary)), which completely
   covered the rave layer, so it was invisible even while live.

   While body.is-live we make html/body transparent and drop the
   section fills to a translucent smoked-glass tint, so the light
   show glows THROUGH the whole page. All of this reverts the instant
   she's offline (the class is removed) — the normal dark theme is
   untouched when not live.
   ============================================================ */
body.is-live,
body.is-live html { background-color: transparent !important; }

/* Sections keep a dark, semi-transparent "smoked glass" tint so text
   stays readable while the rave shows behind them. */
body.is-live .about-section,
body.is-live .stream-section,
body.is-live .schedule-section,
body.is-live .support-section,
body.is-live .site-footer   { background: rgba(8, 6, 16, 0.62) !important; }
body.is-live .bg-alt,
body.is-live .section-padding.bg-alt { background: rgba(14, 10, 24, 0.60) !important; }

/* Hero: let the rave dominate — kill its own opaque fill, keep only
   a soft vignette for text contrast. */
body.is-live .hero-section { background: transparent !important; }
body.is-live .hero-section::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(5,1,10,0) 30%, rgba(5,1,10,0.55) 100%);
    pointer-events: none; z-index: 0;
}

/* Cards / panels: a touch of translucency so the glow peeks around
   them without hurting legibility. */
body.is-live .stream-card,
body.is-live .about-card,
body.is-live .support-card,
body.is-live .schedule-card { backdrop-filter: blur(3px); }

/* The canvas (confetti/web/starfield/bokeh) fills the layer. */
#rave-bg .rave-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
}

/* CSS scene elements sit above the canvas, also screen-blended. */
#rave-bg .rave-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
    mix-blend-mode: screen;
}
#rave-bg .rave-scene.active { opacity: 1; }

/* ---------- Scene: LASERS (CSS) — continuously sweeping colored beams ----------
   Each beam is a full-width line pivoting from its CENTER (so it always crosses
   the viewport) and each starts at a different angle so the 5 beams stay fanned
   out and keep sweeping the whole 25s — not one wipe then nothing.
   A separate per-beam keyframe carries that starting-angle offset through a full
   360deg turn, `infinite`, so the motion never stops. */
.rave-scene-lasers .beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250vmax;
    height: 3px;
    transform-origin: center center;   /* pivot at the middle → always on-screen */
    filter: blur(1px);
    opacity: 0.85;
    will-change: transform;
}
.rave-scene-lasers .beam:nth-child(1) { background: linear-gradient(90deg, transparent, var(--rave-pink),   transparent); animation: beam-sweep-1 9s  linear infinite; }
.rave-scene-lasers .beam:nth-child(2) { background: linear-gradient(90deg, transparent, var(--rave-cyan),   transparent); animation: beam-sweep-2 11s linear infinite reverse; }
.rave-scene-lasers .beam:nth-child(3) { background: linear-gradient(90deg, transparent, var(--rave-purple), transparent); animation: beam-sweep-3 13s linear infinite; }
.rave-scene-lasers .beam:nth-child(4) { background: linear-gradient(90deg, transparent, var(--rave-blue),   transparent); animation: beam-sweep-4 15s linear infinite reverse; }
.rave-scene-lasers .beam:nth-child(5) { background: linear-gradient(90deg, transparent, var(--rave-magenta),transparent); animation: beam-sweep-5 10s linear infinite; }
/* Each beam starts 36deg apart so they form a continuous rotating fan. */
@keyframes beam-sweep-1 { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(360deg);   } }
@keyframes beam-sweep-2 { from { transform: translate(-50%,-50%) rotate(36deg);  } to { transform: translate(-50%,-50%) rotate(396deg);  } }
@keyframes beam-sweep-3 { from { transform: translate(-50%,-50%) rotate(72deg);  } to { transform: translate(-50%,-50%) rotate(432deg);  } }
@keyframes beam-sweep-4 { from { transform: translate(-50%,-50%) rotate(108deg); } to { transform: translate(-50%,-50%) rotate(468deg); } }
@keyframes beam-sweep-5 { from { transform: translate(-50%,-50%) rotate(144deg); } to { transform: translate(-50%,-50%) rotate(504deg); } }

/* ---------- Scene: AURORA (CSS) — swaying neon light curtains ----------
   Tall vertical light columns (like real aurora / stage haze beams) that
   sway side-to-side, stretch, and pulse brightness — with clearly VISIBLE
   motion (was: 3 barely-moving 60px-blur blobs that just looked like flat
   shading). 5 columns, each on its own timing, sharper blur so the sway
   actually reads. */
.rave-scene-aurora { background: #05010a; overflow: hidden; }
.rave-scene-aurora .ribbon {
    position: absolute;
    top: -20%;
    height: 140%;
    width: 22%;
    filter: blur(26px);
    opacity: 0.7;
    border-radius: 50% / 12%;
    transform-origin: center bottom;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}
.rave-scene-aurora .ribbon:nth-child(1) { left: 2%;  background: linear-gradient(to top, transparent, var(--rave-pink)   60%, transparent); animation: aurora-sway 6s  ease-in-out infinite,        aurora-pulse 3.1s ease-in-out infinite; }
.rave-scene-aurora .ribbon:nth-child(2) { left: 24%; background: linear-gradient(to top, transparent, var(--rave-cyan)   60%, transparent); animation: aurora-sway 7.5s ease-in-out infinite reverse, aurora-pulse 2.4s ease-in-out infinite; }
.rave-scene-aurora .ribbon:nth-child(3) { left: 46%; background: linear-gradient(to top, transparent, var(--rave-purple) 60%, transparent); animation: aurora-sway 5.4s ease-in-out infinite,        aurora-pulse 3.7s ease-in-out infinite; }
.rave-scene-aurora .ribbon:nth-child(4) { left: 68%; background: linear-gradient(to top, transparent, var(--rave-blue)   60%, transparent); animation: aurora-sway 8.2s ease-in-out infinite reverse, aurora-pulse 2.8s ease-in-out infinite; }
.rave-scene-aurora .ribbon:nth-child(5) { left: 82%; background: linear-gradient(to top, transparent, var(--rave-magenta)60%, transparent); animation: aurora-sway 6.7s ease-in-out infinite,        aurora-pulse 3.3s ease-in-out infinite; }
/* Sway: translate across + skew + scale so the columns visibly wave. */
@keyframes aurora-sway {
    0%, 100% { transform: translateX(0)     skewX(-14deg) scaleY(1);    }
    25%      { transform: translateX(60%)   skewX(10deg)  scaleY(1.15); }
    50%      { transform: translateX(-30%)  skewX(18deg)  scaleY(0.9);  }
    75%      { transform: translateX(40%)   skewX(-8deg)  scaleY(1.1);  }
}
/* Pulse: brightness/opacity flicker, offset from the sway so it shimmers. */
@keyframes aurora-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.85; }
}

/* (STROBE scene removed — the full-screen color flashing was obnoxious.) */

/* prefers-reduced-motion: SLOW the show, do NOT freeze it (documented gotcha:
   a hard `animation:none` looked like "colors but nothing moves"). */
@media (prefers-reduced-motion: reduce) {
    .rave-scene-lasers .beam { animation-duration: 40s !important; }
    .rave-scene-aurora .ribbon { animation-duration: 14s, 9s !important; }
    #rave-bg { transition: opacity 2s ease; }
}

/* ---------- Preview / effects toolbar ----------
   Always present. Collapsed = a small "🎨 Effects" launcher tab in the top-right
   that ANY visitor can open. Expanded = the full two-row bar:
   Row 1 = EFFECTS (show on/off, auto-rotate, copy-link, one btn per scene),
   Row 2 = THEME  (color schemes / holidays). */
#rave-show-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 12px 7px 12px;
    background: rgba(6, 4, 14, 0.94);
    border-bottom: 1px solid rgba(255, 45, 149, 0.5);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
    font-family: 'Segoe UI', system-ui, sans-serif;
    backdrop-filter: blur(6px);
    max-height: 45vh;
    overflow-y: auto;
}
/* collapsed: shrink to just the launcher tab, anchored top-right, no full bar */
#rave-show-bar.collapsed {
    left: auto; right: 10px;
    top: 10px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    max-height: none;
    overflow: visible;
}
#rave-show-bar.collapsed .rab-body { display: none; }
/* the launcher / collapse toggle button (top-right of the bar) */
#rave-show-bar .rab-toggle {
    position: absolute;
    top: 6px; right: 12px;
    appearance: none;
    border: 1px solid rgba(255,255,255,0.3);
    background: linear-gradient(90deg, #ff2d95, #9d00ff);
    color: #fff;
    font: 700 12px 'Segoe UI', system-ui, sans-serif;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    z-index: 2;
    transition: transform .1s, box-shadow .15s;
}
#rave-show-bar.collapsed .rab-toggle {
    position: static;
    box-shadow: 0 3px 14px rgba(157,0,255,0.5);
}
#rave-show-bar .rab-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,45,149,0.6); }
#rave-show-bar .rab-body { display: flex; flex-direction: column; gap: 5px; padding-right: 88px; }
#rave-show-bar .rab-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#rave-show-bar .rab-row-themes {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 5px;
}
#rave-show-bar .rab-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ff2d95;
    margin-right: 6px;
    min-width: 52px;
    text-transform: uppercase;
}
#rave-show-bar .rab-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #e6e6f0;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    cursor: pointer;
    text-transform: capitalize;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
#rave-show-bar .rab-btn:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
#rave-show-bar .rab-btn.on {
    background: linear-gradient(90deg, #ff2d95, #9d00ff);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 45, 149, 0.6);
}
/* THEME-ADDED scene buttons stand out: gold outline + tint, so it's obvious
   which effects appeared because of the picked theme. */
#rave-show-bar .rab-theme-scene {
    border: 1.5px solid #ffd43b;
    background: rgba(255, 212, 59, 0.12);
    color: #ffe9a8;
    box-shadow: 0 0 8px rgba(255, 212, 59, 0.35);
}
#rave-show-bar .rab-theme-scene:hover { background: rgba(255, 212, 59, 0.24); }
#rave-show-bar .rab-theme-scene.on {
    background: linear-gradient(90deg, #ffb703, #ff8500) !important;
    border-color: #fff;
    color: #221600;
    box-shadow: 0 0 14px rgba(255, 183, 3, 0.7);
}
/* attention pulse when theme scenes first appear */
#rave-show-bar .rab-pulse { animation: rab-pulse 0.5s ease-in-out 3; }
@keyframes rab-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 8px rgba(255, 212, 59, 0.35); }
    50%      { transform: scale(1.12); box-shadow: 0 0 18px rgba(255, 212, 59, 0.9); }
}
#rave-show-bar .rab-auto,
#rave-show-bar .rab-power,
#rave-show-bar .rab-copy,
#rave-show-bar .rab-themebtn { text-transform: none; }
/* master power button: green when ON, red when OFF */
#rave-show-bar .rab-power {
    font-weight: 700;
    border-color: rgba(255, 90, 90, 0.6);
    background: rgba(255, 60, 60, 0.18);
    color: #ffd7d7;
}
#rave-show-bar .rab-power.on {
    background: linear-gradient(90deg, #1db954, #14e08a) !important;
    border-color: #fff;
    color: #04210f;
    box-shadow: 0 0 12px rgba(29, 185, 84, 0.6);
}
/* copy-link button */
#rave-show-bar .rab-copy {
    font-weight: 700;
    border-color: rgba(0, 200, 255, 0.5);
    background: rgba(0, 180, 255, 0.14);
    color: #cdf3ff;
}
#rave-show-bar .rab-copy:hover { background: rgba(0, 180, 255, 0.28); }
/* theme (color-scheme) buttons: a rainbow gradient border when active */
#rave-show-bar .rab-themebtn { font-weight: 700; }
#rave-show-bar .rab-themebtn.on {
    background: linear-gradient(90deg, #ff2a2a, #ffd60a, #2a9d3f, #1e5bff, #9d00ff) !important;
    border-color: #fff;
    color: #0b0b12;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
/* push the page down so the two-row bar doesn't cover the navbar */
body.rave-show { padding-top: 92px; }
@media (max-width: 768px) { body.rave-show { padding-top: 132px; } }

/* On small screens, soften blur cost a touch (Canvas particle counts are
   halved in JS; this just keeps CSS scenes cheap on mobile GPUs). */
@media (max-width: 768px) {
    .rave-scene-aurora .ribbon { filter: blur(40px); }
}