/*
 * Festival del Sud — layout delle sezioni animate.
 * Valgono solo con html.fds-motion: senza JS, o con "riduci movimento",
 * la pagina usa il layout statico di sections.css.
 * Gli stati iniziali nascosti li imposta motion.js, non questo file.
 */

/* Tema 2026: palcoscenico bloccato, la foto si allarga a tutto schermo */
html.fds-motion .fds-tema__stage {
  display: block;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}
html.fds-motion .fds-tema__intro {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 3vh);
  left: var(--gutter);
  right: var(--gutter);
}
html.fds-motion .fds-tema__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
html.fds-motion .fds-tema__shade {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  z-index: 2;
  background: linear-gradient(to top, rgba(43, 43, 40, 0.9), rgba(43, 43, 40, 0));
  pointer-events: none;
}
html.fds-motion .fds-tema__over {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(32px, 9vh, 110px);
}
html.fds-motion .fds-tema__quote { color: var(--fds-bianco); max-width: 16ch; }
html.fds-motion .fds-tema__text { color: var(--fds-salvia); }

/* Storia: timeline orizzontale bloccata */
html.fds-motion .fds-storia__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  height: 100vh;
  height: 100svh;
  margin-top: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h));
  overflow: hidden;
}
html.fds-motion .fds-storia__track {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  will-change: transform;
}
html.fds-motion .fds-edition { min-height: min(70svh, 700px); }
html.fds-motion .fds-edition__media { aspect-ratio: auto; height: clamp(110px, 30svh, 400px); }
html.fds-motion .fds-storia__progress {
  display: block;
  height: 1px;
  margin: 0 var(--gutter);
  background: var(--rule);
}
html.fds-motion .fds-storia__progress span {
  display: block;
  height: 100%;
  background: var(--fds-salvia);
  transform-origin: left;
  transform: scaleX(0);
}
@media (max-height: 520px) {
  html.fds-motion .fds-edition__media { display: none; }
}

/* Luoghi: spazio per la mappa 3D */
html.fds-motion .fds-luoghi__map { min-height: 150vh; min-height: 150svh; }

/* Ospiti: le righe scorrono, quindi niente a capo */
html.fds-motion .fds-marquee__row { display: flex; white-space: nowrap; }
html.fds-motion .fds-marquee__track { flex: none; }

/* SplitText: righe mascherate */
.fds-line-mask { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }

/* Hero: entrata al caricamento. Il testo parte nascosto solo finché l'intro non è finita;
   se gli script non partono, lo script inline toglie fds-motion e tutto torna visibile. */
.fds-hero__payoff > span { display: inline-block; }
html.fds-motion:not(.fds-intro-done) .fds-hero__word { transform: translateY(105%); }
html.fds-motion:not(.fds-intro-done) .fds-hero__top > span,
html.fds-motion:not(.fds-intro-done) .fds-hero__festa > span,
html.fds-motion:not(.fds-intro-done) .fds-hero__payoff > span,
html.fds-motion:not(.fds-intro-done) .fds-hero__bottom > * { opacity: 0; }