/* ==========================================================================
   THE MUSIC OF V | magic words + creative extras (2026-10)
   ========================================================================== */

/* ---------- 1. Every "magic" word sits between little fans of playing cards ---------- */
.mw{position:relative;display:inline;white-space:nowrap;cursor:pointer;color:#B4492F;
  text-shadow:0 0 0 rgba(180,73,47,0);animation:mw-glow 3.2s ease-in-out infinite}
.room .mw,.watch .mw,.book .mw{color:#F1DDB0}
@keyframes mw-glow{50%{text-shadow:0 0 14px rgba(217,138,106,.55)}}
.mw-fan{display:inline-block;position:relative;width:.78em;height:.9em;vertical-align:-.08em;margin:0 .12em 0 .1em;pointer-events:none}
.mw-fan.r{width:.62em;margin:0 .1em 0 .12em}
.mw-c{position:absolute;bottom:0;left:.29em;width:1.19em;height:1.71em;min-width:9px;min-height:13px;border-radius:2px;
  background:#F6EEDC;border:1px solid rgba(27,22,19,.55);box-shadow:0 1px 3px rgba(0,0,0,.3);
  display:grid;place-items:center;font:700 .42em/1 Georgia,serif;color:#B4492F;
  transform-origin:50% 120%;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.mw-c.blk{color:#1B1613}
.mw-c:nth-child(1){transform:rotate(-22deg)}
.mw-c:nth-child(2){transform:rotate(0deg)}
.mw-c:nth-child(3){transform:rotate(22deg)}
.mw-fan.r .mw-c:nth-child(1){transform:rotate(-14deg)}
.mw-fan.r .mw-c:nth-child(2){transform:rotate(14deg)}
.mw:hover .mw-c:nth-child(1){transform:rotate(-40deg) translateY(-2px)}
.mw:hover .mw-c:nth-child(3){transform:rotate(40deg) translateY(-2px)}
.mw:hover .mw-fan.r .mw-c:nth-child(1){transform:rotate(-34deg) translateY(-2px)}
.mw:hover .mw-fan.r .mw-c:nth-child(2){transform:rotate(34deg) translateY(-2px)}
.mw-fan{animation:fan-bob 3.6s ease-in-out infinite}
.mw-fan.r{animation-delay:-1.8s}
@keyframes fan-bob{50%{transform:translateY(-2px) rotate(-3deg)}}
.mw-spark{position:absolute;width:6px;height:6px;pointer-events:none;color:#F1DDB0;font-size:12px;line-height:6px;
  text-shadow:0 0 8px #F1DDB0;animation:spark .9s ease-out forwards}
.paper .mw-spark{color:#C9A46A}
@keyframes spark{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.4)}}

/* flying card for "is this your card?" */
.fly-card{position:fixed;z-index:986;width:64px;height:90px;border-radius:6px;background:#F6EEDC;border:1px solid #1B1613;
  box-shadow:0 18px 40px rgba(0,0,0,.5);display:grid;place-items:center;font:700 30px/1 Georgia,serif;color:#B4492F;pointer-events:none;
  transition:transform 1s cubic-bezier(.3,.7,.2,1),opacity .4s ease 1.6s}
.fly-card.blk{color:#1B1613}
.fly-card small{position:absolute;top:5px;left:7px;font-size:12px}

/* ---------- 2. Guitar-string scroll progress ---------- */
#gstring{position:fixed;left:0;top:0;height:3px;width:100%;z-index:800;pointer-events:none;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#8A6A3C,#F1DDB0 50%,#C9A46A);box-shadow:0 0 8px rgba(241,221,176,.6)}
#gstring.buzz{animation:buzz .12s linear infinite}
@keyframes buzz{0%{translate:0 0}50%{translate:0 1.5px}100%{translate:0 -1px}}

/* ---------- 3. Sound-wave dividers between rooms ---------- */
.wave{display:block;height:46px;width:100%;overflow:hidden;line-height:0;position:relative;z-index:2}
.wave svg{width:200%;height:100%;animation:wave-roll 14s linear infinite}
@keyframes wave-roll{to{transform:translateX(-50%)}}

/* ---------- 4. Ticker names you can pluck ---------- */
.ticker{pointer-events:auto}
.ticker-run{pointer-events:auto}
.ticker span{cursor:pointer;transition:color .25s,text-shadow .25s}
.ticker span:hover,.ticker span.lit{color:var(--brass-hi);text-shadow:0 0 14px rgba(241,221,176,.6)}

/* ---------- 5. Headline letters that ring like strings ---------- */
.ring-l{display:inline-block;transition:transform .15s}
.ring-l.hit{animation:ringl .6s cubic-bezier(.3,.7,.2,1)}
@keyframes ringl{0%{transform:translateY(0)}20%{transform:translateY(-10px) rotate(-4deg)}45%{transform:translateY(4px) rotate(2deg)}70%{transform:translateY(-2px)}100%{transform:none}}

@media (prefers-reduced-motion: reduce){
  .mw,.mw-fan,.wave svg,#gstring.buzz{animation:none!important}
}