/*
 * RISTORANTE DELLA VILLA — Sezione "percorso" scrollytelling (home)
 * Vedi journey.js per la logica GSAP/ScrollTrigger che pilota pallina,
 * tracciato SVG, comparsa testi e parallax immagini.
 */

.journey {
  position: relative;
  /* .hero__inner (sezione precedente) ha z-index:3 ma .hero non isola un
     proprio contesto di stacking (position:relative senza z-index) — senza
     questo z-index qui, quel 3 "sfonda" e si confronta direttamente con i
     contenuti interni di .journey (svg/punti/immagini, z-index 0-4),
     potendo finire sopra a quelli piu' bassi. Con lo z-index qui, .journey
     isola i suoi contenuti in un unico blocco che sta sempre sopra
     all'hero, qualunque z-index abbiano le cose dentro l'uno o l'altro. */
  z-index: 5;
  background: var(--color-bg);
  /* Ingrandimento progressivo delle card "stile Instagram": 1x fino a
     1500px, sale linearmente e arriva a 1.5x a 2100px, resta 1.5x oltre.
     Un solo numero (--ig-scale) moltiplica tutte le dimensioni della card
     qui sotto, cosi' restano in proporzione durante tutta la transizione
     invece di scattare di colpo a un breakpoint. */
  --ig-scale: clamp(1, calc(1 + 0.5 * (100vw - 1500px) / 600px), 1.5);
}

.journey__pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfaf8 0%, #f7efe9 100%);
}

/* Sfondo "a scena" di un singolo punto (solo per i punti con 'bg' impostato
   in home.php, es. il punto "Cucina" con foto o "Parcheggio" con marrone
   pieno): dietro al tracciato/testo (niente z-index qui = resta sotto
   .journey__path-svg che e' z-index 1), ma sopra il gradiente di sfondo di
   default di .journey__pin. top/height/transform sono impostati da
   journey.js in base al proprio data-point-index, in modo che compaia
   esattamente durante lo scroll del suo punto e da nessun'altra parte. */
.journey__bg {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  will-change: transform;
}
.journey__bg--image {
  background-size: cover;
  background-position: center;
}
.journey__bg--solid {
  background: var(--color-brown);
}
/* Scurisce un po' la foto (marrone del footer, spostato leggermente verso
   il nero e un filo piu' opaco di prima) cosi' testo e tracciato chiari
   sopra restano leggibili — niente altro effetto. */
.journey__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 25, 20, 0.62);
}

.journey__path-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

/* Tubo: di base a tinta unita (colore del footer, impostato in journey.js),
   niente alone sfocato, solo un'ombra leggerissima verso sinistra. Nei
   punti con sfondo scuro (vedi .journey__bg sopra) il tracciato passa al
   colore chiaro "vecchio sfondo" tramite un gradiente verticale vero
   costruito in journey.js (non e' piu' un colore fisso su tutta la
   lunghezza) — cosi' resta leggibile sia sullo sfondo chiaro di default
   che su quelli scuri. */
.journey__path-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey__tube-main {
  filter: drop-shadow(-0.125rem 0 0.25rem rgba(26, 21, 18, 0.18));
}

.journey__ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6e8 0%, #f3b563 30%, #c96a3e 64%, #7a2e20 100%);
  box-shadow: 0 0.75rem 2rem rgba(26, 21, 18, 0.3), inset 0 -0.5rem 1rem rgba(26, 21, 18, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  will-change: transform;
}

.journey__ball-icon {
  font-size: 1.9rem;
  color: var(--color-accent-dark);
  line-height: 1;
  filter: drop-shadow(0 0.0625rem 0.0625rem rgba(255, 255, 255, 0.5));
}

/* I contenuti non appaiono/scompaiono: sono sempre presenti, ancorati a un
   punto fisso lungo il tracciato (top impostato via JS in journey.js) — li
   raggiungi semplicemente scrollando, come un normale elemento di pagina.
   Solo la finestra del pin (overflow:hidden) li nasconde quando sono fuori
   dai 100vh visibili in quel momento. */
.journey__point {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.journey__point-text {
  position: absolute;
  max-width: min(26rem, 38vw);
  z-index: 2;
  will-change: transform;
}

.journey__point-text h3 {
  font-size: 1.6rem;
  margin-bottom: var(--space-3);
}

.journey__point-text .journey__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-accent);
  text-decoration: none;
}

/* top e transform (centraggio + scorrimento) sono impostati in journey.js:
   qui restano solo il lato (left/right/text-align) e la larghezza. Sempre a
   sinistra vicino al tubo, per ogni punto (l/r/c) — non piu' legato a dove
   si fermava la pallina sul vecchio tracciato a zig-zag. */
.journey__point-text { left: 21%; right: auto; text-align: left; }

/* Punti con sfondo scuro (data-invert="1" in home.php, vedi 'bg' su
   $journey_points): testo nel colore "vecchio sfondo" invece del testo
   scuro di default, altrimenti sparirebbe sul marrone/sulla foto scurita.
   Stesso colore usato per il tracciato in quel tratto, vedi journey.js.
   Il titolo (h3) va forzato a parte: base.css ha "h1,h2,h3{color:...}" che
   punta dritto all'elemento e vince sempre sull'eredita' dal genitore qui
   sopra, altrimenti il titolo restava marrone anche sullo sfondo scuro. */
.journey__point[data-invert="1"] .journey__point-text { color: #fdfaf8; }
.journey__point[data-invert="1"] .journey__point-text h3 { color: #fdfaf8; }

/* Punto "Cucina tipica": il blocco di testo e' una card stile Instagram
   (vedi .journey__img--text/journey_render_text_post() in home.php) invece
   del solito testo semplice — niente vincolo di larghezza qui (ce l'ha gia'
   la card dentro), e sopra alle immagini a fianco (z-index piu' alto),
   mentre normalmente vincono loro per ordine nel DOM. */
.journey__point-text--card { max-width: none; z-index: 4; isolation: isolate; }
/* Testo scuro normale dentro la card anche nei punti a sfondo scuro: e'
   sempre su un fondo bianco (la card), il colore chiaro "vecchio sfondo"
   qui sopra sparirebbe. */
.journey__point[data-invert="1"] .journey__point-text--card,
.journey__point[data-invert="1"] .journey__point-text--card h3 {
  color: var(--color-brown);
}

/* Riga unica: le immagini stanno fianco a fianco, centrate sulla stessa
   linea orizzontale del testo (stesso punto di ancoraggio, vedi journey.js).
   Niente "gap": lo spazio tra le due card lo decide il margine negativo
   qui sotto (le vogliamo sovrapposte, non solo vicine). */
.journey__point-imgs {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 2;
}

/* Sempre a destra (testo ormai sempre a sinistra, vedi sopra). Nei punti
   "c" i due gruppi restano due card separate: la "b" sta appena a sinistra
   della "a", con la stessa sovrapposizione (4.75rem) usata tra due
   immagini dello stesso gruppo qui sotto. */
.journey__point-imgs--a { left: auto; right: 5%; }
.journey__point[data-pos="c"] .journey__point-imgs--b { left: auto; right: calc(5% + var(--ig-scale) * 14.25rem); }

/* Sovrapposizione tra le due card di uno stesso punto (~25% della loro
   larghezza, 19rem → -4.75rem): quella dopo scorre sopra la precedente.
   In "wrap" mobile (una sotto l'altra) niente margine negativo. Scala con
   --ig-scale insieme alla card (vedi sotto), cosi' resta ~25% anche
   ingrandita. */
.journey__img + .journey__img {
  margin-left: calc(var(--ig-scale) * -4.75rem);
  position: relative;
  z-index: 1;
}

/* Punto "intro" (Ristorante della Villa, vedi 'intro' in home.php): titolo
   centrato invece che a sinistra. Le 4 card d'angolo (l'animazione da fuori
   schermo, vedi .journey__intro-corner* qui sotto) sono disattivate per
   ora (vedi home.php, "&& false") — al loro posto un piccolo post unico,
   .journey__intro-mini piu' in basso. */
.journey__point--intro .journey__point-text {
  left: 50%;
  right: auto;
  text-align: left;
  max-width: 30rem;
}

/* "Benvenuti" / "al" / "Ristorante della Villa": tre misure legate a quella
   del titolo (era 1.6rem, la stessa var(--space-...) di ogni altro punto —
   vedi ".journey__point-text h3" piu' in alto in questo file), non valori
   a caso: 2x, 0.75x e 2.5x di quell'1.6rem originale. Stesso font/peso/
   colore del titolo (var(--font-heading), 700, marrone — vedi h1,h2,h3 in
   base.css), solo dimensione diversa: sono paragrafi, non altri titoli,
   per non aggiungere altri <h1>/<h2> alla pagina. */
.journey__intro-eyebrow-line { margin: 0; }
.journey__intro-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brown);
  line-height: 1.1;
}
.journey__intro-eyebrow--top { font-size: 3.2rem; } /* 2 × 1.6rem */
.journey__intro-eyebrow--mid { font-size: 1.2rem; margin-left: var(--space-2); } /* 0.75 × 1.6rem, sulla stessa riga di "Benvenuti" */
.journey__point--intro .journey__point-text h3 { font-size: 4rem; } /* 2.5 × 1.6rem */

/* Testo del punto intro: appare lettera per lettera scrollando (vedi
   INTRO_REVEAL_* in journey.js) — parte invisibile, ogni <span> di lettera
   generato via JS diventa visibile in sequenza. */
/* Usata sia dal testo (.journey__intro-reveal) che dal titolo (Benvenuti/
   al/Ristorante della Villa, spezzati in journey.js): parte sempre invisibile,
   GSAP la porta a opacita' 1 lettera per lettera. */
.journey__reveal-w { display: inline-block; opacity: 0; transform-origin: 0 100%; }
.journey--static .journey__reveal-w { opacity: 1; }

/* Piccolo post unico sotto al testo, al posto delle 4 card d'angolo — la
   stessa card "stile Instagram" delle altre, ma molto ridotta (0.3x, vedi
   .journey__intro-card poco sopra per lo stesso procedimento a 0.75x):
   niente JS/posizionamento assoluto qui, e' un figlio normale del blocco di
   testo e scorre con lui, centrato. */
.journey__intro-mini {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}
.journey__intro-mini .journey__img {
  width: 5.7rem;
  border-radius: 0.225rem;
}
.journey__intro-mini .journey__img img { height: 4.275rem; }
.journey__intro-mini .journey__img-head {
  gap: 0.09rem;
  padding: 0.12rem 0.135rem 0.075rem;
}
.journey__intro-mini .journey__img-logo { height: 0.285rem; }
.journey__intro-mini .journey__img-verified { font-size: 0.195rem; }
.journey__intro-mini .journey__img-foot {
  gap: 0.15rem;
  padding: 0.105rem 0.135rem;
  font-size: 0.24rem;
}

/* Ancora orizzontale di arrivo: le due di sinistra (tl/bl) si fermano appena
   fuori dal titolo centrato (che sta a 50%) sul lato sinistro, le due di
   destra (tr/br) sul lato destro — stesso 56% usato altrove per lasciare
   un margine rispetto al centro. L'ancora verticale (sopra/sotto il
   titolo) e' impostata in journey.js (INTRO_STOP_Y_REM). */
.journey__intro-corner--tl,
.journey__intro-corner--bl { left: auto; right: 56%; }
.journey__intro-corner--tr,
.journey__intro-corner--br { left: 56%; right: auto; }

.journey__intro-card {
  position: relative;
  z-index: 0;
}
/* 3/4 della misura della card "stile Instagram" normale (che e' width:19rem,
   vedi .journey__img piu' in basso): stessi identici valori ridotti per
   ogni pezzo della cornice, non solo la larghezza — altrimenti restano le
   proporzioni interne (logo, padding, testo del piede) della card grande
   dentro una foto piccola. Scala comunque con --ig-scale come tutte le
   altre, solo a 3/4 del moltiplicatore. */
.journey__intro-card .journey__img {
  width: calc(var(--ig-scale) * 14.25rem);
  border-radius: calc(var(--ig-scale) * 0.5625rem);
}
.journey__intro-card .journey__img img {
  height: calc(var(--ig-scale) * 10.6875rem);
}
.journey__intro-card .journey__img-head {
  gap: calc(var(--ig-scale) * 0.225rem);
  padding: calc(var(--ig-scale) * 0.3rem) calc(var(--ig-scale) * 0.3375rem) calc(var(--ig-scale) * 0.1875rem);
}
.journey__intro-card .journey__img-logo { height: calc(var(--ig-scale) * 0.7125rem); }
.journey__intro-card .journey__img-verified { font-size: calc(var(--ig-scale) * 0.4875rem); }
.journey__intro-card .journey__img-foot {
  gap: calc(var(--ig-scale) * 0.375rem);
  padding: calc(var(--ig-scale) * 0.2625rem) calc(var(--ig-scale) * 0.3375rem);
  font-size: calc(var(--ig-scale) * 0.6rem);
}

/* Inclinate verso il centro, una per angolo (opposti con lo stesso verso,
   a formare una specie di "girandola" intorno al titolo). */
.journey__intro-corner--tl .journey__intro-card { transform: rotate(-25deg); }
.journey__intro-corner--tr .journey__intro-card { transform: rotate(25deg); }
.journey__intro-corner--bl .journey__intro-card { transform: rotate(25deg); }
.journey__intro-corner--br .journey__intro-card { transform: rotate(-25deg); }

/* Card "stile Instagram": cornice bianca, header (logo + spunta),
   piede (mi piace/commento/condividi/salva) — vedi journey_render_ig_card()
   in home.php per il markup. Sopra i 1500px la card si ingrandisce (vedi
   --ig-scale su .journey), fino a 1.5x a 2100px: ogni dimensione qui sotto
   e' moltiplicata per lo stesso numero, cosi' le proporzioni interne
   (padding, logo, testo) restano identiche, solo piu' grandi — non e' un
   ridimensionamento della sola foto. Sotto i 1500px --ig-scale vale
   esattamente 1, quindi qui sotto sono le dimensioni "originali" invariate
   (vedi anche i breakpoint sotto, dove vengono sovrascritte del tutto per
   schermi piu' stretti). max-width e' solo una rete di sicurezza sugli
   schermi piu' stretti in assoluto, non un ridimensionamento voluto. */
.journey__img {
  width: calc(var(--ig-scale) * 19rem);
  max-width: 92vw;
  background: var(--color-white);
  border-radius: calc(var(--ig-scale) * 0.75rem);
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(26, 21, 18, 0.22);
}
.journey__img-head {
  display: flex;
  align-items: center;
  gap: calc(var(--ig-scale) * 0.3rem);
  padding: calc(var(--ig-scale) * 0.4rem) calc(var(--ig-scale) * 0.45rem) calc(var(--ig-scale) * 0.25rem);
}
.journey__img-logo {
  /* Unico elemento che NON si riduce col resto della cornice */
  height: calc(var(--ig-scale) * 0.95rem);
  color: var(--color-brown);
  display: inline-flex;
  align-items: center;
}
.journey__img-logo svg { height: 100%; width: auto; display: block; }
.journey__img-verified {
  color: #3897f0;
  font-size: calc(var(--ig-scale) * 0.65rem);
}
.journey__img img {
  display: block;
  width: 100%;
  height: calc(var(--ig-scale) * 14.25rem);
  object-fit: cover;
}
.journey__img-foot {
  display: flex;
  align-items: center;
  gap: calc(var(--ig-scale) * 0.5rem);
  padding: calc(var(--ig-scale) * 0.35rem) calc(var(--ig-scale) * 0.45rem);
  font-size: calc(var(--ig-scale) * 0.8rem);
  color: var(--color-brown);
}
/* Di default vuoto (contorno, colore neutro come gli altri icone del
   piede) — diventa rosso pieno solo con .is-liked, aggiunta da journey.js
   (da sola dopo un attimo su tutte le card, a mano su quella "solo testo"
   di Cucina tipica). */
.journey__img-like.is-liked { color: #ed4956; }
.journey__img-save { margin-left: auto; }

/* "Pop" del mi piace stile Instagram: un piccolo balzo con leggero
   overshoot, ripetibile ad ogni .is-liked aggiunta (journey.js toglie e
   rimette la classe per poterla rigiocare). */
@keyframes journey-like-pop {
  0%   { transform: scale(0.85); }
  45%  { transform: scale(1.35); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.journey__img-like.is-animating {
  animation: journey-like-pop 0.5s cubic-bezier(.17, .89, .32, 1.49);
}

/* Card "solo testo" (punto "Cucina tipica", vedi journey_render_text_post()
   in home.php): stessa cornice/header/piede delle altre, ma al posto della
   foto c'e' il titolo+testo — un po' piu' larga per lasciargli spazio a
   respirare, e con un cursore a mano per far capire che il like si clicca
   (le altre card invece si "auto-mettono like" da sole, non sono
   cliccabili). */
.journey__img--text {
  width: calc(var(--ig-scale) * 22rem);
  max-width: 90vw;
}
.journey__img--interactive { cursor: pointer; pointer-events: auto; position: relative; z-index: 1; }
.journey__img-textbody {
  padding: calc(var(--ig-scale) * 1rem) calc(var(--ig-scale) * 1.1rem) calc(var(--ig-scale) * 0.5rem);
}
.journey__img-textbody h3 {
  font-size: calc(var(--ig-scale) * 1.15rem);
  margin: 0 0 calc(var(--ig-scale) * 0.5rem);
  color: var(--color-brown);
}
.journey__img-textbody p {
  font-size: calc(var(--ig-scale) * 0.9rem);
  line-height: 1.5;
  margin: 0;
  color: var(--color-brown);
}

@media (max-width: 62rem) {
  .journey__point-text { max-width: 20rem; }
  .journey__img-head { padding: 0.32rem 0.4rem 0.2rem; gap: 0.25rem; }
  .journey__img-verified { font-size: 0.6rem; }
  .journey__img-foot { padding: 0.28rem 0.4rem; font-size: 0.7rem; gap: 0.42rem; }
  .journey__ball { width: 4.5rem; height: 4.5rem; }
  .journey__ball-icon { font-size: 1.5rem; }
}

/* Solo telefono (sotto i 760px): testi piu' piccoli. La disposizione in
   colonna invece parte gia' sotto i 1200px (blocchi "max-width: 75rem"
   qui sotto e MOBILE_BREAKPOINT in journey.js). */
@media (max-width: 47.5rem) {
  .journey__point-text h3 { font-size: 1.15rem; }
  /* Le dimensioni del punto intro (4rem/3.2rem/1.2rem) sono pensate per
     desktop: la regola qui sopra non basterebbe a ridurle (specificita'
     piu' bassa della loro, vedi ".journey__point--intro .journey__point-
     text h3" fuori da media query) — qui vengono ridimensionate apposta,
     stesse proporzioni (2.5x/2x/0.75x) ma su una base piu' piccola. */
  .journey__point--intro .journey__point-text h3 { font-size: 2.2rem; }
  .journey__intro-eyebrow--top { font-size: 1.76rem; }
  .journey__intro-eyebrow--mid { font-size: 0.66rem; }
}

/* Sotto i 1200px ogni punto va in colonna (testo sopra, immagini sotto),
   come su telefono. Le larghezze in vw hanno un tetto in rem, cosi' su
   tablet/schermi medi le card non diventano enormi. */
@media (max-width: 75rem) {
  /* Card di testo: 75vw su telefono, al massimo 34rem piu' in grande. */
  .journey__img--text { min-width: min(75vw, 34rem); max-width: min(75vw, 34rem); }
  /* Il tubo sta vicino al bordo sinistro (vedi MOBILE_X_FRAC in
     journey.js): il testo parte un po' piu' in la', cosi' non ci finisce
     sopra. */
  .journey__point[data-pos="l"] .journey__point-text,
  .journey__point[data-pos="r"] .journey__point-text,
  .journey__point[data-pos="c"] .journey__point-text {
    left: 15%; right: auto;
    text-align: left;
    max-width: min(78vw, 40rem);
  }
  /* Le card "solo testo" partono allo stesso 15% del testo semplice (a
     destra della pallina, che prima ne copriva l'inizio) e non hanno il
     vincolo di larghezza pensato per il testo semplice. */
  .journey__point[data-pos="l"] .journey__point-text--card,
  .journey__point[data-pos="r"] .journey__point-text--card,
  .journey__point[data-pos="c"] .journey__point-text--card {
    left: 15%; right: auto;
    max-width: none;
  }
  /* Punto intro: journey.js lo centra con xPercent:-50, quindi qui serve
     di nuovo left:50%-ish (la regola [data-pos] qui sopra lo metteva al
     15% e mezzo blocco finiva fuori schermo a sinistra). 55% invece di 50%
     per restare a destra del tubo/pallina vicino al bordo sinistro. */
  .journey__point--intro[data-pos] .journey__point-text {
    left: 56%; right: auto;
    width: min(76vw, 44rem); max-width: none;
  }
  /* Immagini SOTTO al testo (non di lato): piu' spazio per entrambi. Non
     serve piu' scansarsi in orizzontale — basta che quando il testo e'
     fermo al centro schermo (plateau del punto) le immagini non ci siano
     ancora sopra: l'offset verticale iniziale (journey.js, imgGroups top)
     fa proprio questo, sono uno sfalsamento di tempo, non di lato.
     "transform: none" qui e' voluto, non un dimenticato: la regola base
     (non mobile, poco sopra in questo file) mette translateY(-50%), e se
     qui non lo si annulla esplicitamente resta attiva lo stesso per
     cascata — e' esattamente quello che succedeva prima di aggiungere
     questa riga: il "top" impostato in JS diventava il CENTRO della card
     invece del bordo superiore, quindi meta' card (alta ~11rem) risaliva
     comunque dentro al testo. */
  /* Contenitore largo (non piu' width:auto): serve perche' la seconda
     immagine deve centrarsi DENTRO questa fascia, non solo attaccarsi a
     destra come la prima — vedi align-self sotto. */
  .journey__point-imgs {
    transform: none;
    left: 5%; right: 5%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .journey__point[data-pos="l"] .journey__point-imgs--a,
  .journey__point[data-pos="r"] .journey__point-imgs--a,
  .journey__point[data-pos="c"] .journey__point-imgs--a {
    left: 5%; right: 5%;
  }
  /* Una a destra, una al centro (della stessa fascia larga qui sopra). */
  .journey__img + .journey__img { align-self: center; }
  /* Il punto centrato ha le due card in due gruppi separati (non un unico
     flex): stessa idea, --a a destra e --b centrata, con lo stesso grande
     distacco verticale di quando sono nello stesso gruppo. */
  .journey__point[data-pos="c"] .journey__point-imgs--b {
    left: 50%; right: auto;
    transform: translate(-50%, 11rem);
  }

  .journey__img img { height: auto; aspect-ratio: 19 / 14.25; }
  /* Molto distanziate a riposo (quasi a toccare lo spazio della scritta
     del punto successivo): la seconda ha una velocita' di scroll maggiore
     (data-speed), quindi scrollando risale verso la prima e le due si
     avvicinano solo quando ormai sono vicine alla navbar — non e' un
     overlap fisso, e' lo sfalsamento di velocita' che le fa convergere. */
  .journey__img + .journey__img { margin-left: 0; margin-top: 8.5rem; }

  /* Punto "intro": la regola generica qui sopra (.journey__point-imgs)
     metterebbe le 4 card nella stessa identica fascia (left:5%;right:5%),
     perdendo il lato sinistra/destra — lo ripristiniamo qui, piu' stretto
     visto lo schermo piccolo. */
  .journey__intro-corner--tl,
  .journey__intro-corner--bl { left: 3%; right: auto; }
  .journey__intro-corner--tr,
  .journey__intro-corner--br { right: 3%; left: auto; }
}

/* prefers-reduced-motion: niente pin/scrub, contenuto normale in colonna */
.journey--static { height: auto !important; }
.journey--static .journey__pin { position: static; height: auto; overflow: visible; }
.journey--static .journey__path-svg,
.journey--static .journey__ball { display: none; }
.journey--static .journey__point {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  padding: var(--space-8) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.journey--static .journey__point-text,
.journey--static .journey__point-imgs {
  position: static !important;
  transform: none !important;
  max-width: 26rem;
}
.journey--static .journey__point-imgs { flex-direction: row; flex-wrap: wrap; }
/* Senza animazioni (prefers-reduced-motion) niente carosello: recensioni
   semplicemente in fila, una accanto all'altra. */
.journey--static .journey__point .journey__reviews { height: auto; margin-top: 0; }
.journey--static .journey__reviews-track { display: flex; flex-wrap: wrap; gap: 1rem; }
.journey--static .journey__review { position: relative; left: auto; }

/* Punto "Parcheggio" (unico con pos="c"): la sua unica foto e' 1.5x piu'
   grande delle altre card — moltiplicatore fisso in piu' rispetto allo
   --ig-scale normale (che scala tutte le card sopra i 1500px), non al
   posto suo. */
.journey__point[data-pos="c"] .journey__img { width: calc(var(--ig-scale) * 19rem * 1.5); }
.journey__point[data-pos="c"] .journey__img img { height: calc(var(--ig-scale) * 14.25rem * 1.5); }
.journey__point[data-pos="c"] .journey__img-head { padding: calc(var(--ig-scale) * 0.4rem * 1.5) calc(var(--ig-scale) * 0.45rem * 1.5) calc(var(--ig-scale) * 0.25rem * 1.5); gap: calc(var(--ig-scale) * 0.3rem * 1.5); }
.journey__point[data-pos="c"] .journey__img-foot { padding: calc(var(--ig-scale) * 0.35rem * 1.5) calc(var(--ig-scale) * 0.45rem * 1.5); font-size: calc(var(--ig-scale) * 0.8rem * 1.5); gap: calc(var(--ig-scale) * 0.5rem * 1.5); }

/* Punto "Campitello di Fassa": post con mappa Leaflet (vedi
   journey_render_map_card() in home.php e journey-map.js), stesse misure
   1.5x del post del Parcheggio qui sopra. Selettori con .journey__point
   davanti per vincere anche sulle misure ridotte di mobile. */
.journey__point .journey__img--map { width: calc(var(--ig-scale) * 19rem * 1.5); }
.journey__point .journey__img--map .journey__img-head { padding: calc(var(--ig-scale) * 0.4rem * 1.5) calc(var(--ig-scale) * 0.45rem * 1.5) calc(var(--ig-scale) * 0.25rem * 1.5); gap: calc(var(--ig-scale) * 0.3rem * 1.5); }
.journey__point .journey__img--map .journey__img-foot { padding: calc(var(--ig-scale) * 0.35rem * 1.5) calc(var(--ig-scale) * 0.45rem * 1.5); font-size: calc(var(--ig-scale) * 0.8rem * 1.5); gap: calc(var(--ig-scale) * 0.5rem * 1.5); }
.journey__map {
  height: calc(var(--ig-scale) * 14.25rem * 1.5);
  background: #e8e2dc;
  font-family: var(--font-body, inherit);
}
.journey__map .leaflet-control-attribution { font-size: 0.6rem; }

/* Pin custom: goccia rosso mattone (colore del brand) con bordo bianco e
   l'alberello del logo dentro, piu' un'onda che pulsa alla base. La punta
   della goccia cade esattamente sulle coordinate (iconAnchor in
   journey-map.js). */
.rdv-pin { position: relative; width: 4rem; height: 5.25rem; }
.rdv-pin__head {
  position: absolute;
  top: 0; left: 0;
  width: 4rem; height: 4rem;
  background: var(--color-building);
  border: 0.2rem solid var(--color-white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: -0.2rem 0.35rem 0.8rem rgba(26, 21, 18, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.rdv-pin__head img {
  width: 62%; height: 62%;
  object-fit: contain;
  transform: rotate(45deg);
}
.rdv-pin__pulse {
  position: absolute;
  left: 50%; top: 4.8rem;
  width: 1.4rem; height: 0.5rem;
  margin-left: -0.7rem; margin-top: -0.25rem;
  border-radius: 50%;
  background: rgba(131, 37, 31, 0.45);
  animation: rdv-pin-pulse 1.8s ease-out infinite;
}
@keyframes rdv-pin-pulse {
  from { transform: scale(0.6); opacity: 1; }
  to   { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rdv-pin__pulse { animation: none; }
}
.journey__map .leaflet-div-icon { background: none; border: 0; }

/* Punto "Eccellenza": carosello "coverflow" di recensioni al posto delle
   foto (vedi 'reviews' in home.php e setupReviewsCarousel() in
   journey.js): una card al centro in primo piano, le altre ai lati via via
   piu' piccole, sbiadite e dietro. Le card sono tutte sovrapposte al
   centro della fascia (position:absolute) e journey.js le sposta/scala.
   Da desktop la fascia sta SOTTO al testo (margin-top) e va dal bordo
   sinistro del testo a quello destro della pagina; da mobile e' larga
   tutta la pagina, cosi' la card centrale e' centrata sullo schermo. */
.journey__point .journey__reviews {
  left: 21%; right: 5%;
  width: auto;
  height: 12rem;
  margin-top: 7rem;
  overflow: visible;
  display: block;
}
.journey__reviews-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.journey__review > * { opacity: var(--fade, 1); }
.journey__review {
  position: absolute;
  top: 0; left: 50%;
  width: 16rem;
  height: 12rem;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 0.5rem 1.5rem rgba(26, 21, 18, 0.18);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  will-change: transform, opacity;
}
.journey__review-avatar {
  width: 3rem; height: 3rem;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
}
.journey__review-avatar--0 { background: #e0578b; }
.journey__review-avatar--1 { background: #e05a4e; }
.journey__review-avatar--2 { background: #4a7fe0; }
.journey__review-avatar--3 { background: #e0a13f; }
.journey__review-avatar--4 { background: #3fae8f; }
.journey__review-avatar--5 { background: #9b6fe0; }
.journey__review-name { font-weight: 700; color: var(--color-brown); margin: 0; }
.journey__review-stars { color: #f3b563; margin: 0.2rem 0; letter-spacing: 0.1rem; }
.journey__review-text { color: var(--color-brown); font-size: 0.9rem; margin: 0; }

@media (max-width: 75rem) {
  /* Da mobile: stesso coverflow ma in verticale (vedi journey.js), card
     centrata orizzontalmente sullo schermo. Le card sopra/sotto sporgono
     fuori dalla fascia (alta una card): margin-top le tiene staccate dal
     testo del punto. */
  .journey__point .journey__reviews { left: 0; right: 0; margin-top: 6rem; }
  .journey__review { width: 15rem; }
}

/* Mobile: niente drop-shadow sul tubo. Il filtro su un SVG alto quanto
   tutta la sezione (decine di migliaia di px) andava ridisegnato a ogni
   frame di scroll ed era la causa principale degli scatti su telefono —
   l'ombra era comunque appena percettibile. */
@media (max-width: 75rem) {
  .journey__tube-main { filter: none; }
}

/* Punto con 'swap' => true in home.php (Terrazza vista Dolomiti): da
   desktop testo a destra e foto a sinistra, specchio degli altri punti.
   Solo sopra il breakpoint mobile: li' vale la colonna normale (prima il
   testo, poi la foto sotto), invariata. */
@media (min-width: 75.0625rem) {
  .journey__point--swap .journey__point-text { left: auto; right: 5%; }
  .journey__point--swap .journey__point-imgs--a { right: auto; left: 21%; }
}

/* Terrazza (punto --swap): la sua unica foto e' grande come quella del
   Parcheggio (stesse misure 1.5x di [data-pos="c"] sopra). Selettore
   limitato a .journey__point-imgs: la card di testo (.journey__img--text)
   resta della sua misura. */
.journey__point--swap .journey__point-imgs .journey__img { width: calc(var(--ig-scale) * 19rem * 1.5); }
.journey__point--swap .journey__point-imgs .journey__img img { height: calc(var(--ig-scale) * 14.25rem * 1.5); }
.journey__point--swap .journey__point-imgs .journey__img-head { padding: calc(var(--ig-scale) * 0.4rem * 1.5) calc(var(--ig-scale) * 0.45rem * 1.5) calc(var(--ig-scale) * 0.25rem * 1.5); gap: calc(var(--ig-scale) * 0.3rem * 1.5); }
.journey__point--swap .journey__point-imgs .journey__img-foot { padding: calc(var(--ig-scale) * 0.35rem * 1.5) calc(var(--ig-scale) * 0.45rem * 1.5); font-size: calc(var(--ig-scale) * 0.8rem * 1.5); gap: calc(var(--ig-scale) * 0.5rem * 1.5); }

/* Mobile: i post singoli grandi (Parcheggio, mappa di Campitello,
   Terrazza) larghi esattamente come le card di testo (.journey__img--text,
   75vw) e allineati a sinistra come loro (left 15%, vedi
   .journey__point-text--card sopra), invece che attaccati a destra. */
@media (max-width: 75rem) {
  .journey__point[data-pos="c"] .journey__img,
  .journey__point .journey__img--map,
  .journey__point--swap .journey__point-imgs .journey__img {
    width: min(75vw, 34rem);
    max-width: min(75vw, 34rem);
  }
  .journey__point[data-pos="c"] .journey__point-imgs--a,
  .journey__point[data-pos] .journey__point-imgs--a:has(.journey__img--map),
  .journey__point--swap[data-pos] .journey__point-imgs--a {
    left: 15%; right: auto;
    align-items: flex-start;
  }
}

/* Punto "Orari": stesso blocco e stesso stile del footer (classi
   .footer__hours-* in components.css, markup in includes/hours.php) — solo
   il titolo "Aperto" passa dal bianco del footer al marrone del testo. */
.journey__point .footer__hours-title { color: var(--color-brown); margin-top: 0; }

/* Punto "Orari" piu' grande del footer: testo 1.5x, "Aperto" 2x (misure
   del footer: 0.85rem / 1.15rem, vedi components.css), piu' l'etichetta
   "ORARI" sopra nel font dei titoli (e' un h3, come i titoli degli altri
   punti). */
.journey__hours-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2);
}
.journey__point .journey__hours .footer__hours-title { font-size: calc(1.15rem * 2); line-height: 1.1; }
.journey__point .journey__hours .footer__hours-note { font-size: calc(0.85rem * 1.5); }
.journey__point .journey__hours .footer__hours { font-size: calc(0.85rem * 1.5); }
.journey__point .journey__hours .footer__hours-day { width: calc(4rem * 1.5); }

/* "Triangolo" di foto del punto Orari: una sopra, due sotto affiancate e
   sfalsate di meta' della loro altezza (a sinistra la piu' alta, a destra
   la piu' bassa). Quella sopra non e' centrata tra le due: il suo centro
   sta a 2/3 della distanza tra i centri, dalla parte della piu' bassa —
   da qui margin-left = 2/3 di (larghezza card + gap). Card a 0.8x.
   Le celle (.journey__tri-*) fanno la posizione, le card dentro hanno
   ognuna il suo data-speed (vedi home.php). */
.journey__tri {
  --tri-w: calc(var(--ig-scale) * 19rem * 0.8);
  --tri-g: 1.25rem;
  display: grid;
  grid-template-columns: var(--tri-w) var(--tri-w);
  column-gap: var(--tri-g);
  row-gap: var(--tri-g);
  align-items: start;
}
.journey__point .journey__tri .journey__img {
  width: var(--tri-w);
  margin: 0;
  align-self: start;
}
.journey__tri .journey__img img { height: auto; aspect-ratio: 19 / 14.25; }
.journey__tri-top  { grid-column: 1 / span 2; grid-row: 1; margin-left: calc((var(--tri-w) + var(--tri-g)) * 2 / 3); }
.journey__tri-high { grid-column: 1; grid-row: 2; }
.journey__tri-low  { grid-column: 2; grid-row: 2; transform: translateY(50%); }
@media (max-width: 75rem) {
  .journey__tri { --tri-w: calc(min(13rem, 46vw) * 0.8); --tri-g: 0.75rem; margin-top: 3rem; }
}
@media (max-width: 47.5rem) {
  /* A 1.5x la riga "giorno + orari" non ci sta in larghezza e "23:00"
     andava a capo da solo: da mobile giorno sopra, orari sotto. */
  .journey__point .journey__hours .footer__hours-day { display: block; width: auto; }
  .journey__point .journey__hours .footer__hours li { margin-bottom: 0.5rem; }
}

/* Telefono: card piu' piccole (piu' larghe di prima rispetto allo schermo,
   non devono piu' stare in mezza larghezza). Da tablet in su restano della
   misura desktop. */
@media (max-width: 47.5rem) {
  .journey__img { width: min(13rem, 46vw); }
  .journey__img-head { padding: 0.29rem 0.36rem 0.18rem; gap: 0.25rem; }
  .journey__img-logo { height: 0.8rem; }
  .journey__img-verified { font-size: 0.5rem; }
  .journey__img-foot { padding: 0.25rem 0.36rem; font-size: 0.6rem; gap: 0.38rem; }
}

/* Tablet/schermi medi (760-1200px): colonna come su telefono, ma tutto
   centrato orizzontalmente sullo schermo e foto a misura piena.
   - testi (semplici, card e intro): left 50%, journey.js li centra
     (xPercent -50, vedi textAnchor());
   - foto: fascia 5%-95% centrata; il triangolo di Orari torna alla misura
     desktop (0.8x di 19rem); le foto doppie 1.5x, sfalsate in diagonale
     attorno al centro; i post singoli grandi (Parcheggio, mappa,
     Terrazza) solo centrati;
   - recensioni in orizzontale come da desktop (vedi journey.js). */
@media (min-width: 47.5625rem) and (max-width: 75rem) {
  .journey__point[data-pos] .journey__point-text { left: 50%; right: auto; }

  .journey__point-imgs,
  .journey__point[data-pos] .journey__point-imgs--a,
  .journey__point[data-pos="c"] .journey__point-imgs--a,
  .journey__point[data-pos] .journey__point-imgs--a:has(.journey__img--map),
  .journey__point--swap[data-pos] .journey__point-imgs--a {
    left: 5%; right: 5%;
    align-items: center;
  }

  .journey__point .journey__point-imgs--a > .journey__img:first-child:nth-last-child(2),
  .journey__point .journey__point-imgs--a > .journey__img:nth-child(2):last-child {
    width: min(22rem, 48vw);
    max-width: none;
  }
  .journey__point .journey__point-imgs--a > .journey__img:first-child:nth-last-child(2) { margin-right: min(11rem, 20vw); }
  .journey__point .journey__point-imgs--a > .journey__img:nth-child(2):last-child { margin-left: min(11rem, 20vw); align-self: center; }

  .journey__tri { --tri-w: calc(var(--ig-scale) * 19rem * 0.8); --tri-g: 1.25rem; }
}

/* Recensioni (punto "Eccellenza") dietro la riga marrone del tubo: il
   punto non crea un proprio contesto di sovrapposizione (z-index auto),
   cosi' la fascia recensioni (z-index 0) sta sotto all'SVG del tubo
   (z-index 1) e il testo del punto (z-index 2) resta sopra. */
.journey__point:has(.journey__reviews) { z-index: auto; }
.journey__point .journey__reviews { z-index: 0; }

/* Punti fuori dalla "finestra" attiva (vedi render() in journey.js: solo
   punto attuale, precedente e successivo sono vivi): non disegnati, niente
   livelli grafici, niente lavoro per il browser mentre si scorre. */
.journey__point.is-dormant,
.journey__bg.is-dormant {
  visibility: hidden;
  content-visibility: hidden;
}

/* Foto "solo immagine" (punto Accoglienza per famiglie, 'plainImages' in
   home.php): stessa larghezza delle card, ma senza cornice bianca, ombra,
   intestazione e piede — l'immagine scontornata sta direttamente sullo
   sfondo, intera (quadrata, niente ritaglio). */
.journey__img.journey__img--plain {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.journey__img.journey__img--plain img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Punto "Prenota un tavolo": icona del telefono grande il doppio. */
.journey__point-text .journey__phone i { font-size: 2em; }

/* Tubo (vedi layoutTube() in journey.js): barra marrone ferma dentro il pin
   (sopra gli sfondi di default, sotto sfondi "a scena", punti e pallina) e,
   dentro ogni sfondo scuro, il suo tratto chiaro. Niente SVG da spostare a
   ogni fotogramma. Stesso ordine di sovrapposizione di prima: le recensioni
   (z-index 0) restano dietro al tubo. */
.journey__tube-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: -0.125rem 0 0.25rem rgba(26, 21, 18, 0.18);
}
.journey__bg { z-index: 1; }
.journey__bg-tube {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: -0.125rem 0 0.25rem rgba(26, 21, 18, 0.18);
}

/* Desktop: nei punti con due foto affiancate (Cucina, Accoglienza, Prenota)
   quella di destra sta piu' in alto di circa il 40-45% della sua altezza
   (card ~17.5rem, foto scontornate ~19rem, per --ig-scale). align-self:
   senza, il flex la allungherebbe invece di spostarla. */
@media (min-width: 75.0625rem) {
  .journey__point .journey__point-imgs--a > .journey__img + .journey__img {
    align-self: flex-start;
    margin-top: calc(var(--ig-scale) * -7.5rem);
  }
}

/* ══ Mobile/tablet senza GSAP (.journey--mobile, vedi setupMobile() in
   journey.js): la sezione e' una normale colonna di punti che scorre in
   modo nativo. Tubo = rettangolo dritto a sinistra (pseudo-elemento del
   contenitore), pallina "sticky" a 1/3 dello schermo, sfondi scuri dentro
   il proprio punto con il loro tratto di tubo chiaro. Nessuna posizione o
   trasformazione calcolata in JavaScript. ══ */
.journey--mobile {
  --tube-x: 4.5%;
  --tube-w: 3.6rem;
  --ball-size: 4.5rem;
}
@media (min-width: 62.0625rem) {
  .journey--mobile { --tube-w: 5.1rem; --ball-size: 5.5rem; }
}
.journey--mobile .journey__pin {
  position: relative;
  height: auto;
  overflow: visible; /* niente overflow: altrimenti "sticky" non funziona */
  overflow-x: clip;
}
.journey--mobile .journey__pin::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tube-x) - var(--tube-w) / 2);
  width: var(--tube-w);
  background: var(--color-brown);
  z-index: 0;
  pointer-events: none;
}
.journey--mobile .journey__ball {
  display: flex;
  position: sticky;
  top: calc(33.333vh - var(--ball-size) / 2);
  left: auto;
  width: var(--ball-size);
  height: var(--ball-size);
  margin-left: calc(var(--tube-x) - var(--ball-size) / 2);
  margin-bottom: calc(var(--ball-size) * -1);
  transform: none;
  will-change: auto;
  z-index: 4;
}

/* Punti: blocchi uno sotto l'altro, contenuto a destra del tubo. */
.journey--mobile .journey__point {
  position: relative !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-height: 70vh;
  justify-content: center;
  padding: var(--space-9) 5% var(--space-9) calc(var(--tube-x) + var(--ball-size) / 2 + var(--space-4));
  border-bottom: 0;
}
.journey--mobile .journey__point[data-pos] .journey__point-text,
.journey--mobile .journey__point--intro[data-pos] .journey__point-text {
  position: relative !important;
  left: auto; right: auto; top: auto !important;
  transform: none !important;
  width: auto;
  max-width: 40rem;
  z-index: 2;
}
.journey--mobile .journey__point--intro { min-height: 85vh; }
.journey--mobile .journey__img--text { min-width: 0; max-width: 34rem; width: 100%; }

/* Foto: in colonna sotto al testo, leggermente sfalsate (una a destra, una
   a sinistra) come nella versione animata. */
.journey--mobile .journey__point .journey__point-imgs,
.journey--mobile .journey__point[data-pos] .journey__point-imgs--a {
  position: relative !important;
  left: auto; right: auto; top: auto !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-5);
  max-width: none;
  z-index: 2;
}
.journey--mobile .journey__point .journey__point-imgs--a > .journey__img + .journey__img {
  margin: 0;
  align-self: flex-start;
}
.journey--mobile .journey__point[data-pos="c"] .journey__point-imgs--a,
.journey--mobile .journey__point[data-pos] .journey__point-imgs--a:has(.journey__img--map),
.journey--mobile .journey__point--swap[data-pos] .journey__point-imgs--a {
  left: auto;
  align-items: flex-start;
}
.journey--mobile .journey__point[data-pos="c"] .journey__img,
.journey--mobile .journey__point .journey__img--map,
.journey--mobile .journey__point--swap .journey__point-imgs .journey__img {
  width: 100%;
  max-width: 34rem;
}
.journey--mobile .journey__tri { margin: 0 auto calc(var(--tri-w) * 0.5); }

/* Sfondi scuri (Cucina, Campitello, Terrazza): coprono tutto il proprio
   punto; il loro ::after e' il tratto chiaro del tubo. */
.journey--mobile .journey__point > .journey__bg {
  position: absolute;
  inset: 0;
  top: 0 !important;
  height: auto !important;
  width: auto;
  transform: none !important;
  will-change: auto;
  visibility: visible;
  content-visibility: visible;
  z-index: 0;
}
.journey--mobile .journey__point > .journey__bg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tube-x) - var(--tube-w) / 2);
  width: var(--tube-w);
  background: #fdfaf8;
}

/* Recensioni: stesso carosello "coverflow" del desktop (GSAP, vedi
   setupReviewsCarousel in journey.js), qui dentro al flusso normale della
   pagina: verticale su telefono (le card sopra/sotto sporgono dalla fascia
   alta una card, da qui i margini), orizzontale su tablet. */
.journey--mobile .journey__point .journey__reviews {
  position: relative !important;
  left: auto; right: auto; top: auto !important;
  width: auto;
  height: 12rem;
  margin: 10rem 0;
  overflow: visible;
  display: block;
  z-index: 2;
}
@media (min-width: 47.5625rem) {
  .journey--mobile .journey__point .journey__reviews { margin: var(--space-6) 0; }
}
.journey--mobile .journey__reviews-track { position: relative; width: 100%; height: 100%; display: block; }
.journey--mobile .journey__review { position: absolute; top: 0; left: 50%; }

/* Mobile: "Benvenuti al Ristorante della Villa" resta fermo mentre si
   scorre (sticky nativo, niente GSAP pin) per circa una schermata, mentre
   le parole compaiono (timeline in journey.js). Il punto e' piu' alto per
   dare spazio alla pausa. */
.journey--mobile .journey__point--intro {
  min-height: 190vh;
  justify-content: flex-start;
}
.journey--mobile .journey__point--intro[data-pos] .journey__point-text {
  position: sticky !important;
  top: 45vh !important;
}

/* Mobile: elementi con parallax (foto dei punti) sempre su un livello
   grafico stabile, pronto prima che inizi lo scroll (vedi force3D in
   startMobile(), journey.js). */
.journey--mobile [data-speed] { will-change: transform; }
.journey--mobile .journey__reviews [data-speed] { will-change: auto; }