/* ==========================================================
   ROSARIO DEL BONO DJ - stile del sito (child theme "Deep")
   Font/colori fedeli al sito originale; animazioni leggere
   (fade-in su scroll con IntersectionObserver, niente calcoli
   di sfocatura per fotogramma) per restare fluido anche su
   tablet meno potenti.
   ========================================================== */

:root {
  --rdb-dark: #0b0b0c;
  --rdb-ink: #111111;
  --rdb-light: #f9f9fa;
  --rdb-line: rgba(255, 255, 255, 0.18);
  --rdb-line-dark: rgba(0, 0, 0, 0.18);
  --rdb-accent: #ffb648;
}

.rdb-body {
  margin: 0;
  background: var(--rdb-light);
  color: var(--rdb-ink);
  font-family: "Inter", sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

.rdb-site * {
  box-sizing: border-box;
}

.rdb-site img {
  max-width: 100%;
  display: block;
}

.rdb-site h1,
.rdb-site h2,
.rdb-site h3,
.rdb-site h4 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  margin: 0;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* Le sezioni-ancora (menu di navigazione) si fermano sotto la nav fissa. */
#home,
#manifesto,
#about,
#this-is-me,
#music,
#live,
#moments,
#contact {
  scroll-margin-top: 84px;
}

.rdb-kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 16px;
}

/* ---------------------------------------------------------
   Reveal-on-scroll: leggero, solo opacity+transform, gestito via
   IntersectionObserver in JS - bidirezionale (si nasconde di nuovo
   quando l'elemento esce dallo schermo e si ripete al rientro, sia
   scendendo che risalendo).
   ATTENZIONE: non mettere questa classe direttamente su una <section>
   con un proprio sfondo pieno - lo sfondo sbiadirebbe insieme al
   fade e lascerebbe intravedere per un attimo lo sfondo chiaro della
   pagina sotto (un lampo bianco durante il passaggio). Va sempre
   messa su un div INTERNO alla sezione (come .rdb-manifesto-inner,
   .rdb-releases-intro-inner, .rdb-logo-finale-inner, .rdb-contact-inner),
   cosi' lo sfondo della sezione resta sempre pieno e solo il
   contenuto dentro sfuma.
   --------------------------------------------------------- */
.rdb-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rdb-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Righe di un titolo su piu' righe che devono comparire una dietro
   l'altra (stesso meccanismo di .rdb-live-line, riusato altrove) -
   "display:block" cosi' anche uno <span> dentro un <h2> va a capo
   come faceva il <br> che sostituisce. */
.rdb-cascade-line {
  display: block;
}

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.rdb-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px clamp(20px, 4vw, 60px);
}

/* Lo sfondo sfocato (l'effetto "vetro") sta su un livello separato,
   dietro alla barra, invece che sulla barra stessa: se il
   "backdrop-filter" e' direttamente sulla barra, questa diventa anche
   il "contenitore" per il pannello del menu su smartphone (che e'
   agganciato allo schermo, ma nasce dentro alla barra) - facendolo
   restare alto solo quanto la barra invece che coprire tutto lo
   schermo. Era la causa vera del bug del menu su smartphone. Con lo
   sfondo separato il risultato visivo resta identico, ma il menu
   torna a comportarsi bene. */
.rdb-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(249, 249, 250, 0.72);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rdb-line-dark);
}

.rdb-nav-logo img {
  height: 28px;
  width: auto;
}

.rdb-nav-menu,
.rdb-nav-menu li {
  background: none !important;
  box-shadow: none !important;
}

.rdb-nav-menu {
  display: flex;
  gap: clamp(14px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rdb-nav-menu a {
  color: var(--rdb-ink) !important;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75 !important;
  transition: opacity 0.2s ease;
  visibility: visible !important;
}

.rdb-nav-menu a:hover {
  opacity: 1 !important;
}

.rdb-nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 28px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  padding: 0;
}

.rdb-nav-toggle span {
  display: block;
  height: 2px;
  background: var(--rdb-ink);
}

@media (max-width: 900px) {
  .rdb-nav-links {
    position: fixed;
    inset: 0 0 0 30%;
    z-index: 100;
    background: var(--rdb-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  .rdb-nav-links.is-open {
    transform: translateX(0);
  }

  .rdb-nav-menu {
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
  }

  .rdb-nav-menu a {
    display: block;
    background: var(--rdb-accent);
    color: var(--rdb-dark) !important;
    font-size: 18px;
    padding: 11px 22px;
    border-radius: 3px;
  }

  .rdb-nav-toggle {
    display: flex;
    position: relative;
    z-index: 200;
  }

  /* Col menu aperto lo sfondo dietro all'hamburger e' scuro: le tre
     lineette (colore scuro, pensate per lo sfondo chiaro della barra)
     altrimenti sparirebbero. Restano bianche finche' il pannello e'
     aperto, cosi' si vede sempre e si puo' chiudere il menu senza
     scegliere una sezione. */
  .rdb-nav-links.is-open ~ .rdb-nav-toggle span {
    background: #fff;
  }
}

/* ---------------------------------------------------------
   PUNTINI DI SEZIONE (stile Apple: indicano dove ti trovi nella
   pagina e permettono di saltare direttamente a una sezione).
   Solo desktop/tablet largo: su schermi stretti lo scroll con
   il dito e' gia' il modo naturale di muoversi, i puntini
   diventerebbero solo un ingombro in piu'.
   --------------------------------------------------------- */
.rdb-section-dots {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rdb-section-dots a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

/* Zona di aggancio piu' larga del puntino visibile - cosi' e'
   facile da centrare col cursore (o col dito) anche se il segno
   grafico resta piccolo. Un cerchio tenue appare all'hover/focus
   a conferma di dove si sta per cliccare. */
.rdb-section-dots a::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.rdb-section-dots a:hover::before,
.rdb-section-dots a:focus-visible::before {
  opacity: 1;
}

.rdb-section-dots a span {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rdb-ink);
  opacity: 0.28;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.rdb-section-dots a:hover span {
  opacity: 0.6;
}

.rdb-section-dots a.is-active span {
  opacity: 1;
  transform: scale(1.35);
}

/* Sui tratti di pagina a sfondo scuro (Live, Video Experience,
   Contact...) i puntini diventano bianchi, cosi' restano leggibili
   sempre - un solo attributo sul <body>, aggiornato dal JS mentre
   si scorre. */
body.rdb-dots-on-dark .rdb-section-dots a span {
  background: #fff;
}

@media (max-width: 900px) {
  .rdb-section-dots {
    display: none;
  }
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.rdb-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  background: var(--rdb-light);
  color: var(--rdb-ink);
  overflow: hidden;
}

/* Il nome sta DIETRO (livello 1): grande, fisso al centro. */
.rdb-hero-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 0 0;
}

.rdb-hero-title {
  display: flex;
  flex-direction: column;
  letter-spacing: -0.03em;
  color: var(--rdb-ink);
  -webkit-perspective: 1400px;
  perspective: 1400px;
}

/* Ogni riga ha una dimensione calibrata sulla propria lunghezza, così
   ROSARIO e DEL BONO arrivano entrambe il più vicino possibile ai
   bordi (non potevano condividere una taglia unica: DEL BONO è la
   parola più larga e avrebbe tagliato le lettere se le avessimo
   scalate insieme oltre un certo punto). */
.rdb-hero-title-line-1 {
  font-size: clamp(90px, 30vw, 566px);
}

.rdb-hero-title-line-2 {
  font-size: clamp(81px, 23.4vw, 509px);
}

.rdb-hero-title-line {
  opacity: 0;
  transform: rotateX(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.4s ease;
}

.rdb-hero-copy.is-visible .rdb-hero-title-line {
  opacity: 1;
}

/* Le due righe ruotano ALL'INDIETRO (asse orizzontale) per alcuni
   giri, A SCATTI e lente - una posizione netta dopo l'altra, con una
   sosta tra un giro e l'altro - cosi' si intuisce lo spessore, come
   un parallelepipedo che ruota. Versione semplice e solida (niente
   facce 3D separate, che su alcuni telefoni/browser si sono rivelate
   troppo fragili): il JS fa ripartire il giro ogni volta che si
   torna sulla home, non solo la prima volta. */
@keyframes rdb-hero-flip {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(1800deg); }
}

.rdb-hero-title-line-1.rdb-hero-spin {
  animation: rdb-hero-flip 11s steps(20, end) forwards;
}

.rdb-hero-title-line-2.rdb-hero-spin {
  animation: rdb-hero-flip 11s steps(20, end) 0.16s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .rdb-hero-title-line {
    transform: none;
  }

  .rdb-hero-title-line-1.rdb-hero-spin,
  .rdb-hero-title-line-2.rdb-hero-spin {
    animation: none;
  }
}

.rdb-hero-title-outline {
  -webkit-text-stroke: 1.5px var(--rdb-ink);
  color: transparent;
  margin-top: -0.1em;
}

/* La tua figura (con tutta la consolle) sta DAVANTI (livello 2). */
.rdb-hero-media {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Il "frame" gestisce solo l'ingresso una tantum (fade + salita).
   È un wrapper a sé cosi il respiro continuo della foto (sotto) non
   entra mai in conflitto con questa transizione: sono due transform
   su due elementi diversi, si sommano senza scontrarsi. */
.rdb-hero-photo-frame {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 1.1s ease 0.25s, transform 1.1s ease 0.25s;
  /* fissa, nessun ricalcolo per fotogramma durante lo scroll */
}

.rdb-hero-photo-frame.is-visible {
  opacity: 1;
  transform: none;
}

/* Wrapper che "respira": contiene SIA la foto SIA la scritta, così
   sono saldate insieme e si muovono in modo identico (stesso
   transform, stesso frame per frame) invece di essere due animazioni
   separate che potrebbero sfasarsi. */
.rdb-hero-photo-breathe {
  position: relative;
  display: inline-block;
  transform-origin: center bottom;
  /* Ombra di contatto morbida: "appoggia" la figura sul fondo bianco
     invece di farla sembrare ritagliata e incollata lì sopra.
     È un filter statico (non è lui ad animarsi) quindi il browser lo
     dipinge una volta sola e poi il respiro sopra lo trasforma via
     compositor, senza ricalcolarlo ad ogni fotogramma. */
  filter: drop-shadow(0 26px 20px rgba(20, 18, 16, 0.22)) drop-shadow(0 60px 45px rgba(20, 18, 16, 0.14));
  /* Respiro continuo, leggerissimo: solo transform, nessun JS,
     costo GPU trascurabile anche su tablet meno potenti. */
  animation: rdb-breathe 7s ease-in-out infinite;
}

@keyframes rdb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .rdb-hero-photo-breathe {
    animation: none;
  }
}

.rdb-hero-photo {
  display: block;
  /* Questa foto è verticale (ritratto), non panoramica come la
     consolle di prima: qui a comandare è l'ALTEZZA, tenuta sempre
     sotto la nav fissa in alto (~84px + margine di sicurezza), non
     la larghezza. Cresce quanto può senza mai toccare il menu. */
  height: auto;
  max-height: calc(100svh - 110px);
  width: auto;
  max-width: 92vw;
}

/* Parte esattamente dalla zona indicata: sotto il pollice, in fondo
   alla maglietta, dentro le pieghe del tessuto. Vive DENTRO il
   wrapper che respira, quindi si muove esattamente come la foto:
   stesso frame, stessa scala, sempre "cucita" al tessuto. */
.rdb-hero-subtitle {
  position: absolute;
  left: 44.9%;
  top: 90.5%;
  z-index: 3;
  max-width: 46%;
  text-align: left;
  color: #fff;
  font-size: clamp(11.5px, 1.2vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.55s, transform 0.8s ease 0.55s;
}

/* Il pollice, ritagliato dalla stessa identica foto e riposizionato
   con le stesse percentuali del punto originale: combacia sempre alla
   perfezione con la foto sotto qualunque sia la sua dimensione, e
   copre l'inizio della scritta (la "D" resta leggermente nascosta
   sotto il dito, come richiesto). */
.rdb-hero-thumb-overlay {
  position: absolute;
  left: 37%;
  top: 88.8%;
  width: 9%;
  height: 11.2%;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.rdb-hero-subtitle.is-visible {
  opacity: 0.85;
  transform: none;
}

/* ---------------------------------------------------------
   MANIFESTO - momento a sé, animato, tra Home e About.
   --------------------------------------------------------- */
/* La sezione MANIFESTO resta ferma a schermo (sticky) mentre la
   sezione successiva (About) le scorre sopra e la ricopre, sfumando -
   sia scendendo che risalendo. Lo spazio extra del wrapper (oltre ai
   100vh del manifesto stesso) e' proprio la distanza di scroll durante
   la quale si vede questa copertura avvenire. */
.rdb-manifesto-scroll {
  position: relative;
  height: 180vh;
}

.rdb-manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 1;
}

.rdb-manifesto {
  background: var(--rdb-dark);
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 20px;
  overflow: hidden;
}

.rdb-manifesto-line {
  margin: 0;
  opacity: 0;
}

.rdb-manifesto-line-1 {
  font-family: "Anton", sans-serif;
  font-size: clamp(42px, 9vw, 120px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  transform: translateY(40px);
  /* Il testo finisce su sfondo chiaro/testo scuro (dopo lo strobo),
     quindi l'ombra e' chiara come nelle altre sezioni chiare. */
  text-shadow: 0 4px 24px rgba(255, 255, 255, 0.65);
}

.rdb-manifesto-rule {
  display: block;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  margin: 30px 0;
  transition: width 0.9s ease 0.3s;
}

.rdb-manifesto-line-2 {
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(34px, 6.5vw, 68px);
  transform: scale(0.82);
  transition: opacity 0.9s ease 0.45s, transform 0.9s ease 0.45s;
}

.rdb-manifesto-inner.is-visible .rdb-manifesto-rule {
  width: 130px;
}

.rdb-manifesto-inner.is-visible .rdb-manifesto-line-2 {
  opacity: 0.9;
  transform: none;
}

/* Effetto strobo (come nel sito precedente) sulla riga principale:
   un breve sfarfallio all'ingresso, poi resta fissa - nessun calcolo
   legato allo scroll, solo un'animazione a tempo. */
.rdb-manifesto-line-1 {
  opacity: 0;
}

.rdb-manifesto-inner.is-visible .rdb-manifesto-line-1 {
  animation: rdb-strobe-in 1.1s steps(1, end) forwards;
}

@keyframes rdb-strobe-in {
  0%   { opacity: 0; transform: translateY(40px); }
  14%  { opacity: 1; transform: translateY(0); }
  21%  { opacity: 0.12; }
  28%  { opacity: 1; }
  36%  { opacity: 0.08; }
  44%  { opacity: 1; }
  52%  { opacity: 0.25; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   ABOUT / THIS IS ME
   --------------------------------------------------------- */
.rdb-about {
  background: var(--rdb-light);
  padding: 90px clamp(20px, 5vw, 60px) 60px;
  position: relative;
  z-index: 2;
  margin-top: -80vh;
  padding-top: calc(80vh + 90px);
}

/* Sfumatura in cima ad About: cosi' la copertura sul Manifesto sotto
   non e' un taglio netto ma una dissolvenza, come richiesto. */
.rdb-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80vh;
  background: linear-gradient(180deg, rgba(249, 249, 250, 0) 0%, rgba(249, 249, 250, 1) 65%);
  pointer-events: none;
  z-index: -1;
}

.rdb-about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rdb-line-dark);
  margin-bottom: 50px;
}

.rdb-about-links a {
  color: var(--rdb-ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.rdb-about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.rdb-about-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.rdb-about-card-console {
  grid-column: span 4;
  aspect-ratio: 16 / 9;
}

.rdb-about-card-half {
  grid-column: span 2;
  aspect-ratio: 1 / 1;
}

.rdb-about-copy {
  grid-column: span 4;
  max-width: 640px;
}

.rdb-about-year {
  font-family: "Anton", sans-serif;
  font-size: clamp(50px, 8vw, 90px);
  margin: 0;
  opacity: 0.15;
}

.rdb-about-copy h3 {
  font-size: clamp(34px, 5.2vw, 58px);
  margin-bottom: 20px;
}

.rdb-about-lead {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 400;
  margin: 0 0 16px;
}

.rdb-about-copy p {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  opacity: 0.85;
}

.rdb-about-title-block {
  grid-column: span 4;
  text-align: center;
  padding: 60px 0 40px;
}

.rdb-about-title-block h2 {
  font-size: clamp(84px, 17vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  /* Su sfondo chiaro/testo scuro l'ombra dev'essere chiara, non scura,
     per separare le lettere quando una riga passa sopra l'altra. */
  text-shadow: 0 4px 24px rgba(255, 255, 255, 0.65);
}

/* Leggero lampeggio all'ingresso, come nel sito precedente -
   parte dopo il fade-in di .rdb-reveal e resta comunque leggibile. */
@media (prefers-reduced-motion: no-preference) {
  .rdb-about-title-block.is-visible h2 {
    animation: rdb-strobe-title-in 1.3s steps(1, end) 0.75s both;
  }
}

@keyframes rdb-strobe-title-in {
  0% { opacity: 1; }
  9% { opacity: 0.06; }
  18% { opacity: 1; }
  27% { opacity: 0.1; }
  36% { opacity: 1; }
  45% { opacity: 0.15; }
  54% { opacity: 1; }
  100% { opacity: 1; }
}

.rdb-about-closing {
  grid-column: span 4;
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid var(--rdb-line-dark);
}

.rdb-about-closing-small {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}

.rdb-about-closing-main {
  font-family: "Anton", sans-serif;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin-top: 8px;
  text-shadow: 0 4px 24px rgba(255, 255, 255, 0.65);
}

/* Lampeggio leggero su STORIES, più morbido di THIS IS ME
   (stesso principio del sito precedente). */
@media (prefers-reduced-motion: no-preference) {
  .rdb-about-closing.is-visible .rdb-strobe {
    animation: rdb-strobe-word-in 1.4s steps(1, end) 0.75s both;
  }
}

@keyframes rdb-strobe-word-in {
  0% { opacity: 1; }
  10% { opacity: 0.32; }
  20% { opacity: 1; }
  32% { opacity: 0.36; }
  44% { opacity: 1; }
  58% { opacity: 0.4; }
  72% { opacity: 1; }
  100% { opacity: 1; }
}

@media (max-width: 780px) {
  .rdb-about-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rdb-about-card-console,
  .rdb-about-copy,
  .rdb-about-title-block,
  .rdb-about-closing {
    grid-column: span 2;
  }
}

/* ---------------------------------------------------------
   MUSIC
   --------------------------------------------------------- */
.rdb-music-intro {
  background: var(--rdb-dark);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}

.rdb-music-intro h2 {
  font-size: clamp(48px, 11vw, 140px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  margin: 10px 0;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.34);
}

.rdb-note {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

.rdb-music {
  background: var(--rdb-light);
  padding: 80px clamp(20px, 5vw, 60px);
  max-width: 1100px;
  margin: 0 auto;
}

.rdb-music-header h3 {
  font-size: clamp(32px, 5.4vw, 60px);
  margin: 6px 0 18px;
}

.rdb-music-lead {
  max-width: 560px;
  font-size: clamp(16px, 1.6vw, 19px);
  opacity: 0.8;
  line-height: 1.6;
}

.rdb-music-group {
  margin-top: 56px;
}

.rdb-music-group-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 18px;
}

.rdb-music-list {
  border-top: 1px solid var(--rdb-line-dark);
}

.rdb-music-item {
  display: flex;
  gap: clamp(16px, 4vw, 40px);
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-bottom: 1px solid var(--rdb-line-dark);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Cascata: le righe entrano una dopo l'altra quando la sezione
   compare, non tutte insieme (solo transition-delay, nessun costo). */
.rdb-music-item:nth-child(1) { transition-delay: 0s; }
.rdb-music-item:nth-child(2) { transition-delay: 0.08s; }
.rdb-music-item:nth-child(3) { transition-delay: 0.16s; }
.rdb-music-item:nth-child(4) { transition-delay: 0.24s; }
.rdb-music-item:nth-child(5) { transition-delay: 0.32s; }
.rdb-music-item:nth-child(n+6) { transition-delay: 0.4s; }

.rdb-music-item-index {
  font-family: "Anton", sans-serif;
  font-size: 22px;
  opacity: 0.3;
  width: 40px;
  flex-shrink: 0;
  transition: opacity 0.4s ease;
}

.rdb-music-item-copy {
  flex: 1;
  min-width: 0;
}

.rdb-music-item-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.rdb-music-item-headline {
  margin: 0 0 8px;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  transition: opacity 0.4s ease;
}

.rdb-music-item-tags {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
}

.rdb-music-item-description {
  margin: 0 0 6px;
  max-width: 460px;
  font-size: clamp(13.5px, 1.3vw, 15px);
  line-height: 1.6;
  opacity: 0.72;
}

.rdb-music-item-date {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.5;
}

/* Traccia attualmente in play: piccolo accento persistente sul
   testo, cosi' si capisce cosa sta suonando anche senza guardare
   la barra in basso. */
.rdb-music-item.is-playing .rdb-music-item-index,
.rdb-music-item.is-playing .rdb-music-item-eyebrow {
  opacity: 0.9;
}

.rdb-music-item.is-playing .rdb-music-item-headline {
  opacity: 1;
}

.rdb-music-external {
  color: var(--rdb-ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---- Player circolare per traccia ---- */
.rdb-music-item-control {
  flex-shrink: 0;
}

.rdb-track-audio {
  display: none;
}

.rdb-play-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--rdb-ink);
  background: transparent;
  color: var(--rdb-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.rdb-play-btn:hover {
  background: var(--rdb-ink);
  color: var(--rdb-light);
  transform: scale(1.05);
}

.rdb-play-btn .rdb-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.rdb-play-btn .rdb-icon-play { transform: translateX(1px); }

.rdb-play-btn .rdb-icon-pause { display: none; }

.rdb-play-btn.is-playing {
  background: var(--rdb-ink);
  color: var(--rdb-light);
}

.rdb-play-btn.is-playing .rdb-icon-play { display: none; }
.rdb-play-btn.is-playing .rdb-icon-pause { display: block; }

/* Anelli concentrici: pulsano solo quando la traccia e' in play,
   pura CSS/compositor (transform+opacity), nessuna lettura del
   segnale audio reale - solo un'illusione leggera di "onda". */
.rdb-play-btn-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rdb-ink);
  opacity: 0;
  pointer-events: none;
}

.rdb-play-btn.is-playing .rdb-play-btn-ring {
  animation: rdb-play-ring 2.2s ease-out infinite;
}

.rdb-play-btn.is-playing .rdb-play-btn-ring-2 {
  animation-delay: 0.7s;
}

@keyframes rdb-play-ring {
  0% {
    opacity: 0.45;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdb-play-btn.is-playing .rdb-play-btn-ring {
    animation: none;
  }
}

/* ---- Barra globale in basso: play / pausa / avanzamento / chiudi ---- */
.rdb-audio-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(94vw, 420px);
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  pointer-events: none;
}

.rdb-audio-bar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.rdb-audio-bar-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.rdb-audio-bar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.rdb-audio-bar-btn .rdb-icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.rdb-audio-bar-btn .rdb-icon-play { transform: translateX(1px); }

.rdb-audio-bar-toggle .rdb-icon-pause { display: none; }

.rdb-audio-bar.is-playing .rdb-audio-bar-toggle .rdb-icon-play { display: none; }
.rdb-audio-bar.is-playing .rdb-audio-bar-toggle .rdb-icon-pause { display: block; }

.rdb-audio-bar-time {
  flex-shrink: 0;
  min-width: 30px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

.rdb-audio-bar-time:last-of-type {
  text-align: right;
}

/* ---- Barra di avanzamento: cliccabile e trascinabile ---- */
.rdb-audio-bar-progress {
  position: relative;
  flex: 1;
  min-width: 64px;
  height: 24px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rdb-audio-bar-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.rdb-audio-bar-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #fff;
  border-radius: 999px;
}

.rdb-audio-bar-progress-fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.rdb-audio-bar-progress:hover .rdb-audio-bar-progress-fill::after,
.rdb-audio-bar.is-scrubbing .rdb-audio-bar-progress-fill::after {
  transform: scale(1);
}

.rdb-audio-bar-divider {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
}

.rdb-audio-bar-close svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .rdb-music-item {
    flex-wrap: wrap;
  }

  .rdb-music-item-control {
    order: 3;
    margin-left: 56px;
  }
}

.rdb-music-empty,
.rdb-moments-empty {
  opacity: 0.55;
  font-size: 14px;
  font-style: italic;
}

/* ---------------------------------------------------------
   RELEASES (brani originali - copertine + foto "hover")
   --------------------------------------------------------- */
.rdb-releases-intro {
  background: var(--rdb-dark);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}

.rdb-releases-intro h2 {
  font-size: clamp(48px, 11vw, 140px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  margin: 10px 0;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.34);
}

.rdb-releases {
  background: var(--rdb-light);
  padding: 80px clamp(20px, 5vw, 60px) 100px;
  max-width: 1360px;
  margin: 0 auto;
}

.rdb-releases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
}

.rdb-release-card {
  display: flex;
  flex-direction: column;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Cascata per riga: ogni riga da 3 entra in sequenza, poi la riga
   successiva riparte con lo stesso ritmo - funziona con qualunque
   numero di brani, non solo i primi 4. */
.rdb-release-card:nth-child(3n+1) { transition-delay: 0s; }
.rdb-release-card:nth-child(3n+2) { transition-delay: 0.1s; }
.rdb-release-card:nth-child(3n+3) { transition-delay: 0.2s; }

.rdb-release-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: var(--rdb-ink);
  cursor: pointer;
}

.rdb-release-cover,
.rdb-release-portrait {
  position: absolute;
  inset: 0;
}

.rdb-release-cover img,
.rdb-release-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* La copertina e' lo stato di riposo; la foto sotto emerge al
   passaggio del mouse (o quando la traccia e' in play) - solo
   opacity, quindi economico anche su schermi piu' deboli. */
.rdb-release-portrait {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.rdb-release-visual:hover .rdb-release-portrait,
.rdb-release-card.is-playing .rdb-release-portrait {
  opacity: 1;
}

.rdb-release-visual:hover .rdb-release-cover img {
  transform: scale(1.04);
}

.rdb-release-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 56px;
  height: 56px;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background: rgba(11, 11, 12, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0.85;
  transition: opacity 0.3s ease, background-color 0.25s ease, transform 0.25s ease;
}

.rdb-release-visual:hover .rdb-release-play,
.rdb-release-card.is-playing .rdb-release-play {
  opacity: 1;
}

.rdb-release-play:hover {
  background: rgba(11, 11, 12, 0.6);
  transform: scale(1.06);
}

.rdb-release-card.is-playing .rdb-release-play {
  border-color: #fff;
  background: rgba(11, 11, 12, 0.55);
}

/* Mini equalizer: 3 barrette che rimbalzano, visibili solo
   mentre la traccia e' in play. Solo transform (scaleY), quindi
   e' il compositor a muoverle, nessun ricalcolo di layout.
   In basso a sinistra, cosi' non si sovrappone mai al tasto
   play che ora sta in basso a destra. */
.rdb-release-eq {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.rdb-release-card.is-playing .rdb-release-eq {
  opacity: 1;
}

.rdb-release-eq span {
  display: block;
  width: 3px;
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transform-origin: bottom;
  animation: rdb-eq-bounce 0.9s ease-in-out infinite;
}

.rdb-release-eq span:nth-child(1) { animation-delay: -0.6s; }
.rdb-release-eq span:nth-child(2) { animation-delay: -0.3s; }
.rdb-release-eq span:nth-child(3) { animation-delay: 0s; }

@keyframes rdb-eq-bounce {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rdb-release-eq span {
    animation: none;
    transform: scaleY(0.6);
  }
}

/* Link Spotify facoltativo: in alto a destra, cosi' non tocca mai
   il tasto play (basso a destra) ne' l'equalizer (basso a sinistra). */
.rdb-release-spotify {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0.75;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.rdb-release-spotify:hover {
  opacity: 1;
  background: rgba(11, 11, 12, 0.6);
}

.rdb-release-copy {
  padding: 20px 2px 0;
}

.rdb-release-index {
  font-family: "Anton", sans-serif;
  font-size: 14px;
  opacity: 0.35;
  letter-spacing: 0.06em;
}

.rdb-release-title {
  margin: 4px 0 8px;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.01em;
}

.rdb-release-tags {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
}

.rdb-release-description {
  margin: 0;
  max-width: 480px;
  font-size: clamp(13.5px, 1.3vw, 15px);
  line-height: 1.6;
  opacity: 0.72;
}

@media (max-width: 1024px) {
  .rdb-releases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rdb-release-card:nth-child(3n+1) { transition-delay: 0s; }
  .rdb-release-card:nth-child(3n+2) { transition-delay: 0.1s; }
  .rdb-release-card:nth-child(3n+3) { transition-delay: 0.2s; }
}

@media (max-width: 640px) {
  .rdb-releases-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   LIVE (video di sottofondo fisso + testi che appaiono)
   --------------------------------------------------------- */
.rdb-live {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  padding: 80px 20px;
  text-align: center;
}

.rdb-live-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rdb-live-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 2.6s ease;
}

/* Da bianco e nero a colori mentre si e' dentro la sezione LIVE, e
   viceversa risalendo - stesso momento in cui compaiono le frasi. */
.rdb-live.is-color .rdb-live-bg {
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .rdb-live-bg {
    transition: none;
  }
}

.rdb-live-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.rdb-live-texts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.rdb-live-line {
  font-family: "Anton", sans-serif;
  font-size: clamp(32px, 6.5vw, 80px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.34);
}

.rdb-live-line-final {
  opacity: 0.75;
  font-size: clamp(17px, 2.4vw, 26px);
  font-family: "Inter", sans-serif;
  letter-spacing: 0.08em;
  /* Resta come prima, volutamente diversa dalle frasi grandi sopra:
     niente interlinea stretta né ombra, stesso distacco di sempre. */
  line-height: normal;
  text-shadow: none;
  margin-top: 26px;
}

.rdb-live-caption {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ---------------------------------------------------------
   MOMENTS
   --------------------------------------------------------- */
.rdb-moments {
  background: var(--rdb-light);
  padding: 90px clamp(20px, 5vw, 60px);
}

.rdb-moments-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

.rdb-moments-intro h2 {
  font-size: clamp(56px, 13vw, 170px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  margin: 8px 0 14px;
  text-shadow: 0 4px 24px rgba(255, 255, 255, 0.65);
  /* Leggero contorno scuro sempre presente: quando il lampeggio (via
     JS) porta il testo su bianco o su un colore chiaro, resta comunque
     leggibile sullo sfondo chiaro della sezione. */
  -webkit-text-stroke: 1px rgba(17, 17, 17, 0.14);
}

.rdb-moments-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  opacity: 0.75;
  line-height: 1.6;
}

.rdb-moments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.rdb-moment {
  position: relative;
  grid-column: span 2;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  margin: 0;
}

.rdb-moment:first-child {
  grid-column: span 4;
  aspect-ratio: 21 / 9;
}

/* Formato scelto a mano dal pannello Moment (vince sulla posizione). */
.rdb-moment-wide {
  grid-column: span 4 !important;
  aspect-ratio: 21 / 9 !important;
}

.rdb-moment-tall {
  aspect-ratio: 3 / 4 !important;
}

.rdb-moment img,
.rdb-moment video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rdb-moment video.rdb-blurred {
  filter: blur(14px);
  transform: scale(1.08);
}

.rdb-moment figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  gap: 10px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Foto con sfondo trasparente: il soggetto viene mostrato intero,
   senza ritaglio ne' riempimento del riquadro (niente object-fit:cover).
   Queste regole devono stare DOPO quelle generali sopra: stessa
   specificita', quindi vince chi arriva per ultimo nel file. */
.rdb-moment-transparent img {
  object-fit: contain;
  object-position: right center;
}

/* Su sfondo chiaro la didascalia bianca sparirebbe: qui diventa scura. */
.rdb-moment-transparent figcaption {
  color: var(--rdb-ink);
  text-shadow: none;
}

/* ---------------------------------------------------------
   Stile Polaroid: proporzioni vere da polaroid d'epoca (foto
   quasi quadrata, margine bianco piu' largo in basso), leggera
   ombra sotto come se fosse appoggiata, didascalia scritta a
   mano. La foto viene ritagliata (object-fit, gia' presente)
   per riempire lo spazio qualunque sia la sua forma originale.
   L'aspect-ratio e' forzato: la card non segue piu' la griglia
   4:3/3:4 standard ma la sagoma polaroid, la riga si adatta di
   conseguenza (stesso meccanismo gia' usato da .rdb-moment-tall,
   verificato che non rompe il grid).
   --------------------------------------------------------- */
.rdb-moment-polaroid {
  aspect-ratio: 0.83 / 1 !important;
  background: #fdfdfb;
  padding: 6% 7% 21%;
  box-shadow: 0 8px 16px rgba(17, 17, 17, 0.13);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
  /* Su schermi piccoli non deve riempire tutta la larghezza come le
     altre foto: una polaroid vera e' un oggetto piccolo appoggiato
     sulla pagina, non una foto a tutto schermo - altrimenti sembra
     "ingigantita" e perde la forma che la fa riconoscere come tale.
     width:100% e' necessario: senza una larghezza esplicita, dentro
     una cella di grid la combinazione aspect-ratio + margin:auto fa
     collassare la card a una dimensione minuscola invece di centrarla. */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.rdb-moments-grid .rdb-moment-polaroid:nth-child(4n+1) { --rdb-polaroid-angle: -2.2deg; }
.rdb-moments-grid .rdb-moment-polaroid:nth-child(4n+2) { --rdb-polaroid-angle: 1.6deg; }
.rdb-moments-grid .rdb-moment-polaroid:nth-child(4n+3) { --rdb-polaroid-angle: -1.1deg; }
.rdb-moments-grid .rdb-moment-polaroid:nth-child(4n+4) { --rdb-polaroid-angle: 2.1deg; }

/* Stessa specificita' di ".rdb-reveal.is-visible" (che altrimenti
   azzererebbe il transform a fine ingresso): questa regola, arrivando
   dopo nel file, vince e la rotazione resta anche a rivelazione
   completata. */
.rdb-moment-polaroid.is-visible {
  transform: rotate(var(--rdb-polaroid-angle, -1.6deg));
}

.rdb-moment-polaroid:hover,
.rdb-moment-polaroid.is-visible:hover {
  transform: rotate(0deg) scale(1.015);
  box-shadow: 0 14px 24px rgba(17, 17, 17, 0.17);
  z-index: 4;
}

.rdb-moment-polaroid img,
.rdb-moment-polaroid video {
  border-radius: 0;
}

.rdb-moment-polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  justify-content: center;
  color: var(--rdb-ink);
  text-shadow: none;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.82;
}

/* ---------------------------------------------------------
   Stile Figurina (Panini): la foto diventa un'adesivo appiccicato
   un po' storto sopra la sua sagoma tratteggiata stampata, come
   una pagina di album. Non tocca le proporzioni della griglia:
   la sagoma tratteggiata riempie il riquadro cosi' com'e', la
   foto/adesivo sta sopra, leggermente piu' grande della sagoma
   (sporge un po', come capita infilando davvero una figurina).
   --------------------------------------------------------- */
.rdb-moment-panini {
  background: repeating-linear-gradient(
      135deg,
      rgba(17, 17, 17, 0.03) 0px,
      rgba(17, 17, 17, 0.03) 1px,
      transparent 1px,
      transparent 14px
    ),
    #efe6d2;
}

.rdb-moment-panini::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 2px dashed rgba(17, 17, 17, 0.4);
  border-radius: 2px;
  z-index: 0;
}

/* Numeretto stampato in un angolo della sagoma, come nelle vere
   pagine d'album - resta visibile anche dove l'adesivo sopra non
   la copre del tutto. */
.rdb-moment-panini::after {
  content: attr(data-panini-index);
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.32);
  color: #efe6d2;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdb-moments-grid .rdb-moment-panini:nth-child(4n+1) { --rdb-panini-angle: -5deg; }
.rdb-moments-grid .rdb-moment-panini:nth-child(4n+2) { --rdb-panini-angle: 4deg; }
.rdb-moments-grid .rdb-moment-panini:nth-child(4n+3) { --rdb-panini-angle: -3.6deg; }
.rdb-moments-grid .rdb-moment-panini:nth-child(4n+4) { --rdb-panini-angle: 4.6deg; }

/* Il "vetrino" adesivo: leggermente piu' piccolo/uguale alla sagoma
   tratteggiata sotto (non piu' grande), cosi' quando viene ruotato
   storto i suoi angoli non coprono mai del tutto il tratteggio -
   si vede la sagoma dell'album "gia' pronta" a riceverlo, come
   in una vera pagina Panini. */
.rdb-panini-photo {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  border: 5px solid #fff;
  border-radius: 1px;
  box-shadow: 0 12px 20px rgba(17, 17, 17, 0.32);
  transform: rotate(var(--rdb-panini-angle, -3deg));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
  z-index: 2;
  overflow: hidden;
  display: block;
}

.rdb-panini-photo img,
.rdb-panini-photo video {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}

/* Effetto "plastificato" della figurina: una striscia di luce
   diagonale, discreta, che attraversa la foto come il riflesso
   sulla superficie lucida di un adesivo vero. */
.rdb-panini-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.55) 46%,
    rgba(255, 255, 255, 0.12) 54%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.rdb-moment-panini:hover .rdb-panini-photo {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 18px 28px rgba(17, 17, 17, 0.36);
}

.rdb-moment-panini figcaption {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(17, 17, 17, 0.55);
  text-shadow: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* ---------------------------------------------------------
   Stile Nastro adesivo: la foto resta intera (bordo a bordo,
   come oggi) ma sembra incollata un po' storta con due pezzi di
   washi tape agli angoli superiori - effetto "album di ricordi",
   il terzo stile per dare varieta' senza toccare le proporzioni.
   --------------------------------------------------------- */
.rdb-moment-taped {
  transform: rotate(var(--rdb-tape-angle, 1.4deg));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.rdb-moments-grid .rdb-moment-taped:nth-child(4n+1) { --rdb-tape-angle: 1.6deg; }
.rdb-moments-grid .rdb-moment-taped:nth-child(4n+2) { --rdb-tape-angle: -1.3deg; }
.rdb-moments-grid .rdb-moment-taped:nth-child(4n+3) { --rdb-tape-angle: 1.1deg; }
.rdb-moments-grid .rdb-moment-taped:nth-child(4n+4) { --rdb-tape-angle: -1.8deg; }

.rdb-moment-taped.is-visible {
  transform: rotate(var(--rdb-tape-angle, 1.4deg));
}

.rdb-moment-taped:hover,
.rdb-moment-taped.is-visible:hover {
  transform: rotate(0deg) scale(1.015);
  z-index: 4;
}

.rdb-moment-taped::before,
.rdb-moment-taped::after {
  content: "";
  position: absolute;
  top: -3%;
  width: 17%;
  height: 9%;
  background: rgba(255, 250, 227, 0.62);
  box-shadow: 0 2px 5px rgba(17, 17, 17, 0.18);
  z-index: 3;
}

.rdb-moment-taped::before {
  left: 6%;
  transform: rotate(-8deg);
}

.rdb-moment-taped::after {
  right: 6%;
  transform: rotate(7deg);
}

/* ---------------------------------------------------------
   "In Consolle": decine di copie fantasma della sagoma sbucano
   da sinistra e convergono sulla foto reale, via via meno
   sfocate e piu' lente, come una scia che si deposita. Le copie
   sono <img> clonate via JS (vedi rdb-site.js), una per una,
   sempre la stessa sagoma ritagliata - mai la consolle, che qui
   semplicemente non esiste nel PNG trasparente di partenza. */
.rdb-console-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
  /* Solo la sagoma: la scia di copie si dissolve prima di arrivare
     alla consolle (parte bassa della foto), che quindi resta sempre
     ferma e nitida - e' solo la foto reale sotto, mai duplicata.
     Foto aggiornata con un margine vuoto in cima (~60px trasparenti,
     circa il 6% dell'altezza) per non avere piu' la testa a ridosso
     del bordo - la consolle ora inizia al 57,3% dell'altezza reale
     dell'immagine. Percentuali ricalcolate di conseguenza, tenendo
     conto anche del riquadro piu' basso su mobile (4:3 invece di
     21:9, che "contiene" l'immagine con bande vuote sopra e sotto):
     51% di riquadro resta sempre prima della consolle su entrambi i
     formati, con un margine di sicurezza. La testa resta sempre
     nella zona opaca. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 97%);
}

.rdb-console-ghost-play {
  animation-name: rdbConsoleGhost;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  animation-duration: var(--rdb-ghost-duration, 900ms);
  animation-delay: var(--rdb-ghost-delay, 0ms);
}

@keyframes rdbConsoleGhost {
  0% {
    opacity: 0;
    filter: blur(var(--rdb-ghost-blur, 22px));
    transform: translateX(-65%);
  }
  45% {
    opacity: var(--rdb-ghost-peak, 0.45);
  }
  100% {
    opacity: 0;
    filter: blur(0px);
    transform: translateX(0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdb-console-ghost {
    display: none;
  }
}

@media (max-width: 780px) {
  .rdb-moments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rdb-moment:first-child {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }
  .rdb-moment-wide {
    grid-column: span 2 !important;
    aspect-ratio: 4 / 3 !important;
  }
  .rdb-moment-polaroid {
    grid-column: span 2 !important;
    max-width: 72%;
    padding: 6% 7% 21%;
  }
}

/* ---------------------------------------------------------
   VIDEO EXPERIENCE (mani sul mixer, a tutto schermo, testi in
   dissolvenza mentre scorri - stessa idea del vecchio sito).
   L'avanzamento e' legato alla posizione di scroll reale tramite
   getBoundingClientRect() dentro un contenitore "sticky": nessuna
   libreria, nessun calcolo pesante, solo opacity/transform/filter
   aggiornati con requestAnimationFrame mentre la sezione e' a
   schermo (vedi rdb-site.js).
   --------------------------------------------------------- */
.rdb-video-experience-scroll {
  position: relative;
  height: 420vh;
  background: var(--rdb-dark);
}

.rdb-video-experience-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--rdb-dark);
}

.rdb-video-experience-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.78) saturate(1.05);
  opacity: 1;
}

.rdb-video-experience-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.28), rgba(11, 11, 12, 0.44));
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
}

/* Su schermi stretti l'inquadratura verticale mostra solo una fetta
   centrale del video: la spostiamo un po' verso destra per tenere a
   schermo la parte con le mani in movimento (vedi rdb-site.js). */
@media (max-width: 767px) {
  .rdb-video-experience-bg {
    object-position: 65% center;
  }
}

/* Pulsante di riserva: se il video non riesce a partire da solo (alcuni
   iPhone/versioni di Safari lo bloccano comunque), dopo un istante compare
   questo pulsante per avviarlo con un tocco diretto sul video stesso -
   l'unico modo che il telefono accetta sempre, in ogni circostanza. */
.rdb-video-experience-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(11, 11, 12, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.rdb-video-experience-play.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.rdb-video-experience-play-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid rgba(255, 255, 255, 0.92);
}

.rdb-video-experience-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.rdb-video-word {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 5vw, 80px);
  text-align: center;
  opacity: 0;
  transform: scale(0.965);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

.rdb-video-word span {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.42);
}

.rdb-video-experience-caption {
  position: absolute;
  left: 5vw;
  bottom: 5vh;
  z-index: 5;
  font-size: clamp(9px, 0.8vw, 12px);
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.58);
  opacity: 0;
  will-change: opacity;
}

@media (max-width: 800px) {
  .rdb-video-experience-scroll {
    height: 360vh;
  }

  .rdb-video-word span {
    font-size: clamp(44px, 16vw, 110px);
  }
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */
.rdb-contact {
  background: var(--rdb-dark);
  color: #fff;
  padding: 100px clamp(20px, 5vw, 60px);
}

.rdb-contact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.rdb-contact h2 {
  font-size: clamp(38px, 9vw, 110px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  margin: 10px 0 40px;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.34);
}

.rdb-contact-links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rdb-line);
}

.rdb-contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rdb-line);
  color: #fff;
  text-decoration: none;
}

.rdb-contact-link-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.55;
}

.rdb-contact-link-value {
  font-size: clamp(16px, 1.8vw, 19px);
  flex: 1;
  text-align: left;
  margin-left: 20px;
}

.rdb-contact-footer {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.rdb-contact-locations {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 0.4;
}

/* --------------------------------------------------------
   Modulo richiesta preventivo (Contact Form 7) - stile minimale
   coerente col resto del sito: niente caselle/box, solo linee
   sottili come nella lista contatti sotto, testo bianco su sfondo
   scuro. Le classi .wpcf7-* sono generate automaticamente dal
   plugin, il resto (label, spaziatura, righe) e' nostro, scritto
   direttamente nel modulo di Contact Form 7.
   --------------------------------------------------------- */
.rdb-quote {
  margin-bottom: 60px;
}

.rdb-quote-intro {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.75;
  margin: 0 0 34px;
}

.rdb-quote-row {
  display: flex;
  gap: 24px;
}

.rdb-quote-field {
  flex: 1;
  text-align: left;
  margin: 0 0 24px;
}

.rdb-quote-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
}

.rdb-quote-field input,
.rdb-quote-field select,
.rdb-quote-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rdb-line);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  padding: 8px 2px;
  outline: none;
  transition: border-color 0.3s ease;
  appearance: none;
  border-radius: 0;
}

.rdb-quote .rdb-quote-field select {
  cursor: pointer;
  color: var(--rdb-accent);
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffb648' stroke-opacity='0.85' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 8px;
  padding-right: 20px;
}

.rdb-quote .rdb-quote-field select option {
  background: var(--rdb-dark);
  color: var(--rdb-accent);
}

.rdb-quote-field textarea {
  min-height: 90px;
  resize: vertical;
}

.rdb-quote-field input:focus,
.rdb-quote-field select:focus,
.rdb-quote-field textarea:focus {
  border-bottom-color: #fff;
}

.rdb-quote-field input::placeholder,
.rdb-quote-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.rdb-quote-submit-row {
  text-align: center;
  margin-top: 10px;
}

.rdb-quote-submit-row input[type="submit"] {
  background: #fff;
  color: var(--rdb-dark);
  border: none;
  padding: 16px 42px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border-radius: 999px;
}

.rdb-quote-submit-row input[type="submit"]:hover {
  opacity: 0.85;
}

.rdb-quote-submit-row input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Messaggi di stato di CF7 (successo/errore/validazione). */
.rdb-quote .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--rdb-line);
  font-size: 13px;
  text-align: center;
  border-radius: 8px;
}

.rdb-quote .wpcf7-not-valid-tip {
  display: block;
  font-size: 11px;
  color: #ff8a8a;
  margin-top: 6px;
}

.rdb-quote form.sent .rdb-quote-submit-row input[type="submit"] {
  opacity: 0.6;
}

@media (max-width: 700px) {
  .rdb-quote-row {
    flex-direction: column;
    gap: 0;
  }
}

.rdb-contact-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.4;
}

.rdb-contact-divider::before,
.rdb-contact-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rdb-line);
}

/* ---------------------------------------------------------
   Campo "Luogo": dropdown di completamento automatico città
   --------------------------------------------------------- */
.rdb-quote-field-autocomplete {
  position: relative;
}

.rdb-city-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: var(--rdb-dark);
  border: 1px solid var(--rdb-line);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  text-align: left;
}

.rdb-city-dropdown.is-open {
  display: block;
}

.rdb-city-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
}

.rdb-city-dropdown-item.is-active,
.rdb-city-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------
   Campo "Data dell'evento": calendario personalizzato, coerente
   in ogni browser (quello nativo si comportava diversamente tra
   Safari e Chrome e non si chiudeva sempre da solo). Si apre
   sotto al campo come il completamento automatico del Luogo;
   il campo resta comunque scrivibile a mano.
   --------------------------------------------------------- */
.rdb-quote-field:has(.rdb-date-dropdown) {
  position: relative;
}

.rdb-date-dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  width: 280px;
  max-width: 90vw;
  background: var(--rdb-dark);
  border: 1px solid var(--rdb-line);
  border-radius: 8px;
  padding: 14px;
  z-index: 20;
  text-align: left;
}

.rdb-date-dropdown.is-open {
  display: block;
}

.rdb-date-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.rdb-date-nav {
  background: transparent;
  border: 1px solid var(--rdb-line);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.rdb-date-nav:hover {
  border-color: #fff;
}

.rdb-date-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.rdb-date-dow {
  font-size: 10px;
  opacity: 0.45;
  padding: 4px 0;
}

.rdb-date-day {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12.5px;
  padding: 7px 0;
  border-radius: 6px;
  cursor: pointer;
}

.rdb-date-day:hover {
  background: rgba(255, 255, 255, 0.08);
}

.rdb-date-day.is-selected {
  background: var(--rdb-accent);
  color: var(--rdb-dark);
  font-weight: 600;
}

.rdb-date-day.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ---------------------------------------------------------
   Ora di inizio / ora di fine: cliccando si apre un elenco di
   orari da scegliere (ogni mezz'ora); il campo resta comunque
   scrivibile a mano per chi preferisce digitare direttamente.
   --------------------------------------------------------- */
.rdb-quote-field:has(.rdb-time-dropdown) {
  position: relative;
}

.rdb-time-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: var(--rdb-dark);
  border: 1px solid var(--rdb-line);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  text-align: left;
}

.rdb-time-dropdown.is-open {
  display: block;
}

.rdb-time-dropdown-item {
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
}

.rdb-time-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------
   "Cosa serve?" - macro-categorie con le rispettive pillole
   --------------------------------------------------------- */
.rdb-quote-field-full {
  margin: 0 0 30px;
  text-align: left;
}

.rdb-quote-field-full > label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 12px;
}

.rdb-quote-group {
  margin: 0 0 26px;
}

.rdb-quote-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rdb-accent);
  opacity: 0.85;
  margin: 0 0 12px;
}

.rdb-quote-group-altro textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--rdb-line);
  border-radius: 8px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  min-height: 70px;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s ease;
}

.rdb-quote-group-altro textarea:focus {
  border-color: #fff;
}

.rdb-quote-group-altro textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.rdb-quote-checklist .wpcf7-list-item {
  display: inline-block;
  margin: 0 10px 10px 0;
}

.rdb-quote-checklist .wpcf7-list-item label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rdb-line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
}

.rdb-quote-checklist .wpcf7-list-item input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.rdb-quote-checklist .wpcf7-list-item label:has(input:checked) {
  background: var(--rdb-accent);
  border-color: var(--rdb-accent);
  color: var(--rdb-dark);
  font-weight: 600;
}

/* ---------------------------------------------------------
   Messaggio di conferma dopo l'invio: stile "scritto a mano"
   --------------------------------------------------------- */
.rdb-quote form.sent .wpcf7-response-output {
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--rdb-accent);
  border-color: var(--rdb-accent);
  background: rgba(255, 182, 72, 0.06);
  opacity: 0.95;
}

/* ---------------------------------------------------------
   Tasto "RICHIEDI PREVENTIVO" - apre la schermata a tutto
   schermo del modulo. Bordo bianco su sfondo scuro (siamo gia'
   dentro la sezione Contatti, che e' scura), lampeggiante per
   farsi notare senza essere invadente.
   --------------------------------------------------------- */
.rdb-quote-cta {
  display: block;
  margin: 0 auto 50px;
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  padding: 16px 42px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  animation: rdb-quote-cta-blink 2.6s ease-in-out infinite;
  transition: background 0.25s ease, color 0.25s ease;
}

.rdb-quote-cta:hover {
  background: #fff;
  color: var(--rdb-dark);
  opacity: 1;
  animation-play-state: paused;
}

@keyframes rdb-quote-cta-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .rdb-quote-cta {
    animation: none;
  }
}

/* ---------------------------------------------------------
   Richiesta preventivo: schermata a tutto schermo, sopra tutto
   il resto del sito. Nascosta di base (opacita' + pointer-events),
   entra con una dissolvenza quando riceve .is-open. Mentre e'
   aperta il menu in alto e i puntini laterali spariscono (vedi
   body.rdb-quote-overlay-open piu' sotto).
   --------------------------------------------------------- */
.rdb-quote-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--rdb-dark);
  color: #fff;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
  -webkit-overflow-scrolling: touch;
}

.rdb-quote-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rdb-quote-overlay-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 60px) clamp(20px, 5vw, 60px) 80px;
  text-align: center;
}

.rdb-quote-overlay .rdb-kicker {
  margin-top: 46px;
}

/* Il tasto "torna indietro" lascia il posto al normale menu di
   navigazione (che resta comunque leggibile col suo sfondo chiaro),
   cosi' dal preventivo si puo' tornare alla home o a qualsiasi altra
   sezione, non solo tornare indietro. */
.rdb-quote-back {
  display: none;
}

body.rdb-quote-overlay-open {
  overflow: hidden;
}

body.rdb-quote-overlay-open .rdb-section-dots {
  display: none;
}

body.rdb-quote-overlay-open .rdb-nav {
  z-index: 310;
}

/* ---------------------------------------------------------
   LOGO FINALE - firma di chiusura del sito
   --------------------------------------------------------- */
.rdb-logo-finale {
  background: var(--rdb-dark);
  color: #fff;
  padding: 70px 20px 60px;
  text-align: center;
}

.rdb-logo-pieces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 60px;
}

.rdb-logo-piece {
  opacity: 0;
  transform: scale(0.4) rotate(-30deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rdb-logo-finale-inner.is-visible .rdb-logo-piece {
  opacity: 1;
  transform: none;
}

.rdb-logo-finale-inner.is-visible .rdb-logo-pause { transition-delay: 0.15s; }
.rdb-logo-finale-inner.is-visible .rdb-logo-play { transition-delay: 0.3s; }

.rdb-logo-circle {
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
}

.rdb-logo-pause {
  width: 14px;
  height: 36px;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.rdb-logo-play {
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid #fff;
}

.rdb-logo-finale-text {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
}