/* Dogs Party, landing di www.dogsparty.app.
   Nessuna risorsa esterna. site.js è facoltativo: senza, la pagina è completa
   (la passeggiata diventa un'illustrazione ferma con le tappe in elenco).
   Colori, caratteri e movimento vengono dal redesign dell'app
   (docs/superpowers/specs/2026-11-08-redesign-visivo-design.md): Prato di giorno, Sera di notte. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* Prato (giorno) */
  --bosco: #143024;
  --testo-tenue: #46594F;
  --carta: #FFFFFF;
  --superficie: #F0F7EB;
  --prato: #E4F2DC;
  --linea: #CFE0C6;
  --zampa: #F97316;
  --zampa-chiara: #FB8A3C;
  --zampa-scura: #C2410C;
  --erba: #5FA052;
  --pallina: #DDF06A;
  --pallino: #9BBE1E;
  /* Sera (notte) */
  --notte: #0F241A;
  --siepe: #183428;
  --siepe-alta: #21402F;
  --luna: #EAF3E6;
  --luna-tenue: #A9C0B1;
  --linea-sera: #2E4A3C;
  --lampione: #FDBA74;

  /* Ruoli: cambiano nelle sezioni .sera e col tema scuro */
  --sfondo: var(--carta);
  --sfondo-apertura: var(--prato);
  --testo: var(--bosco);
  --tenue: var(--testo-tenue);
  --link: var(--zampa-scura);
  --bordo-campo: #5E7A69;
  --orecchie: var(--bosco);

  --titoli: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Movimento (token del redesign) */
  --ease-uscita: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-rimbalzo: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: var(--notte);
    --sfondo-apertura: var(--notte);
    --testo: var(--luna);
    --tenue: var(--luna-tenue);
    --link: var(--lampione);
    --bordo-campo: #7FA08F;
    --orecchie: var(--prato);
  }
}

/* Le sezioni della sera sono scure anche col tema chiaro: la pagina passa dal giorno alla sera */
.sera {
  --sfondo: var(--notte);
  --testo: var(--luna);
  --tenue: var(--luna-tenue);
  --link: var(--lampione);
  --bordo-campo: #7FA08F;
  --orecchie: var(--prato);
  background: var(--sfondo);
  color: var(--testo);
}

/* Fasi della pagina: <html data-phase="…"> mostra solo gli elementi con quella parola in data-show */
html[data-phase="soon"] [data-show]:not([data-show~="soon"]),
html[data-phase="waitlist"] [data-show]:not([data-show~="waitlist"]),
html[data-phase="android"] [data-show]:not([data-show~="android"]) {
  display: none;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--titoli);
  font-weight: 800;
  text-wrap: balance;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--testo);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Pulsanti --- */

.button {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--zampa);
  color: var(--bosco); /* testo bosco su arancione: 5,0:1 (il bianco si ferma a 2,8:1) */
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.button:hover {
  background: var(--zampa-chiara);
}

.button:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.button-piccolo {
  padding: 0.6rem 1.1rem;
  font-size: 0.9375rem;
}

/* --- Testata --- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(1.25rem, calc((100% - 72rem) / 2));
  background: var(--sfondo-apertura);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--testo);
  font-family: var(--titoli);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand-segno {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--orecchie);
}

/* ===================== Apertura ===================== */

.hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem max(1.25rem, calc((100% - 72rem) / 2)) 3.5rem;
  background: var(--sfondo-apertura);
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw + 0.75rem, 4.9rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

.lead {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: 1.1875rem;
  color: var(--tenue);
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.availability {
  color: var(--tenue);
  font-weight: 600;
}

.availability-strong {
  color: var(--testo);
  font-size: 1.25rem;
}

.hero-scena {
  position: relative;
  width: min(100%, 30rem);
  justify-self: center;
}

.hero-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lente { fill: var(--carta); }
.hm-parco { fill: #C9E5B9; }
.hm-strada-bordo { fill: none; stroke: #DCE4D2; stroke-width: 15; stroke-linecap: round; }
.hm-strada { fill: none; stroke: var(--carta); stroke-width: 10; stroke-linecap: round; }
.hm-recinto { fill: #DDEFCB; stroke: var(--erba); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.hero-ombra { fill: var(--bosco); opacity: 0.18; }
.orecchio { fill: var(--orecchie); }
.palla { fill: var(--pallina); }
.palla-cucitura { fill: none; stroke: var(--carta); stroke-width: 2.4; stroke-linecap: round; }

@media (prefers-color-scheme: dark) {
  .lente { fill: #11281E; }
  .hm-parco { fill: #1A3D2B; }
  .hm-strada-bordo { stroke: #1A3327; }
  .hm-strada { stroke: #284433; }
  .hm-recinto { fill: #21452F; stroke: var(--lampione); }
  .hero-ombra { fill: #000; opacity: 0.35; }
}

.hero-pin,
.hero-pin-salto {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.hero-pin,
.hero-palla-salto {
  cursor: pointer;
}

.orecchio {
  transform-box: fill-box;
}

.orecchio-sx { transform-origin: 85% 8%; }
.orecchio-dx { transform-origin: 15% 8%; }

.hero-palla,
.hero-palla-salto {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.hero-adesso {
  position: absolute;
  top: 5%;
  left: 2%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--pallina);
  color: var(--bosco);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  box-shadow: 0 10px 26px -12px rgba(20, 48, 36, 0.4);
}

.pallino {
  position: relative;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--pallino);
}

.pallino::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pallino);
  opacity: 0;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 5.5rem;
  }

  .hero-scena {
    justify-self: end;
  }
}

/* Il momento dell'apertura: il segnaposto cade e rimbalza, arriva la pallina, compare "adesso" */
@media (prefers-reduced-motion: no-preference) {
  .hero-pin {
    animation: pin-cade 1100ms 150ms both;
  }

  .hero-ombra {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: ombra-cresce 1100ms 150ms both;
  }

  .hero-palla {
    animation: palla-arriva 1500ms 750ms both;
  }

  .hero-adesso {
    animation: compare 500ms var(--ease-uscita) 1700ms both;
  }

  /* site.js mette in pausa l'apertura se la scena è sotto la piega (telefono) */
  .hero-scena.attendi .hero-pin,
  .hero-scena.attendi .hero-ombra,
  .hero-scena.attendi .hero-palla,
  .hero-scena.attendi .hero-adesso {
    animation-play-state: paused;
  }

  .pallino::after {
    animation: pulsa 2s ease-out 2.2s infinite;
  }

  /* Al tocco: il segnaposto saltella e muove le orecchie, la pallina rimbalza */
  .hero-pin.scodinzola .hero-pin-salto { animation: saltello 650ms; }
  .hero-pin.scodinzola .orecchio-sx { animation: orecchio-sx 650ms; }
  .hero-pin.scodinzola .orecchio-dx { animation: orecchio-dx 650ms; }
  .hero-palla-salto.rimbalza { animation: rimbalzo 800ms; }
}

@keyframes pin-cade {
  0% { transform: translateY(-360px) scale(0.92, 1.08); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  42% { transform: translateY(0) scale(0.92, 1.08); animation-timing-function: ease-out; }
  52% { transform: translateY(0) scale(1.16, 0.8); animation-timing-function: ease-out; }
  68% { transform: translateY(-26px) scale(0.96, 1.05); animation-timing-function: ease-in; }
  82% { transform: translateY(0) scale(1.06, 0.94); animation-timing-function: ease-out; }
  100% { transform: none; }
}

@keyframes ombra-cresce {
  0% { transform: scale(0.15); opacity: 0; }
  42% { transform: scale(1); opacity: 0.18; }
  68% { transform: scale(0.8); }
  100% { transform: scale(1); opacity: 0.18; }
}

@keyframes palla-arriva {
  0% { transform: translate(150px, -340px) rotate(0); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  34% { transform: translate(78px, 0) rotate(170deg); animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 1); }
  52% { transform: translate(48px, -80px) rotate(260deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  68% { transform: translate(24px, 0) rotate(330deg); animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 1); }
  79% { transform: translate(12px, -22px) rotate(375deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  89% { transform: translate(5px, 0) rotate(400deg); animation-timing-function: ease-out; }
  100% { transform: translate(0, 0) rotate(415deg); }
}

@keyframes compare {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes pulsa {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

@keyframes saltello {
  0% { transform: none; }
  25% { transform: translateY(0) scale(1.08, 0.9); }
  55% { transform: translateY(-34px) scale(0.95, 1.06); }
  80% { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: none; }
}

@keyframes orecchio-sx {
  0%, 100% { transform: none; }
  30% { transform: rotate(-22deg); }
  55% { transform: rotate(14deg); }
  78% { transform: rotate(-6deg); }
}

@keyframes orecchio-dx {
  0%, 100% { transform: none; }
  30% { transform: rotate(22deg); }
  55% { transform: rotate(-14deg); }
  78% { transform: rotate(6deg); }
}

@keyframes rimbalzo {
  0% { transform: none; }
  35% { transform: translateY(-70px) rotate(120deg); animation-timing-function: ease-in; }
  62% { transform: translateY(0) rotate(200deg) scale(1.1, 0.88); animation-timing-function: ease-out; }
  80% { transform: translateY(-18px) rotate(240deg); animation-timing-function: ease-in; }
  100% { transform: rotate(260deg); }
}

/* ===================== La passeggiata ===================== */
/* Senza site.js (o con "riduci animazioni"): illustrazione ferma e tappe in elenco.
   Con site.js: <html class="scena-attiva">, la sezione diventa alta e la scena resta
   ferma mentre si scorre; lo script imposta --night (0 giorno, 1 sera), --walk
   (0 a casa, 1 al parco) e data-tappa-attiva. */

.passeggiata {
  --night: 0;
  --walk: 1;
  --nome-fondo: var(--carta);
  --nome-testo: var(--bosco);

  /* Colori della mappa: giorno (mappa chiara dell'app) → crepuscolo (ora blu) → sera (mappa scura).
     --crepuscolo va da 0 a 1 nella prima metà della sera, --buio nella seconda. */
  --crepuscolo: clamp(0, calc(var(--night) * 2), 1);
  --buio: clamp(0, calc(var(--night) * 2 - 1), 1);
  --m-terra: color-mix(in oklab, color-mix(in oklab, #F2F5EA, #BFCBCB calc(var(--crepuscolo) * 100%)), #11281E calc(var(--buio) * 100%));
  --m-isolato: color-mix(in oklab, color-mix(in oklab, #E6ECDD, #AEBDBE calc(var(--crepuscolo) * 100%)), #173427 calc(var(--buio) * 100%));
  --m-parco: color-mix(in oklab, color-mix(in oklab, #C9E5B9, #95B9A2 calc(var(--crepuscolo) * 100%)), #1A3D2B calc(var(--buio) * 100%));
  --m-albero: color-mix(in oklab, color-mix(in oklab, #A9D394, #7FA48C calc(var(--crepuscolo) * 100%)), #24503A calc(var(--buio) * 100%));
  --m-acqua: color-mix(in oklab, color-mix(in oklab, #B9DDEB, #8DB2CB calc(var(--crepuscolo) * 100%)), #173847 calc(var(--buio) * 100%));
  --m-strada: color-mix(in oklab, color-mix(in oklab, #FFFFFF, #DCE4E5 calc(var(--crepuscolo) * 100%)), #284433 calc(var(--buio) * 100%));
  --m-strada-bordo: color-mix(in oklab, color-mix(in oklab, #DCE4D2, #A9B7B9 calc(var(--crepuscolo) * 100%)), #1A3327 calc(var(--buio) * 100%));
  --m-recinto: color-mix(in oklab, color-mix(in oklab, #DDEFCB, #AFCDB2 calc(var(--crepuscolo) * 100%)), #21452F calc(var(--buio) * 100%));
  --m-recinto-bordo: color-mix(in oklab, color-mix(in oklab, #5FA052, #4F8A55 calc(var(--crepuscolo) * 100%)), #FDBA74 calc(var(--buio) * 100%));
  --m-muro: color-mix(in oklab, color-mix(in oklab, #FFFFFF, #E3E8EA calc(var(--crepuscolo) * 100%)), #2B4A3A calc(var(--buio) * 100%));
  --m-finestra: color-mix(in oklab, color-mix(in oklab, #B9DDEB, #F8D488 calc(var(--crepuscolo) * 100%)), #FDE68A calc(var(--buio) * 100%));
  --m-sfondo: color-mix(in oklab, color-mix(in oklab, var(--superficie), #B4C3C6 calc(var(--crepuscolo) * 100%)), var(--notte) calc(var(--buio) * 100%));
  /* Tramonto: massimo a metà sera, nullo di giorno e di notte */
  --tramonto: calc(var(--night) * (1 - var(--night)) * 4);

  background: var(--m-sfondo);
  padding: 4rem max(1.25rem, calc((100% - 72rem) / 2));
}

@media (prefers-color-scheme: dark) {
  .passeggiata {
    --night: 1;
  }
}

/* Dalla metà della sera in poi i testi passano ai colori scuri */
.passeggiata.is-sera {
  --nome-fondo: var(--siepe);
  --nome-testo: var(--luna);
}

@media (prefers-color-scheme: dark) {
  .passeggiata {
    --nome-fondo: var(--siepe);
    --nome-testo: var(--luna);
  }
}

.passeggiata-palco {
  display: grid;
  gap: 2rem;
}

.passeggiata-testi {
  align-self: center;
  padding: 1.75rem 1.5rem;
  border-radius: 24px;
  background: var(--carta);
  color: var(--bosco);
  box-shadow: 0 10px 26px -12px rgba(20, 48, 36, 0.35), 0 0 0 1px rgba(20, 48, 36, 0.05);
  transition: background-color 400ms ease-out, color 400ms ease-out, box-shadow 400ms ease-out;
}

.passeggiata.is-sera .passeggiata-testi {
  background: var(--siepe);
  color: var(--luna);
  box-shadow: 0 0 0 1px var(--linea-sera);
}

@media (prefers-color-scheme: dark) {
  .passeggiata-testi {
    background: var(--siepe);
    color: var(--luna);
    box-shadow: 0 0 0 1px var(--linea-sera);
  }
}

.passeggiata h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Le tappe sono una sequenza vera: il numero dice l'ordine */
.tappe {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
  counter-reset: tappa;
}

.tappa {
  counter-increment: tappa;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.85rem;
}

.tappa::before {
  content: counter(tappa);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--zampa);
  color: var(--bosco);
  font-family: var(--titoli);
  font-weight: 800;
  font-size: 1.1rem;
}

.tappa h3 {
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  align-self: center;
}

.tappa p {
  margin-top: 0.3rem;
  opacity: 0.88;
}

.tappe-punti {
  display: none;
}

.mappa {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 600 / 760;
  max-height: 46rem;
  width: 100%;
  justify-self: center;
  box-shadow: 0 0 0 1px rgba(20, 48, 36, 0.08), 0 24px 50px -28px rgba(20, 48, 36, 0.45);
  background: var(--m-terra);
}

.mappa-svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 56rem) {
  .passeggiata-palco {
    grid-template-columns: minmax(20rem, 0.85fr) 1fr;
    gap: 3rem;
    align-items: center;
  }
}

/* Mappa */
.m-terra { fill: var(--m-terra); }
.m-isolato { fill: var(--m-isolato); }
.m-parco { fill: var(--m-parco); }
.m-albero { fill: var(--m-albero); }
.m-acqua { fill: var(--m-acqua); }
.m-canale { fill: none; stroke: var(--m-acqua); stroke-width: 14; stroke-linecap: round; }
.m-strada-bordo { fill: none; stroke: var(--m-strada-bordo); stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; }
.m-strada { fill: none; stroke: var(--m-strada); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.m-tramonto { fill: url(#sole); opacity: calc(var(--tramonto) * 0.9); mix-blend-mode: soft-light; pointer-events: none; }
.m-recinto { fill: var(--m-recinto); stroke: var(--m-recinto-bordo); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }

.casa-tetto { fill: var(--zampa); }
.casa-muro { fill: var(--m-muro); stroke: rgba(20, 48, 36, 0.25); stroke-width: 1.5; }
.casa-finestra { fill: var(--m-finestra); }
.casa-porta { fill: var(--zampa-scura); }

/* Il percorso già fatto: puntini arancioni rivelati dalla maschera */
.traccia { fill: none; stroke: var(--zampa); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 12; }
.traccia-maschera { fill: none; stroke: #FFFFFF; stroke-width: 24; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--walk)); }
.percorso { fill: none; stroke: none; }

/* Lampioni: si accendono uno dopo l'altro mentre il cane passa */
.lampione-alone { fill: url(#alone); opacity: 0; }
.lampione-luce { fill: color-mix(in oklab, #C9D3C3, #FDE68A calc(var(--night) * 100%)); stroke: rgba(20, 48, 36, 0.3); stroke-width: 1.5; }
.l1 .lampione-alone { opacity: clamp(0, calc((var(--walk) - 0.1) * 12), 1); }
.l2 .lampione-alone { opacity: clamp(0, calc((var(--walk) - 0.28) * 12), 1); }
.l3 .lampione-alone { opacity: clamp(0, calc((var(--walk) - 0.46) * 12), 1); }
.l4 .lampione-alone { opacity: clamp(0, calc((var(--walk) - 0.66) * 12), 1); }
.l5 .lampione-alone { opacity: clamp(0, calc((var(--walk) - 0.8) * 12), 1); }
.l6 .lampione-alone { opacity: clamp(0, calc((var(--walk) - 0.92) * 12), 1); }

/* I cani */
.cane-luna { color: #8E9AA6; }
.cane-otto { color: #B8743F; }
.cane-maya { color: #E9C46A; }
.cane-biscotto { color: #F3D9AE; }
.camminatore-ombra { fill: var(--bosco); opacity: 0.25; }

.nome rect { fill: var(--nome-fondo); stroke: rgba(20, 48, 36, 0.14); stroke-width: 1; }
.nome text { fill: var(--nome-testo); font: 600 12.5px var(--corpo); text-anchor: middle; }
.nome { transition: opacity 300ms ease-out; }

/* Il segnaposto dell'area cani e il conteggio */
.parco-segno { color: var(--bosco); }
.passeggiata.is-sera .parco-segno { color: var(--prato); }

@media (prefers-color-scheme: dark) {
  .parco-segno { color: var(--prato); }
}

.parco-pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.conteggio rect { fill: var(--pallina); }
.conteggio-pallino { fill: var(--pallino); }
.conteggio text { fill: var(--bosco); font: 700 13.5px var(--corpo); }
.conta-3,
.conta-4 { transition: opacity 250ms ease-out; }
.conta-4 { opacity: 0; }

.coriandolo { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.c-zampa { fill: var(--zampa); }
.c-pallina { fill: var(--pallina); }
.c-erba { fill: var(--erba); }
.c-luna { fill: var(--luna); }

/* --- Scena attiva (site.js) --- */

html.scena-attiva .passeggiata {
  height: 480vh;
  height: 480svh;
  padding: 0;
}

html.scena-attiva .passeggiata-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem;
}

html.scena-attiva .passeggiata-testi {
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 20px;
}

html.scena-attiva .passeggiata h2 {
  font-size: clamp(1.25rem, 4.6vw, 2.6rem);
}

/* Una tappa alla volta, nello stesso spazio */
html.scena-attiva .tappe {
  margin-top: 0.75rem;
  display: grid;
}

html.scena-attiva .tappa {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 350ms ease-out, transform 450ms var(--ease-uscita);
  visibility: hidden;
}

.passeggiata[data-tappa-attiva="1"] .tappa[data-tappa="1"],
.passeggiata[data-tappa-attiva="2"] .tappa[data-tappa="2"],
.passeggiata[data-tappa-attiva="3"] .tappa[data-tappa="3"],
.passeggiata[data-tappa-attiva="4"] .tappa[data-tappa="4"] {
  opacity: 1;
  transform: none;
  visibility: visible;
}

html.scena-attiva .tappe-punti {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.tappe-punti span {
  width: 1.6rem;
  height: 0.3rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.2;
  transition: opacity 300ms ease-out, background-color 300ms ease-out;
}

.passeggiata[data-tappa-attiva="1"] .tappe-punti span:nth-child(-n + 1),
.passeggiata[data-tappa-attiva="2"] .tappe-punti span:nth-child(-n + 2),
.passeggiata[data-tappa-attiva="3"] .tappe-punti span:nth-child(-n + 3),
.passeggiata[data-tappa-attiva="4"] .tappe-punti span:nth-child(-n + 4) {
  background: var(--zampa);
  opacity: 1;
}

html.scena-attiva .mappa {
  aspect-ratio: auto;
  height: 100%;
  max-height: none;
}

/* I nomi dei cani compaiono quando si guarda chi c'è; Biscotto quando arriva */
html.scena-attiva .cani-presenti .nome,
html.scena-attiva .nome-biscotto {
  opacity: 0;
}

html.scena-attiva .passeggiata[data-tappa-attiva="2"] .cani-presenti .nome,
html.scena-attiva .passeggiata[data-tappa-attiva="4"] .cani-presenti .nome,
html.scena-attiva .passeggiata.arrivato .nome-biscotto {
  opacity: 1;
}

.passeggiata.arrivato .conta-3 { opacity: 0; }
.passeggiata.arrivato .conta-4 { opacity: 1; }

@media (min-width: 56rem) {
  html.scena-attiva .passeggiata-palco {
    grid-template-rows: none;
    grid-template-columns: minmax(22rem, 0.8fr) 1fr;
    gap: 2.5rem;
    padding: 4vh max(1.25rem, calc((100% - 72rem) / 2));
  }

  html.scena-attiva .passeggiata-testi {
    padding: 2rem 2rem 1.75rem;
    border-radius: 24px;
  }

  html.scena-attiva .tappa h3 {
    font-size: 1.6rem;
  }

  html.scena-attiva .mappa {
    height: min(88svh, 52rem);
    align-self: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .conteggio-pallino {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: battito 2s ease-in-out infinite;
  }

  /* Check-in: il segnaposto salta e partono i coriandoli (ogni volta che si arriva) */
  .passeggiata.arrivato .parco-pin { animation: salto-check-in 900ms; }
  .passeggiata.arrivato .coriandolo { animation: coriandolo 900ms var(--ease-uscita) both; }
  .passeggiata.arrivato .coriandolo.lungo { animation-name: coriandolo-lungo; animation-delay: 60ms; }
}

@keyframes battito {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@keyframes salto-check-in {
  0% { transform: none; }
  20% { transform: scale(1.18, 0.78); }
  50% { transform: translateY(-30px) scale(0.92, 1.1); }
  75% { transform: translateY(0) scale(1.1, 0.9); }
  100% { transform: none; }
}

@keyframes coriandolo {
  0% { opacity: 1; transform: translateY(0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-58px) rotate(160deg) scale(1); }
}

@keyframes coriandolo-lungo {
  0% { opacity: 1; transform: translateY(0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-86px) rotate(-200deg) scale(1); }
}

/* ===================== I comuni ===================== */

.comuni {
  padding: 5rem 0 4.5rem;
  overflow: hidden;
}

.comuni-testo {
  padding: 0 max(1.25rem, calc((100% - 72rem) / 2));
}

.comuni h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.comuni-testo p {
  margin-top: 1rem;
  max-width: 36rem;
  color: var(--tenue);
}

.comuni-righe {
  margin-top: 3rem;
  display: grid;
  gap: 0.6rem;
}

.comuni-riga {
  --band: 0;
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: max-content;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  will-change: transform;
}

.comuni-riga svg {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  color: var(--prato);
}

.comuni-riga-1 {
  color: var(--luna);
  transform: translateX(calc(var(--band) * -38%));
}

.comuni-riga-2 {
  color: var(--lampione);
  transform: translateX(calc(-38% + var(--band) * 38%));
}

/* ===================== Le altre funzioni ===================== */

.funzioni {
  padding: 3rem max(1.25rem, calc((100% - 72rem) / 2)) 5rem;
}

.funzioni h2 {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.guinzaglio {
  position: relative;
  margin-top: 2rem;
}

.guinzaglio-filo {
  display: none;
}

.medagliette {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem 1.25rem;
}

/* Una medaglietta da collare: angolo in basso a sinistra più stretto, foro e anellino in alto */
.medaglietta {
  --inclina: 0deg;
  position: relative;
  margin-top: 2.6rem;
  padding: 2.4rem 1.4rem 1.5rem;
  border-radius: 22px 22px 22px 8px;
  color: var(--bosco);
  transform: rotate(var(--inclina));
  transform-origin: 50% -1.6rem;
  cursor: pointer;
}

.medaglietta::before {
  content: '';
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.45rem;
  border-radius: 50%;
  background: var(--sfondo);
}

.medaglietta::after {
  content: '';
  position: absolute;
  top: -1.75rem;
  left: 50%;
  width: 1.25rem;
  height: 2.9rem;
  margin-left: -0.625rem;
  border: 3px solid var(--luna-tenue);
  border-radius: 999px;
}

.medaglietta h3 {
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.medaglietta p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.medaglietta-zampa { background: var(--zampa); --inclina: -2deg; }
.medaglietta-pallina { background: var(--pallina); --inclina: 1.5deg; }
.medaglietta-prato { background: var(--prato); --inclina: -1deg; }
.medaglietta-lampione { background: var(--lampione); --inclina: 2.5deg; }

@media (min-width: 36rem) {
  .medagliette {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  .guinzaglio {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
  }

  .guinzaglio-filo {
    display: block;
    position: absolute;
    top: 0;
    left: -2rem;
    width: calc(100% + 4rem);
    height: 3.2rem;
    overflow: visible;
  }

  .guinzaglio-filo path {
    fill: none;
    stroke: var(--zampa);
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .medagliette {
    grid-template-columns: repeat(4, 1fr);
  }

  .medaglietta:nth-child(1),
  .medaglietta:nth-child(4) { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .medaglietta:hover,
  .medaglietta.dondola {
    animation: dondola 1200ms ease-out;
  }
}

@keyframes dondola {
  0% { transform: rotate(var(--inclina)); }
  15% { transform: rotate(11deg); }
  35% { transform: rotate(-8deg); }
  55% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(var(--inclina)); }
}

/* ===================== Lista d'attesa ===================== */

.signup {
  position: relative;
  padding: 4rem 1.25rem 5rem;
  scroll-margin-top: 0;
  /* La luce del lampione: centrata dentro la sezione, si spegne prima dei bordi */
  background:
    radial-gradient(20rem 16rem at 85% 28%, rgba(253, 186, 116, 0.14), transparent 70%),
    var(--sfondo);
  overflow: hidden;
}

.lampione-grande {
  display: none;
}

.signup-form {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  border-radius: 28px;
  background: var(--siepe);
  box-shadow: 0 0 0 1px var(--linea-sera), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.signup-form h2 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.signup-form > p {
  margin-top: 0.75rem;
  color: var(--tenue);
}

.field-label {
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.field {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--bordo-campo); /* almeno 3:1 sul fondo del riquadro (WCAG 1.4.11) */
  border-radius: 16px;
  background: var(--sfondo);
  color: var(--testo);
  font: inherit;
}

.field:focus-visible {
  border-color: var(--testo);
  outline-offset: 2px;
}

/* Il margine sopra una <legend> non funziona come su una <label>: lo porta il fieldset */
.choices {
  border: 0;
  margin: 1.5rem 0 0;
  padding: 0;
}

.choices .field-label {
  margin-top: 0;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.6rem 1.15rem 0.6rem 0.85rem;
  border: 1.5px solid var(--bordo-campo);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.choice:has(input:checked) {
  background: var(--zampa);
  border-color: var(--zampa);
  color: var(--bosco);
}

.choice:has(input:focus-visible) {
  outline: 3px solid var(--testo);
  outline-offset: 2px;
}

.choice input,
.consent input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--zampa);
}

.choice input:checked {
  accent-color: var(--bosco);
}

.hint {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  color: var(--tenue);
}

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.consent input {
  flex: none;
  margin-top: 0.15rem;
}

/* Campo anti-bot: fuori dallo schermo, i bot lo compilano, le persone non lo vedono */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup-form .button {
  margin-top: 1.75rem;
  width: 100%;
}

@media (min-width: 36rem) {
  .signup-form {
    padding: 2.5rem 2.25rem;
  }

  .signup-form .button {
    width: auto;
  }
}

@media (min-width: 64rem) {
  .signup {
    padding: 6rem max(1.25rem, calc((100% - 72rem) / 2)) 7rem;
    background:
      radial-gradient(34rem 28rem at right calc(max(2rem, (100% - 72rem) / 2) + 1rem) bottom 22.5rem, rgba(253, 186, 116, 0.2), transparent 70%),
      var(--sfondo);
  }

  .signup-form {
    margin: 0;
  }

  .lampione-grande {
    display: block;
    position: absolute;
    right: max(2rem, calc((100% - 72rem) / 2));
    bottom: 0;
    width: 7.5rem;
    height: auto;
  }

  .lg-palo { fill: none; stroke: var(--linea-sera); stroke-width: 8; stroke-linecap: round; }
  .lg-testa { fill: var(--siepe-alta); }
  .lg-luce { fill: #FDE68A; }
}

/* ===================== Piè di pagina ===================== */

.footer {
  padding: 3rem max(1.25rem, calc((100% - 72rem) / 2)) 3.5rem;
  border-top: 1px solid var(--linea-sera);
  font-size: 0.9375rem;
  color: var(--tenue);
}

.footer p {
  margin-top: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ===================== Pagina 404 ===================== */

.notfound {
  max-width: 36rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

.notfound-segno {
  width: 5.5rem;
  height: 5.5rem;
  color: var(--orecchie);
  transform: rotate(-14deg);
}

.notfound h1 {
  margin-top: 1.5rem;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.notfound p {
  margin-top: 1rem;
  color: var(--tenue);
}

.notfound .button {
  margin-top: 2rem;
}

body.pagina-404 {
  background: var(--sfondo-apertura);
}