/* ============================================================
   MARY'S TATTOO STICK — «Der Sound im Studio» (dj.html)
   Direction: dj-direction.md (locked 11/08/2026).
   Revisione 12/08: hero in video, waveform → vinile 3D, playlist fuori.

   Arco (5 battute): hero CREMA col video velato di crema · manifesto
   CREMA · il piatto INK (qui scendono le luci) · la parete reel INK ·
   la CTA torna CREMA prima del footer. Il blocco scuro è uno solo e
   dura due sezioni: il vinile è il momento in cui la notte comincia.
   Il flip è guidato da check-section-theme-on-scroll (osmo): le
   sezioni dichiarano data-theme-section/data-bg-section, il body
   riceve data-theme-nav/data-bg-nav e cambia colore in transizione.

   Tutto il resto (tokens, .wrap, .section, .kicker, .display, .btn-*,
   nav, footer) viene da main.css. Easing = quella osmo del sito:
   cubic-bezier(0.625, 0.05, 0, 1). Spacing = osmo-scaling-system
   (rem legati a --size-font, già in main.css). Base 390px.

   Nota build: qui dentro MAI un url() verso la cartella assets — build.sh
   riscrive i path solo in main.css e FALLISCE se trova un riferimento
   relativo ad assets in un altro css. Le immagini stanno nell'HTML.
   ============================================================ */

/* ============================================================
   MOTORE DEL TEMA (check-section-theme-on-scroll)
   ============================================================ */
body.page-dj {
  background-color: var(--cream);
  color: var(--ink);
  transition: background-color 0.9s cubic-bezier(0.625,0.05,0,1),
              color 0.9s cubic-bezier(0.625,0.05,0,1);
}
body.page-dj[data-bg-nav="ink"] { background-color: var(--ink-section); }
body.page-dj[data-theme-nav="dark"] { color: var(--cream); }

.page-dj main { padding-top: 0; }
/* niente .page-sub su questa pagina: quella classe forza sfondo ink e
   padding-top 1rem sulla prima sezione, e la hero perderebbe l'aria
   sotto la barra della nav. */
.page-dj .section { background: transparent; }

/* primitive del sito ri-tinte quando il tema è scuro */
.page-dj[data-theme-nav="dark"] .kicker,
.page-dj[data-theme-nav="dark"] .section-num,
.page-dj[data-theme-nav="dark"] .i-gold,
.page-dj[data-theme-nav="dark"] .script--gold,
.page-dj[data-theme-nav="dark"] .reels__note span { color: var(--gold); }
.page-dj[data-theme-nav="dark"] .eyebrow-row { border-color: var(--line-gold); }
.page-dj .eyebrow-row { transition: border-color 0.9s cubic-bezier(0.625,0.05,0,1); }
.page-dj .kicker, .page-dj .section-num, .page-dj .i-gold {
  transition: color 0.9s cubic-bezier(0.625,0.05,0,1);
}

@media (prefers-reduced-motion: reduce) {
  body.page-dj, .page-dj .kicker, .page-dj .section-num, .page-dj .i-gold { transition: none; }
}

/* ============================================================
   1 — HERO  ·  video muto a tutta pagina + fit-text-to-width

   La sorgente è 9:16 e larga 406px: a 390 riempie tutto quasi 1:1.
   A 1440 invece, se il video coprisse l'intera larghezza, servirebbe
   un ingrandimento 3,5× e la copertura lascerebbe a vista solo una
   fascia del 35% dell'inquadratura — cioè un busto, senza testa e
   senza mani. Perciò da 768 il fotogramma occupa i due terzi destri
   del riquadro (ingrandimento 2,2×, e si vede dalla testa al
   controller) e il suo bordo sinistro si scioglie nella crema: la
   sezione resta al vivo su alto, destra e basso, e lei resta in
   quadro. Il velo è CREMA, non nero — la pagina apre «studio di
   giorno» e il titolo resta ink. Il grano tiene la morbidezza
   dell'ingrandimento nel registro della stampa.
   ============================================================ */
.dj-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: 7.5rem; padding-bottom: 3rem;
}
.dj-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--cream-deep); }
.dj-hero__still,
.dj-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 14%;
  filter: saturate(0.62) contrast(1.06) brightness(1.03);
}
/* il video sale solo quando ha davvero un fotogramma: sotto c'è la
   still vera, quindi non esiste il buco nero del primo paint */
.dj-hero__video { opacity: 0; }
.dj-hero.is-video-ready .dj-hero__video { opacity: 1; transition: opacity 0.8s ease; }

.dj-hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(247,243,236,0.97) 0%,
      rgba(247,243,236,0.86) 26%,
      rgba(247,243,236,0.62) 62%,
      rgba(247,243,236,0.9) 100%);
}
.dj-hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.dj-hero__inner { position: relative; z-index: 1; }
.dj-hero__kicker { display: inline-flex; margin-bottom: 1.6rem; }

/* fit-text-to-width: ogni riga è nowrap e viene scalata al px per
   riempire ESATTAMENTE la larghezza del suo contenitore. */
.dj-hero__line { display: block; width: 100%; }
.dj-hero__line + .dj-hero__line { margin-top: -0.06em; }
.dj-hero__title {
  font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.86; letter-spacing: -0.035em;
  font-size: 4rem; /* valore di partenza: lo script lo riscrive in px */
}
.dj-hero__title--gold { color: var(--gold-text); }

.dj-hero__grid { margin-top: 2.5rem; display: grid; gap: 2rem; }
.dj-hero__intro { font-weight: 300; font-size: 1.15rem; line-height: 1.45; max-width: 38ch; }
.dj-hero__intro em { font-style: normal; color: var(--gold-text); }
.dj-hero__script { margin-top: 1.4rem; font-size: 1.4rem; display: inline-block; transform: rotate(-2deg); }
.dj-hero__meta {
  margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  font-family: var(--ff-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(28,26,23,0.55);
}
.dj-hero__meta a { color: var(--gold-text); }

/* 390: il video è quasi 1:1 con la sorgente, quindi ci sta quasi
   intera — si abbassa solo un filo il punto di taglio. */
@media (max-width: 767px) {
  .dj-hero { padding-bottom: 4rem; min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .dj-hero__still, .dj-hero__video { object-position: 50% 20%; }
  .dj-hero__veil {
    background: linear-gradient(180deg,
      rgba(247,243,236,0.96) 0%,
      rgba(247,243,236,0.84) 30%,
      rgba(247,243,236,0.68) 58%,
      rgba(247,243,236,0.93) 100%);
  }
}
@media (min-width: 768px) {
  .dj-hero { padding-top: 9rem; padding-bottom: 5rem; min-height: 88svh; display: flex; flex-direction: column; justify-content: center; }
  .dj-hero__grid { grid-template-columns: minmax(0, 1fr) 0.85fr; gap: 3rem; align-items: end; }
  .dj-hero__intro { font-size: 1.3rem; }
  /* il fotogramma sta a destra e sborda: meno ingrandimento, e in
     quadro ci stanno testa, braccio e mani sul controller */
  .dj-hero__still, .dj-hero__video {
    left: auto; right: 0; width: 66%;
    object-position: 50% 6%;
    /* il bordo sinistro non deve esistere: si dissolve da solo,
       così il velo non deve fare due mestieri */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 34%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 34%);
  }
  /* il velo tiene crema pieno dove passa il titolo e si apre a
     destra; il bordo sinistro del video sparisce dentro la crema */
  .dj-hero__veil {
    background:
      linear-gradient(90deg,
        rgba(247,243,236,0.9) 0%,
        rgba(247,243,236,0.78) 40%,
        rgba(247,243,236,0.5) 62%,
        rgba(247,243,236,0.34) 100%),
      linear-gradient(180deg,
        rgba(247,243,236,0.62) 0%,
        rgba(247,243,236,0) 30%,
        rgba(247,243,236,0) 68%,
        rgba(247,243,236,0.72) 100%);
  }
}
@media (min-width: 1200px) {
  .dj-hero__still, .dj-hero__video { width: 58%; }
}

/* ============================================================
   2 — MANIFESTO  ·  highlight-text-on-scroll (scrub char-fade)
   ============================================================ */
.mani { padding-block: 4rem; }
.mani__text {
  font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 6.4vw, 3rem); line-height: 1.14; letter-spacing: -0.02em;
  max-width: 22ch;
}
.mani__text + .mani__text { margin-top: 1.2rem; }
.mani__text em { font-style: normal; }
@media (min-width: 768px) { .mani { padding-block: 6rem; } .mani__text { max-width: 26ch; } }

/* ============================================================
   3 — IL PIATTO  ·  vinile 3D, spin CSS + scrub GSAP

   Firma della pagina. Zero immagini nuove: il disco è dipinto in
   CSS (solchi in repeating-radial-gradient, etichetta oro, foro),
   il marchio del sito è l'unico file e sta nell'HTML.
   Gerarchia dei nodi — ognuno fa UNA cosa sola, così le trasform
   non si sovrascrivono:
     .vinyl__stage   prospettiva
     .vinyl__tilt    rotateX fisso (il piatto visto da davanti-sopra)
     .vinyl__scrub   ← GSAP: rotazione in scrub sullo scroll
     .vinyl__disc    ← CSS: giro lento infinito (il piatto acceso)
     .vinyl__sheen   luce FUORI dai nodi che girano: spazza il disco
   ============================================================ */
.vinyl { padding-top: 3rem; padding-bottom: 3.5rem; }

.vinyl__stage {
  position: relative; margin: 2rem auto 0;
  width: min(80vw, 21rem); aspect-ratio: 1;
  perspective: 900px;
}
.vinyl__glow {
  position: absolute; inset: -34%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(193,158,87,0.13) 0%, rgba(193,158,87,0.04) 44%, rgba(193,158,87,0) 66%);
}
.vinyl__tilt {
  position: absolute; inset: 0; z-index: 1;
  transform: rotateX(11deg);
  transform-style: preserve-3d;
}
.vinyl__scrub { position: absolute; inset: 0; will-change: transform; }

.vinyl__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #100e0c 0%, #0a0908 34%, #0d0b0a 62%, #080706 88%, #17130f 96%, #241d16 100%);
  box-shadow:
    0 1.6rem 3.2rem rgba(0,0,0,0.55),
    0 0 0 1px rgba(193,158,87,0.14),
    inset 0 0 3rem rgba(0,0,0,0.8);
  animation: vinyl-spin 16s linear infinite;
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.vinyl--still .vinyl__disc { animation-play-state: paused; }

/* i solchi: passo fitto sulla fascia esterna, liscio verso l'etichetta */
.vinyl__grooves {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.055) 0 1px,
      rgba(255,255,255,0) 1px 4px),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0.5) 0 2px,
      rgba(0,0,0,0) 2px 9px);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 19%, #000 21% 96%, transparent 97%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 19%, #000 21% 96%, transparent 97%);
}

/* etichetta: oro del sito, stampa in arco, marchio in filigrana */
.vinyl__label {
  position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 36% 30%, #ddbe7c 0%, var(--gold) 46%, var(--gold-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(20,18,16,0.22), 0 0 1.4rem rgba(193,158,87,0.22);
}
.vinyl__mark {
  position: absolute; width: 44%; height: auto;
  opacity: 0.17; filter: brightness(0); /* il logo oro diventa inchiostro sulla carta oro */
}
.vinyl__print { position: absolute; inset: 0; width: 100%; height: 100%; }
.vinyl__print text {
  font-family: var(--ff-mono); fill: rgba(20,18,16,0.78);
  text-transform: uppercase; letter-spacing: 0.24em;
}
.vinyl__print-a { font-size: 8px; }
.vinyl__print-b { font-size: 5.6px; fill: rgba(20,18,16,0.55); }
.vinyl__hole {
  position: absolute; left: 50%; top: 50%; width: 8%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--ink-section);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 0 0.3rem rgba(0,0,0,0.5);
}

/* la luce non gira col disco: sta qui fuori e lo spazza */
.vinyl__sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.85;
  background: conic-gradient(from 202deg at 50% 50%,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0.1) 26deg,
    rgba(255,255,255,0) 58deg,
    rgba(255,255,255,0) 176deg,
    rgba(255,255,255,0.07) 204deg,
    rgba(255,255,255,0) 234deg,
    rgba(255,255,255,0) 360deg);
}

/* braccio: una linea sola, come le linee fini del sito.
   Sta dentro .vinyl__tilt (stesso piano del piatto) ma fuori dal
   nodo che gira, e la testina appoggia davvero sui solchi. */
.vinyl__arm {
  position: absolute; right: 2.5%; top: 5%; z-index: 3;
  width: 7%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(221,190,124,0.85), rgba(168,133,63,0.5));
  box-shadow: 0 0 0 1px rgba(193,158,87,0.4), 0 0.35rem 0.9rem rgba(0,0,0,0.55);
}
.vinyl__arm-tube {
  position: absolute; left: 50%; top: 50%;
  width: 1.5px; height: 355%;
  background: linear-gradient(180deg, rgba(193,158,87,0.45), rgba(221,190,124,0.85));
  transform-origin: 50% 0; transform: rotate(-25deg);
  border-radius: 1px;
}
/* testina + puntina: il punto in cui la traccia comincia */
.vinyl__arm-tube::after {
  content: ""; position: absolute; left: 50%; bottom: -2%;
  width: 5px; height: 9px; margin-left: -2.5px;
  border-radius: 1px 1px 0 40%;
  background: linear-gradient(180deg, rgba(221,190,124,0.9), rgba(168,133,63,0.75));
  box-shadow: 0 0 0.45rem rgba(193,158,87,0.4);
}

.vinyl__cap {
  margin-top: 1.8rem; text-align: center;
  font-family: var(--ff-mono); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85;
}

@media (min-width: 768px) {
  .vinyl { padding-top: 4rem; padding-bottom: 3rem; }
  .vinyl__stage { width: min(58vw, 30rem); margin-top: 1rem; perspective: 1300px; }
  .vinyl__tilt { transform: rotateX(13deg); }
  .vinyl__cap { margin-top: 2.2rem; font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vinyl__disc { animation: none; }
}

/* ============================================================
   4 — REEL WALL  ·  draggable-marquee-directional (2 file × 8)
   il crate di vinili: si trascina, e le due file vanno controverse
   ============================================================ */
.reels { padding-top: 4rem; padding-bottom: 2.5rem; }
.reels__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.reels__title { font-size: clamp(1.9rem, 8vw, 3.2rem); }
.reels__sub { max-width: 42ch; color: inherit; opacity: 0.72; }
.reels__note {
  margin-bottom: 1.8rem; font-family: var(--ff-mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: inherit; opacity: 0.5;
}
.reels__note span { color: var(--gold-text); }

.reels__row { width: 100%; overflow: hidden; cursor: grab; }
.reels__row:active { cursor: grabbing; }
.reels__row + .reels__row { margin-top: 0.55rem; }
.reels__collection { display: flex; width: max-content; }
.reels__list { display: flex; gap: 0.55rem; padding-right: 0.55rem; }

/* IL LAMPO DELLE TESSERE — causa e rimedio (bug 11/08, chiuso 12/08).
   Prima: l'unico a dipingere il poster era il <video> stesso (attributo
   poster). Un video senza src dipinge il poster solo quando il jpg è
   arrivato E il compositore lo ha ripreso; nel frattempo — e di nuovo
   a ogni load()/emptied quando il governatore attacca o stacca il file —
   l'elemento non dipinge niente e si vedeva il fondo della tessera.
   Adesso: il poster è un <img> VERO sotto (dipinge appena decodifica e
   non lo tocca più nessuno), e il video sopra parte a opacità 0 e sale
   solo su 'loadeddata'. La discesa è senza transizione (la regola con
   la transition vive solo dentro .is-ready), così staccare il file
   nasconde il video all'istante invece di dissolvere su un frame vuoto. */
.reel {
  position: relative; margin: 0; flex: none;
  width: 44vw; max-width: 15rem;
  aspect-ratio: 9/16; overflow: hidden;
  border-radius: 0.45rem; border: 1px solid var(--line-gold);
  background: #100e0c;
}
.reel__poster,
.reel video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; /* il drag del marquee non deve finire nel video */
}
.reel__poster { z-index: 0; }
.reel video { z-index: 1; opacity: 0; }
.reel.is-ready video { opacity: 1; transition: opacity 0.45s ease; }
/* velo di riposo: la tessera che non suona resta un filo indietro */
.reel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(20,18,16,0.2); transition: opacity 0.6s ease;
}
.reel.is-playing::after { opacity: 0; }
.reel__num {
  position: absolute; top: 0.5rem; left: 0.6rem; z-index: 4;
  font-family: var(--ff-mono); font-size: 0.56rem; letter-spacing: 0.16em;
  color: var(--gold); text-shadow: 0 1px 8px rgba(0,0,0,0.75);
}
.reel__grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(20,18,16,0.5), rgba(20,18,16,0) 45%);
}
@media (hover: hover) and (pointer: fine) {
  .reel { transition: border-color 0.5s ease; }
  .reel:hover { border-color: var(--gold); }
  .reel:hover::after { opacity: 0; }
}
@media (min-width: 768px) {
  .reels__row + .reels__row { margin-top: 0.85rem; }
  .reels__list { gap: 0.85rem; padding-right: 0.85rem; }
  .reel { width: 15rem; }
  .reels__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* ============================================================
   5 — CTA  ·  button-with-css-character-stagger + magnetic-hover
   ============================================================ */
.event { padding-top: 4.5rem; padding-bottom: 5rem; }
.event__grid { display: grid; gap: 2.25rem; }
.event__title { font-size: clamp(2.1rem, 9.5vw, 4rem); }
.event__text { margin-top: 1.3rem; max-width: 42ch; color: rgba(28,26,23,0.8); }
.event__points {
  margin-top: 1.5rem; display: grid; gap: 0.5rem;
  font-family: var(--ff-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(28,26,23,0.6);
}
.event__points li { display: flex; gap: 0.7em; align-items: baseline; }
.event__points li::before { content: "—"; color: var(--gold-text); }
.event__note {
  margin-top: 1.3rem; max-width: 46ch;
  font-family: var(--ff-mono); font-size: 0.58rem; line-height: 1.7;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(28,26,23,0.45);
}
.event__card {
  border: 1px solid var(--line); border-radius: 0.8rem;
  padding: 1.5rem 1.35rem; background: rgba(255,255,255,0.5);
  transition: background-color 0.9s cubic-bezier(0.625,0.05,0,1),
              border-color 0.9s cubic-bezier(0.625,0.05,0,1);
}
/* durante l'alba (tema ancora ink) la card non è un blocco bianco */
.page-dj[data-theme-nav="dark"] .event__card {
  background: rgba(247,243,236,0.06); border-color: var(--line-gold);
}
.page-dj[data-theme-nav="dark"] .event__text,
.page-dj[data-theme-nav="dark"] .event__points,
.page-dj[data-theme-nav="dark"] .event__note,
.page-dj[data-theme-nav="dark"] .event__card dd,
.page-dj[data-theme-nav="dark"] .dj-bridge { color: inherit; opacity: 0.78; }
.page-dj[data-theme-nav="dark"] .event__ig { color: inherit; border-color: var(--line-gold); }
.event__card dl { display: grid; gap: 1.1rem; }
.event__card dt {
  font-family: var(--ff-mono); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text);
}
.event__card dd { margin-top: 0.25rem; font-size: 0.96rem; color: rgba(28,26,23,0.8); }
@media (min-width: 992px) {
  /* la card Anlage/Dauer è stata rimossa: una colonna sola, larghezza da lettura */
  .event__grid { grid-template-columns: minmax(0, 46rem); gap: 3.5rem; }
}

/* ---- il bottone: char-stagger (osmo) + magnetico (osmo, ≥992px) ---- */
.btn-magnetic { position: relative; display: inline-block; font-size: 1rem; }
.btn-animate-chars {
  position: relative; display: inline-flex; align-items: center; gap: 0.9em;
  padding: 1.15em 1.5em; border-radius: 0.4rem;
  color: var(--ink); line-height: 1; text-decoration: none;
  min-height: 48px; -webkit-tap-highlight-color: transparent;
}
.btn-animate-chars__bg {
  position: absolute; inset: 0; background: var(--gold); border-radius: 0.4rem;
  transition: inset 0.6s cubic-bezier(0.625,0.05,0,1);
}
/* il target del magnetico interno: si muove un po' meno del bottone */
.btn-animate-chars__inner {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.9em;
}
.btn-animate-chars__text {
  white-space: nowrap; line-height: 1.3;
  font-family: var(--ff-body); font-weight: 500; font-size: 1rem;
}
.btn-animate-chars__icon { position: relative; z-index: 2; width: 1.05em; flex: none; }
/* caratteri: ogni span ha la sua transition-delay dallo script osmo */
.btn-animate-chars [data-button-animate-chars] {
  position: relative; display: inline-block; overflow: hidden;
}
.btn-animate-chars [data-button-animate-chars] span {
  position: relative; display: inline-block;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625,0.05,0,1);
}
.btn-animate-chars:hover [data-button-animate-chars] span,
.btn-animate-chars:active [data-button-animate-chars] span { /* parità touch: il tap fa lo stesso salto */
  transform: translateY(-1.3em) rotate(0.001deg);
}
.btn-animate-chars:hover .btn-animate-chars__bg,
.btn-animate-chars:active .btn-animate-chars__bg { inset: 0.125em; }

.event__actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.event__ig {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px;
  padding: 0.85em 1.1em; border: 1px solid rgba(28,26,23,0.25); border-radius: 0.4rem;
  color: var(--ink); font-family: var(--ff-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.event__ig svg { width: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .event__ig:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
}

/* ---- ponte al podcast della home (una riga, mai la strip duplicata) ---- */
.dj-bridge {
  padding-bottom: 4rem;
  font-family: var(--ff-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(28,26,23,0.5);
}
.dj-bridge a {
  color: var(--gold-text);
  text-decoration: underline; text-underline-offset: 0.4em;
  text-decoration-color: var(--line-gold);
  transition: text-decoration-color 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dj-bridge a:hover { text-decoration-color: var(--gold-text); }
}

/* ---- respiro desktop: su 390 le sezioni stanno strette, da 768 no ---- */
@media (min-width: 768px) {
  .reels { padding-top: 4rem; padding-bottom: 4rem; }
  .event { padding-top: 5.5rem; padding-bottom: 7rem; }
}


/* Lo strato di luce del piatto è più largo del viewport: senza clip il telefono
   scrollava di lato e si vedeva la banda crema fuori pagina. */
.vinyl { overflow: clip; }


/* Il marchio in barra è bianco per stare sul nero della home. Sulla pagina DJ
   le sezioni chiare passano data-theme-nav="light" al body: lì va nero, altrimenti
   sparisce sul crema (la barra non usa blend su questa pagina). */
.page-dj[data-theme-nav="light"] .bold-nav-full__logo img { filter: brightness(0); }
.page-dj[data-theme-nav="light"] .bold-nav-full__logo,
.page-dj[data-theme-nav="light"] .bold-nav-full__menu-word { color: var(--ink); }