/* ==========================================================================
   NOTTE CELESTE 2026 — struttura, layout e animazioni
   Animazioni solo transform/opacity (vincolo CLAUDE.md): reveal on-scroll
   via IntersectionObserver (sistema .reveal, in fondo al file) + hero
   on-load con @keyframes puri. Gli stati iniziali nascosti valgono solo
   sotto html.js (gate inline nell'head): senza JS tutto è visibile.
   prefers-reduced-motion: durate azzerate dal reset universale di
   tokens.css; qui si azzerano solo i delay, che quel reset non copre.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

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

a {
  color: var(--color-text);
}

.container {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family);
  font-weight: var(--weight-heading);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
}

.btn--cta {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
}

.btn--cta:hover {
  opacity: 0.85;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* 36px + gap space-3: a 320px logo e 3 ancore stanno su una riga (misurato
   sulle advance width di Poppins SemiBold: ~281px su 288 disponibili). */
.site-header__logo img {
  height: 36px;
  width: auto;
}

.site-header__nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-header__nav a {
  text-decoration: none;
  font-weight: var(--weight-heading);
  font-size: var(--text-base);
  transition: opacity var(--transition);
}

.site-header__nav a:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 40px;
  }

  .site-header__nav {
    gap: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__circles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__circle {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
}

.hero__circle--1 {
  background: var(--color-surface);
  width: 8rem;
  right: -4rem;
  top: -3rem;
}

.hero__circle--2 {
  background: var(--color-primary);
  width: 6rem;
  right: 1rem;
  top: -3rem;
}

.hero__circle--3 {
  background: var(--color-accent);
  width: 4rem;
  right: -1rem;
  top: 1rem;
}

@media (min-width: 1024px) {
  .hero__circle--1 {
    width: 20rem;
    right: -6rem;
    top: 2rem;
  }

  .hero__circle--2 {
    width: 14rem;
    right: 10rem;
    top: -4rem;
  }

  .hero__circle--3 {
    width: 11rem;
    right: 3rem;
    top: 12rem;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.hero__logo {
  height: 72px;
  width: auto;
}

.hero__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  max-width: 34rem;
  text-wrap: pretty;
}

.hero__meta {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-heading);
}

.hero__lead {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  max-width: 34rem;
}

.hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
}

.hero__footnote {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .hero__inner {
    align-items: flex-start;
    text-align: left;
  }

  .hero__cta {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Stasera in piazza
   -------------------------------------------------------------------------- */

.stasera__card {
  max-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

@media (min-width: 1024px) {
  .stasera__card {
    max-width: 40rem;
  }
}

.stasera__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.stasera__badge {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-weight: var(--weight-heading);
  font-size: var(--text-base);
}

.stasera__orario {
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
}

.stasera__titolo {
  margin: var(--space-3) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
}

.stasera__sottotitolo {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.stasera__luogo {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
}

.stasera__cta {
  margin: var(--space-4) 0 0;
}

/* --------------------------------------------------------------------------
   Le serate
   -------------------------------------------------------------------------- */

.serate {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  overflow-x: hidden;
}

.serate__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-5);
}

.serate__intro {
  margin: 0 0 var(--space-7);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  max-width: 40rem;
}

.serate__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Bande diagonali del volantino: skew statico (composizione, non animazione).
   -3deg a 320px per non mangiare altezza, -4deg da 768px (wireframe §5). */
.serata {
  position: relative;
  transform: skewY(-3deg);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius);
  padding: var(--space-6);
  overflow: hidden;
}

.serata--surface {
  background: var(--color-surface);
}

.serata--primary {
  background: var(--color-primary);
}

/* Visual card-banda (wireframe §5, approvato in Design il 17/07).
   Sotto i 768px: fascia a tutta larghezza in testa alla card, sopra il
   testo, full-bleed sul padding della card (da qui i margini negativi).
   Il contenitore resta nello skew della banda (mascherato da overflow
   hidden sul padre): l'immagine ha il counter-skew opposto per restare
   dritta, oversize di --space-7 sopra/sotto per coprire lo scarto
   introdotto dallo skew, altrimenti si vedrebbero angoli vuoti. */
.serata__visual {
  position: relative;
  width: calc(100% + var(--space-6) * 2);
  height: 160px;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  overflow: hidden;
}

/* Altezza esplicita via calc, non auto: <img> è un replaced element con
   aspect-ratio intrinseco (dagli attributi width/height, servono contro il
   CLS) — con height:auto il browser deriva l'altezza da quel rapporto
   (larghezza colonna × 1.5) invece che da top/bottom, lasciando scoperto
   il bordo obliquo della banda. */
.serata__visual-img {
  position: absolute;
  top: calc(-1 * var(--space-7));
  left: 0;
  width: 100%;
  height: calc(100% + var(--space-7) * 2);
  object-fit: cover;
  transform: skewY(3deg);
  display: block;
}

.serata__inner {
  transform: skewY(3deg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-4);
}

.serata__data {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: var(--weight-heading);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
}

.serata__giorno {
  display: block;
  font-size: var(--text-4xl);
  font-weight: var(--weight-display);
  line-height: 0.85;
}

.serata__content {
  flex: 1;
  min-width: 200px;
}

.serata__orario {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-heading);
  font-size: var(--text-md);
}

.serata__linea {
  width: 40px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: var(--space-3);
}

.serata__titolo {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
}

.serata__sottotitolo {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

/* Le esibizioni pre-serali: sottoinsieme dell'evento clou, introdotte da
   una label. Bianca (accent su surface/primary fallisce l'AA): la distingue
   il maiuscoletto spaziato, non il colore. */
.serata-eventi__label {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.serata-eventi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.serata-eventi__item {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.serata-eventi__ora {
  font-weight: var(--weight-heading);
}

@media (min-width: 768px) {
  .serata {
    transform: skewY(-4deg);
  }

  /* Da qui la colonna passa da fascia in testa a colonna a tutta altezza
     sul lato destro (~38% banda): il testo riserva lo spazio a destra. */
  .serata__inner {
    transform: skewY(4deg);
    padding-right: 40%;
    padding-top: var(--space-6);
  }

  .serata__visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38%;
    height: auto;
    margin: 0;
  }

  .serata__visual-img {
    top: calc(-1 * var(--space-7));
    height: calc(100% + var(--space-7) * 2);
    transform: skewY(4deg);
  }
}

@media (min-width: 1024px) {
  /* Il gap compensa la corsa verticale degli angoli a -4deg su ~900px. */
  .serate__list {
    gap: var(--space-7);
  }

  /* Il renderer avvolge ogni card in un wrapper .reveal (il transform del
     reveal non può vivere su .serata: lo stato finale transform:none ne
     cancellerebbe lo skew) → l'ordinale si legge sul wrapper. */
  .serate__list > :nth-child(1) .serata {
    transform: skewY(-4deg) translateX(0);
  }

  .serate__list > :nth-child(2) .serata {
    transform: skewY(-4deg) translateX(48px);
  }

  .serate__list > :nth-child(3) .serata {
    transform: skewY(-4deg) translateX(96px);
  }

  /* Numero allineato a giorno/mese, tutto dentro la banda (richiesta
     cliente 16/07: si torna sulla decisione "sborda dal bordo" del
     wireframe §5 / task 2). */
  .serata__giorno {
    font-size: 5rem;
  }
}

/* --------------------------------------------------------------------------
   In piazza
   -------------------------------------------------------------------------- */

.in-piazza {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.in-piazza__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-6);
}

.in-piazza__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-5);
}

.in-piazza__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* Motivo a cerchi piatti sovrapposti (linguaggio del logo). Decorativo,
   bianco/opacità: mai --color-accent dentro card surface (2.72:1). */
.in-piazza__icon {
  display: block;
  margin-bottom: var(--space-3);
}

.in-piazza__card h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
}

/* --------------------------------------------------------------------------
   Arrivare
   -------------------------------------------------------------------------- */

.arrivare {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.arrivare__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-4);
}

.arrivare__destinazione {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
}

.arrivare__cta {
  margin: 0 0 var(--space-4);
}

.arrivare__note {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.faq__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-6);
}

/* Elenco verticale: una quarta coppia entra senza rompere il layout. */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}

.faq__question {
  cursor: pointer;
  font-weight: var(--weight-heading);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
}

.faq__answer {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* --------------------------------------------------------------------------
   Sponsor
   -------------------------------------------------------------------------- */

.sponsor {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.sponsor__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-5);
}

/* Divisore di sezione: lineetta accent corta e centrata. Elemento grafico
   (non testo): accent su --color-bg = 6.13:1, oltre il 3:1 non-text WCAG. */
.divider {
  width: 40%;
  height: 3px;
  margin: 0 auto var(--space-6);
  border: 0;
  border-radius: 2px;
  background: var(--color-accent);
}

/* Variante per divisori tra blocchi dentro la stessa sezione (es. i due
   blocchi sponsor): serve lo stacco superiore che la sezione non dà. */
.divider--inline {
  margin-top: var(--space-8);
}

/* Riga di servizio sotto "Moie in Passerella". Muted ammesso solo su
   --color-bg, ed è il fondo della sezione sponsor (8.20:1). */
.sponsor__subtitle {
  margin: calc(-1 * var(--space-4)) 0 var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* auto-fill: la griglia regge da 2 a 45 loghi senza modifiche (wireframe §8). */
.sponsor__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.sponsor__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* .sponsor__badge è un <button>: reset degli stili UA di default (border,
   font, cursore) prima delle regole visive, invariate dalla versione <span>. */
.sponsor__badge {
  width: 100%;
  border: none;
  font-family: inherit;
  cursor: pointer;
  min-height: 144px;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: var(--weight-heading);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
  transition: opacity var(--transition);
}

.sponsor__badge:hover {
  opacity: 0.85;
}

.sponsor__label {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__logo {
  height: 48px;
  width: auto;
  align-self: flex-start;
}

.site-footer__enti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.site-footer__ente {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* Stemmi multicolore a tratti sottili: tile bianca, come gli sponsor. */
.site-footer__ente-tile {
  background: var(--color-cta-bg);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer__muted {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

/* Riga legale: sul fondo pagina (--color-bg), text-muted è valido (8.20:1). */
.site-footer__legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__legal-links a {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.site-footer__legal-links a:hover {
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Lightbox sponsor — <dialog> nativo: focus trap ed Esc gestiti dal browser,
   click-fuori intercettato in JS (e.target === dialog). Un solo overlay
   riusato per tutti i loghi (js/main.js).
   -------------------------------------------------------------------------- */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* rgba dello stesso --color-bg della palette: non è un colore nuovo. */
.lightbox::backdrop {
  background: rgba(22, 37, 63, 0.85);
}

.lightbox__panel {
  position: relative;
  background: var(--color-cta-bg);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin: var(--space-4);
  max-width: min(90vw, 37.5rem);
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition), transform var(--transition);
}

.lightbox.is-open .lightbox__panel {
  opacity: 1;
  transform: scale(1);
}

.lightbox__img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
}

.lightbox__caption {
  margin: 0;
  color: var(--color-cta-text);
  font-weight: var(--weight-heading);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition);
}

.lightbox__close:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Reveal on-scroll — architettura decisa il 19/07.
   Stato iniziale nascosto SOLO sotto html.js (gate inline nell'head):
   senza JS niente opacity 0, la pagina è completamente visibile.
   Un solo IntersectionObserver in main.js aggiunge .is-visible una volta
   sola. Varianti per sezione da wireframe.md §4–§8; "up" (arrivare §7,
   translateY) si aggiunge alle quattro previste perché nessuna la copre.
   -------------------------------------------------------------------------- */

.js .reveal {
  --reveal-duration: 450ms;
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--transition-easing),
    transform var(--reveal-duration) var(--transition-easing);
  transition-delay: var(--reveal-delay, 0ms);
}

/* fade (sponsor §8): solo opacity, nessun transform. */
.js .reveal[data-anim="slide-x"] {
  transform: translateX(-24px);
}

.js .reveal[data-anim="diag"] {
  transform: translate(-40px, 12px);
}

.js .reveal[data-anim="scale"] {
  transform: scale(var(--reveal-scale, 0.95));
}

.js .reveal[data-anim="up"] {
  transform: translateY(16px);
}

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

/* Stagger dei gruppi statici. in-piazza: 5 card in sequenza (§6).
   sponsor: a blocchi di 4, approssimazione delle righe della griglia
   auto-fill (§8) — la composizione esatta delle righe varia col viewport. */
.in-piazza__card:nth-child(2) { --reveal-delay: 80ms; }
.in-piazza__card:nth-child(3) { --reveal-delay: 160ms; }
.in-piazza__card:nth-child(4) { --reveal-delay: 240ms; }
.in-piazza__card:nth-child(5) { --reveal-delay: 320ms; }

.sponsor__item:nth-child(n+5) { --reveal-delay: 100ms; }
.sponsor__item:nth-child(n+9) { --reveal-delay: 200ms; }
.sponsor__item:nth-child(n+13) { --reveal-delay: 300ms; }

/* --------------------------------------------------------------------------
   Hero on-load — @keyframes puri, zero JS e zero observer (wireframe §3).
   fill-mode backwards: durante il delay l'elemento resta allo stato from.
   Il titolo è il candidato LCP: delay minimo (100ms) e durata breve.
   -------------------------------------------------------------------------- */

@keyframes hero-circle-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes hero-rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.hero__circle {
  animation: hero-circle-in 400ms var(--transition-easing) backwards;
}

.hero__circle--2 { animation-delay: 120ms; }
.hero__circle--3 { animation-delay: 240ms; }

.hero__logo,
.hero__title,
.hero__meta,
.hero__lead,
.hero__cta,
.hero__footnote {
  animation: hero-rise-in 300ms var(--transition-easing) backwards;
}

.hero__title { animation-delay: 100ms; }
.hero__meta { animation-delay: 160ms; }
.hero__lead { animation-delay: 220ms; }
.hero__cta { animation-delay: 280ms; }
.hero__footnote { animation-delay: 340ms; }

/* Il reset universale di tokens.css azzera le DURATE (animation-duration,
   transition-duration) ma non i DELAY: senza questo blocco, con
   prefers-reduced-motion i contenuti resterebbero invisibili per la durata
   del delay (fill-mode backwards / transition-delay) e poi comparirebbero
   a scatti sfalsati. Non duplica il reset: ne copre il buco. */
@media (prefers-reduced-motion: reduce) {
  .hero__circle,
  .hero__logo,
  .hero__title,
  .hero__meta,
  .hero__lead,
  .hero__cta,
  .hero__footnote {
    animation-delay: 0ms !important;
  }

  .js .reveal {
    transition-delay: 0ms !important;
  }
}