/*
 * Home TaleTrip — capitoli di colore.
 * Ogni capitolo della vita di un viaggio prende uno dei colori di copertina
 * che l'app da' ai viaggi (DESIGN.md: trip-teal, trip-blue, trip-coral,
 * trip-forest): prima blu, durante corallo, dopo bosco. Una famiglia, cinque
 * misure, nessun bordo, nessuna ombra a riposo, nessun gradiente.
 */
:root {
  /* Fondo pietra fredda, non crema: il calore lo portano i capitoli. */
  --stone: #eef0ee;
  --stone-2: #e2e7e5;
  --ink: #152426;
  --ink-2: #0b1314;
  --teal: #166b6d;
  --teal-2: #1d7f81;
  --blue: #2c5591;
  --coral: #d75a31;
  --forest: #22543d;
  --paper: #fcfdfc;

  --s-sm: 15px;
  --s-body: 18px;
  --s-mid: clamp(22px, 2.1vw, 30px);
  --s-big: clamp(40px, 6vw, 96px);
  --s-hero: clamp(30px, 6.4vw, 108px);

  --m: clamp(16px, 3vw, 44px);
  --gap: clamp(96px, 12vw, 200px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 999px;
  --scr-r: clamp(22px, 2.6vw, 38px);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 500 var(--s-body) / 1.5 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--m);
  top: -60px;
  z-index: 50;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* ---- Barra ------------------------------------------------------------ */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 10px var(--m);
  background: var(--stone);
  color: var(--ink);
}
.bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: var(--s-mid);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.bar-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.bar-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.bar-nav a,
.bar-lang button {
  font-size: var(--s-sm);
  text-decoration: none;
}
.bar-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.bar-end {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bar-lang {
  display: flex;
}
.bar-lang button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--s-sm);
  cursor: pointer;
  opacity: 0.6;
}
.bar-lang button[aria-pressed='true'] {
  opacity: 1;
  font-weight: 800;
}
.bar-cta,
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: var(--s-sm);
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.bar-cta:hover,
.btn:hover {
  background: var(--teal);
}
.bar-cta:active,
.btn:active {
  transform: scale(0.97);
}
.btn-paper {
  background: var(--paper);
  color: var(--ink);
}
.btn-paper:hover {
  background: #fff;
}
.link {
  font-weight: 700;
  font-size: var(--s-sm);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.link:hover {
  text-decoration-color: var(--coral);
}

/* ---- Capitoli --------------------------------------------------------- */
.ch {
  position: relative;
  padding: var(--gap) var(--m);
}
.big {
  font-size: var(--s-big);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.lede {
  max-width: 40ch;
  margin-top: 28px;
  font-size: var(--s-mid);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.lede.wide {
  max-width: 52ch;
}
.scr {
  width: 100%;
  height: auto;
  border-radius: var(--scr-r);
  background: var(--ink);
}

/* ---- 1. Hero ---------------------------------------------------------- */
.ch-hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: 0;
  min-height: calc(100svh - 64px);
  overflow: clip;
}
.hero-copy {
  grid-column: 1 / span 8;
  grid-row: 1;
  position: relative;
  z-index: 2;
}
.hero-title {
  font-size: var(--s-hero);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-title .ln {
  display: block;
  white-space: nowrap;
}
.hero-lede {
  max-width: 38ch;
  margin-top: 26px;
  font-size: var(--s-body);
  line-height: 1.5;
}
.hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 30px;
}
.hero-act .btn {
  background: var(--coral);
  color: var(--ink-2);
  min-height: 52px;
  padding: 0 28px;
  font-size: var(--s-body);
}
.hero-act .btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.hero-note {
  margin-top: 18px;
  font-size: var(--s-sm);
}
.hero-stage {
  grid-column: 6 / -1;
  grid-row: 1 / span 2;
  align-self: end;
  position: relative;
  margin-right: calc(var(--m) * -1);
  margin-top: 26vh;
  min-height: 74vh;
  background: var(--teal);
  /* La tacca in alto a sinistra e' la piega della T dell'icona. */
  clip-path: polygon(0 18%, 14% 18%, 14% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--paper);
  stroke-width: 26;
  stroke-linecap: round;
  opacity: 0.16;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
}
.screens {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3.4vw, 56px) 0;
  height: 100%;
}
.screens .scr {
  width: min(330px, 42%);
  transform: translate3d(0, var(--py, 0), 0);
  will-change: transform;
}
.screens .scr-b {
  margin-top: 64px;
}

/* ---- 2. Tre tempi ----------------------------------------------------- */
.ch-ink {
  background: var(--ink);
  color: var(--paper);
}
.stages {
  display: flex;
  gap: 6px;
  margin-top: 64px;
}
.stg a {
  display: block;
  text-decoration: none;
}
.stg-before {
  flex: 3;
}
.stg-during {
  flex: 2.2;
}
.stg-after {
  flex: 4.8;
}
.stg-bar {
  display: block;
  height: 22vh;
  min-height: 150px;
  padding: 20px;
  border-radius: 6px;
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.stg-before .stg-bar {
  background: var(--blue);
}
.stg-during .stg-bar {
  background: var(--coral);
  color: var(--ink-2);
}
.stg-after .stg-bar {
  background: var(--forest);
}
.stg a:hover .stg-bar {
  transform: translateY(-6px);
}
.stg-time {
  font-size: var(--s-mid);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stg-say {
  display: block;
  max-width: 24ch;
  margin-top: 18px;
  font-size: var(--s-body);
}

/* ---- 3. Prima --------------------------------------------------------- */
.ch-blue {
  background: var(--blue);
  color: var(--paper);
}
.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}
.route-list {
  position: relative;
  margin-top: 56px;
  padding-left: 40px;
}
/* Il filo dell'itinerario: si disegna dall'alto mentre le tappe arrivano. */
.route-list::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 2px;
  background: var(--paper);
  transform-origin: top;
}
.route-list li {
  position: relative;
  padding-bottom: 34px;
}
.route-list li::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  box-sizing: border-box;
  border: 5px solid var(--paper);
}
.route-list strong {
  display: block;
  font-size: var(--s-mid);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.route-list span {
  display: block;
  margin-top: 4px;
}
.split-media {
  max-width: 360px;
  justify-self: end;
}

/* ---- 4. Durante ------------------------------------------------------- */
.ch-coral {
  background: var(--coral);
  color: var(--ink-2);
  padding: 0;
}
.io {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.io-in {
  background: var(--ink-2);
  color: var(--paper);
  padding: var(--gap) var(--m);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.io-clip {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}
.io-note {
  font-size: var(--s-mid);
  line-height: 1.35;
  max-width: 26ch;
}
.io-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.io-chips li {
  padding: 8px 16px;
  border-radius: var(--r);
  background: var(--ink);
  font-size: var(--s-sm);
  font-weight: 700;
}
.io-out {
  padding: var(--gap) var(--m);
  display: grid;
  grid-template-columns: 1fr minmax(160px, 260px);
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  align-content: start;
}
.io-out .big,
.io-out .lede,
.facts {
  grid-column: 1 / -1;
}
.facts {
  display: grid;
  gap: 18px;
  margin-top: 40px;
  grid-column: 1;
}
.facts dt {
  font-weight: 800;
  font-size: var(--s-mid);
  letter-spacing: -0.02em;
}
.io-shot {
  grid-column: 2;
  grid-row: 3;
  margin-top: 40px;
}

/* ---- 5. Dopo ---------------------------------------------------------- */
.ch-forest {
  background: var(--forest);
  color: var(--paper);
}
.trail {
  position: relative;
  margin-top: 72px;
}
.trail-line {
  width: 100%;
  height: clamp(60px, 9vw, 120px);
  fill: none;
  stroke: var(--paper);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
}
.trail-stops {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.trail-stops li {
  display: grid;
}
.trail-stops li:nth-child(2) {
  text-align: center;
}
.trail-stops li:last-child {
  text-align: right;
}
.trail-stops b {
  font-size: var(--s-mid);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.trail-sum {
  margin-top: 24px;
  font-size: var(--s-sm);
  font-variant-numeric: tabular-nums;
}
.after-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  margin-top: clamp(56px, 7vw, 112px);
  align-items: end;
}
.after-shot:nth-child(1) {
  grid-column: 1 / span 4;
}
.after-shot:nth-child(2) {
  grid-column: 6 / span 3;
  margin-bottom: 80px;
}
.after-shot figcaption {
  margin-top: 14px;
  font-size: var(--s-sm);
}
.after-links {
  grid-column: 10 / -1;
  display: grid;
  justify-items: start;
  gap: 18px;
  align-self: end;
}

/* ---- 6. Condividere --------------------------------------------------- */
.ch-paper {
  background: var(--stone-2);
}
.share {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  margin-top: 56px;
}
.share-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-pick button {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: var(--s-sm);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.share-pick button:hover {
  background: #fff;
}
.share-pick button:active {
  transform: scale(0.97);
}
.share-pick button[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
}
.share-panels {
  grid-column: 1;
  margin-top: 36px;
}
.share-panel + .share-panel {
  margin-top: 28px;
}
.share-panel p {
  max-width: 36ch;
}
.share-who {
  font-size: var(--s-mid);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.share-shot {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.share-shot img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: filter 0.4s, opacity 0.4s;
}
/* La schermata risponde alla scelta: privato = il link non c'e' ancora. */
.share[data-who='1'] .share-shot img {
  opacity: 0.35;
  filter: grayscale(1);
}

/* ---- 7. Tessere ------------------------------------------------------- */
.ch-tiles {
  background: var(--ink-2);
  padding: 8px;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  text-align: center;
}
.tile b,
.tile h2 {
  font-size: clamp(28px, 4vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.tile span {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  font-size: var(--s-sm);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease);
}
.t-pic:hover img {
  transform: scale(1.04);
}
.t-a {
  background: var(--teal);
  color: var(--paper);
}
.t-b {
  background: var(--stone-2);
  color: var(--ink);
}
.t-c {
  background: var(--coral);
  color: var(--ink-2);
}
.t-d {
  background: var(--blue);
  color: var(--paper);
}
.t-pic {
  background: var(--ink);
}

/* ---- 8. Beta ---------------------------------------------------------- */
.ch-teal {
  background: var(--teal);
  color: var(--paper);
}
.blank {
  font-size: var(--s-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.blank-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
}
.blank input,
.blank button {
  height: 1.08em;
  font: inherit;
  letter-spacing: inherit;
  border: 0;
  border-radius: var(--r);
  padding: 0 0.4em;
}
.blank input {
  width: 8.2em;
  max-width: 100%;
  background: var(--teal-2);
  color: var(--paper);
}
.blank input::placeholder {
  color: var(--paper);
  opacity: 0.7;
}
.blank button {
  background: var(--coral);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.blank button:hover {
  background: var(--paper);
}
.blank button:active {
  transform: scale(0.97);
}
.blank button:disabled {
  opacity: 0.6;
}
.waitlist-status {
  min-height: 1.5em;
  margin-top: 18px;
  font-size: var(--s-body);
  letter-spacing: 0;
  font-weight: 700;
}
.beta-note {
  margin-top: 12px;
  font-size: var(--s-sm);
}

/* ---- 9. Footer -------------------------------------------------------- */
.foot {
  background: var(--ink-2);
  color: var(--paper);
  padding: 0 8px 8px;
}
.foot-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.ft {
  border-radius: 4px;
  padding: 22px;
  background: var(--ink);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.ft-say {
  grid-column: span 5;
}
.ft-claim {
  font-size: var(--s-mid);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.ft-small {
  font-size: 13px;
}
.ft-nav {
  grid-column: span 3;
  justify-content: flex-start;
  gap: 6px;
}
.ft-nav a,
.ft-mail a {
  text-decoration: none;
  padding: 4px 0;
}
.ft-nav a:hover,
.ft-mail a:hover {
  text-decoration: underline;
}
.ft-mail {
  grid-column: span 4;
}
.ft-mail a {
  font-size: var(--s-mid);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ft-name {
  grid-column: span 8;
  min-height: 320px;
  background: var(--stone);
  color: var(--ink);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-size: clamp(56px, 9vw, 150px);
  font-weight: 800;
  letter-spacing: -0.045em;
}
.ft-name img {
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.18em;
}
.ft-go {
  grid-column: span 4;
  min-height: 320px;
  background: var(--coral);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--s-mid);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ft-go svg {
  align-self: flex-end;
  width: 56px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  transition: transform 0.3s var(--ease);
}
.ft-go:hover svg {
  transform: translate(6px, -6px);
}
.ft-credits {
  padding: 18px 14px 10px;
  font-size: var(--s-sm);
}
.ft-credits summary {
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ft-credits p,
.ft-credits ul {
  margin-top: 8px;
}

/* ---- Movimento -------------------------------------------------------- */
/* Tutto quello che si nasconde, si nasconde solo con .anim (messo da home.js
   quando le entrate partono davvero) e mai col movimento ridotto. */
@media (prefers-reduced-motion: no-preference) {
  .anim [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  }
  .anim [data-reveal].in {
    opacity: 1;
    transform: none;
  }
  .anim .route-list li:nth-child(2) { transition-delay: 0.08s; }
  .anim .route-list li:nth-child(3) { transition-delay: 0.16s; }
  .anim .route-list li:nth-child(4) { transition-delay: 0.24s; }
  .anim .route-list::before {
    transform: scaleY(0);
    transition: transform 1.4s var(--ease) 0.1s;
  }
  .anim .route-list.in::before {
    transform: none;
  }

  /* Firma: il palco si apre dal basso come un otturatore e le schermate si
     posano. */
  .anim .hero-stage {
    clip-path: polygon(0 100%, 14% 100%, 14% 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1.1s var(--ease) 0.15s;
  }
  .anim .hero-stage.in {
    clip-path: polygon(0 18%, 14% 18%, 14% 0, 100% 0, 100% 100%, 0 100%);
  }
  .anim .screens {
    transform: scale(1.12);
    transform-origin: 50% 100%;
    transition: transform 1.3s var(--ease) 0.15s;
  }
  .anim .hero-stage.in .screens {
    transform: none;
  }
  .anim .hero-road {
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 2.2s var(--ease) 0.7s;
  }
  .anim .hero-stage.in .hero-road {
    stroke-dashoffset: 0;
  }
  .anim .hero-copy > * {
    animation: rise 0.8s var(--ease) both;
  }
  .anim .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .anim .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .anim .hero-copy > :nth-child(4) { animation-delay: 0.24s; }

  /* Tre tempi: i segmenti crescono nell'ordine e nella proporzione vera. */
  .anim .stages .stg-bar {
    transform: scaleX(0.04);
    transition: transform 0.9s var(--ease);
  }
  .anim .stages.in .stg-bar {
    transform: none;
  }
  .anim .stages.in .stg-during .stg-bar { transition-delay: 0.18s; }
  .anim .stages.in .stg-after .stg-bar { transition-delay: 0.36s; }
  .anim .stages .stg-time {
    opacity: 0;
    transition: opacity 0.4s 0.45s;
  }
  .anim .stages.in .stg-time {
    opacity: 1;
  }
  .anim .stages.in a:hover .stg-bar {
    transform: translateY(-6px);
  }

  /* Durante: i quattro modi di salvare arrivano uno dopo l'altro. */
  .anim .io-chips li {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  }
  .anim .io-chips.in li { opacity: 1; transform: none; }
  .anim .io-chips.in li:nth-child(2) { transition-delay: 0.1s; }
  .anim .io-chips.in li:nth-child(3) { transition-delay: 0.2s; }
  .anim .io-chips.in li:nth-child(4) { transition-delay: 0.3s; }

  /* Dopo: il percorso si disegna da Oslo a Sommarøy. */
  .anim .trail-line {
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2s var(--ease) 0.2s;
  }
  .anim .trail.in .trail-line {
    stroke-dashoffset: 0;
  }
  .anim .trail-stops li {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.5s, transform 0.6s var(--ease);
  }
  .anim .trail.in .trail-stops li { opacity: 1; transform: none; }
  .anim .trail.in .trail-stops li:nth-child(1) { transition-delay: 0.2s; }
  .anim .trail.in .trail-stops li:nth-child(2) { transition-delay: 0.6s; }
  .anim .trail.in .trail-stops li:nth-child(3) { transition-delay: 1s; }

  /* Tessere: il foglio si riempie a ondata. */
  .anim .tiles .tile {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.5s, transform 0.7s var(--ease);
  }
  .anim .tiles.in .tile { opacity: 1; transform: none; }
  .anim .tiles.in .tile:nth-child(4n + 2) { transition-delay: 0.06s; }
  .anim .tiles.in .tile:nth-child(4n + 3) { transition-delay: 0.12s; }
  .anim .tiles.in .tile:nth-child(4n) { transition-delay: 0.18s; }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .screens .scr {
    transform: none !important;
  }
}

/* ---- Telefono e tablet ------------------------------------------------ */
@media (max-width: 900px) {
  .bar-nav {
    display: none;
  }
  .bar-end {
    margin-left: auto;
    gap: 6px;
  }
  .bar-cta {
    padding: 0 16px;
  }
  .ch-hero {
    display: block;
    min-height: 0;
  }
  .hero-title {
    font-size: clamp(30px, 8.4vw, 64px);
  }
  .hero-stage {
    margin: 40px calc(var(--m) * -1) 0;
    min-height: 0;
    clip-path: polygon(0 72px, 72px 72px, 72px 0, 100% 0, 100% 100%, 0 100%);
  }
  .anim .hero-stage.in {
    clip-path: polygon(0 72px, 72px 72px, 72px 0, 100% 0, 100% 100%, 0 100%);
  }
  .screens {
    padding: 56px 16px 0;
    gap: 12px;
  }
  .screens .scr {
    width: 46%;
  }
  .screens .scr-b {
    margin-top: 40px;
  }
  .stages {
    flex-direction: column;
  }
  .stg-bar {
    height: auto;
    min-height: 96px;
    transform-origin: top left;
  }
  .stg-before .stg-bar { min-height: 140px; }
  .stg-during .stg-bar { min-height: 104px; }
  .stg-after .stg-bar { min-height: 210px; }
  .stg-say {
    margin: 10px 0 18px;
    max-width: none;
  }
  .split,
  .io,
  .share {
    grid-template-columns: 1fr;
  }
  .split-media {
    justify-self: center;
    max-width: 300px;
    margin-top: 24px;
  }
  .io-out {
    grid-template-columns: 1fr;
  }
  .io-shot {
    grid-column: 1;
    grid-row: auto;
    max-width: 280px;
  }
  .after-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .after-shot:nth-child(1),
  .after-shot:nth-child(2) {
    grid-column: auto;
    margin: 0;
  }
  .after-links {
    grid-column: 1 / -1;
    margin-top: 24px;
  }
  .trail-stops {
    flex-direction: column;
    gap: 14px;
  }
  .trail-stops li:nth-child(n) {
    text-align: left;
  }
  .share-panels,
  .share-shot {
    grid-column: 1;
    grid-row: auto;
  }
  .share-shot {
    margin-top: 32px;
  }
  .tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .tile b,
  .tile h2 {
    font-size: 7.4vw;
  }
  .tile span {
    font-size: 13px;
    bottom: 12px;
  }
  .blank {
    font-size: clamp(28px, 9vw, 56px);
  }
  .blank input {
    width: 100%;
  }
  .foot-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .ft {
    min-height: 160px;
    padding: 20px;
  }
  .ft-say,
  .ft-name,
  .ft-go {
    grid-column: 1 / -1;
  }
  .ft-nav {
    grid-column: span 1;
  }
  .ft-mail {
    grid-column: 1 / -1;
    min-height: 120px;
  }
  .ft-name,
  .ft-go {
    min-height: 160px;
  }
  .foot .foot-row:last-of-type {
    order: -1;
  }
}
@media (max-width: 420px) {
  .bar {
    gap: 8px;
  }
  .bar-lang button {
    min-width: 38px;
  }
  .bar-cta {
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}
/* Sotto i 370 px la barra tiene marchio e lingua: l'azione e' gia' nella
   hero, subito sotto. */
@media (max-width: 370px) {
  .bar-cta {
    display: none;
  }
}