/* =================================================================
   Sequenza focaccia
   -----------------------------------------------------------------
   I 5 fotogrammi sono una scena continua: la mano prende la fetta e la
   avvicina all'obiettivo. Il modello precedente li spostava lateralmente
   (translate + rotateY) facendoli leggere come carte di un mazzo, e li
   incrociava a opacità parziali, così a metà dissolvenza traspariva lo
   sfondo scuro del deck.

   Qui i fotogrammi restano registrati uno sull'altro e la pila si
   costruisce: ogni fotogramma sale da 0 a 1 e poi RESTA opaco sotto al
   successivo. Ogni passaggio è quindi una dissolvenza pulita A->B, senza
   sfondo che affiora, e il movimento della mano si legge come movimento
   vero. Una leggera carrellata in avanti (scale 1 -> 1.05) accompagna
   l'avvicinarsi della fetta.
   ================================================================= */

@supports (animation-timeline: view()) {
  .sequence-scroll {
    view-timeline-name: --slerfa-sequence;
    view-timeline-axis: block;
  }

  .sequence-scroll__deck {
    animation: static-sequence-deck linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 10% exit 90%;
  }

  .sequence-scroll__frame {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 10% exit 90%;
  }

  .sequence-scroll__frame:nth-child(1) { animation-name: slerfa-frame-1; }
  .sequence-scroll__frame:nth-child(2) { animation-name: slerfa-frame-2; }
  .sequence-scroll__frame:nth-child(3) { animation-name: slerfa-frame-3; }
  .sequence-scroll__frame:nth-child(4) { animation-name: slerfa-frame-4; }
  .sequence-scroll__frame:nth-child(5) { animation-name: slerfa-frame-5; }

  .sequence-scroll__progress span:nth-child(1) { animation-name: slerfa-dot-1; }
  .sequence-scroll__progress span:nth-child(2) { animation-name: slerfa-dot-2; }
  .sequence-scroll__progress span:nth-child(3) { animation-name: slerfa-dot-3; }
  .sequence-scroll__progress span:nth-child(4) { animation-name: slerfa-dot-4; }
  .sequence-scroll__progress span:nth-child(5) { animation-name: slerfa-dot-5; }

  .sequence-scroll__progress span {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 10% exit 90%;
  }
}

/* Nessuno spostamento laterale: i fotogrammi devono restare allineati al
   pixel, altrimenti la mano "salta" fra un passaggio e l'altro. */
.sequence-scroll__frame {
  transform: scale(var(--frame-scale, 1));
  transform-origin: 50% 50%;
  transition: opacity 0.12s linear, transform 0.12s linear;
  filter: none;
}

/* Il filtro colore stava su ognuno dei 5 fotogrammi: cinque livelli
   filtrati sovrapposti. Applicato al deck ne basta uno.
   overflow:hidden ritaglia la carrellata (scale 1.05), che altrimenti
   sborderebbe oltre la cornice bianca; le ombre colorate restano fuori
   perché box-shadow non viene ritagliata. Toglie anche il contesto 3D
   preserve-3d, non più necessario ora che i fotogrammi non usano Z. */
.sequence-scroll__deck {
  overflow: hidden;
  filter: saturate(1.04) contrast(1.03);
}

@keyframes static-sequence-deck {
  0% {
    transform: translateZ(0) rotateX(3deg) rotateY(-2.5deg);
  }

  50% {
    transform: translateZ(28px) rotateX(0.5deg) rotateY(0deg);
  }

  100% {
    transform: translateZ(0) rotateX(-2deg) rotateY(2.5deg);
  }
}

/* Il primo fotogramma è la base della pila: sempre opaco. */
@keyframes slerfa-frame-1 {
  0% { opacity: 1; transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes slerfa-frame-2 {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
  0%, 9.90% { opacity: 0; }
  22.00%, 100% { opacity: 1; }
}

@keyframes slerfa-frame-3 {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
  0%, 31.90% { opacity: 0; }
  44.00%, 100% { opacity: 1; }
}

@keyframes slerfa-frame-4 {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
  0%, 53.90% { opacity: 0; }
  66.00%, 100% { opacity: 1; }
}

@keyframes slerfa-frame-5 {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
  0%, 75.90% { opacity: 0; }
  88.00%, 100% { opacity: 1; }
}

@keyframes slerfa-dot-1 {
  0.00%, 11.00% { background: var(--yellow); box-shadow: 0 0 18px rgba(255, 187, 18, .32); }
  11.01%, 100% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}

@keyframes slerfa-dot-2 {
  0%, 10.99% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  11.00%, 33.00% { background: var(--yellow); box-shadow: 0 0 18px rgba(255, 187, 18, .32); }
  33.01%, 100% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}

@keyframes slerfa-dot-3 {
  0%, 32.99% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  33.00%, 55.00% { background: var(--yellow); box-shadow: 0 0 18px rgba(255, 187, 18, .32); }
  55.01%, 100% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}

@keyframes slerfa-dot-4 {
  0%, 54.99% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  55.00%, 77.00% { background: var(--yellow); box-shadow: 0 0 18px rgba(255, 187, 18, .32); }
  77.01%, 100% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}

/* L'ultimo pallino resta acceso fino in fondo: la sezione finisce con il
   fotogramma 5 in posa, spegnerlo prima della fine sarebbe incoerente. */
@keyframes slerfa-dot-5 {
  0%, 76.99% { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  77.00%, 100% { background: var(--yellow); box-shadow: 0 0 18px rgba(255, 187, 18, .32); }
}

/* The mobile header (<=900px) now uses the site's built-in hamburger that opens
   the full-screen overlay menu, wired up by assets/site.js. The previous
   no-JS inline-nav fallback (which rendered cramped/broken) has been removed so the
   intended overlay styling from the main stylesheet applies. */

@media (max-width: 620px) {
  body {
    padding-bottom: 84px;
  }

  .brand span small {
    display: none;
  }

  .mobile-order {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* =================================================================
   Accessibilità
   ================================================================= */

/* Il nav mobile chiuso resta nel DOM per l'animazione di apertura: senza
   visibility:hidden il Tab entra in un overlay invisibile a tutta pagina. */
@media (max-width: 900px) {
  header nav {
    visibility: hidden;
    /* visibility scatta subito in apertura (altrimenti il focus sul primo
       link fallirebbe) e solo a fine dissolvenza in chiusura */
    transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0s 0.3s;
  }

  header nav.is-open {
    visibility: visible;
    transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0s;
  }
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--black);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

/* =================================================================
   Costo delle animazioni
   ================================================================= */

/* Ticker, orbita del logo e pallino di stato sono infiniti: assets/site.js
   marca gli elementi fuori dal viewport e la scheda in background, così
   smettono di far lavorare il compositore quando non si vedono. */
.is-offscreen,
html.is-hidden-tab .ticker > div,
html.is-hidden-tab .hero__logo-orbit,
html.is-hidden-tab .status-dot,
html.is-hidden-tab .pizza-cursor__cheese {
  animation-play-state: paused;
}

.hero__logo-orbit.is-offscreen:before,
.hero__logo-orbit.is-offscreen:after {
  animation-play-state: paused;
}

/* Il formaggio del cursore si muove solo quando il cursore è a schermo. */
.pizza-cursor:not(.is-visible) .pizza-cursor__cheese {
  animation-play-state: paused;
}

/* Due filter: blur(120px) su riquadri da 320px costano un blur a schermo
   intero a ogni ridisegno dell'hero. Lo stesso alone con un radial-gradient
   non richiede alcun passaggio di filtro. */
.hero__glow {
  width: 660px;
  height: 660px;
  margin: -170px;
  opacity: 0.15;
  filter: none;
}

.hero__glow--one {
  background: radial-gradient(
    circle closest-side,
    rgba(255, 187, 18, 0.9),
    rgba(255, 187, 18, 0) 100%
  );
}

.hero__glow--two {
  background: radial-gradient(
    circle closest-side,
    rgba(255, 72, 173, 0.9),
    rgba(255, 72, 173, 0) 100%
  );
}

/* =================================================================
   Correzioni visive
   ================================================================= */

/* Il trattino dell'occhiello è largo 20px ma le due box-shadow lo portano a
   34px: con il solo gap di 9px l'ultimo segno finiva sopra la prima lettera. */
.eyebrow:before {
  margin-right: 8px;
}

/* --delay è impostato da assets/site.js; il fallback evita che un var()
   non risolto invalidi l'intera transition di .reveal. */
.reveal {
  --delay: 0ms;
}

/* Il cursore custom scrive transform a ogni frame, il resto no. */
.pizza-cursor img,
.pizza-cursor__glow {
  will-change: auto;
}

/* =================================================================
   Immagine del menu
   ================================================================= */

/* Gli attributi width/height servono a riservare lo spazio ed evitare i
   salti di layout, ma il rapporto viene applicato solo se l'altezza resta
   auto. Questa e' l'unica immagine del sito senza altezza imposta dal CSS:
   senza questa riga l'attributo height="1600" diventava un'altezza reale e
   su telefono il menu risultava stirato 3,5 volte in verticale. */
.menu-board__frame img {
  height: auto;
}

/* =================================================================
   Telefoni — leggibilita' e aree toccabili
   ================================================================= */

/* La fascia con menu compatto arriva a 900px: anche su tablet le
   micro-etichette da 6-8px erano al limite della leggibilita'. */
@media (max-width: 900px) {
  /* Le micro-etichette maiuscole sono la cifra grafica del sito, ma a 5-8px
     su un telefono non si leggono. Alzate quel tanto che basta, mantenendo
     la spaziatura e il rapporto fra i livelli. */
  .eyebrow,
  .arcade-button,
  .text-link,
  .link-light,
  .hours__list span {
    font-size: 11px;
  }

  .footer-label,
  .strength-card a,
  .service-grid small,
  .contact__cards span,
  .social-strip span,
  .hero__quick-card span,
  .menu-board__aside > span,
  .sequence-scroll__meta span,
  .intro__image span,
  .mission__image span,
  .visit__image span,
  .page-hero__image span,
  .nav-social a {
    font-size: 10px;
  }

  .hero__quick-card small,
  .hero__stats small,
  .menu-board__aside small,
  .footer__bottom,
  .mobile-order small {
    font-size: 9px;
  }

  .footer__top a,
  .footer__top span,
  .footer__brand p,
  .strength-card p,
  .values p,
  .service-grid p,
  .menu-board__aside p {
    font-size: 12px;
  }

  .sequence-scroll__deck:after {
    font-size: 9px;
  }

  /* L'hamburger era 36x26: sotto il minimo di 44px ed e' il comando piu'
     importante della versione mobile. */
  .menu-toggle {
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }

  .menu-toggle svg {
    width: 28px;
    height: 28px;
  }

  }

@media (max-width: 620px) {
  /* Icone social del footer e voci di menu: area toccabile piena. */
  .footer__brand > div a {
    width: 44px;
    height: 44px;
  }

  .footer__top a {
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  .nav-social a {
    min-height: 44px;
  }

  /* I link testuali sono alti 15-16px. L'area di tocco viene estesa con uno
     pseudo-elemento, così il tratto sottolineato resta attaccato al testo
     invece di staccarsi in fondo a un riquadro piu' alto. */
  .text-link,
  .link-light,
  .strength-card a,
  .footer-call {
    position: relative;
  }

  .text-link:after,
  .link-light:after,
  .strength-card a:after,
  .footer-call:after {
    content: "";
    position: absolute;
    top: -14px;
    right: -8px;
    bottom: -14px;
    left: -8px;
  }
}

/* Il menu e' un poster fitto: dentro la colonna del telefono le descrizioni
   delle pizze restano minute. Aprendolo a schermo intero si ingrandisce con
   le dita. */
.menu-board__zoom {
  display: block;
  position: relative;
}

.menu-board__zoom > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 8px 12px;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--black);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 621px) {
  .menu-board__zoom > span {
    display: none;
  }
}

@media (max-width: 620px) {
  /* Ultimi residui sotto i 10px: la barra gialla d'ordine e' il comando
     principale su telefono e stava a 9px. */
  .mobile-order {
    font-size: 12px;
  }

  .menu-board__aside a,
  .menu-board__aside small,
  .footer__bottom,
  .footer__legal-links a,
  .skip-link {
    font-size: 11px;
  }

  .footer__top a,
  .footer__legal-links a,
  .menu-board__aside a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .footer__legal-links {
    gap: 22px;
  }

  .menu-board__aside a {
    justify-content: space-between;
  }
}

@media (max-width: 620px) {
  /* Sequenza focaccia su telefono: il blocco 01/05 impilato mangiava 270px
     e spingeva l'immagine — che e' il senso della sezione — a fondo schermo,
     con i pallini di avanzamento fuori dalla piega e la foto coperta dalla
     barra gialla fissa. Rimesso su due colonne, immagine piu' alta e spazio
     riservato in fondo. */
  .sequence-scroll__meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .sequence-scroll__meta span {
    min-height: 46px;
    padding: 10px 0;
    align-items: flex-start;
    border-right: 1px solid var(--line-light);
    border-bottom: 0;
    text-align: left;
  }

  .sequence-scroll__meta span:last-child {
    padding-left: 14px;
    border-right: 0;
  }

  .sequence-scroll__copy p {
    margin-bottom: 20px;
  }

  .sequence-scroll__sticky {
    padding-bottom: 104px;
  }

  .sequence-scroll__deck {
    aspect-ratio: 4 / 3;
  }
}