/* Nicola Guida — DJ */
:root {
  --bg: #0e0b09;
  --bg-2: #17120f;
  --bg-3: #211a15;
  --ink: #f1e8da;
  --muted: #a39686;
  --line: rgba(241, 232, 218, 0.14);
  --accent: #e8352a;
  --amber: #f0a64a;
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --player-h: 64px;
  --r: 20px;
  --r-sm: 12px;
  /* Sezioni velate: la palla e i fasci si intravedono sempre */
  --veil: rgba(14, 11, 9, .74);
  --veil-2: rgba(23, 18, 15, .72);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 999; background: var(--accent); padding: 8px 12px; border-radius: 999px; }
[hidden] { display: none !important; }

.label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 0; }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 10vw, 168px); line-height: .9; letter-spacing: -.005em; margin: 0; }

/* Icone */
.i-play, .i-pause, .i-stop { display: inline-block; width: 14px; height: 14px; position: relative; flex: none; }
.i-play::before { content: ''; position: absolute; inset: 0 0 0 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.i-pause::before, .i-pause::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 1px; background: currentColor; }
.i-pause::before { left: 0; } .i-pause::after { right: 0; }
.i-stop::before { content: ''; position: absolute; inset: 1px; border-radius: 2px; background: currentColor; }
.ico { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }

/* Ingresso pagina */
main, .footer { transition: opacity .8s var(--ease); }
.is-loading { overflow: hidden; }
.is-loading main, .is-loading .footer, .is-loading .nav, .is-loading .player { opacity: 0; }

/* ---------- Intro ---------- */
.intro-seen .loader { display: none; }
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(80% 60% at 50% 55%, #1c120d, #050404 70%);
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1);
}
/* Uscita: il sipario si alza dal basso verso l'alto */
.loader.is-out { clip-path: inset(0 0 100% 0); }
.loader__inner { display: grid; gap: 18px; width: max-content; max-width: 100%; }
.loader__name {
  margin: 0; font-family: var(--font-display); font-size: clamp(54px, 12.5vw, 190px); line-height: .9;
  letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.loader__name .ch { position: relative; display: inline-block; color: transparent; animation: letterIn .7s var(--ease) backwards; animation-delay: var(--d); }
.loader__name .ch b { position: absolute; left: 50%; top: 0; font-weight: 400; color: rgba(241, 232, 218, .3); transform: translateX(-50%); }
.loader__name .ch.is-ok b { display: none; }
.loader__name .ch.is-ok { color: var(--ink); animation: letterIn .7s var(--ease) backwards, lock .45s var(--ease); animation-delay: var(--d), 0s; }
.loader__name .ch.is-last.is-ok { color: var(--accent); }
.loader__name .sp { display: inline-block; width: .22em; }
.loader.is-out .loader__name .ch { transform: translateY(-30%); opacity: 0; transition: transform .6s var(--ease), opacity .5s; }
@keyframes letterIn { from { opacity: 0; transform: translateY(45%); filter: blur(10px); } }
@keyframes lock { 0% { text-shadow: 0 0 0 transparent; } 35% { text-shadow: 0 0 24px rgba(240, 166, 74, .9); transform: scale(1.08); } 100% { text-shadow: 0 0 0 transparent; } }
.loader__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.loader__label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.loader__pct { font-family: var(--font-display); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.loader__pct b { font-weight: 400; display: inline-block; min-width: 2.2ch; text-align: right; }
.loader__bar { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.loader__bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--amber)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgba(232, 53, 42, .7); }

/* ---------- Livelli di fondo ---------- */
.backdrop { position: fixed; inset: 0; z-index: -2; background: var(--bg); overflow: hidden; }
.backdrop video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%;
  opacity: calc(var(--hero-o, 1) * .9); transform: scale(calc(1.04 + var(--hero-s, 0) * .08)); will-change: opacity, transform;
}
.backdrop::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,11,9,.88) 0%, rgba(14,11,9,.45) 42%, rgba(14,11,9,.05) 75%),
    linear-gradient(0deg, rgba(14,11,9,.95) 0%, rgba(14,11,9,0) 45%);
}
.stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Social (icone ovunque) ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.social {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
  transition: transform .35s var(--ease), border-color .3s, color .3s, box-shadow .3s;
}
.social::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent);
  transform: translateY(102%); transition: transform .45s var(--ease);
}
/* Colori del social (marchio o scelti nel CMS) arrivano dal JS come variabili */
.social::before { background: var(--sb, var(--accent)); }
.social:hover, .social:focus-visible { transform: translateY(-3px); border-color: transparent; color: var(--si, #fff); box-shadow: 0 10px 28px color-mix(in srgb, var(--sg, var(--accent)) 45%, transparent); }
.social:hover::before, .social:focus-visible::before { transform: none; }
.social:hover .ico { animation: wiggle .6s var(--ease); }
@keyframes wiggle { 30% { transform: rotate(-14deg) scale(1.18); } 60% { transform: rotate(10deg) scale(1.05); } 100% { transform: none; } }
.socials--icons .social { width: 40px; height: 40px; justify-content: center; }
.socials--icons .ico { width: 18px; height: 18px; }
.socials--pills .social { padding: 11px 20px 11px 14px; font-weight: 600; font-size: 15px; }
/* Ogni nuovo social entra con lo stesso effetto, uno dopo l'altro */
.socials--pills.is-in .social, .menu-open .menu__foot .social { animation: pop .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + .15s); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.9); } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter); transition: transform .5s var(--ease), background .3s, opacity .8s var(--ease);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: rgba(14, 11, 9, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__logo { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav__links a { color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
/* "In live": bottone bianco con il pallino rosso che lampeggia, porta dritto alla diretta */
/* --lc = colore della piattaforma (Twitch viola, YouTube rosso…), impostato dal sito in base al link */
.live { --lc: #e8352a; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px 0 12px; border-radius: 999px; color: #0b0b0b;
  font: 700 13px/1 var(--font-body); letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(110deg, #fff 42%, color-mix(in srgb, var(--lc) 20%, #fff) 50%, #fff 58%) 130% 0 / 260% 100% no-repeat, #fff;
  animation: liveSheen 4s ease-in-out 1s infinite, liveGlow 2.4s ease-out infinite;
  transition: transform .45s var(--ease); will-change: transform; }
.live:hover { transform: translateY(-2px) scale(1.04); }
/* Le regole generiche dei link del menu non devono togliere la transizione al bottone */
.nav__links a.live, .nav__links a.live:hover { color: #0b0b0b; transition: transform .45s var(--ease); }
.live--nav:not([hidden]) { animation: livePop .7s var(--ease) backwards, liveSheen 4s ease-in-out 1s infinite, liveGlow 2.4s ease-out infinite; }
.live > i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #e8352a; animation: liveDot 1.2s ease-in-out infinite; }
.live > i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #e8352a; animation: livePing 1.2s ease-out infinite; }
.live [data-live-label] { display: block; padding-top: 1px; }
/* Logo della piattaforma, separato da un filo e centrato sulla scritta */
.live__ico { display: grid; place-items: center; height: 18px; padding-left: 9px; border-left: 1px solid rgba(11, 11, 11, .14); color: var(--lc); }
.live__ico .ico { display: block; width: 16px; height: 16px; animation: liveIco 2.4s ease-in-out infinite; }
.live__ico svg { display: block; }
@keyframes liveDot { 50% { opacity: .35; } }
@keyframes livePing { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
@keyframes liveSheen { 0% { background-position: 130% 0, 0 0; } 45%, 100% { background-position: -30% 0, 0 0; } }
@keyframes liveGlow {
  0% { box-shadow: 0 6px 22px rgba(255, 255, 255, .12), 0 0 0 0 color-mix(in srgb, var(--lc) 55%, transparent); }
  100% { box-shadow: 0 6px 22px rgba(255, 255, 255, .12), 0 0 0 10px color-mix(in srgb, var(--lc) 0%, transparent); }
}
@keyframes liveIco { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18) rotate(-6deg); } 24% { transform: scale(1); } }
@keyframes livePop { from { opacity: 0; transform: translateY(-6px) scale(.85); } }
/* Menu mobile: dentro la scheda del lettore, sulla riga dello stato */
.live--menu { flex: none; height: 28px; gap: 7px; padding: 0 9px 0 10px; font-size: 12px; }
.live--menu .live__ico { height: 14px; padding-left: 7px; }
.live--menu .live__ico .ico { width: 14px; height: 14px; }
.nav__socials { gap: 6px; }
.nav__socials .social { width: 36px; height: 36px; }
.nav__cta { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--ink); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.nav__cta:hover { background: var(--ink); color: var(--bg); }
.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; border-radius: 50%; }
.nav__burger i { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease); }
.nav__burger i:first-child { top: 18px; } .nav__burger i:last-child { top: 25px; }
.menu-open .nav__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .nav__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu mobile */
.menu {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column;
  padding: 84px var(--gutter) 28px;
  background: radial-gradient(120% 60% at 100% 0%, rgba(232, 53, 42, .18), transparent 60%), var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; overflow-y: auto;
}
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .35s; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(30px, 9vw, 46px); line-height: 1.12; text-transform: uppercase;
  opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s;
}
.menu__nav a small { font: 600 12px/1 var(--font-body); color: var(--accent); letter-spacing: .1em; min-width: 20px; }
.menu__nav a:active { color: var(--amber); }
.menu-open .menu__nav a { opacity: 1; transform: none; }
.menu-open .menu__nav a:nth-child(2) { transition-delay: .04s; } .menu-open .menu__nav a:nth-child(3) { transition-delay: .08s; }
.menu-open .menu__nav a:nth-child(4) { transition-delay: .12s; } .menu-open .menu__nav a:nth-child(5) { transition-delay: .16s; }
.menu-open .menu__nav a:nth-child(6) { transition-delay: .2s; } .menu-open .menu__nav a:nth-child(7) { transition-delay: .24s; }
.menu__deck {
  margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px;
  padding: 14px; border-radius: var(--r); background: rgba(23, 18, 15, .9); border: 1px solid var(--line);
  opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease) .25s, transform .5s var(--ease) .25s;
}
.menu-open .menu__deck { opacity: 1; transform: none; }
.menu__play { width: 52px; height: 52px; border-radius: 50%; }
.menu__now { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.menu__now-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.menu__now strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.eq-bars i { flex: 1; height: 100%; border-radius: 3px 3px 1px 1px; background: linear-gradient(0deg, var(--accent), var(--amber)); transform-origin: bottom; transform: scaleY(.12); }
.mini-vinyl {
  position: relative; display: block; width: 52px; height: 52px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #0b0a09 0 1.5px, #1d1916 1.5px 3px); box-shadow: 0 0 0 1px #3a322b, 0 6px 18px rgba(0, 0, 0, .5);
}
.mini-vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent, rgba(255,255,255,.12) 8%, transparent 18%, transparent 50%, rgba(255,255,255,.08) 58%, transparent 68%); }
.mini-vinyl i { position: absolute; inset: 34%; border-radius: 50%; background: var(--accent); animation: spin 1.8s linear infinite paused; }
.mini-vinyl i::after { content: ''; position: absolute; left: 50%; top: 10%; width: 2px; height: 30%; background: rgba(255,255,255,.7); transform: translateX(-50%); }
.is-playing .mini-vinyl i { animation-play-state: running; }
.menu__foot { margin-top: 14px; gap: 10px; }
.menu__foot .social { width: 46px; height: 46px; }
.menu__foot .ico { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 120px var(--gutter) calc(var(--player-h) + 48px); }
.hero__inner { width: 100%; }
.hero__kicker { margin-bottom: 14px; }
.hero__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; margin: 0;
  font-size: clamp(88px, 15.5vw, 280px); line-height: .84; letter-spacing: -.01em;
}
/* Il riquadro che nasconde la salita delle lettere ha un filo di margine in più,
   altrimenti con l'interlinea stretta taglia le curve di C e O. */
.hero__title .line { display: block; overflow: hidden; padding: .08em .02em .05em; margin: -.08em -.02em -.05em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.hero__title .line:nth-child(2) > span { transition-delay: .12s; color: var(--accent); }
.is-ready .hero__title .line > span { transform: none; }
.hero__row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
.play { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.play__dot { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform .3s var(--ease); flex: none; }
.play__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ripple 2.4s var(--ease) infinite; }
.is-playing .play__dot::after { animation-duration: .98s; }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.play__dot .i-play, .play__dot .i-pause { width: 18px; height: 18px; }
.play:hover .play__dot { transform: scale(1.08); }
.play__txt { display: flex; flex-direction: column; line-height: 1.25; }
.play__txt b { font-size: 17px; }
.play__txt small { color: var(--muted); font-size: 14px; }
.hero__next { display: flex; flex-direction: column; gap: 4px; padding-left: 28px; border-left: 1px solid var(--line); }
.hero__next strong { font-weight: 600; font-size: 17px; }
.hero__next:hover strong { color: var(--amber); }
.hero__socials { margin-left: auto; }

/* ---------- Striscia date ---------- */
.ticker { display: block; position: relative; overflow: hidden; background: var(--accent); color: #fff; }
.ticker::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen 4.5s var(--ease) infinite;
}
@keyframes sheen { 55%, 100% { transform: translateX(100%); } }
.ticker__track { display: flex; justify-content: center; height: 58px; }
.ticker__track.mq { justify-content: flex-start; }
.mq__group { display: flex; align-items: center; flex: none; }
.ticker__item { display: inline-flex; align-items: center; gap: 16px; height: 58px; padding: 0 20px; white-space: nowrap; }
.ticker__tag {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px;
  background: #fff; color: var(--accent); font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.ticker__tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
/* Anton ha il corpo alto: line-height 1 e un filo di padding lo centrano sulla stessa linea della pillola */
.ticker__date, .ticker__where { font-family: var(--font-display); font-size: 22px; line-height: 1; padding-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
.ticker__where { opacity: .85; }
.ticker__sep { font-size: 13px; line-height: 1; opacity: .7; }
.ticker__track:not(.mq) .ticker__sep { display: none; }
.ticker:hover .ticker__where { opacity: 1; }

/* ---------- Marquee generico ---------- */
.mq { display: flex; overflow: hidden; }
.mq > .mq__group { animation: mq var(--mq-dur, 30s) linear infinite; }
.mq--reverse > .mq__group { animation-direction: reverse; }
.mq:hover > .mq__group { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }

/* ---------- Sezioni ---------- */
.section { position: relative; padding: clamp(88px, 12vw, 180px) var(--gutter); background: var(--veil); }
.section.events, .section.radio { background: transparent; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@keyframes slideIn { from { opacity: 0; transform: translateX(48px); } }

/* Chi è */
.about { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.about__photo { margin: 0; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r); background: var(--accent); box-shadow: 0 30px 80px rgba(232, 53, 42, .22); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--ease); }
.about__photo:hover img { transform: scale(1.03); }
.about__text h2 { margin-bottom: 24px; }
.about__lead { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.18; font-weight: 500; letter-spacing: -.01em; margin: 0 0 24px; }
.about__body { color: var(--muted); font-size: 19px; margin: 0 0 32px; max-width: 46ch; }
.about__body p { margin: 0 0 16px; }
.about__body p:last-child { margin-bottom: 0; }
.about__genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; font-weight: 600; font-size: 15px; }
.about__genres span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(241, 232, 218, .04); }
.about__tagline { font-family: var(--font-display); font-size: clamp(36px, 4vw, 60px); text-transform: uppercase; color: var(--amber); margin: 0; line-height: 1; }
/* Spettro sonoro e riferimenti (dall'EPK) */
.about__facts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 0 0 24px; }
.about__fact { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(14, 11, 9, .5); }
.about__fact .label { margin-bottom: 16px; }
.spectrum, .refs { list-style: none; margin: 0; padding: 0; }
.spectrum li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.spectrum li + li { margin-top: 14px; }
.spectrum span { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.spectrum em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Barra a tacche come nel press kit: la maschera taglia sia il fondo che il riempimento */
.spectrum i { grid-column: 1 / -1; position: relative; height: 12px; background: rgba(241, 232, 218, .1);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px); mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px); }
.spectrum b { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--amber), var(--accent));
  transition: width 1.4s var(--ease) calc(.15s + var(--i) * .15s); }
.is-in .spectrum b { width: var(--lv); }
.refs { display: flex; flex-direction: column; gap: 9px; }
.refs li { display: flex; gap: 8px; font-family: var(--font-display); font-size: 21px; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.refs li::before { content: '+'; flex: none; color: var(--accent); }
.about__quote { grid-column: 1 / -1; margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); }
.about__quote p { margin: 0 0 8px; font-size: 19px; line-height: 1.45; font-style: italic; color: var(--ink); }
/* Desktop: testo a tutta colonna e citazione su una riga sola (la dimensione la regola fitLine) */
@media (min-width: 861px) {
  .about { row-gap: clamp(36px, 4vw, 64px); }
  .about__body { max-width: none; }
  .about__quote p { white-space: nowrap; font-size: clamp(16px, 1.6vw, 24px); }
}
.about__quote cite { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Musica ---------- */
.music { background: var(--veil-2); }
.music__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.music__note { color: var(--muted); margin: 0; white-space: nowrap; }
.music__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .2s, color .2s, border-color .2s, transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--ink); color: var(--bg); }
.btn--line { border: 1px solid var(--line); }
.btn--line:hover { border-color: var(--ink); }
.btn .ico { width: 18px; height: 18px; }
.btn--line:hover .ico { color: #ff5500; }

/* Deck: giradischi con il brano in esecuzione */
.deck {
  position: sticky; top: 96px; padding: 20px 22px 24px; border-radius: var(--r);
  background: rgba(14, 11, 9, .62); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.beatline { display: flex; align-items: center; gap: 2px; height: 30px; margin-bottom: 10px; }
.beatline i { flex: 1; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: center; }
.is-playing .beatline i { box-shadow: 0 0 8px rgba(232, 53, 42, .6); }
.deck__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.deck__state { display: inline-flex; align-items: center; gap: 10px; }
.deck__rpm { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 16px; height: 12px; }
.eq b { flex: 1; height: 25%; border-radius: 1px; background: currentColor; }
.deck.is-on .eq b, .track.is-live .eq b { animation: eq .9s ease-in-out infinite alternate; }
.eq b:nth-child(2) { animation-delay: -.35s !important; } .eq b:nth-child(3) { animation-delay: -.6s !important; } .eq b:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 45%; } }

.turntable {
  position: relative; display: block; width: 100%; max-width: 420px; aspect-ratio: 1 / .9; margin: 0 auto 22px;
  border-radius: 22px; background: linear-gradient(145deg, #2b231d, #120e0b 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 22px 50px rgba(0, 0, 0, .5);
}
.turntable__platter {
  position: absolute; left: 5%; top: 50%; width: 78%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, #3a332d 0 60%, #1b1613 61%); box-shadow: 0 8px 22px rgba(0, 0, 0, .6), inset 0 0 0 2px #0b0908;
}
.turntable__platter::after {
  content: ''; position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent, rgba(255,255,255,.1) 7%, transparent 16%, transparent 50%, rgba(255,255,255,.07) 57%, transparent 66%);
}
.record {
  position: absolute; inset: 3%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #0b0a09 0 1.4px, #191513 1.4px 2.8px);
  box-shadow: inset 0 0 0 2px #000; animation: spin 1.8s linear infinite paused;
}
.deck.is-on .record { animation-play-state: running; }
.record__label {
  position: absolute; inset: 33%; border-radius: 50%; background: var(--accent) center / cover no-repeat;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .5);
}
.record__label:not(.has-art)::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.record__label i { position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; border-radius: 50%; background: #d9d0c4; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #000; }
.deck.is-swap .record__label { animation: labelIn .7s var(--ease); }
@keyframes labelIn { from { transform: scale(.6) rotate(-90deg); opacity: 0; } }
.tonearm { position: absolute; left: 88%; top: 12%; width: 0; height: 64%; transform-origin: 0 0; transform: rotate(-4deg); z-index: 2; }
/* L'angolo lo muove il JS; qui solo il sollevamento (ombra più lunga, testina più vicina) */
.tonearm__arm, .tonearm__head { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tonearm.is-lifted .tonearm__arm { transform: translate(-1px, -2px); box-shadow: 10px 16px 16px rgba(0, 0, 0, .4); }
.tonearm.is-lifted .tonearm__head { transform: rotate(-16deg) translate(-2px, -5px) scale(1.08); box-shadow: 8px 14px 14px rgba(0, 0, 0, .45); }
.tonearm__pivot { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #efe7dc, #8d8379 60%, #3b342e); box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.tonearm__pivot::before { content: ''; position: absolute; left: 50%; top: -26px; width: 16px; height: 22px; border-radius: 4px; background: linear-gradient(90deg, #6f665e, #cfc6bb, #6f665e); transform: translateX(-50%); }
.tonearm__arm { position: absolute; left: -3px; top: 0; width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #8b8178, #ece5db, #8b8178); box-shadow: 4px 6px 10px rgba(0, 0, 0, .45); }
.tonearm__head { position: absolute; left: -10px; bottom: -18px; width: 20px; height: 30px; border-radius: 4px 4px 6px 6px; background: linear-gradient(90deg, #2a2420, #4a413a); transform: rotate(-16deg); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }
.tonearm__head::after { content: ''; position: absolute; left: 6px; bottom: -3px; width: 4px; height: 6px; border-radius: 1px; background: var(--amber); }
.turntable__led { position: absolute; left: 6%; bottom: 6%; width: 8px; height: 8px; border-radius: 50%; background: #3a2a22; transition: background .3s, box-shadow .3s; }
.deck.is-on .turntable__led { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.turntable:hover .record__label { filter: brightness(1.1); }

.deck__info p { color: var(--muted); margin: 6px 0 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marquee-line { display: flex; overflow: hidden; white-space: nowrap; }
.marquee-line h3 { flex: none; margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.08; }
.marquee-line.is-scrolling { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); }
.marquee-line.is-scrolling h3 { padding-right: 48px; animation: mq var(--mq-dur, 12s) linear infinite; }
.deck.is-swap .marquee-line:not(.is-scrolling) h3, .deck.is-swap .deck__info p { animation: titleIn .6s var(--ease); }
@keyframes titleIn { from { opacity: 0; transform: translateY(14px); } }
.deck__progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 18px; }
.deck__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }
.deck__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Lista brani */
.crate { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.track {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 40px minmax(0, 1fr) 42px; align-items: center; gap: 14px;
  padding: 12px 12px 12px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(241, 232, 218, .025); cursor: pointer;
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.crate:not(.is-in) .track { opacity: 0; }
.crate.is-in .track { animation: slideIn .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 65ms); }
.track::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(240, 166, 74, .14) 50%, transparent 65%); transform: translateX(-100%);
}
.track:hover::before { transform: translateX(100%); transition: transform .9s var(--ease); }
.track::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--amber)); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .3s linear; }
.track:hover { transform: translateX(6px); background: rgba(241, 232, 218, .06); border-color: rgba(241, 232, 218, .24); }
.track.is-active { border-color: rgba(232, 53, 42, .55); background: linear-gradient(90deg, rgba(232, 53, 42, .16), rgba(232, 53, 42, .03)); box-shadow: 0 10px 30px rgba(232, 53, 42, .12); }
.track__num { position: relative; display: grid; place-items: center start; height: 20px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.track__num .eq { display: none; color: var(--amber); width: 18px; height: 14px; }
.track.is-active .track__num span { display: none; }
.track.is-active .track__num .eq { display: inline-flex; }
.track__meta { min-width: 0; }
.track__title { display: block; font-weight: 600; font-size: 17px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s, transform .35s var(--ease); }
.track__artist { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track:hover .track__title, .track.is-active .track__title { color: var(--amber); }
/* Link Tidal accanto al brano (solo se c'è) */
.track.has-tidal { grid-template-columns: 40px minmax(0, 1fr) auto 42px; }
.track__tidal { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; transition: color .25s, border-color .25s, background .25s, transform .3s var(--ease); }
.track__tidal .ico { width: 16px; height: 16px; }
.track__tidal:hover, .track__tidal:focus-visible { color: #0b0b0b; background: #33ffee; border-color: #33ffee; transform: translateY(-1px); }
.btn--tidal:hover .ico { color: #33ffee; }
.track__btn { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: background .25s, color .25s, transform .35s var(--ease), border-color .25s; }
.track__btn .i-play { width: 11px; height: 11px; }
.track__btn .i-stop { width: 12px; height: 12px; }
.track:hover .track__btn, .track.is-active .track__btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.track:hover .track__btn { transform: scale(1.1); }
.track.is-live .track__btn::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--accent); animation: ripple .98s var(--ease) infinite; }
.music__all { display: inline-flex; gap: 8px; margin-top: 24px; font-weight: 600; color: var(--muted); }
.music__all span { transition: transform .3s var(--ease); }
.music__all:hover { color: var(--ink); }
.music__all:hover span { transform: translateX(5px); }

/* ---------- Date ---------- */
.events .display { margin-bottom: clamp(36px, 5vw, 72px); }
.events__list { list-style: none; margin: 0; padding: 0; max-width: 1100px; display: grid; gap: 12px; }
.event {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center;
  padding: 24px 26px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(14, 11, 9, .62);
  transition: transform .35s var(--ease), border-color .3s;
}
.event:hover { transform: translateY(-3px); border-color: rgba(241, 232, 218, .28); }
.event.is-next { border-color: rgba(232, 53, 42, .5); }
.event__date { font-family: var(--font-display); text-transform: uppercase; line-height: .9; }
.event__date b { display: block; font-weight: 400; font-size: clamp(52px, 5vw, 76px); }
/* Mese nello stesso carattere del giorno della settimana, staccato dal numero */
.event__month { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.event__day { display: block; color: var(--amber); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; margin-bottom: 6px; }
.event__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 3vw, 44px); line-height: 1; margin: 0 0 6px; }
.event__where { color: var(--muted); margin: 0; font-weight: 500; }
.event__cta { white-space: nowrap; }
.event__cta.is-off { opacity: .55; pointer-events: none; }
/* Sold out: la data si spegne e un nastro la attraversa per tutta la lunghezza */
.event { position: relative; overflow: hidden; }
/* Stessa resa per i tre stati: data spenta + nastro. Cambiano colore del nastro e barratura. */
.event.is-off :is(.event__date, .event__title, .event__where, .event__cta) { opacity: .45; }
.event.is-soldout .event__title, .event.is-cancelled .event__title { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--accent); }
.event.is-cancelled .event__title { text-decoration-color: var(--ink); }
.event.is-postponed .event__date b { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--amber); }
/* Nota sullo stato: riga a tutta larghezza in fondo alla card, su fondo pieno, sempre sopra il nastro */
.event__note { grid-column: 1 / -1; justify-self: start; position: relative; z-index: 2; margin: -10px 0 0; padding: 8px 14px;
  border-radius: 999px; background: #0e0b09; border: 1px solid rgba(240, 166, 74, .45); color: var(--amber); font-size: 14px; font-weight: 600; }
.event__note::before { content: '→ '; }
/* Con la nota il nastro sale sulla riga di data e titolo */
.event.has-note .tape { top: calc(50% - 26px); }
.tape { position: absolute; left: -6%; right: -6%; top: 50%; height: 64px; display: flex; align-items: center; overflow: hidden; pointer-events: none;
  background: var(--accent); color: #fff; transform: translateY(-50%) rotate(-2.5deg); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
/* Ogni gruppo è più largo di qualsiasi schermo: il giro non lascia mai buchi */
.tape__track { display: flex; flex: none; animation: tape 26s linear infinite; will-change: transform; }
.tape__group { display: flex; flex: none; }
.tape__group span { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; font-family: var(--font-display); font-size: 36px; line-height: 1; padding-top: 3px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.tape__group i { font-style: normal; font-size: 16px; opacity: .8; }
@keyframes tape { to { transform: translateX(-50%); } }
.event.is-postponed .tape { background: var(--amber); color: #1a1008; transform: translateY(-50%) rotate(2deg); }
.event.is-cancelled .tape { background: var(--ink); color: #0e0b09; }
.event.is-postponed .tape__track { animation-direction: reverse; }
.ticker__sold { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #0e0b09; color: #fff; font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
/* Una sola linea che barra data e locale insieme */
.ticker__main { position: relative; display: inline-flex; align-items: center; gap: inherit; }
.ticker__item.is-postponed .ticker__sold { background: var(--amber); color: #1a1008; }
.ticker__item.is-cancelled .ticker__sold { background: var(--ink); color: #0e0b09; }
.ticker__item.is-soldout .ticker__main::after, .ticker__item.is-cancelled .ticker__main::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; margin-top: -1px; border-radius: 2px; background: #0e0b09; }
.hero__next.is-soldout strong { color: var(--muted); }
.event.is-next .event__title::after { content: 'Prossima'; display: inline-block; vertical-align: middle; margin-left: 14px; padding: 5px 10px; border-radius: 999px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; background: var(--amber); color: var(--bg); }
.events__empty { padding: 32px; border-radius: var(--r); border: 1px solid var(--line); font-size: 22px; }
.events__empty a { color: var(--amber); }

/* ---------- Locali ---------- */
.venues { overflow: hidden; }
.venues__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.venues__note { color: var(--muted); margin: 0; white-space: nowrap; }
.logo-marquee, .name-marquee { margin: 0 calc(-1 * var(--gutter)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-marquee { display: flex; overflow: hidden; padding: 8px 0; }
.logo-marquee .mq__group { gap: 18px; padding-right: 18px; align-items: stretch; }
.logo-marquee:not(.mq) .mq__group { margin: 0 auto; }
.logo-marquee:not(.is-in) .venue { opacity: 0; }
.logo-marquee.is-in .venue { animation: slideIn .9s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 60ms); }
.venue { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 230px; }
.venue__logo {
  --pad-x: 24px; --pad-y: 20px;
  position: relative; display: block; width: 100%; height: 150px; border-radius: var(--r);
  background: #050404; border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .4s var(--ease), box-shadow .3s, filter .4s;
  /* A riposo in bianco e nero tutto il riquadro, così lo sfondo colorato del logo resta uniforme */
  filter: grayscale(1);
}
/* Area fissa dentro il riquadro: qualsiasi proporzione ci entra intera, centrata e senza deformarsi */
.venue__logo img {
  position: absolute; left: var(--pad-x); top: var(--pad-y); width: calc(100% - 2 * var(--pad-x)); height: calc(100% - 2 * var(--pad-y));
  max-width: none; object-fit: contain; object-position: center;
  filter: brightness(1.15); opacity: .82; transition: filter .4s, opacity .4s, transform .5s var(--ease);
}
.venue__logo--light { background: var(--ink); }
.venue__logo--light img { filter: grayscale(1); }
.venue__name { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .3s; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venue:hover .venue__logo { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(232, 53, 42, .2); filter: none; }
.venue:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.venue:hover .venue__name { color: var(--ink); }
.name-marquee { display: flex; overflow: hidden; margin-top: clamp(28px, 4vw, 48px); }
.name-marquee span { display: inline-flex; align-items: center; gap: .5em; padding-right: .5em; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(48px, 7vw, 112px); line-height: 1; white-space: nowrap; color: rgba(241, 232, 218, .1); }
.name-marquee i { font-style: normal; font-size: .35em; color: var(--accent); opacity: .7; }

/* ---------- Foto: scorrimento orizzontale ---------- */
.gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); }
.gallery__nav { display: flex; gap: 10px; }
.round-btn { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease), opacity .25s; }
.round-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); transform: scale(1.06); }
.round-btn:disabled { opacity: .3; cursor: default; }
.gallery__rail {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding: 0 var(--gutter); cursor: grab;
}
.gallery__rail::-webkit-scrollbar { display: none; }
.gallery__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.shot { position: relative; flex: none; margin: 0; height: min(64vh, 600px); aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--bg-2); scroll-snap-align: start; }
.gallery__rail:not(.is-in) .shot { opacity: 0; }
.gallery__rail.is-in .shot { animation: slideIn 1s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.shot img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; transition: transform 1.2s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot figcaption {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(14, 11, 9, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.shot figcaption span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); font-size: 11px; }
.gallery__progress { height: 2px; margin-top: 24px; border-radius: 2px; background: var(--line); overflow: hidden; }
.gallery__progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.08); transition: transform .2s; }

/* ---------- Radio ---------- */
.radio { display: grid; place-items: center; min-height: 80vh; }
.radio__box {
  width: min(760px, 100%); padding: clamp(28px, 5vw, 56px); text-align: center; border-radius: 28px;
  background: rgba(23, 18, 15, .7); border: 1px solid var(--line); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.radio__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.radio__onair { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.radio__onair i { width: 10px; height: 10px; border-radius: 50%; background: #4a3f37; }
.radio__onair.is-live { color: var(--ink); }
.radio__onair.is-live i { background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.radio__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(88px, 16vw, 220px); line-height: .9; margin: 24px 0 20px; }
.radio__dial {
  position: relative; height: 40px; margin: 0 auto 28px; max-width: 520px;
  background: repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 12px) center / 100% 14px no-repeat,
              repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 60px) center / 100% 26px no-repeat;
  opacity: .6;
}
.radio__needle { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; left: 20%; background: var(--accent); animation: tune 7s var(--ease) infinite alternate; }
@keyframes tune { 0% { left: 18%; } 40% { left: 46%; } 55% { left: 44%; } 100% { left: 78%; } }
.radio__text { color: var(--muted); font-size: 19px; max-width: 38ch; margin: 0 auto 8px; }
.radio__box .btn { margin-top: 20px; }

/* ---------- Booking ---------- */
.booking { text-align: center; background: var(--veil-2); }
.booking__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(96px, 20vw, 340px); line-height: .82; margin: 0 0 28px; color: var(--accent); }
.booking__text { max-width: 40ch; margin: 0 auto 64px; color: var(--muted); font-size: 19px; }
.booking__socials { justify-content: center; margin-top: 56px; }
/* Scheda tecnica */
.rider { max-width: 1040px; margin: 88px auto 0; text-align: left; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(232, 53, 42, .08), rgba(14, 11, 9, .6) 45%); }
.rider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.rider__title { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 56px); line-height: .95; }
.rider__head .label { order: 2; }
.rider__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: var(--r-sm); overflow: hidden; background: var(--line); margin-bottom: 22px; }
.rider__stat { background: #0f0c0a; padding: 16px 18px; }
.rider__stat small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.rider__stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.rider__note { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 500; text-transform: none; color: var(--muted); }
.rider__gear { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rider__group { padding: 18px 20px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(14, 11, 9, .55); }
.rider__group h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rider svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rider__group ul { list-style: none; margin: 0; padding: 0; }
.rider__group li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.rider__group li:first-child { border-top: 0; }
.gear__text { min-width: 0; }
.gear__text small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gear__text b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: .01em; }
.gear__text > span { margin-left: 8px; font-size: 13px; color: var(--muted); }
.rider__group em { flex: none; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.rider__must { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 18px; border-radius: var(--r-sm);
  background: rgba(232, 53, 42, .12); border: 1px solid rgba(232, 53, 42, .4); font-weight: 600; }
.rider__must svg { width: 26px; height: 26px; }
.rider__must em { display: inline-block; margin-right: 10px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }
.rider__press:empty { display: none; }
.rider__press { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.rider__press b { color: var(--ink); font-weight: 600; }

/* Bottone DM: anello che gira, luce che segue il mouse, aereo di carta, fumetto "sta scrivendo" */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dm-wrap { position: relative; display: inline-block; }
.dm { position: relative; isolation: isolate; display: inline-block; padding: 3px; border-radius: 999px; transition: transform .3s var(--ease); }
.dm__ring {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--a), var(--accent), #ff2bd6, var(--amber), #7c4dff, var(--accent));
  animation: ring 3.2s linear infinite;
}
.dm__ring::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: inherit; filter: blur(18px); opacity: .5; transition: opacity .3s; }
.dm:hover .dm__ring { animation-duration: 1.2s; }
.dm:hover .dm__ring::after { opacity: .9; }
@keyframes ring { to { --a: 360deg; } }
.dm__inner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 14px 34px 14px 14px; border-radius: inherit;
  background: var(--bg); font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); line-height: 1; text-transform: uppercase; letter-spacing: .03em;
}
.dm__inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) 50%, rgba(232, 53, 42, .4), transparent 55%); opacity: 0; transition: opacity .3s; }
.dm:hover .dm__inner::before { opacity: 1; }
.dm__icon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; overflow: hidden; }
.dm__icon svg { width: 24px; height: 24px; }
.dm:hover .dm__icon svg, .dm.is-sent .dm__icon svg, .dm-wrap.is-auto .dm__icon svg { animation: fly 1s var(--ease); }
.dm-wrap.is-auto .dm__icon svg { animation: fly 1s var(--ease) 1s, fly 1s var(--ease) 5s; }
@keyframes fly {
  0% { transform: none; }
  40% { transform: translate(34px, -34px) rotate(12deg); opacity: 0; }
  41% { transform: translate(-34px, 34px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.dm__text { position: relative; padding-top: 2px; }
.dm__arrow { position: relative; font-family: var(--font-body); font-size: .7em; transition: transform .35s var(--ease); }
.dm:hover .dm__arrow { transform: translate(4px, -4px) rotate(8deg); }
.dm-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 16px); display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--ink); color: var(--bg); white-space: nowrap;
  font-size: 13px; font-weight: 600; pointer-events: none;
  opacity: 0; transform: translate(-50%, 10px) scale(.9); transform-origin: 0 100%; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.dm-bubble span { margin-right: 4px; }
.dm-bubble i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: typing 1s infinite; }
.dm-bubble i:nth-of-type(2) { animation-delay: .15s; } .dm-bubble i:nth-of-type(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.dm-wrap:hover .dm-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dm-wrap.is-auto .dm-bubble { animation: bubble 5s var(--ease) infinite; }
@keyframes bubble { 0%, 12% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 20%, 70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80%, 100% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }

/* ---------- Footer ---------- */
.footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 28px var(--gutter) calc(var(--player-h) + 40px); border-top: 1px solid var(--line); background: var(--bg);
  color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.footer__end { justify-self: end; display: flex; align-items: center; gap: 20px; }
.footer__top:hover { color: var(--ink); }
.footer__taste { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15px; }
.vinyl { width: 44px; height: 44px; animation: spin 2.4s linear infinite; filter: drop-shadow(0 0 10px rgba(232, 53, 42, .25)); }
.vinyl__label { fill: var(--accent); }
.is-playing .vinyl { animation-duration: 1.1s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Player ---------- */
.player {
  position: fixed; left: 50%; bottom: 14px; z-index: 60; transform: translateX(-50%);
  width: min(780px, calc(100% - 28px)); height: var(--player-h); overflow: hidden;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px;
  padding: 0 14px 0 8px; border-radius: 999px; background: rgba(23, 18, 15, .9); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 50px rgba(0,0,0,.5);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* Col menu aperto resta solo il lettore del menu; alla chiusura torna questo */
.menu-open .player { opacity: 0; transform: translate(-50%, 140%); pointer-events: none; }
.player__toggle { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transition: background .2s, color .2s, transform .3s var(--ease); }
.player__toggle:hover { background: var(--ink); color: var(--bg); transform: scale(1.06); }
.player__art { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3) center / cover no-repeat; animation: spin 4s linear infinite paused; }
.is-playing .player__art { animation-play-state: running; }
.player__art:not([style*="url"]) { display: none; }
/* Colonne fisse: se la copertina manca, le altre non scivolano di posto */
.player__toggle { grid-column: 1; } .player__art { grid-column: 2; } .player__info { grid-column: 3; }
.player__info { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.player__title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__artist { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__progress { width: 150px; height: 4px; border-radius: 4px; background: var(--line); cursor: pointer; position: relative; }
.player__progress::before { content: ''; position: absolute; inset: -10px 0; }
.player__progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--amber); }
.player__time { color: var(--muted); font-size: 12px; min-width: 34px; font-variant-numeric: tabular-nums; }
.player__sc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); transition: color .2s, background .2s; }
.player__sc:hover { color: #ff5500; background: rgba(255, 85, 0, .12); }
.sc-frame { position: fixed; width: 1px; height: 1px; left: -10px; bottom: 0; opacity: 0; pointer-events: none; border: 0; }
.sc-visible .sc-frame {
  left: 50%; transform: translateX(-50%); bottom: calc(var(--player-h) + 26px); z-index: 61; border-radius: var(--r-sm);
  width: min(780px, calc(100% - 28px)); height: 120px; opacity: 1; pointer-events: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__socials { display: none; }
}
@media (max-width: 1024px) {
  .music__grid { grid-template-columns: minmax(0, 1fr); }
  .deck { position: relative; top: 0; }
  .turntable { max-width: 360px; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav { padding: 12px var(--gutter); }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }

  .backdrop video { object-position: 50% 50%; }
  .backdrop::after { background: linear-gradient(0deg, rgba(14,11,9,.97) 8%, rgba(14,11,9,.5) 48%, rgba(14,11,9,.15) 78%); }
  .hero__title { font-size: min(27vw, 170px); }
  .hero__row { gap: 20px; }
  .hero__next { padding-left: 0; border-left: 0; width: 100%; padding-top: 18px; border-top: 1px solid var(--line); }
  .hero__socials { margin-left: 0; }
  .ticker__track, .ticker__item { height: 50px; }
  .ticker__date, .ticker__where { font-size: 19px; }
  .ticker__item { gap: 12px; padding: 0 14px; }
  .tape { height: 52px; }
  .tape__group span { font-size: 28px; gap: 18px; padding-right: 18px; }
  .about { grid-template-columns: 1fr; }
  .about__facts, .rider__gear { grid-template-columns: 1fr; }
  .rider { margin-top: 56px; }
  .rider__stats { grid-template-columns: 1fr; }
  .rider__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .rider__stat small { margin: 0; }
  .rider__stat b { font-size: 20px; text-align: right; }
  .about__photo { aspect-ratio: 4/4.4; }
  .music__head, .venues__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .venues .display { font-size: 12.5vw; white-space: nowrap; }
  .deck { padding: 16px 16px 20px; }
  .turntable { max-width: 300px; }
  .track { grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 10px; padding: 11px 10px 11px 14px; }
  .track.has-tidal { grid-template-columns: 30px minmax(0, 1fr) auto 40px; }
  .track__tidal { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .track__tidal span:not(.ico) { display: none; }
  .track__title { font-size: 16px; }
  .track__btn { width: 40px; height: 40px; }
  .track:hover { transform: none; }
  .event { grid-template-columns: 92px 1fr; gap: 6px 16px; padding: 20px 18px; }
  .event__cta { grid-column: 2; justify-self: start; margin-top: 10px; }
  .event__note { margin-top: 12px; font-size: 13px; }
  .event.has-note .tape { top: calc(50% - 30px); }
  .event.is-next .event__title::after { display: table; margin: 8px 0 0; }
  .venue { width: 170px; }
  .venue__logo { height: 116px; --pad-x: 18px; --pad-y: 16px; filter: none; }
  .venue__logo img { filter: none; opacity: 1; }
  .gallery__nav { display: none; }
  .gallery__rail { gap: 12px; }
  .shot { height: 58vh; max-height: 520px; }
  .booking__text { margin-bottom: 72px; }
  .dm__inner { gap: 14px; padding: 10px 26px 10px 10px; font-size: 24px; }
  .dm__icon { width: 46px; height: 46px; }
  .footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .footer__end { justify-self: center; flex-direction: column; gap: 16px; }
  .footer__taste { order: -1; font-size: 16px; }
  .vinyl { width: 52px; height: 52px; }
  .player { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; padding-right: 8px; border-radius: 22px; }
  .player__progress { position: absolute; left: 22px; right: 22px; bottom: 0; width: auto; height: 3px; }
  .player__time { display: none; }
}
@media (max-width: 420px) {
  .player__art { display: none; }
  .music__note, .venues__note { white-space: normal; }
}
@media (hover: none) {
  .venue__logo { filter: none; }
  .venue__logo img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .hero__title .line > span { opacity: 1; transform: none; }
  .loader { display: none; }
}