/* ============================================================
   visualizer.css — $parrow site-wide laser light-show layer
   Self-contained; loaded after styles.css by index.html
   ============================================================ */

/* ── Canvas layer ─────────────────────────────────────────── */
#sv-laser {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Sits above the bg-field (-2) but below all page content (1+) */
  z-index: -1;
  pointer-events: none;
  display: block;
  /* Prevent any accidental scrollbar from sub-pixel sizing */
  overflow: hidden;
}

/* ── Palette-transition helper on the root ────────────────── */
/* CSS vars are set directly by JS; this gives the rest of the
   site a silky 1.2 s cross-fade between palettes without any
   extra JS — every element that references --accent etc.
   inherits the transition automatically. */
:root {
  transition:
    --accent        1.2s ease,
    --accent-2      1.2s ease,
    --accent-3      1.2s ease,
    --glow          1.2s ease,
    --glow-2        1.2s ease;
}

/* Fallback for browsers that don't support custom property transitions
   (the JS tween covers them instead). */

/* ── Reduced-motion: no canvas, just a static palette glow ── */
@media (prefers-reduced-motion: reduce) {
  #sv-laser {
    display: none;
  }

  /* Soft ambient overlay so the palette change is still visible */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%,
        var(--glow, rgba(255,0,128,0.18)) 0%,
        transparent 70%),
      radial-gradient(ellipse 50% 40% at 20% 80%,
        var(--glow-2, rgba(0,240,255,0.10)) 0%,
        transparent 60%);
    transition: background 1.2s ease;
  }
}

/* ── Mobile performance hint ─────────────────────────────── */
/* Hint the browser this layer is purely visual / will animate */
#sv-laser {
  will-change: contents;
  /* Promote to its own compositor layer */
  transform: translateZ(0);
}

/* ── Palette glow bleed on key site elements ─────────────── */
/* These rules let the visualiser palette visually bleed onto
   text/borders already using the CSS vars, giving them a live
   coloured glow that morphs with each track. Zero extra JS. */

/* Navigation links */
nav a:hover,
nav a:focus-visible {
  text-shadow:
    0 0 12px var(--glow, rgba(255,0,128,0.6)),
    0 0 24px var(--glow-2, rgba(0,240,255,0.35));
  transition: text-shadow 0.4s ease;
}

/* Accent-coloured headings */
.accent,
[class*="accent-text"] {
  text-shadow:
    0 0 18px var(--glow, rgba(255,0,128,0.5));
  transition: text-shadow 1.2s ease;
}

/* Cards / glass surfaces — ambient rim light */
.glass-card,
.card,
[class*="mix-card"],
[class*="show-card"],
[class*="art-card"] {
  box-shadow:
    0 0 0 1px var(--border, rgba(255,255,255,0.08)),
    0 4px 24px rgba(0,0,0,0.4),
    0 0 32px var(--glow, rgba(255,0,128,0.08));
  transition:
    box-shadow 1.2s ease,
    border-color 1.2s ease;
}

.glass-card:hover,
.card:hover {
  box-shadow:
    0 0 0 1px var(--accent, #ff0080),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 48px var(--glow, rgba(255,0,128,0.22));
}

/* CTA / primary buttons */
.btn-primary,
button[class*="primary"],
a[class*="cta"] {
  box-shadow:
    0 0 16px var(--glow, rgba(255,0,128,0.35)),
    0 0 32px var(--glow-2, rgba(0,240,255,0.18));
  transition:
    box-shadow 1.2s ease,
    background 1.2s ease,
    border-color 1.2s ease;
}

/* Section dividers — animated colour sweep */
hr,
.section-divider {
  border-color: var(--accent, #ff0080);
  box-shadow: 0 0 8px var(--glow, rgba(255,0,128,0.4));
  transition: border-color 1.2s ease, box-shadow 1.2s ease;
}

/* Mini-player container — extra glow ring while track is live */
#mini-player,
.mini-player,
[id*="player"],
[class*="player"] {
  box-shadow:
    0 0 0 1.5px var(--accent, #ff0080),
    0 0 24px var(--glow, rgba(255,0,128,0.45)),
    0 0 48px var(--glow-2, rgba(0,240,255,0.20));
  transition: box-shadow 1.2s ease;
}

/* ============================================================
   IDLE CINEMA — visuals take over the page after 60s idle.
   ============================================================ */
#sv-laser { transition: opacity .9s ease; }
.viz-cinema #sv-laser { opacity: 1 !important; }
/* Dim the page chrome so the light-show dominates. */
.viz-cinema #main,
.viz-cinema .hero,
.viz-cinema .nav {
  opacity: .08;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
/* Idle cinema: the VIDEO ITSELF blows up to fill most of the screen, centered —
   the whole site becomes the player. (Lucky: "the vid player expand to cover
   more of the screen after 60 seconds.") The tiny corner bar stays put; the
   video is the star. */
.viz-cinema .mini-player[data-started="1"]:not([data-collapsed="1"]) #mp-yt {
  position: fixed;
  left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  /* Width-driven so height (= width*9/16) is always <= ~80vh and the box stays
     exactly 16:9 (no max-height clamp -> never any black bars). */
  width: min(82vw, 142vh);
  height: auto; aspect-ratio: 16 / 9; max-height: none; max-width: 94vw;
  z-index: 72; border-radius: 18px;
  box-shadow: 0 30px 120px rgba(0,0,0,.85), 0 0 70px var(--glow);
  transition: width .9s cubic-bezier(.2,.8,.2,1), box-shadow .9s ease;
}
/* CRITICAL: the cinema video above is `position:fixed` and must resolve against
   the VIEWPORT. A `transform`, `backdrop-filter`, or `animation` on its ancestor
   #mini-player would instead make it a containing block, so the "fixed" video
   centers on the BAR (bottom of screen) — the bug Lucky saw. Null all three here
   and re-center the bar with a margin (no transform). */
.viz-cinema #mini-player {
  animation: none;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  left: 50%;
  margin-left: calc(-1 * min(680px, 100vw - 24px) / 2);
  z-index: 60;
  transition: none;
}
/* Screensaver/cinema = JUST the enlarged video: hide the bar chrome, every
   control, and the Radio launcher so nothing clutters the takeover (Lucky:
   "make the radio button and the miniplayer controls disapere ... so its just
   the vid enlarged"). All of it restores on activity (cinema exits on move). */
.viz-cinema #mini-player { background: transparent; border-color: transparent; box-shadow: none; }
.viz-cinema #mini-player > :not(#mp-yt) { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.viz-cinema #mp-launch { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
@media (max-width: 700px) {
  .viz-cinema .mini-player[data-started="1"]:not([data-collapsed="1"]) #mp-yt {
    width: 94vw; max-height: none;
  }
}
/* Cinematic vignette over the takeover. */
.viz-cinema::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,.6) 100%);
  animation: vizCinemaIn 1.2s ease forwards;
}
@keyframes vizCinemaIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .viz-cinema #main, .viz-cinema .hero, .viz-cinema .nav { opacity: 1; }
  .viz-cinema #mini-player { transform: none; }
  .viz-cinema::after { display: none; }
}