/* La pagina d'ingresso di woofydog.app.
 *
 * Sta in un mondo solo, scuro: il muro di foto in apertura ha bisogno di un
 * fondo che non gli rubi luce. È il verde-inchiostro del tema scuro
 * dell'app, non un nero qualunque. Le pagine legali invece seguono il tema
 * del telefono: questa è una vetrina, quelle si leggono.
 *
 * Le cose da ricordare sono due, e stanno lontane: il muro di cani con il
 * titolo dentro un buco, in cima, e più giù il tracciato vero di un giro
 * dietro il telefono dei percorsi. Il resto sta zitto. L'unico movimento è
 * l'entrata del muro. */

.scura {
  --fondo: #171c1a;
  --fondo2: #1f2523;
  --panna: #eceeec;
  --panna2: #b3beb8;
  --salvia: #5fb3a5;
  --filo: rgba(236, 239, 236, .14);
  color-scheme: dark;
  background: var(--fondo);
  color: var(--panna2);
}

/* Il giro esce dal bordo di proposito, e va tagliato perché la pagina non
 * scorra di lato. Il taglio sta qui e non sul body: Safari su iPhone non lo
 * rispetta sul body, e la pagina restava larga un centinaio di punti in più,
 * vuoti, sulla destra. */
.scura main { overflow-x: clip; }

.scura h1,
.scura h2,
.scura strong { color: var(--panna); }

.scura a { color: var(--panna); }

.scura a:focus-visible,
.scura button:focus-visible {
  outline: 3px solid var(--salvia);
  outline-offset: 4px;
  border-radius: 6px;
}

.fascia {
  width: min(100% - 40px, 1160px);
  margin-inline: auto;
}

.zampa-ic { flex: none; fill: var(--salvia); }

/* ------------------------------------------------------------- testata */

.casa-testata {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 22px 0;
}

.casa-testata .testata { margin: 0; }
.casa-testata .testata span { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }

/* Il velo sotto la testata: senza, il marchio bianco finisce su una foto
 * chiara e sparisce. Sta solo in cima, non sopra tutto il muro. */
.velo {
  position: absolute;
  inset: 0 0 auto;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 14, 12, .82), rgba(10, 14, 12, 0));
}

/* ---------------------------------------------------------------- muro
 * Otto foto e un buco: il titolo non sta sopra le foto con una velatura
 * davanti, sta dentro uno spazio lasciato libero. Le tessere coprono la
 * griglia per intero, quindi il fondo si vede solo lì. */

.muro {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  height: min(92vh, 880px);
  min-height: 620px;
  padding: 8px;
}

.tessera {
  border-radius: 14px;
  background: var(--fondo2) center / cover no-repeat;
}

/* Le tessere ci sono di loro; l'animazione le fa solo arrivare. Dove non
 * gira, il muro è comunque tutto lì. */
@media (prefers-reduced-motion: no-preference) {
  .tessera { animation: entra .9s cubic-bezier(.2, .75, .3, 1) both; }
  @keyframes entra { from { opacity: 0; transform: scale(.965); } }
}

.t1 { grid-column: 1 / span 3;  grid-row: 1 / span 2; background-image: url("/foto/giocano.jpg"); animation-delay: .05s; }
.t2 { grid-column: 4 / span 3;  grid-row: 1 / span 1; background-image: url("/foto/spiaggia.jpg"); animation-delay: .11s; }
.t3 { grid-column: 7 / span 3;  grid-row: 1 / span 1; background-image: url("/foto/viale.jpg"); animation-delay: .17s; }
.t4 { grid-column: 10 / span 3; grid-row: 1 / span 2; background-image: url("/foto/lucky.jpg"); animation-delay: .23s; }
.t5 { grid-column: 1 / span 3;  grid-row: 3 / span 4; background-image: url("/foto/arcy-neve.jpg"); animation-delay: .29s; }
.t6 { grid-column: 10 / span 3; grid-row: 3 / span 4; background-image: url("/foto/nuvola.jpg"); animation-delay: .35s; }
.t7 { grid-column: 4 / span 3;  grid-row: 5 / span 2; background-image: url("/foto/marciapiede.jpg"); animation-delay: .41s; }
.t8 { grid-column: 7 / span 3;  grid-row: 5 / span 2; background-image: url("/foto/corsa.jpg"); animation-delay: .47s; }

.buco {
  grid-column: 4 / span 6;
  grid-row: 2 / span 3;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: clamp(16px, 3vw, 40px) clamp(8px, 2vw, 28px);
  z-index: 2;
}

.buco h1 {
  margin: 0;
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.buco p {
  max-width: 30em;
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

.in-arrivo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: var(--salvia);
  color: #0f1714;
  font-weight: 700;
  font-size: 15px;
}

.in-arrivo img { width: 26px; height: 26px; border-radius: 7px; }

/* Il badge di App Store accanto alla pastiglia di Android: vanno a capo
   insieme su uno schermo stretto. Il badge è quello ufficiale di Apple
   (app-store.svg), che le sue regole chiedono di non ridisegnare. */
.scarica {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
}
.scarica .in-arrivo { margin: 0; }
.app-store img { display: block; height: 48px; width: auto; }
.chiusura .scarica { justify-self: center; justify-content: center; }

/* ------------------------------------------------------------- blocchi */

.blocco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  padding-block: clamp(72px, 11vw, 140px);
}

.blocco.rovescio .parole { order: 2; }

.parole {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  align-content: start;
}

.parole h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.parole p { max-width: 33em; margin: 0; }

.elenco { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }

.elenco li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }

.elenco .zampa-ic { margin-top: 4px; }

/* La cornice: bordo spesso e schermo arrotondato, niente tacca finta — la
 * schermata dentro è quella vera dell'emulatore. */
.telefono {
  justify-self: center;
  position: relative;
  width: min(100%, 318px);
  margin: 0;
  padding: 9px;
  border-radius: 44px;
  background: #080c0a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(236, 239, 236, .08);
}

.telefono img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 20;
  border-radius: 35px;
  background: var(--fondo2);
}

.coppia { display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px); }

.coppia .telefono { width: min(47%, 262px); }

/* ---------------------------------------------------------- il giro
 * Dietro il telefono dei percorsi passa il tracciato vero del giro lungo
 * il Leno, quello della schermata: il telefono ci sta sopra come un
 * segnaposto sulla mappa. */

.scena { position: relative; display: grid; place-items: center; }

.giro {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 150%;
  transform: translate(-57%, -46%) rotate(-10deg);
  overflow: visible;
  pointer-events: none;
}

.giro .alone {
  fill: none;
  stroke: rgba(95, 179, 165, .16);
  stroke-width: 22px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.giro .linea {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.giro .partenza { fill: var(--salvia); }
.giro .partenza-bordo { fill: var(--fondo); }
.giro text { fill: #0f1714; font: 800 30px "Plus Jakarta Sans", sans-serif; }

/* ---------------------------------------------------------- incontri
 * Gli incontri non ripetono il solito «telefono più testo»: quello che li
 * distingue è che si sceglie chi può venire, e si capisce provandolo. */

.incontri { padding-block: clamp(72px, 11vw, 140px); }

.incontri .blocco { padding-block: 0; }

.banco {
  display: grid;
  gap: 22px;
  margin-top: clamp(34px, 5vw, 56px);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--filo);
  border-radius: 28px;
  background: var(--fondo2);
}

.banco-testa { display: grid; gap: 6px; }

.banco-testa strong {
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.esito { margin: 0; color: var(--salvia); font-weight: 700; font-size: 15px; }

.criteri { display: flex; flex-wrap: wrap; gap: 10px; }

.criterio {
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--filo);
  border-radius: 999px;
  background: transparent;
  color: var(--panna);
  font: 700 14.5px "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.criterio:hover { border-color: var(--salvia); }

.criterio[aria-pressed="true"] {
  border-color: var(--salvia);
  background: var(--salvia);
  color: #0f1714;
}

.cani { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.5vw, 26px); }

.cane {
  width: 104px;
  margin: 0;
  text-align: center;
  transition: opacity .3s ease, filter .3s ease;
}

/* Chi non rientra resta lì, spento: sparendo non si capirebbe che è la
 * scelta a lasciarlo fuori. */
.cane.fuori { opacity: .28; filter: grayscale(1); }

.cane img {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 9px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--salvia);
  transition: box-shadow .3s ease;
}

.cane.fuori img { box-shadow: 0 0 0 2px var(--filo); }

.cane figcaption { color: var(--panna); font-size: 14px; font-weight: 700; line-height: 1.35; }

.cane figcaption span {
  display: block;
  margin-top: 2px;
  color: var(--panna2);
  font-size: 12.5px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .criterio, .cane, .cane img { transition: none; }
}

/* -------------------------------------------------------------- coda */

.striscia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.striscia div {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: var(--fondo2) center / cover no-repeat;
}

.striscia div:nth-child(1) { background-image: url("/foto/bruno.jpg"); background-position: center 30%; }
.striscia div:nth-child(2) { background-image: url("/foto/zampa.jpg"); }
.striscia div:nth-child(3) { background-image: url("/foto/riva.jpg"); }
.striscia div:nth-child(4) { background-image: url("/foto/sentiero.jpg"); }

.chiusura {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding-block: clamp(64px, 10vw, 120px);
  text-align: center;
}

.chiusura h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.chiusura p { max-width: 36em; margin: 0; font-size: 18px; }

.chiusura .in-arrivo { justify-self: center; }

.casa-piede {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
  padding-block: 26px 40px;
  border-top: 1px solid var(--filo);
  font-size: 14px;
}

.casa-piede nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.casa-piede a { text-decoration: none; }
.casa-piede a:hover { color: var(--salvia); }

/* ---------------------------------------------------------- telefono */

@media (max-width: 880px) {
  .muro {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(9, minmax(92px, auto));
    height: auto;
    min-height: 0;
    padding-top: 80px;
  }
  .t1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .t2 { grid-column: 3 / span 2; grid-row: 1 / span 1; }
  .t3 { grid-column: 3 / span 2; grid-row: 2 / span 1; }
  .t4, .t8 { display: none; }
  .buco { grid-column: 1 / span 4; grid-row: 3 / span 3; padding: 26px 6px; }
  .t5 { grid-column: 1 / span 2; grid-row: 6 / span 4; }
  .t6 { grid-column: 3 / span 2; grid-row: 6 / span 3; }
  .t7 { grid-column: 3 / span 2; grid-row: 9 / span 1; }

  .blocco { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .blocco.rovescio .parole { order: 0; }
  .parole h2 { max-width: 16ch; }

  .giro { width: 180%; transform: translate(-58%, -44%) rotate(-10deg); }

  .striscia { grid-template-columns: repeat(2, 1fr); }
}