/* ===========================================================================
   Home Festival 2026 â stili di sezione (solo pagina Home)
   Componenti riutilizzabili (badge, bottoni, timeline, reveal) sono in
   components.css. Qui restano solo layout e ambientazioni specifiche
   delle sezioni lunghe della Home.
   =========================================================================== */

.festival-main { display: block; font-family: var(--font-body); color: var(--color-text-dark); }

/* ---- Sfondi ambientali (macchie di colore che "respirano") ---- */
.ambient-drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-drift .blob-a,
.ambient-drift .blob-b { position: absolute; border-radius: 50%; }
.ambient-drift .blob-a {
  width: 105%; height: 130%; left: -18%; top: -25%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 50%, transparent), transparent 74%);
  animation: fest-drift-a 30s ease-in-out infinite alternate;
}
.ambient-drift .blob-b {
  width: 108%; height: 132%; right: -18%; bottom: -25%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 70%);
  animation: fest-drift-b 34s ease-in-out infinite alternate;
}
@keyframes fest-drift-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  25%  { transform: translate3d(75%,18%,0) scale(1.12); }
  50%  { transform: translate3d(120%,70%,0) scale(.95); }
  75%  { transform: translate3d(30%,95%,0) scale(1.1); }
  100% { transform: translate3d(0,20%,0) scale(1); }
}
@keyframes fest-drift-b {
  0%   { transform: translate3d(0,0,0) scale(1); }
  25%  { transform: translate3d(-70%,-25%,0) scale(1.1); }
  50%  { transform: translate3d(-120%,-75%,0) scale(.94); }
  75%  { transform: translate3d(-25%,-95%,0) scale(1.12); }
  100% { transform: translate3d(0,-15%,0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-drift .blob-a, .ambient-drift .blob-b { animation: none; }
}

/* ---- Hero ---- */
.festival-hero {
  position: relative;
  height: 800px;
  padding: calc(var(--header-height, 80px) + 40px) 40px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-white);
}
.festival-hero-bg {
  position: absolute; inset: 0;
  background-image: url('../assets/patterns/pattern-outline.png');
  background-size: cover; background-position: center;
  opacity: .2;
}
.festival-hero-bg-right {
  position: absolute; inset: 0;
  background-image: url('../assets/patterns/pattern-luoghi2026.webp');
  background-size: cover; background-position: center right;
  animation: fest-city-zoom 30s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .festival-hero-bg-right { animation: none; }
}
.festival-hero-inner {
  position: relative; z-index: 1; width: 100%; max-width: 1280px;
  display: flex; align-items: stretch; justify-content: space-between; gap: 40px;
}
/* flex-basis calc(60% - 20px): 20px è metà del gap (40px) tra le colonne,
   sottratto da entrambe così 60%+40%+gap tornano a fare esattamente 100%
   della riga invece di sforare. */
.festival-hero-col {
  flex: 0 1 calc(60% - 20px);
  max-width: calc(60% - 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  text-align: left;
}
.festival-hero-logo { display: block; width: 240px; max-width: 100%; height: auto; }
/* Quando Partner/Patrocinio sono spenti (vedi index.astro), il logo riempie
   tutta la larghezza disponibile della colonna invece di restare a 240px. */
.festival-hero-glass--logo-only .festival-hero-logo { width: 100%; }
.festival-hero-divider { width: 100%; margin: 0; border: none; border-top: 1px solid rgba(113,112,111,.25); }
/* width:100% + space-between + nowrap: i loghi restano sempre su un'unica
   riga, larga quanto la colonna, anche su mobile (stesso pattern di
   .site-menu-logos-card nel menu e di .footer-logo-row). */
.festival-hero-organizers { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; }
.festival-hero-organizers img { display: block; height: 56px; width: auto; max-width: 30%; object-fit: contain; }

/* ---- Box glass della Hero (Logo 5°, Firenze+date, partner, patrocinio) ---- */
/* min-width:0: senza, un figlio in overflow (il marquee) può comunque
   "spingere" .festival-hero-glass oltre il suo max-width — i flex item, come
   asse principale della riga .festival-hero-inner, di default non si
   restringono sotto la dimensione minima intrinseca del contenuto. */
.festival-hero-glass { flex: 0 1 calc(40% - 20px); max-width: calc(40% - 20px); min-width: 0; gap: 20px; }
/* "Firenze + date": niente più badge/box (era .badge-glass) — testo al vivo
   direttamente sullo sfondo del box glass, kerning azzerato. */
.festival-hero-firenze {
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 10px;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0; text-transform: uppercase;
  font-size: clamp(14px,1.8vw,17px);
}
.festival-hero-firenze-top { display: inline-flex; align-items: center; gap: 8px; }
.festival-hero-partners { width: 100%; display: flex; align-items: center; gap: 16px; }
.festival-hero-partners-label {
  flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 12px; color: var(--color-text);
}
/* Loop infinito continuo, stesso meccanismo del ticker "ultima ora"
   dell'header (traccia duplicata + transform:translateX(-50%) via CSS), ma
   sempre attivo (lì gira solo su mobile). .festival-hero-partners-viewport è
   la maschera (overflow:hidden) — separata dal contenitore col gap, stessa
   ragione già vista nell'header: overflow:hidden taglia al bordo esterno del
   padding-box, quindi se ci fosse del padding qui sopra andrebbe comunque
   riempito dal contenuto animato prima di essere tagliato. */
.festival-hero-partners-viewport { flex: 1; min-width: 0; overflow: hidden; }
/* .festival-hero-glass.festival-hero-partners-track (selettore composto, non
   solo .festival-hero-partners-track): .glass * in components.css impone
   max-width:100% a tutti i discendenti del box glass con la STESSA
   specificità (una classe) — caricato dopo festival.css, altrimenti vince
   lui e schiaccia la track (pensata apposta più larga del contenitore, è
   la base del loop) alla larghezza del viewport, fermando l'animazione. */
.festival-hero-glass .festival-hero-partners-track {
  display: flex; align-items: center;
  width: max-content; max-width: none;
  /* Durata calcolata per la stessa velocità (~30px/s) del loop dell'etichetta
     "ultima ora" in Header.astro, misurata sulla sua traccia reale: va
     ricalcolata quando cambiano i loghi (larghezza di una copia / ~29px/s). */
  animation: festival-partners-marquee 19.4s linear infinite;
}
/* width per logo (attributo style da heroPartnerLogos in index.astro),
   height auto: mantiene le proporzioni originali di ogni logo invece di
   deformarlo. margin-right (non gap sul contenitore): ogni logo
   porta con sé il proprio distacco, così le due copie duplicate sono
   un'unità identica ripetuta e translateX(-50%) è un loop esatto — con
   "gap" sul contenitore invece, il numero di intervalli tra 6 elementi (5)
   non è un multiplo pulito di un'unità da 3 loghi e il loop "salta". */
.festival-hero-partners-track img { display: block; height: auto; max-width: none; margin-right: 32px; flex-shrink: 0; }
@keyframes festival-partners-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .festival-hero-partners-track { animation: none; }
}
/* Testo nello stile paragrafo usato altrove nel sito (es. .festival-cta-inner
   p, testo del popup commissioni): stessa font-size/line-height/famiglia. */
.festival-hero-patronage {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(113,112,111,.18);
  font-family: var(--font-body); font-size: 19px; line-height: 1.5; color: var(--color-text-dark);
}
.festival-hero-patronage img { display: block; width: 60px; max-width: 40%; height: auto; }
.festival-hero .headline .l1 { font-size: clamp(34px,5.9vw,80px); letter-spacing: -.095em; white-space: nowrap; }
/* text-align:right (non più margin-left calcolato in vw): "DA QUI" resta
   sempre ancorato al bordo destro della colonna, qualunque sia la sua
   larghezza — niente più rischio di sovrapporsi al box glass a certe
   larghezze. Dato che "Il futuro è passato" non riempie mai tutta la riga,
   l'ancoraggio a destra lo mette automaticamente più a destra della riga
   sopra, senza bisogno di calcolarlo a mano. */
.festival-hero .headline .l2 {
  display: block;
  text-align: right;
  font-size: clamp(40px,6vw,88px);
  letter-spacing: -.075em;
  margin-top: -.22em;
  white-space: nowrap;
}
.festival-hero-subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-text-dark);
}
.festival-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 6px; }

/* ---- "Un luogo di proposta" (data-pin) ----
   Sezione in flusso normale (non più sticky/scroll-jacked): il testo si
   illumina parola per parola seguendo il progress naturale dello scroll
   della sezione nel viewport, vedi initPin() in scroll-fx.js. */
.festival-section-pin { position: relative; background: var(--color-white); scroll-margin-top: var(--header-height, 80px); }
.festival-pin-sticky {
  position: static; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--header-height, 80px) + 32px) 40px 80px; box-sizing: border-box;
}
.festival-pin-inner { position: relative; z-index: 1; width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 64px; }
.festival-pin-head { max-width: 900px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-elements); }
.festival-pin-body { align-self: flex-end; width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: var(--gap-elements); }
.festival-pin-body p { margin: 0; font-size: 20px; line-height: 1.65; color: var(--color-text-dark); text-wrap: pretty; }
.festival-pin-body em { font-style: normal; font-weight: 700; color: var(--color-primary); }
@media (max-height: 480px), (max-width: 900px) {
  .festival-pin-sticky { min-height: auto; padding-top: var(--section-pad-mobile-y); padding-bottom: var(--section-pad-mobile-y); }
}

/* ---- "Firenze, la città" ----
   Sezione in flusso normale (niente più sticky/scroll-jack): resta solo lo
   slideshow di foto in sottofondo, animato via CSS a tempo, indipendente
   dallo scroll. */
.festival-section-city { position: relative; background: var(--color-ink); scroll-margin-top: var(--header-height, 80px); }
.festival-city-sticky {
  position: relative; overflow: clip;
  padding: calc(var(--header-height, 80px) + 64px) 40px 80px; box-sizing: border-box;
}
.festival-city-zoom {
  position: absolute; inset: 0;
  animation: fest-city-zoom 34s ease-in-out infinite alternate;
}
@keyframes fest-city-zoom {
  0%   { transform: scale(1.06) translate3d(0,0,0); }
  50%  { transform: scale(1.22) translate3d(-1.5%,1.5%,0); }
  100% { transform: scale(1.06) translate3d(1.5%,-1%,0); }
}
.festival-city-slide {
  position: absolute; inset: 0;
  background-image: var(--slide-photo);
  background-size: cover; background-position: center;
  opacity: 0;
  animation: fest-city-fade 7500ms ease-in-out infinite;
}
.festival-city-slide.is-tinted {
  background-image: url('../assets/img/background-color.webp'), var(--slide-photo);
  background-blend-mode: color;
}
.festival-city-slide:nth-child(1) { animation-delay: 0ms; }
.festival-city-slide:nth-child(2) { animation-delay: 2500ms; }
.festival-city-slide:nth-child(3) { animation-delay: 5000ms; }
@keyframes fest-city-fade {
  0%    { opacity: 0; }
  11.1% { opacity: 1; }
  33.3% { opacity: 1; }
  44.4% { opacity: 0; }
  100%  { opacity: 0; }
}
.festival-city-overlay-tint { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink) 30%, transparent); mix-blend-mode: multiply; }
.festival-city-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-elements);
}
.festival-city-text { display: flex; flex-direction: column; gap: var(--gap-elements); }
.festival-city-text p { margin: 0; font-size: 20px; line-height: 1.65; color: var(--color-white); text-wrap: pretty; }
/* Lo slideshow di foto resta animato anche sotto i 900px: si ferma solo per
   chi preferisce animazioni ridotte o su viewport troppo bassi per vederlo bene. */
@media (prefers-reduced-motion: reduce), (max-height: 480px) {
  .festival-city-slide { animation: none; opacity: 1; }
}
@media (max-width: 900px) {
  .festival-city-sticky { padding: var(--section-pad-mobile-y) var(--section-pad-mobile); }
}

/* ---- "Le piazze" (data-piazze) ---- */
.festival-section-piazze { position: relative; height: 340vh; background: var(--color-white); border-top: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); scroll-margin-top: var(--header-height, 80px); }
.festival-piazze-sticky { position: sticky; top: 0; height: 100vh; overflow: clip; display: flex; flex-direction: column; gap: var(--gap-elements); }
.festival-piazze-head { position: relative; z-index: 1; display: flex; justify-content: center; padding: calc(var(--header-height, 80px) + 16px) 64px 0; }
.festival-piazze-head-inner { width: 100%; max-width: 1280px; display: flex; align-items: stretch; justify-content: space-between; gap: 32px; }
.festival-piazze-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.festival-piazze-lead { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.5; color: var(--color-text-dark); }
.festival-piazze-head-cta { display: flex; flex-wrap: wrap; gap: 16px; flex-shrink: 0; align-items: flex-end; justify-content: flex-end; }
.festival-piazze-pad { position: relative; z-index: 1; flex: 1; min-height: 0; padding: 0 64px 100px; box-sizing: border-box; }
.festival-piazze-track { display: flex; gap: var(--gap-elements); height: 100%; width: max-content; will-change: transform; }
.festival-piazza-slide {
  position: relative;
  flex: 0 0 calc(100vw - 128px);
  width: calc(100vw - 128px);
  height: 100%;
  overflow: clip;
  border-radius: var(--radius-lg);
  background-image: url('../assets/img/background-color.webp'), var(--piazza-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: color;
}
.festival-piazza-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 0%, transparent) 45%, color-mix(in srgb, var(--color-ink) 45%, transparent) 100%);
  pointer-events: none;
}
.festival-piazza-caption {
  position: absolute; left: 48px; right: 48px; bottom: 48px; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;
}
.festival-piazza-caption h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.05em; font-size: clamp(28px,3.4vw,56px); line-height: 1;
  white-space: nowrap; color: var(--color-white);
  text-shadow: 0 8px 40px rgba(29,29,27,.2), 0 2px 12px rgba(29,29,27,.12);
}
.festival-piazza-caption p {
  margin: 0;
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(16px,1.4vw,19px); line-height: 1.45;
  color: var(--color-white);
  text-shadow: 0 6px 30px rgba(29,29,27,.2);
}
/* Chi preferisce animazioni ridotte o è su un viewport troppo basso perde lo
   scroll-jack: la sezione torna in flusso normale e il carosello diventa un
   semplice elenco verticale, evitando qualunque scroll orizzontale/verticale
   guidato da JS. */
@media (prefers-reduced-motion: reduce), (max-height: 480px) {
  .festival-section-piazze { height: auto; }
  .festival-piazze-sticky { position: static; height: auto; }
  .festival-piazze-head { padding: var(--section-pad-mobile-y) var(--section-pad-mobile) 0; }
  .festival-piazze-pad { padding: 0 var(--section-pad-mobile) var(--section-pad-mobile-y); }
  .festival-piazze-track { flex-direction: column; width: auto !important; transform: none !important; }
  .festival-piazza-slide { flex: 0 0 auto; width: 100% !important; height: 70vh; }
}
/* Su mobile niente più scroll-jack: la sezione torna in flusso normale (non
   più alta 340vh, non più sticky) e lo scroll verticale della pagina non
   viene mai catturato. Le card diventano un carosello con scroll orizzontale
   nativo (swipe/trascinamento), basso 240px, indipendente dallo scroll
   verticale sopra e sotto la sezione. Su desktop resta tutto invariato. */
@media (max-width: 900px) {
  .festival-section-piazze { height: auto; }
  .festival-piazze-sticky { position: static; height: auto; gap: 24px; }
  .festival-piazze-head { padding-top: var(--section-pad-mobile-y); padding-left: var(--section-pad-mobile); padding-right: var(--section-pad-mobile); }
  .festival-piazze-head-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .festival-piazze-head-cta { align-self: stretch; justify-content: flex-start; }
  /* scroll-padding, non solo padding: con scroll-snap attivo il browser
     allinea la prima slide (scroll-snap-align:start) al bordo del
     contenitore scrollabile ignorando il suo padding, quindi senza
     scroll-padding la prima slide parte già "scrollata" oltre il gutter,
     incollata al bordo. scroll-padding dice allo snap dove sta davvero il
     bordo utile, cosicché la posizione iniziale (e ogni snap successivo)
     rispetti il gutter invece di annullarlo. */
  .festival-piazze-pad {
    padding-left: var(--section-pad-mobile);
    padding-right: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile-y);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--section-pad-mobile);
    scroll-padding-right: var(--section-pad-mobile);
  }
  .festival-piazze-track { height: auto; transform: none !important; }
  .festival-piazza-caption { left: 16px; right: 16px; bottom: 16px; }
  .festival-piazza-slide {
    flex-basis: calc(100vw - var(--section-pad-mobile) * 2);
    width: calc(100vw - var(--section-pad-mobile) * 2);
    height: 240px;
    scroll-snap-align: start;
  }
}

/* ---- Banner "Il programma del Festival" ---- */
.festival-programma-banner {
  position: relative;
  padding: 88px 40px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--color-accent);
  scroll-margin-top: var(--header-height, 80px);
}
@media (max-width: 900px) {
  .festival-programma-banner { padding-top: var(--section-pad-mobile-y); padding-bottom: var(--section-pad-mobile-y); }
}
.festival-programma-banner-bg {
  position: absolute; inset: 0;
  background-image: url('../assets/patterns/pattern-outline.png');
  background-size: cover; background-position: center;
  opacity: .35;
}
.festival-programma-banner-inner {
  position: relative; z-index: 1; width: 100%; max-width: 1280px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.festival-programma-banner-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---- Timeline (contenitore di pagina; i componenti sono in components.css) ---- */
.festival-timeline-section { padding: 80px 40px 96px; display: flex; justify-content: center; background: var(--color-white); }
.festival-timeline-inner { width: 100%; max-width: 1280px; }
@media (max-width: 900px) {
  .festival-timeline-section { padding-top: var(--section-pad-mobile-y); padding-bottom: var(--section-pad-mobile-y); }
}

/* ---- CTA finale ---- */
.festival-cta {
  position: relative;
  padding: 96px 40px;
  display: flex;
  justify-content: center;
  overflow: clip;
  background: var(--color-white);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
  scroll-margin-top: var(--header-height, 80px);
}
.festival-cta-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(70%,900px); aspect-ratio: 1; opacity: .08; pointer-events: none;
  background-image: url('../assets/logo/favicon-italiaregioni.png');
  background-size: contain; background-repeat: no-repeat; background-position: center center;
}
.festival-cta-inner {
  position: relative; z-index: 1; width: 100%; max-width: 1280px;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-elements); text-align: center;
}
.festival-cta-inner p { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.5; color: var(--color-text-dark); }
.festival-cta-inner p a { color: var(--color-primary); font-weight: 700; }
.festival-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 900px) {
  .festival-cta { padding: var(--section-pad-mobile-y) var(--section-pad-mobile); }
}