/* ==========================================================================
   THE MUSIC OF V | FX layer (2026-10)
   Motion, marquee lights and easter eggs. Photos never move. Everything here
   is decoration on top of a page that is already fully visible.
   ========================================================================== */

/* ---------- marquee bulbs (chasing lights) ---------- */
.bulbs{position:relative;height:14px;margin:0 0 18px;
  background:radial-gradient(circle at 7px 7px,#F1DDB0 0 2.6px,rgba(241,221,176,.25) 3.2px,transparent 6px) 0 0/22px 14px repeat-x;
  filter:drop-shadow(0 0 4px rgba(241,221,176,.55))}
.bulbs::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 7px 7px,#2a1a10 0 2.8px,transparent 3.4px) 0 0/66px 14px repeat-x;
  animation:chase 1.1s steps(3) infinite}
.bulbs.low{margin:26px 0 0}
@keyframes chase{to{background-position:66px 0}}

/* ---------- record: slow spin + tonearm ---------- */
.record{animation:spin 9s linear infinite;cursor:pointer}
.record.fast{animation-duration:1.4s}
@keyframes spin{to{transform:rotate(360deg)}}
.tonearm{position:absolute;z-index:1;top:2%;right:-30%;width:46%;pointer-events:none;transform-origin:86% 10%;
  transform:rotate(18deg);transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.tonearm.rest{transform:rotate(-8deg)}
.tonearm svg{width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
@media(max-width:880px){.tonearm{right:-34%;top:4%}}

/* ---------- notes drifting off the record ---------- */
.notes{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.notes i{position:absolute;bottom:40%;right:-6%;font-style:normal;color:var(--brass-hi);opacity:0;font-size:20px;
  text-shadow:0 0 10px rgba(241,221,176,.6);animation:drift 7s linear infinite}
.notes i:nth-child(2){animation-delay:1.7s;right:4%;font-size:15px}
.notes i:nth-child(3){animation-delay:3.4s;right:-14%;font-size:24px}
.notes i:nth-child(4){animation-delay:5.1s;right:-2%;font-size:17px}
@keyframes drift{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.9}
  70%{opacity:.5}100%{opacity:0;transform:translate(-60px,-260px) rotate(-25deg)}}

/* ---------- EQ bars ---------- */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin-left:4px}
.eq b{width:3px;background:var(--ember);height:30%;animation:eq 1s ease-in-out infinite alternate}
.eq b:nth-child(2){animation-delay:-.4s}.eq b:nth-child(3){animation-delay:-.7s}.eq b:nth-child(4){animation-delay:-.2s}.eq b:nth-child(5){animation-delay:-.9s}
@keyframes eq{0%{height:20%}35%{height:95%}60%{height:45%}100%{height:75%}}

/* ---------- glyph decode on headings ---------- */
.gl-ghost{opacity:.25}
.gl-note{color:var(--brass);opacity:.9}
.paper .gl-note{color:var(--rust)}

/* ---------- film flicker + scratches on dark rooms ---------- */
.room{position:relative}
.room::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    linear-gradient(90deg,transparent 0 31%,rgba(241,221,176,.05) 31.1% 31.2%,transparent 31.3% 72%,rgba(241,221,176,.04) 72.05% 72.12%,transparent 72.2%);
  animation:scratch 7s steps(1) infinite}
@keyframes scratch{0%{background-position:0 0}20%{background-position:120px 0}40%{background-position:-80px 0}60%{background-position:40px 0}80%{background-position:-160px 0}}
.room > .sheet{position:relative;z-index:1}

/* ---------- spotlight that follows the cursor in dark rooms ---------- */
.spot{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,50%),rgba(241,221,176,.09),transparent 70%)}
.room:hover .spot{opacity:1}

/* ---------- programme leaders draw in ---------- */
.entry .dots{transform-origin:left center}

/* ---------- Now Playing deck (desktop) ---------- */
#deck{position:fixed;left:16px;bottom:16px;z-index:760;display:flex;align-items:center;gap:12px;
  padding:9px 14px 9px 10px;background:rgba(22,16,13,.92);border:1px solid var(--brass-lo);
  box-shadow:inset 0 0 0 3px rgba(22,16,13,.9),inset 0 0 0 4px rgba(201,164,106,.3),0 14px 30px rgba(0,0,0,.45);
  font-family:var(--type);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:min(380px,calc(100vw - 32px));
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s,transform .4s}
#deck.on{opacity:1;transform:none}
#deck .disc{width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle,var(--rust) 0 22%,#0b0807 23% 26%,transparent 27%),repeating-radial-gradient(circle,#121010 0 1px,#26201d 1.4px 2.4px);
  animation:spin 3s linear infinite}
#deck b{display:block;color:var(--brass-hi);font-weight:400;letter-spacing:.14em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#deck .vu{display:flex;gap:2px;align-items:flex-end;height:16px;margin-left:4px}
#deck .vu i{width:3px;background:linear-gradient(0deg,var(--brass) 0 60%,var(--ember) 60% 85%,var(--rust) 85%);height:40%;animation:eq 0.8s ease-in-out infinite alternate}
#deck .vu i:nth-child(2){animation-delay:-.3s}#deck .vu i:nth-child(3){animation-delay:-.55s}#deck .vu i:nth-child(4){animation-delay:-.15s}
@media(max-width:820px){#deck{display:none}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;top:84px;z-index:990;transform:translate(-50%,-20px);opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s;background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  box-shadow:6px 6px 0 var(--rust);padding:12px 18px;max-width:min(460px,calc(100vw - 32px));
  font-family:var(--type);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- encore: falling notes ---------- */
.fall{position:fixed;top:-40px;z-index:980;pointer-events:none;color:var(--brass-hi);font-size:26px;
  text-shadow:0 0 12px rgba(241,221,176,.7);animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(var(--r,180deg));opacity:.2}}

/* ---------- the card trick ---------- */
#trick{position:fixed;inset:0;z-index:985;display:none;place-items:center;background:rgba(10,7,5,.72);cursor:pointer;perspective:1200px}
#trick.show{display:grid}
#trick .card{width:220px;aspect-ratio:5/7;position:relative;transform-style:preserve-3d;animation:flip 1.1s cubic-bezier(.3,.7,.2,1) forwards}
#trick .face,#trick .back{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6)}
#trick .back{background:repeating-linear-gradient(45deg,#8C3221 0 6px,#B4492F 6px 12px);border:8px solid var(--paper)}
#trick .face{transform:rotateY(180deg);background:var(--paper);border:1px solid var(--ink);display:grid;place-items:center;color:#B4492F;font-family:var(--didone)}
#trick .face .big{font-size:96px;line-height:1}
#trick .face .tl,#trick .face .br{position:absolute;font-size:22px;font-weight:700;line-height:1;text-align:center}
#trick .face .tl{top:12px;left:14px}#trick .face .br{bottom:12px;right:14px;transform:rotate(180deg)}
#trick p{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:min(440px,90vw);text-align:center;
  font-family:var(--didone);font-style:italic;font-size:22px;color:var(--paper)}
#trick p small{display:block;font-family:var(--type);font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-top:10px}
@keyframes flip{0%{transform:translateY(60vh) rotateY(0) rotateZ(-20deg)}60%{transform:translateY(-10px) rotateY(160deg) rotateZ(4deg)}100%{transform:translateY(0) rotateY(180deg) rotateZ(0)}}

/* ---------- guitar pick in the footer ---------- */
.pick{display:inline-grid;place-items:center;width:34px;height:38px;margin:18px auto 0;cursor:pointer;border:0;padding:0;background:none}
.pick svg{width:100%;height:100%;transition:transform .3s}
.pick:hover svg{transform:rotate(-12deg) scale(1.08)}
.hint{display:block;margin-top:8px;font-family:var(--type);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);opacity:.5}

/* ---------- piano key flash ---------- */
.keyflash{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:970;pointer-events:none;
  font-family:var(--didone);font-size:44px;color:var(--brass-hi);text-shadow:0 0 16px rgba(241,221,176,.7);animation:keyup .9s ease-out forwards}
@keyframes keyup{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-80px)}}

@media (prefers-reduced-motion: reduce){
  .record,.notes,.bulbs::after,.eq b,#deck .disc,#deck .vu i,.room::after{animation:none!important}
  .notes{display:none}
}