/* ==========================================================================
   BEAR'S PIZZA — LANDING PAGE STYLESHEET
   Design System: 70s NY Pizzeria meets Streetwear Drop Culture
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand Palette from Vector Assets */
  --color-bg-tomato: #d93c2c;       /* Rosso pomodoro caldo dell'artboard */
  --color-bg-tomato-deep: #c93020;  /* Ombra calda per sfumatura radiale */
  --color-cream: #fceec7;           /* Crema vintage delle scritte e sfondi */
  --color-cream-light: #fff5dc;     /* Crema chiaro per hover */
  --color-blue-navy: #1d4a93;       /* Blu vintage "Slice" e accenti */
  --color-blue-dark: #12336a;       /* Blu scuro per stati attivi */
  --color-white: #ffffff;
  --color-crust: #e7a843;           /* Giallo crosta dorata */

  /* Typography: SOLO Rubik in tutto il sito (nessun altro font).
     'sans-serif' resta solo come rete di sicurezza se Google Fonts non risponde. */
  --font-sans: 'Rubik', sans-serif;
  --font-display: 'Rubik', sans-serif;
  --font-mono: 'Rubik', sans-serif;

  /* Transitions & Springs (Emil Kowalski Physics) */
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-snappy: cubic-bezier(0.4, 0, 0.2, 1);

  /* Curve per le animazioni d'interfaccia (entrate/uscite e spostamenti a schermo) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* SISTEMA OMBRE — regola definitiva:
     niente nero, niente sfocatura. Solo spostamenti netti "da stampa" in una tonalità più scura
     dello stesso colore su cui poggiano (come l'inchiostro fuori registro dei manifesti anni '70).
     Su sfondo rosso → rosso salsa; sotto i bottoni blu → blu scuro. */
  --shade-on-red: #a8281b;
  --shade-on-navy: #12336a;
  --lift-sm: 0 3px 0 var(--shade-on-red);
  --lift-md: 0 6px 0 var(--shade-on-red);
  --lift-lg: 0 10px 0 var(--shade-on-red);

  /* Durata del caricamento iniziale (letta anche da main.js) */
  --splash-duration: 3000ms;
}

/* --------------------------------------------------------------------------
   2. Reset & Base Layout
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nessuna barra di scorrimento visibile (pagina unica a tutto schermo).
   Lo scorrimento resta possibile solo dove serve, es. telefono in orizzontale. */
html,
body {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* vecchio Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Edge */
}

/* I campi dei form non ereditano il font per default: forziamo Rubik ovunque */
button, input, select, textarea, label {
  font-family: inherit;
}

/* Pulsanti: tap immediato (niente ritardo da doppio tap) e testo non selezionabile col dito */
button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

html {
  background-color: var(--color-bg-tomato); /* tela del browser sempre dello stesso rosso */
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;           /* niente pull-to-refresh / rimbalzo della pagina */
  -webkit-text-size-adjust: 100%;      /* niente ingrandimento del testo in orizzontale */
  font-family: var(--font-sans);
}

body.landing-body {
  -webkit-tap-highlight-color: transparent; /* niente flash grigio al tap su mobile */
  background-color: var(--color-bg-tomato);
  /* Solo un leggero bagliore al centro che sfuma ESATTAMENTE nel rosso di fondo:
     i bordi della pagina hanno lo stesso colore dello sfondo, quindi nessun "rettangolo" scuro.
     NON scurire mai i bordi (niente vignettature o gradienti verso colori più scuri).
     no-repeat + fixed: il gradiente non si ripete a "piastrella" se la finestra è più alta della pagina. */
  background-image: radial-gradient(circle at 50% 45%, #e14332 0%, var(--color-bg-tomato) 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-cream);
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Fake Preloader / Splash Screen (Translucent Blurred Entry)
   -------------------------------------------------------------------------- */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s var(--spring-smooth), transform 0.5s var(--spring-smooth), visibility 0.5s;
}

.splash-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(217, 60, 44, 0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.mascot-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 145px;
  animation: mascot-intro 0.75s var(--spring-bounce) backwards, mascot-hover 2.2s ease-in-out 0.75s infinite alternate;
}

/* Alone crema che "respira" dietro la mascotte */
.mascot-frame::before {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 238, 199, 0.55) 0%, rgba(252, 238, 199, 0.22) 38%, rgba(252, 238, 199, 0) 66%);
  transform: translate(-50%, -50%) scale(0.9);
  animation: halo-breathe 2.2s ease-in-out 0.4s infinite alternate;
  z-index: -1;
  pointer-events: none;
}

@keyframes halo-breathe {
  0% { transform: translate(-50%, -50%) scale(0.88); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.mascot-svg {
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
  /* Piccolo "saluto": la mascotte ondeggia la testa a intervalli */
  animation: mascot-wiggle 1.8s ease-in-out 0.9s infinite;
}

@keyframes mascot-wiggle {
  0%, 55%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(-7deg); }
  75% { transform: rotate(6deg); }
  85% { transform: rotate(-3deg); }
  93% { transform: rotate(1.5deg); }
}

.mascot-shadow {
  width: 90px;
  height: 11px;
  background: var(--shade-on-red); /* ombra a terra piatta, in tono */
  opacity: 0.55;
  border-radius: 50%;
  margin-top: 10px;
  animation: shadow-pulse 2.2s ease-in-out 0.75s infinite alternate;
}

@keyframes mascot-intro {
  0% {
    opacity: 0;
    transform: scale(0.65) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes mascot-hover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

@keyframes shadow-pulse {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.12;
  }
}

.splash-progress-track {
  width: 130px;
  height: 3px;
  background: rgba(252, 238, 199, 0.22);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 1.35rem;
}

/* Barra a "scatti" realistici: corre, rallenta, riparte, completa */
.splash-progress-bar {
  position: relative;
  height: 100%;
  width: 0%;
  background: var(--color-cream);
  border-radius: 9999px;
  overflow: hidden;
  animation: progress-fill var(--splash-duration) linear forwards;
}

/* Riflesso luminoso che scorre sulla barra */
.splash-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
  animation: progress-shine 1.1s ease-in-out infinite;
}

@keyframes progress-fill {
  0% { width: 0%; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  28% { width: 34%; animation-timing-function: ease-in-out; }
  42% { width: 38%; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  70% { width: 72%; animation-timing-function: ease-in-out; }
  80% { width: 76%; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { width: 100%; }
}

@keyframes progress-shine {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(140px); }
}

.splash-caption {
  max-width: 260px;
  text-align: center;
  line-height: 1.5;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-cream);
  text-transform: uppercase;
  opacity: 0.92;
}



/* Exit state: la mascotte fa un piccolo salto mentre lo splash si dissolve */
.splash-screen.fade-out {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
  transition-delay: 0.12s;
}

.splash-screen.fade-out .mascot-frame {
  animation: mascot-exit 0.55s var(--spring-bounce) forwards;
}

@keyframes mascot-exit {
  0% { transform: translateY(-4px) scale(1); }
  45% { transform: translateY(6px) scale(1.06, 0.92); }
  100% { transform: translateY(-26px) scale(1.12); }
}

/* --------------------------------------------------------------------------
   4. Retro Grain & Atmosphere
   -------------------------------------------------------------------------- */
.retro-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Vignettatura disattivata: l'ombra interna scuriva i bordi della pagina
   creando un "rettangolo" scuro. Per riattivarla, rimettere:
   box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.16); */
.retro-vignette {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Poster Canvas (Optical Centering & Strict Viewport)
   -------------------------------------------------------------------------- */
.poster-canvas {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2rem 2rem;
  /* Rispetta notch e barra home degli iPhone */
  padding-top: max(1.75rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   6. Top Utility Bar: Collapsible Language Dropdown (Top-Right)
   -------------------------------------------------------------------------- */
.top-nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 30;
}

.lang-dropdown {
  position: relative;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  background: rgba(252, 238, 199, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(252, 238, 199, 0.28);
  border-radius: 9999px;
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out);
}

.lang-trigger:hover {
  background: rgba(252, 238, 199, 0.24);
  border-color: var(--color-cream);
  transform: translateY(-1px);
}

.globe-icon {
  stroke: var(--color-cream);
  opacity: 0.95;
}

.current-lang-code {
  font-weight: 800;
}

.chevron-icon {
  stroke: var(--color-cream);
  opacity: 0.7;
  transition: transform 0.2s var(--ease-out);
}

.lang-dropdown.open .chevron-icon {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  background: var(--color-cream);
  border-radius: 14px;
  padding: 0.3rem;
  box-shadow: var(--lift-md);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 110px;
  z-index: 100;
  transform-origin: top right;
  animation: dropdown-pop 0.18s var(--ease-out); /* si apre dall'angolo del pulsante */
}

@keyframes dropdown-pop {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lang-option {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-blue-navy);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-option:hover {
  background: rgba(29, 74, 147, 0.09);
}

.lang-option.active {
  background: var(--color-blue-navy);
  color: var(--color-cream);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Hero Stage: Optical Centering & Interactive 3D Canvas
   -------------------------------------------------------------------------- */
.hero-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 950px;
  perspective: 1200px;
  /* Centratura ottica: elevato di 1.8vh */
  transform: translateY(-1.8vh);
}

/* Contenitore piatto che ospita ombra + artwork 3D */
.hero-artwork-slot {
  position: relative;
  width: 100%;
  max-width: 660px;
  display: flex;
  justify-content: center;
  /* Spostato verso sinistra (-28px) in modo che la 'Y' di "you!" sia perfettamente allineata al centro della newsletter bar */
  margin-left: -28px;
}

/* Ombra dell'artwork: la sagoma del vettore (mask) riempita di rosso salsa e spostata in basso,
   senza sfocatura e senza filter. Vive dentro .artwork-mesh, quindi segue esattamente
   fluttuazione, tilt 3D e trascinamento: è come la stampa fuori registro di un adesivo. */
.artwork-mesh {
  position: relative;
}

.hero-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 680.93 / 568.07; /* proporzioni di slice-to-meet-you.svg */
  max-height: 50vh;
  background: var(--shade-on-red);
  -webkit-mask: url("../svg/slice-to-meet-you.svg") center / contain no-repeat;
  mask: url("../svg/slice-to-meet-you.svg") center / contain no-repeat;
  transform: translateY(10px);
  pointer-events: none;
}

.hero-svg {
  position: relative; /* sopra la propria ombra */
}

@keyframes shadow-in {
  0% { opacity: 0; }
}

.hero-artwork-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  touch-action: none;
  /* Il transform del wrapper è gestito dal JS (tilt 3D + drag elastico).
     La fluttuazione vive sul figlio .artwork-mesh per non andare in conflitto. */
}

.hero-artwork-wrapper:active {
  cursor: grabbing;
}

.artwork-mesh {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Il galleggiamento è calcolato in main.js insieme all'ombra dinamica, così restano sincronizzati */
}

.hero-svg {
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  pointer-events: none;
}

@keyframes enter-pop {
  0% {
    opacity: 0;
    transform: scale(0.78) translateY(35px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes float-hero {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(0.4deg);
  }
}

/* Animazione elastica al click/tap: gestita via Web Animations API in main.js
   (sull'immagine .hero-svg, così non interferisce con tilt e fluttuazione) */

/* --------------------------------------------------------------------------
   8. Waitlist Card & Email Form (Refined Desktop Proportions)
   -------------------------------------------------------------------------- */
.waitlist-card {
  /* Larghezza UNICA per tutte le lingue: misurata sulla frase più lunga
     (ES "¿Quieres la primera porción?" = 361px) + un filo d'aria. Ricalcolare se cambiano i testi. */
  width: 368px;
  max-width: 100%;
  margin-top: 1.85rem;
  position: relative;
  z-index: 10;
}

.input-group {
  display: flex;
  align-items: center;
  background: var(--color-cream);
  padding: 0.32rem 0.35rem 0.32rem 1.15rem;
  border-radius: 9999px;
  box-shadow: var(--lift-md);
}

/* Box teaser: domanda + pulsante "Sì!" */
.teaser-group {
  gap: 1rem;                 /* respiro tra domanda e pulsante */
  height: 52px;
  padding: 6px 6px 6px 1.4rem; /* pulsante "incastonato" a 6px dal bordo, come un anello concentrico */
}

.teaser-question {
  flex: 1;
  min-width: 0;
  color: var(--color-blue-navy);
  font-size: 1rem;           /* 16px: è il messaggio principale, deve leggersi bene */
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teaser-group .submit-btn {
  flex-shrink: 0;
  height: 100%;
  font-size: 0.85rem;        /* più piccolo della domanda, ma pesante e maiuscolo: è l'azione */
  font-weight: 800;
  letter-spacing: 0.07em;
  padding-left: 1.4rem;
  padding-right: 1.3rem;
}

/* --------------------------------------------------------------------------
   8b. Popup "non manca molto": un biglietto crema con il bordo a quadri
       come una tovaglia, appoggiato sul rosso con un'ombra netta "da stampa"
   -------------------------------------------------------------------------- */
.teaser-dialog {
  width: calc(100% - 40px);
  max-width: 420px;
  margin: auto;
  padding: 0 0 10px; /* spazio per l'ombra netta del biglietto */
  border: none;
  background: transparent;
  color: var(--color-blue-navy);
  overflow: visible;
}

.teaser-dialog:focus {
  outline: none;
}

/* Velo rosso pomodoro (mai scuro) che sfoca la pagina dietro */
.teaser-dialog::backdrop {
  background: rgba(217, 60, 44, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Entrata: il biglietto viene "appoggiato" con una lieve rotazione */
.teaser-dialog[open] {
  animation: ticket-in 0.42s var(--ease-out);
}

/* Il contenuto arriva un attimo dopo il biglietto */
.teaser-dialog[open] .teaser-text {
  animation: rise-in 0.36s var(--ease-out) 0.08s both;
}

.teaser-dialog[open] .teaser-ok {
  animation: rise-in 0.36s var(--ease-out) 0.14s both;
}

.teaser-dialog[open]::backdrop {
  animation: backdrop-in 0.25s ease-out;
}

.teaser-dialog.closing {
  animation: ticket-out 0.18s var(--ease-out) forwards;
}

.teaser-dialog.closing::backdrop {
  animation: backdrop-out 0.18s var(--ease-out) forwards;
}

@keyframes ticket-in {
  0% { opacity: 0; transform: translateY(20px) rotate(-2deg) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes ticket-out {
  100% { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes backdrop-in {
  0% { opacity: 0; }
}

@keyframes backdrop-out {
  100% { opacity: 0; }
}

.teaser-card {
  position: relative;
  overflow: hidden;
  background: var(--color-cream);
  border-radius: 22px;
  text-align: center;
  box-shadow: var(--lift-lg); /* ombra netta in rosso salsa, niente nero */
}

/* Bordo a tovaglia: il modulo di "Risorsa 4.svg" ripetuto a tutta larghezza.
   "round" adatta il numero di quadretti alla larghezza: mai quadretti tagliati. */
.teaser-band {
  height: 22px;
  background: url("../svg/checker-h.svg") left top / auto 100% round no-repeat;
}

.teaser-body {
  padding: 3.6rem 2.5rem 2.6rem; /* in alto: la X ha il suo spazio */
}

.teaser-text {
  max-width: 15em;
  margin: 0 auto;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Bottone "in rilievo": ombra netta blu scuro, che si schiaccia quando lo premi */
.teaser-ok {
  margin-top: 2.1rem;
  min-height: 52px;
  padding: 0.85rem 2.2rem;
  border: none;
  border-radius: 9999px;
  background: var(--color-blue-navy);
  color: var(--color-cream);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--shade-on-navy);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.teaser-ok:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--shade-on-navy);
}

/* X semplice, tono su tono, senza cerchio */
.teaser-close {
  position: absolute;
  top: calc(22px + 0.6rem);
  right: 0.6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: #9a8558;
  cursor: pointer;
  transition: color 0.15s ease;
}

.teaser-ok:focus-visible,
.teaser-close:focus-visible {
  outline: 2.5px solid var(--color-blue-navy);
  outline-offset: 3px;
}

/* Hover solo dove esiste un vero mouse (evita stati "incollati" su mobile) */
@media (hover: hover) and (pointer: fine) {
  .teaser-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--shade-on-navy);
  }

  .teaser-ok:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 var(--shade-on-navy);
  }

  .teaser-close:hover {
    color: #6f5e38;
  }
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--color-blue-navy);
  color: var(--color-cream);
  border: none;
  outline: none;
  padding: 0.62rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.16s var(--ease-out);
}

/* Pressione: piccolo schiacciamento immediato (feedback), su qualsiasi dispositivo */
.submit-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.btn-arrow {
  transition: transform 0.2s var(--ease-out);
}

/* Hover solo con un vero mouse: lieve sollevamento e freccia che "spinge" avanti */
@media (hover: hover) and (pointer: fine) {
  .submit-btn:hover {
    background-color: var(--color-blue-dark);
    transform: translateY(-1px);
  }

  .submit-btn:active {
    transform: scale(0.97);
  }

  .submit-btn:hover .btn-arrow {
    transform: translateX(3px);
  }
}

/* --------------------------------------------------------------------------
   9. Bottom Stage: Bear's Pizza Logo (Static Brand Mark)
   -------------------------------------------------------------------------- */
.bottom-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5rem;
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.brand-logo-svg {
  width: 142px;
  height: auto;
  max-width: 165px;
}

/* --------------------------------------------------------------------------
   10. Utility, Focus visibile & Particle Animation (Confetti)
   -------------------------------------------------------------------------- */
.hidden {
  display: none !important;
}

/* Testo leggibile solo dagli screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Anello di focus visibile solo da tastiera */
.lang-trigger:focus-visible,
.submit-btn:focus-visible {
  outline: 2.5px solid var(--color-cream);
  outline-offset: 3px;
}

.lang-option:focus-visible {
  outline: 2px solid var(--color-blue-navy);
  outline-offset: 2px;
}

.submit-btn:focus-visible {
  outline-color: var(--color-blue-navy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Mobile Responsiveness (Refined Proportions & Strict Viewport)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .poster-canvas {
    padding: 1.2rem 1.25rem 1.2rem;
    padding-top: max(1.2rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .top-nav {
    justify-content: flex-end;
  }

  .lang-trigger {
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
    gap: 0.35rem;
  }

  .globe-icon {
    width: 13px;
    height: 13px;
  }

  .hero-stage {
    transform: translateY(-1vh);
  }

  .hero-artwork-slot {
    max-width: 90vw;
    margin-left: -16px;
  }

  .hero-svg,
  .hero-shadow {
    max-height: 44vh;
  }

  /* Box teaser riscalato: proporzioni coerenti con il desktop */
  .waitlist-card {
    width: 320px;            /* stessa logica: frase spagnola su mobile + aria, uguale in tutte le lingue */
    margin-top: 1.35rem;
  }

  .input-group {
    box-shadow: 0 5px 0 var(--shade-on-red);
  }

  .teaser-group {
    height: 50px;
    gap: 0.6rem;
    padding: 5px 5px 5px 1rem;
  }

  .teaser-question {
    font-size: 0.94rem;      /* ~15px: leggibile anche su telefono */
  }

  .teaser-group .submit-btn {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    padding-left: 1.1rem;
    padding-right: 1rem;
  }

  .submit-btn svg {
    width: 13px;
    height: 13px;
  }

  .teaser-body {
    padding: 3.4rem 1.6rem 2.2rem;
  }

  .teaser-text {
    font-size: 1.35rem;
  }

  .teaser-ok {
    margin-top: 1.8rem;
  }

  .brand-logo-svg {
    width: 108px;
  }

  /* Preloader on mobile */
  .mascot-frame {
    width: 125px;
  }

  .splash-progress-track {
    width: 110px;
  }

  .splash-caption {
    font-size: 0.7rem;
  }
}

/* Su touch screen gli stati :hover restano "incollati" dopo il tap: li neutralizziamo */
@media (hover: none), (pointer: coarse) {
  .submit-btn:hover,
  .lang-trigger:hover {
    transform: none;
  }

  .submit-btn:hover .btn-arrow {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. Schermi bassi (telefono in orizzontale): consenti lo scroll
   -------------------------------------------------------------------------- */
@media (max-height: 560px) {
  body.landing-body,
  .poster-canvas {
    height: auto;
    max-height: none;
    overflow-y: auto;
  }

  body.landing-body {
    overflow-x: hidden;
  }

  .hero-stage {
    padding: 1rem 0;
  }

  .hero-svg,
  .hero-shadow {
    max-height: 60vh;
  }
}

/* --------------------------------------------------------------------------
   14. Entrata della pagina (un solo momento coordinato, quando si chiude il caricamento)
   La classe .js la mette lo script in <head>, .is-ready la mette main.js:
   senza JavaScript la pagina resta semplicemente visibile.
   -------------------------------------------------------------------------- */
.js .landing-body:not(.is-ready) .hero-artwork-slot,
.js .landing-body:not(.is-ready) .waitlist-card,
.js .landing-body:not(.is-ready) .top-nav,
.js .landing-body:not(.is-ready) .bottom-stage {
  opacity: 0;
}

.is-ready .hero-artwork-slot {
  animation: hero-in 0.7s var(--ease-out) both;
}

.is-ready .waitlist-card {
  animation: rise-in 0.6s var(--ease-out) 0.12s both;
}

.is-ready .top-nav {
  animation: fade-in 0.5s ease-out 0.2s both;
}

.is-ready .bottom-stage {
  animation: rise-in 0.6s var(--ease-out) 0.24s both;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
}

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

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* --------------------------------------------------------------------------
   15. Movimento ridotto (preferenza di sistema "Riduci movimento")
   Meno movimento, non zero: via spostamenti, loop, rimbalzi e parallax;
   restano dissolvenze, barra di avanzamento e cambi di colore.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .artwork-mesh,
  .mascot-svg,
  .mascot-frame::before,
  .mascot-shadow,
  .splash-progress-bar::after {
    animation: none;
  }

  .mascot-frame {
    animation: fade-in 0.4s ease-out both;
  }

  .splash-screen.fade-out {
    transform: none;
  }

  .splash-screen.fade-out .mascot-frame {
    animation: none;
  }

  .is-ready .hero-artwork-slot,
  .is-ready .waitlist-card,
  .is-ready .bottom-stage {
    animation-name: fade-in;
  }

  .teaser-dialog[open] {
    animation: fade-in 0.2s ease-out;
  }

  .teaser-dialog.closing {
    animation: fade-out 0.16s ease-out forwards;
  }

  .teaser-dialog[open] .teaser-text,
  .teaser-dialog[open] .teaser-ok {
    animation: none;
  }

  .lang-menu {
    animation: fade-in 0.15s ease-out;
  }

  .submit-btn:hover,
  .submit-btn:active,
  .submit-btn:hover .btn-arrow,
  .lang-trigger:hover,
  .teaser-ok:hover,
  .teaser-ok:active {
    transform: none;
  }
}