/* ============================================================
   STREET DREAMS — FX layer: actitud, kinética y microinteracción
   ============================================================ */

/* ---------- MARQUEE / TICKER (cinta de texto en movimiento) ---------- */
.marquee{--gap:3rem;display:flex;overflow:hidden;user-select:none;gap:var(--gap);
  border-block:2px solid var(--hairline);background:var(--ink);padding-block:.7rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee.gold{background:var(--gold);border-color:#000}
.marquee.gold .mq-item{color:#000}
.marquee.blue{background:var(--blue);border-color:#000}
.marquee.blue .mq-item{color:#fff}
.marquee__track{flex-shrink:0;display:flex;gap:var(--gap);align-items:center;
  min-width:100%;animation:mq 28s linear infinite}
.marquee.fast .marquee__track{animation-duration:16s}
.marquee.rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
.mq-item{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:var(--gap);color:var(--white)}
.mq-item .dot{color:var(--gold);font-size:.8em}
.marquee.gold .mq-item .dot,.marquee.blue .mq-item .dot{color:inherit;opacity:.6}
@keyframes mq{to{transform:translateX(calc(-100% - var(--gap)))}}

/* ---------- SPRAY REVEAL en titulares ---------- */
.spray{position:relative}
h1.spray,h2.spray,h3.spray,p.spray{display:block}
.spray > span{display:inline-block;opacity:0;transform:translateY(.25em) rotate(-2deg);
  filter:blur(6px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s}
.spray.in > span{opacity:1;transform:none;filter:none}
/* stagger por palabra */
.spray.in > span:nth-child(1){transition-delay:.02s}
.spray.in > span:nth-child(2){transition-delay:.10s}
.spray.in > span:nth-child(3){transition-delay:.18s}
.spray.in > span:nth-child(4){transition-delay:.26s}
.spray.in > span:nth-child(5){transition-delay:.34s}
.spray.in > span:nth-child(6){transition-delay:.42s}

/* ---------- GLITCH (logo / títulos al hover) ---------- */
.glitch{position:relative;display:inline-block}
.glitch:hover{animation:glitch-skew .4s steps(2,end) 1}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch:hover::before{opacity:.9;color:var(--blue);animation:glitch-x .3s steps(2) 1;clip-path:inset(0 0 60% 0)}
.glitch:hover::after{opacity:.9;color:var(--gold);animation:glitch-x .3s steps(2) reverse 1;clip-path:inset(60% 0 0 0)}
@keyframes glitch-x{0%{transform:translateX(-4px)}50%{transform:translateX(4px)}100%{transform:none}}
@keyframes glitch-skew{0%{transform:skewX(-3deg)}100%{transform:none}}

/* ---------- HERO upgrade: scanlines + vignette + drip baseline ---------- */
.hero .scanlines{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:overlay;opacity:.12;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
.hero .vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.85))}
.hero > *{position:relative;z-index:1}
.hero .splatter{z-index:0}
.hero-logo{cursor:default}   /* sin hover de color ni movimiento */

/* word-by-word hero meta */
.hero .meta b{position:relative}
.hero .meta b::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;animation:grow 1s var(--ease) .6s forwards}
@keyframes grow{to{transform:scaleX(1)}}

/* ---------- BADGE pill (TOMA POSICIÓN, etc) ---------- */
.badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);
  letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;padding:.5em 1.1em;
  border:1px solid var(--hairline);border-radius:100px;color:var(--white-dim);background:rgba(0,0,0,.4)}
.badge .live{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);
  animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,201,40,.6)}70%{box-shadow:0 0 0 12px rgba(244,201,40,0)}100%{box-shadow:0 0 0 0 rgba(244,201,40,0)}}

/* ---------- BOTONES: magnetic + sheen ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:none}
.btn:hover::after{animation:sheen .7s var(--ease)}
@keyframes sheen{to{left:140%}}
.btn-blue::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent)}

/* ---------- CARD TILT (artistas / pillars) ---------- */
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease)}
.artist .name,.artist .tag{transform:translateZ(40px)}

/* watermark de número eliminado */
.section .wm{display:none}
.section > .container{position:relative;z-index:1}

/* ---------- DIVIDER spray ---------- */
.divider{height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--blue),transparent);
  opacity:.4;margin-block:0}

/* ---------- COUNTDOWN flip feel ---------- */
.cd-box{transition:transform .3s var(--ease),border-color .3s}
.cd-box:hover{transform:translateY(-4px);border-color:var(--gold)}
.cd-num{font-variant-numeric:tabular-nums}

/* ---------- SCROLL PROGRESS bar ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9997;
  background:linear-gradient(90deg,var(--gold),var(--blue))}


/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .spray > span{opacity:1;transform:none;filter:none}
  .badge .live{animation:none}
}