/* VIBE MODE — the hero equalizer, full screen. Nothing on screen but the visualizer.
   The entry button lives in the corner of the equalizer window (#vibeBtn); the overlay (#vibe) is built by vibe.js. */

.h-core{ touch-action:pan-y; }   /* sideways swipes on the equalizer change style; vertical drags still scroll */
/* just the glyph: no ring, no fill. The 44px box stays as the touch target, the icon itself is small and quiet */
.vibe-btn{ position:absolute; z-index:3; right:1.5px; bottom:0;   /* the glyph's right edge sits on the page's 16px right line */ width:44px; height:44px; padding:0; border:0; border-radius:12px; background:none;
  display:grid; place-items:center; color:rgba(255,255,255,.5); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:color .18s; }
.vibe-btn svg{ width:15px; height:15px; stroke-width:2.2; }
.vibe-btn:active{ color:#fff; }
.vibe-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
html.mini .vibe-btn{ display:none; }

.vibe{ position:fixed; inset:0; z-index:700; background:#000; overflow:hidden; outline:none;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
  touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent; cursor:none; }
.vibe.on{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.vibe.on.ui{ cursor:default; }
.vibe-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(78% 56% at 50% 50%, var(--vg, rgba(56,189,248,.17)), transparent 74%); transition:opacity .6s; }
/* the canvas is moved in here while the mode is on: no edge fade, it owns the whole screen */
/* top/bottom breathing room keeps the bars clear of the style name above and the song title below */
.vibe .h-canvas{ position:absolute; left:0; right:0; width:100%; z-index:1;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);   /* soft edges for the full-bleed scenes */
  --vt:calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + clamp(40px, 13vh, 92px));
  --vb:calc(env(safe-area-inset-bottom, 0px) + clamp(40px, 13vh, 92px));
  top:var(--vt); height:calc(100% - var(--vt) - var(--vb)); }   /* a canvas is a replaced element: top+bottom alone would not stretch it */

.vibe-name{ position:absolute; z-index:2; left:0; right:0; top:calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 22px);
  text-align:center; font:700 11px/1 var(--disp); letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.72);
  opacity:0; transition:opacity .35s; pointer-events:none; }
.vibe-name.show{ opacity:1; }

.vibe-cap{ position:absolute; z-index:2; left:24px; right:24px; bottom:calc(env(safe-area-inset-bottom, 0px) + 30px); text-align:center; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .9s ease, transform .9s ease; text-shadow:0 1px 16px rgba(0,0,0,.85); }
.vibe-cap.show{ opacity:1; transform:none; }
.vibe-cap b{ display:block; font:600 15px/1.3 var(--disp); letter-spacing:.01em; color:rgba(255,255,255,.62); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vibe-cap span{ display:block; margin-top:3px; font:500 12px/1.3 var(--sans); letter-spacing:.03em; color:rgba(255,255,255,.4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vibe-cap.drift{ animation:vibedrift 150s ease-in-out infinite alternate; }   /* "always" mode: a slow drift so a static line never burns into an OLED */
@keyframes vibedrift{ from{ translate:-22px 0; } to{ translate:22px -14px; } }

.vibe-hint{ position:absolute; z-index:2; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 92px); text-align:center; pointer-events:none;
  font:600 11px/1.4 var(--sans); letter-spacing:.07em; color:rgba(255,255,255,.52); opacity:0; transition:opacity .6s; }
.vibe-hint.show{ opacity:1; }

.vibe-x{ position:absolute; z-index:4; width:44px; height:44px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer;
  top:calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px) + 12px);
  right:calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 1.5px);   /* never under the Windows caption buttons */
  color:rgba(255,255,255,.7);
  opacity:0; pointer-events:none; transition:opacity .3s; }
.vibe-x svg{ width:15px; height:15px; stroke-width:2.2; filter:drop-shadow(0 0 4px rgba(0,0,0,.7)); }
.vibe.ui .vibe-x, .vibe-x:focus-visible{ opacity:1; pointer-events:auto; }
.vibe-x:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){ .vibe-cap.drift{ animation:none; } .vibe, .vibe-cap, .vibe-name{ transition-duration:.01s; } }