/* ===================== Design tokens ===================== */
:root {
  --void: #050505;
  --charcoal: #0a0a0a;
  --ash: #1a1412;
  --lava: #e8291c;
  --ember: #ff6a1a;
  --amber: #ff8c00;
  --gold: #f4c430;
  --cream: #fff4e2;

  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: auto; background: var(--void); }
body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--font-body);
  overscroll-behavior-y: none;
  overflow-x: hidden;
  min-height: 100vh; /* fallback per browser senza supporto a svh */
  min-height: 100svh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }

/* ===================== Sfondo lava animato =====================
   Versione leggera: niente blur giganti né rotazioni a schermo intero
   (bloccavano il rendering sui dispositivi meno potenti). Il movimento
   visibile viene da: braci che salgono di continuo (JS), lago di lava
   che pulsa in basso, bolle di magma che derivano (solo transform). */
.lava-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% 50%, rgba(232,41,28,0.26) 0%, rgba(255,106,26,0.12) 40%, transparent 70%),
    radial-gradient(110% 80% at 50% -18%, rgba(232,41,28,0.3) 0%, rgba(122,18,7,0.15) 45%, transparent 65%),
    linear-gradient(180deg, #1c070b 0%, #26090a 50%, #1a0709 100%);
}
/* i gradienti radiali hanno già bordi morbidi: nessun filter blur */
.lava-blob { position: absolute; border-radius: 50%; will-change: transform; pointer-events: none; }
.lava-blob-1 {
  width: 70vmax; height: 70vmax; left: -22vmax; top: -20vmax;
  background: radial-gradient(circle, rgba(232,41,28,0.5) 0%, rgba(232,41,28,0.22) 35%, rgba(232,41,28,0) 66%);
  animation: lava-drift-1 22s ease-in-out infinite;
}
.lava-blob-2 {
  width: 60vmax; height: 60vmax; right: -20vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(255,106,26,0.48) 0%, rgba(255,106,26,0.2) 35%, rgba(255,106,26,0) 66%);
  animation: lava-drift-2 26s ease-in-out infinite;
}
.lava-blob-3 {
  width: 48vmax; height: 48vmax; left: 28vmax; top: 34vmax;
  background: radial-gradient(circle, rgba(244,196,48,0.3) 0%, rgba(244,196,48,0.12) 35%, rgba(244,196,48,0) 66%);
  animation: lava-drift-3 32s ease-in-out infinite;
}
/* lago di lava che respira in fondo allo schermo */
.lava-lake {
  position: absolute; inset-inline: 0; bottom: 0; height: 42vh; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 112%, rgba(255,140,0,0.55) 0%, rgba(232,41,28,0.35) 34%, rgba(122,18,7,0.16) 60%, transparent 78%);
  animation: lake-pulse 4.6s ease-in-out infinite;
}
/* contenitore braci che salgono (popolato da JS) */
.lava-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lava-cracks {
  position: absolute; inset: -10%; pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,244,226,0.09) 0%, transparent 2%),
    radial-gradient(circle at 78% 60%, rgba(255,244,226,0.07) 0%, transparent 1.5%),
    radial-gradient(circle at 45% 85%, rgba(255,244,226,0.08) 0%, transparent 2%),
    radial-gradient(circle at 62% 30%, rgba(255,244,226,0.06) 0%, transparent 1.5%),
    radial-gradient(circle at 90% 15%, rgba(255,244,226,0.06) 0%, transparent 1.5%);
  animation: flicker 3.4s ease-in-out infinite;
}
@keyframes lake-pulse {
  0%, 100% { opacity: 0.7; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.08); }
}
@keyframes lava-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10vmax, 12vmax) scale(1.15); }
  66% { transform: translate(-6vmax, 8vmax) scale(0.95); }
}
@keyframes lava-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-12vmax, -10vmax) scale(1.18); }
  70% { transform: translate(-4vmax, -16vmax) scale(0.92); }
}
@keyframes lava-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16vmax, -8vmax) scale(1.3); }
}

.section-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }

/* ===================== Section label (gold, underline) ===================== */
.section-label { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.section-label span { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.35em; color: rgba(244,196,48,0.9); }
.section-label i { width: 40px; height: 1px; background: rgba(244,196,48,0.6); font-style: normal; }
.section-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.section-heading h2 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

/* ===================== Buttons ===================== */
.btn-lava {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 14px 32px;
  background: var(--lava); color: var(--cream);
  border-radius: 999px; font-family: var(--font-display);
  font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase;
}
.glow-pulse { animation: glow-pulse 2.4s ease-in-out infinite; }

/* ===================== Scia di braci sul cursore ===================== */
.cursor-ember {
  position: fixed; top: 0; left: 0; z-index: 60;
  border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  animation: cursor-rise 0.7s ease-out forwards;
}
@keyframes cursor-rise {
  0% { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.25); }
}

/* ===================== Pulsante fisso info/contatti (FAB) ===================== */
.fab {
  position: fixed; right: 16px; bottom: 88px; z-index: 35;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fab-btn {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lava);
  box-shadow: 0 0 0 2px rgba(255,244,226,0.18), 0 6px 24px rgba(232,41,28,0.6);
  animation: glow-pulse 2.4s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.fab-btn img { width: 34px; height: 34px; object-fit: contain; }
.fab-btn:active { transform: scale(0.94); }
.fab.open .fab-btn { transform: rotate(45deg); }
.fab-menu {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fab.open .fab-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-item {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: transform 0.15s ease;
}
.fab-item:active { transform: scale(0.92); }
.fab-item svg { width: 24px; height: 24px; }
/* WhatsApp: icona piena */
.fab-wa svg { fill: #fff; }
/* Instagram ed email: icona a contorno bianco */
.fab-ig svg, .fab-mail svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab-ig svg .ig-dot { fill: #fff; stroke: none; }
.fab-wa { background: #25d366; }
.fab-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.fab-mail { background: var(--lava); }
@media (min-width: 640px) {
  .fab { right: 28px; bottom: 28px; }
}

/* CTA hero: molto più visibile sul video (pulsazione + bagliore + riflesso) */
.btn-hero-cta {
  position: relative; overflow: hidden;
  padding: 16px 42px; font-size: 20px;
  background: linear-gradient(120deg, var(--lava), var(--ember));
  border: 2px solid rgba(255,244,226,0.35);
  animation: hero-cta-pulse 1.9s ease-in-out infinite;
}
.btn-hero-cta > span { position: relative; z-index: 2; }
.btn-hero-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.55) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: hero-cta-shine 2.9s ease-in-out infinite;
}
@keyframes hero-cta-shine {
  0%, 55% { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%); }
}
@keyframes hero-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,106,26,0.55), 0 0 22px rgba(255,106,26,0.55), 0 10px 28px rgba(232,41,28,0.45); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,106,26,0), 0 0 42px rgba(255,106,26,0.9), 0 10px 30px rgba(232,41,28,0.6); }
}

/* ===================== Keyframes ===================== */
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.94; } 50% { opacity: 0.82; } 55% { opacity: 0.97; } }
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(232,41,28,0.3); }
  50% { box-shadow: 0 0 20px rgba(255,106,26,0.4); }
}
@keyframes shimmer { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-1.5%,0) scale(1.01); } }
@keyframes kenburns { 0% { transform: scale(1.02) translate(0,0); } 100% { transform: scale(1.13) translate(-1%,-1%); } }
@keyframes drip { 0% { transform: translateY(-16px) scaleY(0.6); opacity: 0; } 60% { transform: translateY(4px) scaleY(1.05); opacity: 1; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } }
@keyframes lava-fill { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes boom { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.35); opacity: 0.9; } }
@keyframes digit-flip { 0% { transform: translateY(-30%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes float-up { 0% { transform: translate3d(0,0,0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate3d(var(--drift,12px), -120vh, 0); opacity: 0; } }
@keyframes fall-down { 0% { transform: translateY(-10%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(115vh); opacity: 0; } }

.drip { animation: drip 1s ease-out both; }
.drip-delay-1 { animation: drip 1s ease-out 0.35s both; }
/* Solo dissolvenza (niente scala/traslazione): usata sui pulsanti perché
   "drip" sposta e rimpicciolisce l'elemento durante l'entrata — l'area
   cliccabile è comunque presente (solo invisibile) e si muove per ~1s,
   quindi un tap nell'istante sbagliato subito dopo il caricamento manca
   il bersaglio. Con la sola opacità il pulsante resta sempre al suo posto. */
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.fade-in-delay-2 { animation: fade-in 0.6s ease-out 0.55s both; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--lava); border-radius: 8px; }

/* ===================== Loading screen ===================== */
.loading-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--void);
  transition: opacity 0.3s ease;
}
.loading-screen.hide { opacity: 0; pointer-events: none; }
.loading-ember-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 65%, rgba(232,41,28,0.35), transparent 60%);
  animation: flicker 3.2s ease-in-out infinite;
}
.loading-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 24px; }
/* Il filter si attiva solo a decodifica confermata (classe aggiunta via JS):
   applicarlo subito su un'immagine non ancora decodificata puo' far si che
   Safari disegni per un istante un riquadro pieno al posto dell'ombra
   sagomata sulle lettere (bug di rendering legato alla race di decodifica). */
.loading-logo { width: 200px; }
.loading-logo.decoded { filter: drop-shadow(0 0 30px rgba(232,41,28,0.55)); }
.loading-tagline { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em; color: var(--gold); margin: 0; }
.loading-bar-wrap { position: relative; width: 260px; }
.loading-bar-track { height: 12px; width: 100%; border-radius: 999px; background: var(--ash); overflow: hidden; box-shadow: 0 0 0 1px rgba(244,196,48,0.35), 0 0 18px rgba(255,106,26,0.35), inset 0 0 18px rgba(232,41,28,0.15); }
.loading-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #7a1207, var(--lava), var(--ember), var(--gold), var(--lava), #7a1207); background-size: 300% 100%; animation: lava-fill 2.2s linear infinite; }
.loading-percent { margin: 10px 0 0; text-align: center; font-family: var(--font-display); font-size: 32px; color: var(--cream); font-variant-numeric: tabular-nums; }

/* Mascotte che corre attraverso lo schermo (video keyed su canvas) */
.mascot-run-canvas {
  position: absolute; z-index: 1; bottom: 4vh; left: 0;
  height: 36vh; width: auto; aspect-ratio: 480 / 854;
  pointer-events: none;
  will-change: transform;
  visibility: hidden;
}
.mascot-run-canvas.running { visibility: visible; }

@media (min-width: 640px) {
  .loading-logo { width: 260px; }
}
.loading-skip { min-height: 44px; padding: 0 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,244,226,0.5); text-decoration: underline; text-underline-offset: 4px; }
.loading-flash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #fff4e2 0%, #ff8c00 45%, #e8291c 100%);
  opacity: 0; transition: opacity 0.18s ease;
}
.loading-flash.show { opacity: 1; }

/* ===================== Nav ===================== */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled { background: rgba(5,5,5,0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-logo { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; }
.nav-logo img { height: 36px; width: 36px; }
.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.8); transition: color 0.2s ease; }
.nav-links a:hover { color: var(--gold); text-shadow: 0 0 12px rgba(232,41,28,0.65); }
.nav-cta { min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--lava); font-family: var(--font-display); color: var(--cream) !important; display: flex; align-items: center; }
.nav-burger { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; position: relative; }
.nav-burger span { position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 999px; background: var(--cream); transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease; }
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 27px; }
.nav-burger.open { filter: drop-shadow(0 0 6px rgba(232,41,28,0.85)) drop-shadow(0 0 12px rgba(244,196,48,0.6)); }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--lava); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--lava); }

.nav-mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: rgba(5,5,5,0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.nav-mobile-menu.open { opacity: 1; pointer-events: auto; }
/* Area tap ≥44px (36px di testo da soli erano sotto lo standard touch) */
.nav-mobile-menu a { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; padding: 8px 24px; }

.bottom-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  padding: 24px 16px max(env(safe-area-inset-bottom), 12px);
  background: linear-gradient(to top, var(--void), rgba(5,5,5,0.9), transparent);
}
.bottom-cta .btn-lava { width: 100%; max-width: 320px; }

@media (min-width: 640px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .bottom-cta { display: none; }
}

/* ===================== Hero ===================== */
.hero { position: relative; height: 130vh; }
.hero-sticky {
  position: sticky; top: 0; width: 100%; overflow: hidden; background: var(--void);
  /* Altezza stabile invece di 100dvh: su mobile 100dvh si ridimensiona in
     tempo reale quando la barra degli indirizzi si nasconde/mostra durante
     lo scroll, spostando leggermente i pulsanti dentro l'hero proprio nel
     momento del tap e facendo "sbagliare mira" al click. 100svh resta fermo. */
  height: 100vh; /* fallback per browser senza supporto a svh */
  height: 100svh;
}
.hero-scene { position: absolute; inset: 0; }
.hero-photo { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--void) 0%, rgba(5,5,5,0.35) 22%, rgba(5,5,5,0.05) 45%, rgba(5,5,5,0.4) 100%); }
.hero-scrim-top { position: absolute; inset-inline: 0; top: 0; height: 128px; pointer-events: none; background: linear-gradient(to bottom, rgba(5,5,5,0.8), transparent); }
.hero-content {
  position: relative; z-index: 10; height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 0 24px; text-align: center;
}
.hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4em; color: rgba(244,196,48,0.9); }
.hero-wordmark { width: 260px; }
.hero-wordmark img { width: 100%; height: auto; filter: drop-shadow(0 0 35px rgba(232,41,28,0.6)); }
.hero-sub { max-width: 320px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.9); }

@media (min-width: 640px) {
  .hero-wordmark { width: 340px; }
  .hero-sub { max-width: 420px; font-size: 16px; }
}
@media (min-width: 768px) {
  .hero-wordmark { width: 420px; }
}

/* Particella/detriti generati via JS (ember + eruzione) */
.particle { position: absolute; border-radius: 999px; pointer-events: none; }
.particle-ember { background: var(--ember); opacity: 0.7; filter: blur(0.5px); }
.particle-gold { background: var(--gold); opacity: 0.7; filter: blur(0.5px); }
.particle-chunk { background: radial-gradient(circle at 35% 30%, #fff4e2, #ff8c00 45%, #e8291c 100%); }
.particle-rain { width: 3px; border-radius: 999px; background: linear-gradient(to bottom, var(--gold), var(--ember), var(--lava)); }
.burst-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, #fff4e2 0%, #ff8c00 35%, #e8291c 70%, transparent 100%); opacity: 0; }

/* ===================== Prossimo evento ===================== */
.event-section { position: relative; padding: 96px 0; overflow: hidden; }
.event-glow { position: absolute; left: 50%; top: 0; height: 288px; width: 288px; transform: translate(-50%,-33%); border-radius: 999px; background: rgba(232,41,28,0.14); filter: blur(60px); pointer-events: none; }
.event-venue { font-family: var(--font-display); font-size: 44px; text-transform: uppercase; color: var(--cream); text-shadow: 0 0 28px rgba(232,41,28,0.4); margin: 0; }
/* logo del locale al posto della scritta */
.event-venue.has-logo { text-shadow: none; }
.venue-logo {
  width: min(78vw, 340px); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 22px rgba(232,41,28,0.45)) drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.event-lineup { max-width: 380px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,244,226,0.6); }

.countdown { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 8px; }
.countdown-pulse {
  position: absolute; left: 50%; top: 50%; z-index: -1; height: 140%; width: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(232,41,28,0.22), transparent 70%);
  animation: countdown-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
.countdown-digit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.digit-face {
  display: block; perspective: 240px;
  font-family: var(--font-display); font-size: 48px; line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.digit-face span { display: inline-block; transform-origin: 50% 50%; }
.countdown-digit label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255,244,226,0.45); }
.countdown-sep { font-family: var(--font-display); font-size: 38px; line-height: 1; margin-top: 4px; color: var(--lava); animation: sep-blink 1s step-start infinite; }
.digit-flip span { animation: digit-flip 0.5s cubic-bezier(0.32,0.1,0.2,1) both; }
#cd-sec.digit-flip span { color: var(--gold); animation: digit-flip-sec 0.5s cubic-bezier(0.32,0.1,0.2,1) both; }

@keyframes countdown-breathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes sep-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
@keyframes digit-flip {
  0% { transform: rotateX(-100deg) translateY(-8%); opacity: 0; filter: blur(3px); }
  55% { transform: rotateX(20deg) translateY(2%); opacity: 1; filter: blur(0); }
  100% { transform: rotateX(0deg) translateY(0); opacity: 1; }
}
@keyframes digit-flip-sec {
  0% { transform: rotateX(-100deg) scale(1.15); opacity: 0; filter: blur(3px); text-shadow: 0 0 18px rgba(244,196,48,0.9); }
  55% { transform: rotateX(20deg) scale(1.08); opacity: 1; filter: blur(0); }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; text-shadow: 0 0 0 rgba(244,196,48,0); }
}

@media (min-width: 640px) {
  .event-venue { font-size: 64px; }
  .countdown { gap: 20px; }
  .digit-face { font-size: 88px; }
  .countdown-sep { font-size: 68px; margin-top: 8px; }
}

.flyer-card {
  perspective: 900px; width: 100%; max-width: 320px;
}
.flyer-placeholder {
  position: relative; aspect-ratio: 4/5; width: 100%; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--ash), var(--charcoal));
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1), 0 24px 48px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
  transition: transform 0.1s ease-out;
}
.flyer-placeholder span { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(255,244,226,0.5); }
.flyer-placeholder small { font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.3); }

/* flyer reale (video animato o immagine) */
.flyer-card--media { max-width: 340px; }
.flyer-media {
  position: relative; aspect-ratio: 9/16; width: 100%; border-radius: 18px; overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 0 0 1px rgba(244,196,48,0.35), 0 0 32px rgba(232,41,28,0.4), 0 26px 54px rgba(0,0,0,0.55);
  transition: transform 0.12s ease-out;
  transform-style: preserve-3d;
  animation: flyer-glow 3.4s ease-in-out infinite;
}
.flyer-media video, .flyer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* riflesso che attraversa il flyer */
.flyer-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,244,226,0.28) 48%, rgba(255,244,226,0.05) 55%, transparent 70%);
  transform: translateX(-120%);
  animation: flyer-shine 4.6s ease-in-out infinite;
}
@keyframes flyer-shine {
  0%, 62% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}
@keyframes flyer-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244,196,48,0.3), 0 0 26px rgba(232,41,28,0.35), 0 26px 54px rgba(0,0,0,0.55); }
  50% { box-shadow: 0 0 0 1px rgba(244,196,48,0.55), 0 0 40px rgba(255,106,26,0.55), 0 26px 54px rgba(0,0,0,0.55); }
}

/* data + luogo sotto il nome del locale */
.event-when {
  margin: -8px 0 0; font-family: var(--font-body); font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold);
  text-shadow: 0 0 12px rgba(232,41,28,0.4);
}

/* dettagli d'ingresso */
.event-entry { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.entry-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(26,20,18,0.6); border: 1px solid rgba(244,196,48,0.22);
  font-size: 14px; color: rgba(255,244,226,0.9);
}
.entry-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(232,41,28,0.18); color: var(--gold);
}

/* pulsanti azione evento */
/* i due pulsanti evento, stessa grandezza, impilati sotto l'evento */
.event-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.event-cta { width: 100%; max-width: 320px; }
.btn-outline {
  background: transparent; color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.6);
}
.btn-outline:hover { background: rgba(244,196,48,0.12); }
.event-note { margin: -12px 0 0; font-size: 12px; letter-spacing: 0.06em; color: rgba(255,244,226,0.55); }
.event-disclaimer { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,244,226,0.4); }

.partner-venues { width: 100%; }
.partner-venues p { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.5); }
.partner-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.partner-tags span { border-radius: 999px; border: 1px solid rgba(244,196,48,0.3); padding: 6px 14px; font-size: 12px; color: rgba(244,196,48,0.9); }

/* ===================== Sections generiche (video/galleria/about) ===================== */
.section { position: relative; padding: 80px 0; background: transparent; overflow: hidden; }
.section > .section-inner { position: relative; z-index: 1; }
/* velo leggero dietro il testo per leggibilità, senza coprire la lava */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(8,3,2,0.22);
}
/* leggibilità del testo con la lava viva dietro */
.section-inner h2,
.section-inner p,
.section-label span,
.event-venue,
.about-text,
.about-claim { text-shadow: 0 2px 18px rgba(0,0,0,0.95), 0 1px 6px rgba(0,0,0,0.85); }

.coming-soon {
  margin: 0 auto; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 1px solid rgba(255,244,226,0.1); border-radius: 16px; background: rgba(26,20,18,0.4);
  padding: 48px 32px; text-align: center;
}
.coming-soon-title { margin: 0; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(255,244,226,0.85); }
.coming-soon-text { margin: 0; max-width: 300px; font-size: 14px; color: rgba(255,244,226,0.5); }
.coming-soon-text span { color: rgba(255,244,226,0.7); }

/* ===================== Video / Aftermovie ===================== */
/* Swoosh: un unico carosello orizzontale a scorrimento su tutti i dispositivi */
.video-swoosh { position: relative; z-index: 1; margin-top: 40px; }
.video-carousel {
  display: flex; gap: 18px; padding: 8px 16px 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none;
}
.video-carousel::-webkit-scrollbar { display: none; }
.video-grid { display: none; }

.video-card {
  position: relative; flex: 0 0 78vw; scroll-snap-align: center;
  aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: var(--ash);
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1);
}

/* frecce swoosh: vetro scuro bordato oro, ben distinte dal tasto play rosso */
.video-arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 999px;
  align-items: center; justify-content: center;
  background: rgba(10,8,6,0.78); color: var(--gold);
  border: 1px solid rgba(244,196,48,0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 30px; line-height: 1; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.video-arrow:hover { background: rgba(244,196,48,0.18); border-color: var(--gold); transform: translateY(-50%) scale(1.08); }
.video-arrow-prev { left: 8px; }
.video-arrow-next { right: 8px; }
.video-arrow[disabled] { opacity: 0.25; pointer-events: none; }
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25); cursor: pointer;
}
.video-card.playing .video-card-overlay { background: transparent; }
.video-play-btn {
  display: flex; height: 64px; width: 64px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--lava); box-shadow: 0 0 24px rgba(255,106,26,0.6);
}
.video-play-btn svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--cream); }
.video-card.playing .video-play-btn { display: none; }
.video-mute-btn {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  display: flex; height: 44px; width: 44px; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.video-mute-btn svg { width: 20px; height: 20px; fill: var(--cream); }
.video-caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1; pointer-events: none;
  padding: 32px 16px 16px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.video-caption p { margin: 0; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; color: var(--cream); }
.video-caption span { font-size: 12px; color: rgba(255,244,226,0.7); }

@media (min-width: 640px) {
  .video-swoosh { max-width: 1180px; margin: 40px auto 0; }
  /* Niente snap né smooth nativo su desktop: lo snap "mandatory" annullava lo
     scroll delle frecce (i punti di aggancio collassano quasi tutti a 0 con
     più card per schermata) e le animazioni smooth native su questa pagina
     vengono uccise dai loop rAF (Lenis+GSAP) — le frecce animano via GSAP. */
  .video-carousel { padding: 8px 56px 20px; gap: 22px; scroll-snap-type: none; scroll-behavior: auto; }
  .video-card { flex: 0 0 300px; }
  .video-arrow { display: flex; }
}
@media (min-width: 1024px) {
  .video-card { flex: 0 0 320px; }
}

/* ===================== Galleria: griglia masonry + lightbox ===================== */
.gallery-grid {
  margin: 40px auto 0; max-width: 1100px; padding: 0 16px;
  column-count: 2; column-gap: 10px;
}
.gallery-item {
  display: block; width: 100%; margin-bottom: 10px; break-inside: avoid;
  border-radius: 12px; overflow: hidden; background: var(--ash);
  opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease;
}
.gallery-item.in-view { opacity: 1; transform: scale(1); }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.04); }

@media (min-width: 640px) {
  .gallery-grid { column-count: 3; column-gap: 14px; }
  .gallery-item { margin-bottom: 14px; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 24px;
  /* I browser "in-app" (Instagram, Facebook, TikTok...) a volte riportano
     un'altezza di schermo diversa da quella davvero visibile, con barre che
     appaiono/scompaiono: 100vh da solo lascia uno spazio vuoto in fondo e
     spinge i tasti freccia/scarica fuori dallo schermo. 100dvh si adatta
     all'altezza visibile reale; --app-vh (calcolato via JS in main.js) è la
     rete di sicurezza per i browser che non supportano nemmeno dvh. */
  height: 100vh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 85vh; border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.6); }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; display: flex; height: 44px; width: 44px;
  align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--cream);
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); display: flex; height: 44px; width: 44px;
  align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--cream);
  font-size: 24px;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (min-width: 640px) {
  .lightbox-prev { left: 32px; }
  .lightbox-next { right: 32px; }
}

/* ===================== About ===================== */
.about-section { padding: 80px 0 112px; }
.about-glow { position: absolute; right: -64px; top: 50%; height: 256px; width: 256px; transform: translateY(-50%); border-radius: 999px; background: rgba(232,41,28,0.14); filter: blur(60px); pointer-events: none; }
.about-section h2 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; margin: 0; }
.about-text { max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255,244,226,0.8); }
.about-claim { font-family: var(--font-display); font-size: 20px; color: var(--gold); text-shadow: 0 0 12px rgba(232,41,28,0.65); margin: 0; }

/* mascotte + testo affiancati su schermi larghi */
.about-layout { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about-mascot {
  width: 150px; flex-shrink: 0;
  filter: drop-shadow(0 14px 34px rgba(232,41,28,0.5));
  animation: mascot-bob 3.2s ease-in-out infinite;
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
/* card statistiche */
.about-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.about-stat {
  min-width: 108px; padding: 18px 22px; border-radius: 16px;
  background: rgba(26,20,18,0.55); border: 1px solid rgba(244,196,48,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.about-stat strong {
  display: block; font-family: var(--font-display); font-size: 32px; line-height: 1.1;
  color: var(--gold); text-shadow: 0 0 14px rgba(232,41,28,0.5);
}
.about-stat span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,244,226,0.7); }
/* chip dei locali partner nella sezione about */
.about-venues { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 520px; }
.about-venues span {
  padding: 8px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(232,41,28,0.12); border: 1px solid rgba(232,41,28,0.4);
  color: rgba(255,244,226,0.85);
}

@media (min-width: 640px) {
  .about-text { font-size: 18px; }
}
@media (min-width: 720px) {
  .about-layout { flex-direction: row; text-align: left; }
  .about-layout .about-text { text-align: left; }
  .about-mascot { width: 180px; }
}

/* ===================== Newsletter ===================== */
.newsletter-section { padding: 80px 0 96px; }
.newsletter-text { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,244,226,0.75); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; max-width: 480px; }
.newsletter-form input {
  flex: 1 1 220px; min-height: 48px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(255,244,226,0.25); background: rgba(26,20,18,0.75);
  color: var(--cream); font-family: var(--font-body); font-size: 15px;
}
.newsletter-form input::placeholder { color: rgba(255,244,226,0.4); }
.newsletter-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(244,196,48,0.35); }
.newsletter-success {
  display: none; margin: 0; padding: 16px 24px; border-radius: 16px;
  background: rgba(232,41,28,0.14); border: 1px solid rgba(244,196,48,0.35);
  color: rgba(255,244,226,0.92); font-size: 15px;
}
.newsletter-perks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.newsletter-perks span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em;
  background: rgba(26,20,18,0.6); border: 1px solid rgba(255,244,226,0.14);
  color: rgba(255,244,226,0.75);
}

/* ===================== Social (feed Instagram) ===================== */
.social-section { padding: 80px 0 96px; }
.social-glow { position: absolute; left: 50%; bottom: 0; height: 320px; width: 320px; transform: translate(-50%, 40%); border-radius: 999px; background: rgba(255,140,0,0.18); filter: blur(70px); pointer-events: none; }
.social-bio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.social-handle { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; color: var(--gold); text-shadow: 0 0 12px rgba(232,41,28,0.5); }
.social-bio p { max-width: 420px; margin: 0; font-size: 14px; color: rgba(255,244,226,0.6); }

/* Card statiche dei post Instagram (foto salvata + link): niente widget
   ufficiale di Instagram, che spesso resta bloccato ad altezza zero perché
   molti browser bloccano lo script di ridimensionamento nell'iframe. */
.social-embeds {
  display: flex; gap: 16px; width: 100%; max-width: 1100px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
}
.social-embeds > * { scroll-snap-align: center; flex: 0 0 auto; }

/* Altezza fissa, larghezza libera (non un riquadro 4:5 fisso): ogni card
   prende da sola la forma della sua foto — niente tagli (come con "cover")
   e niente barre nere ai lati (come succedeva con "contain" in un riquadro
   di proporzioni diverse dalla foto). */
.social-post-card {
  position: relative; display: block; flex: 0 0 auto; height: 260px;
  border-radius: 14px; overflow: hidden; background: var(--ash);
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1);
}
.social-post-card img { height: 100%; width: auto; display: block; transition: transform 0.3s ease; }
.social-post-card:hover img { transform: scale(1.05); }
.social-post-card-icon {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  display: flex; height: 32px; width: 32px; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(5,5,5,0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.social-post-card-icon svg { width: 16px; height: 16px; fill: var(--cream); }

@media (min-width: 640px) {
  .social-embeds { justify-content: center; }
  .social-post-card { height: 300px; }
}

/* ===================== Footer ===================== */
.footer { position: relative; overflow: hidden; background: rgba(10,10,10,0.78); padding: 64px 24px 112px; }
.footer-watermark { position: absolute; bottom: -64px; right: -64px; width: 256px; opacity: 0.06; pointer-events: none; }
.footer-inner { gap: 24px; }
.footer-logo { width: 160px; }
.footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer-social-btn {
  min-height: 48px; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; border-radius: 999px; font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.02em; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.footer-social-btn:active { transform: scale(0.96); }
.footer-social-btn svg { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }
.footer-social-btn--ig {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.footer-social-btn--ig:hover { box-shadow: 0 8px 28px rgba(214,41,118,0.5); }
.footer-social-btn--wa { background: #25D366; }
.footer-social-btn--wa:hover { box-shadow: 0 8px 28px rgba(37,211,102,0.5); }
.footer-contact { margin: 0; font-size: 12px; color: rgba(255,244,226,0.5); }
.footer-contact a { color: rgba(244,196,48,0.8); }
.footer-contact a:hover { text-decoration: underline; }
.footer-disclaimer { margin: 12px auto 0; max-width: 420px; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,244,226,0.4); }
.footer-copy { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.3); }

@media (min-width: 640px) {
  .footer { padding-bottom: 64px; }
  .footer-logo { width: 190px; }
}

/* ===================== Lead form (bottom-sheet mobile / modal desktop) ===================== */
.lead-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.lead-overlay.open { opacity: 1; pointer-events: auto; }
.lead-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
  border-radius: 24px 24px 0 0; background: var(--charcoal);
  box-shadow: 0 0 0 1px rgba(244,196,48,0.35), 0 0 18px rgba(255,106,26,0.35);
  padding: 24px 24px max(env(safe-area-inset-bottom), 24px);
  max-height: 88vh; max-height: 88svh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  /* Da chiuso, su desktop questo pannello sta centrato in pagina (sotto)
     e resta solo invisibile (opacity:0) — senza questo, da chiuso
     "ruba" comunque i click a qualsiasi bottone ci sia sotto (es. il
     primo ENTRA IN LISTA dell'hero, che spesso ci sta esattamente dietro). */
  pointer-events: none;
}
.lead-sheet.open { transform: translateY(0); pointer-events: auto; }
.lead-handle { margin: 0 auto 16px; height: 4px; width: 40px; border-radius: 999px; background: rgba(255,244,226,0.3); }
.lead-header { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.lead-header h3 { margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--gold); }
.lead-close { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; border-radius: 999px; color: rgba(255,244,226,0.7); }
.lead-form { display: flex; flex-direction: column; gap: 12px; }
.lead-form input, .lead-form textarea, .lead-form select {
  min-height: 44px; border-radius: 12px; background: var(--ash); padding: 12px 16px;
  color: var(--cream); font-family: var(--font-body); font-size: 16px;
  border: none; width: 100%; resize: vertical;
}
.lead-form textarea { min-height: 64px; line-height: 1.4; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(255,244,226,0.4); }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: 2px solid var(--lava); outline-offset: 0; }
/* campo obbligatorio non compilato: evidenziato in modo sempre visibile
   (niente popup nativo del browser, che dentro un pannello animato/scrollabile
   spesso non si posiziona bene e sembra "vuoto"). */
.lead-form .field-invalid, .newsletter-form .field-invalid {
  outline: 2px solid var(--lava); outline-offset: 0;
  background: rgba(232,41,28,0.14);
  animation: field-shake 0.35s ease;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.lead-status.error { color: var(--lava); font-weight: 600; }
/* menù a tendina numero persone: freccetta custom, niente stile nativo */
.lead-form select.lead-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZjRjNDMwJyBzdHJva2Utd2lkdGg9JzIuNScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.lead-form select.lead-select:invalid { color: rgba(255,244,226,0.4); }
.lead-select option { color: var(--cream); background: var(--charcoal); }
.lead-form button[type="submit"] { margin-top: 8px; }
.lead-info { margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: rgba(255,244,226,0.5); }

/* selettore numero partecipanti (1–5) */
.lead-people-label {
  margin: 6px 0 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,244,226,0.6); text-align: center;
}
.lead-people { display: flex; gap: 10px; justify-content: center; }
.people-option {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ash); border: 1px solid rgba(255,244,226,0.15);
  font-family: var(--font-display); font-size: 20px; color: var(--cream);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.people-option:hover { border-color: rgba(244,196,48,0.5); transform: translateY(-2px); }
.people-option.selected {
  background: var(--lava); border-color: transparent;
  box-shadow: 0 0 16px rgba(232,41,28,0.55);
}
.lead-extra { display: flex; flex-direction: column; gap: 12px; }
.lead-extra-row { display: flex; flex-direction: column; gap: 8px; }
.lead-extra-row p {
  margin: 4px 0 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-align: left;
}
.lead-status { min-height: 20px; margin: 0; text-align: center; font-size: 14px; color: var(--lava); }
.lead-success { display: none; padding: 32px 0; text-align: center; color: rgba(255,244,226,0.9); }

@media (min-width: 640px) {
  .lead-sheet {
    inset-inline: auto; bottom: auto; left: 50%; top: 50%;
    width: 100%; max-width: 380px; border-radius: 24px;
    max-height: 86vh;
    transform: translate(-50%, -50%) scale(0.95); opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .lead-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .lead-handle { display: none; }
}

/* ===================== Pagina Foto Eventi ===================== */
.nav-link-active { color: var(--gold) !important; }
.eventi-section { padding-top: 120px; }
/* Container più largo del default (720px), ma con un tetto: con poche card
   in griglia c'è altrimenti tanto spazio vuoto attorno su desktop, ma senza
   un limite le card diventano enormi (fino a 800px di altezza). */
.eventi-section .section-inner { max-width: 980px; }
.eventi-title { font-family: var(--font-display); font-size: 40px; text-transform: uppercase; margin: 4px 0 0; }
.eventi-sub { color: rgba(255,244,226,0.65); margin: 0; max-width: 480px; }
.eventi-empty { color: rgba(255,244,226,0.5); padding: 40px 0; }

/* auto-fit con una LARGHEZZA MASSIMA (non 1fr libero): con poche card si
   allargano quanto basta per riempire lo spazio ma senza diventare enormi;
   quando gli eventi aumentano, la griglia si stringe da sola in più
   colonne senza bisogno di ritoccare il CSS. */
.eventi-grid {
  width: 100%; margin-top: 16px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  justify-content: center;
}
@media (min-width: 640px) {
  .eventi-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); gap: 22px; }
}

.eventi-card {
  display: block; border-radius: 16px; overflow: hidden; background: var(--ash);
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1);
  opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease;
}
.eventi-card.in-view { opacity: 1; transform: scale(1); }
/* 9/16 come i flyer veri (non 4/5): con l'aspect-ratio sbagliato il crop
   "object-fit:cover" tagliava via testo in alto/basso del flyer. overflow
   hidden qui (non solo sulla card): senza, lo zoom al hover dell'immagine
   "sbordava" fuori dal suo riquadro e finiva sopra al testo della
   didascalia sotto. */
.eventi-card-media { position: relative; aspect-ratio: 9/16; background: var(--charcoal); overflow: hidden; }
.eventi-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.eventi-card:hover .eventi-card-media img { transform: scale(1.05); }
/* Flyer animato: sta sopra la copertina statica, invisibile finché il mouse
   non arriva (JS lo fa partire su mouseenter, lo mette in pausa su
   mouseleave — questo <video> esiste nella pagina solo su dispositivi con
   mouse vero, vedi eventi.js). */
.eventi-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.eventi-card:hover .eventi-card-video { opacity: 1; }
.eventi-card-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center;
  background: linear-gradient(160deg, var(--ash), var(--charcoal));
}
.eventi-card-placeholder span { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; color: rgba(255,244,226,0.6); }
.eventi-card-placeholder small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,244,226,0.3); }
.eventi-card-caption { padding: 10px 12px 14px; text-align: left; }
.eventi-card-caption p { margin: 0; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; color: var(--cream); }
.eventi-card-caption span { font-size: 11px; color: rgba(255,244,226,0.55); }

.eventi-back {
  align-self: flex-start; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,244,226,0.6); padding: 8px 0; min-height: 44px; display: flex; align-items: center;
}
.eventi-back:hover { color: var(--gold); }

/* Griglia a righe piene (non a colonne indipendenti): con le colonne
   "masonry" le foto si distribuiscono per colonna e l'ultima riga resta
   spesso incompleta con un buco vistoso. Con una griglia a celle di
   altezza fissa (aspect-ratio + object-fit: cover) ogni riga si riempie
   sempre in modo uniforme, qualunque sia il numero di foto. */
.photo-grid {
  margin-top: 16px; width: 100%; max-width: 1100px; padding: 0 0 40px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

.photo-item {
  position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: var(--ash);
  opacity: 0; transform: scale(0.96); transition: opacity 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}
.photo-item.in-view { opacity: 1; transform: scale(1); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.photo-item:hover img { transform: scale(1.05); }
.photo-download {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 14px;
  border-radius: 999px; background: rgba(5,5,5,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(244,196,48,0.4); color: var(--cream) !important;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  opacity: 1; transition: background 0.2s ease, border-color 0.2s ease;
}
.photo-download:hover { background: var(--lava); border-color: var(--lava); }
.photo-download svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Tasto Scarica dentro la lightbox (foto a schermo intero) */
.lightbox-download {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px;
  border-radius: 999px; background: var(--lava); color: var(--cream) !important;
  font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em;
  box-shadow: 0 8px 24px rgba(232,41,28,0.4);
}
.lightbox-download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }