/* Generato da flight-lab/cabin.css — vedi CABINA.md */
/* ============================================================
   CABINA — prototipo isolato
   Non è ancora in produzione. Vive solo in /flight-lab/.

   MODELLO CAMERA E PIANI
   La scena è una vera scena 3D: un solo `perspective` sul contenitore e i
   piani distribuiti in profondità con translateZ. La camera avanza con un
   unico translateZ sul wrapper .camera, e la gerarchia del movimento
   (vicino corre, lontano quasi fermo) viene dalla prospettiva, non da uno
   scale tarato piano per piano.

     z = +200   .primo-piano   bordo del sedile + vignettatura   → esce subito
     z =   +8   .cornice       labbro della cornice, sporge dalla parete
     z =    0   .parete        parete della cabina, coi fori
     z =  -30   .vetro         riflessi sul doppio vetro
     z = -150   .mondo         la foto della meta: sta FUORI dalla fusoliera
     .cielo e' fuori dalla scena: fisso, non scorre

   `perspective-origin` è ancorato al centro del finestrino attivo: avanzare
   significa quindi entrare esattamente dentro quel foro.
   ============================================================ */

/* `--dolly` e `--par` cambiano a ogni fotogramma. Finche' erano proprieta'
   custom normali erano anche EREDITATE: scriverle sulla camera obbligava Chrome
   a ricalcolare lo stile di tutta la scena sotto, 60 volte al secondo. Misurato
   sul portale: 255 ricalcoli per 292 ms di main thread.
   Registrate con `inherits: false` il valore non scende piu' ai figli — che
   infatti non lo usano: ognuna di queste variabili serve solo all'elemento su
   cui viene scritta. */
@property --dolly {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --par {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

:root {
  --cabina-chiara: #b9b3a8;
  --cabina-media: #8d887e;
  --cabina-scura: #4a4a49;
  --cabina-ombra: #23252a;
  --luce-finestrino: #cfe4f2;
}

/* Nel laboratorio qui c'erano `* { box-sizing }` e `html, body { overflow:
   hidden }`. Nel sito non possono entrare: bloccherebbero lo scroll della
   pagina. Il box-sizing lo mette gia' style.css. */
.cabina, .cabina * { box-sizing: border-box; }

/* ---- La scena ---- */
.cabina-scroll {
  position: relative;
  z-index: 1;
  /* L'altezza e' una variabile perche' la cabina, nella home, sara' una FASCIA
     dentro la sezione hero e non una schermata intera. Tutta la geometria
     discende da qui: passo, finestrini e corsa della camera si ricalcolano. */
  height: var(--cabina-alta, 100dvh);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* La prospettiva sta QUI, non sulla scena. `perspective-origin` e' relativo
     al box del contenitore, che non scorre: l'origine resta quindi inchiodata
     al centro del viewport mentre la cabina gli passa davanti. Siccome lo
     scroll-snap centra il finestrino attivo, l'origine coincide sempre con
     lui — avanzare vuol dire entrare esattamente in quel foro.
     Se la prospettiva stesse sulla scena (larga quanto tutta la cabina)
     il punto di fuga scorrerebbe insieme alla parete. */
  perspective: 1100px;
  perspective-origin: 50% var(--fuoco-y, 44%);
}
.cabina-scroll::-webkit-scrollbar { display: none; }
.cabina-scroll.in-transizione { scroll-snap-type: none; overflow-x: hidden; }
.scena {
  position: relative;
  height: var(--cabina-alta, 100dvh);
  width: 100%;          /* la larghezza vera la calcola cabin.js: e' tutta la cabina */
  transform-style: preserve-3d;
}

.camera {
  display: none;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(var(--dolly));
}
.scena.is-ready .camera { display: block; }

/* ---- Cielo, dietro tutto ----
   Fisso, fuori dal contenitore che scorre: a quella distanza il movimento
   sarebbe comunque impercettibile, e dentro alla scena il suo `inset` negativo
   allargava l'area di scorrimento. Si vede solo attraverso i fori, quando il
   panorama non li copre: e' una rete di sicurezza, non un piano di lavoro. */
/* ---- La sezione "Mete consigliate" ----
   La cabina e' una sezione come le altre, non un'appendice dell'hero: con il
   suo titolo smette di leggersi come una fascia incollata sotto al marchio. */
.mete-consigliate {
  padding: 4rem 0 3.5rem;
}
.mete-consigliate__aiuto {
  text-align: center;
  color: #cfd6e4;
  font-size: 0.95rem;
  margin: -1.2rem auto 1.8rem;
  padding: 0 1rem;
  max-width: 46ch;
}
.mete-consigliate__aiuto strong { color: var(--gold, #febd41); font-weight: 700; }

/* ---- Durante il portale la cabina si prende lo schermo ----
   Se restasse nella sua fascia, la corsa della camera avverrebbe dentro la
   banda: la cornice uscirebbe dalla fascia e non dal viewport, e
   l'ingrandimento si vedrebbe accadere dentro una finestrella.

   Niente `position: fixed`: misurato, si risolveva contro un antenato invece
   che contro il viewport e la cabina finiva a meta' pagina. Basta una
   trasformazione calcolata dal riquadro vero - una translate lavora comunque
   nel sistema dello schermo.

   z-index sopra la navbar, che sta a 100: durante il portale la pagina deve
   sparire, non restare a galla sopra la foto. */
.cabina.in-volo {
  z-index: 9999;
  will-change: transform;
}

.cabina {
  width: 100%;
  position: relative;
  height: var(--cabina-alta, 100dvh);
  isolation: isolate;
}

.cielo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Alta quanto la cabina, non quanto lo schermo: con la cabina ridotta a fascia
     il cielo spuntava sotto di lei, perche' era fisso a tutto schermo. A schermo
     intero non si vedeva, ed e' il tipo di cosa che salta fuori solo provando
     la misura vera in cui andra' a stare. */
  height: var(--cabina-alta, 100dvh);
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 78%, #7fb2d9 0%, #4d80ad 34%, #24486e 64%, #101f34 100%);
}
.cielo::after {
  /* banda d'orizzonte: dà la sensazione di quota */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 62%;
  height: 22%;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 70%);
  filter: blur(6px);
}

/* ---- Il mondo: le foto delle mete, fuori dall'aereo ---- */
.mondi {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateX(var(--par, 0px));
  /* transform e origin li calcola cabin.js: il fattore dipende da prospettiva
     e profondita, e a occhio veniva sbagliato. */
}
.mondo {
  position: absolute;
  top: var(--mondo-y, 50%);
  translate: -50% -50%;
  width: var(--mondo-w, 30vw);
  height: var(--mondo-h, 64vh);
  left: var(--mondo-x, 50%);
  overflow: hidden;
  border-radius: 2px;
}
/* Mentre si entra in un finestrino gli altri si spengono. Lo stato lo mette il
   JS una volta sola; l'andamento lo fa il CSS, e la transizione sul filtro
   esiste solo durante il volo — durante lo scroll aggiornaLuci() riscrive i
   filtri di continuo e una transizione li farebbe strascicare. */
.mondi.si-allontanano .mondo img { transition: filter 0.45s ease-out; }
.mondi.si-allontanano .mondo.in-ombra::after { opacity: 0.62; }

.mondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1d3a5c;
  mix-blend-mode: multiply;
  opacity: var(--freddo, 0);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.mondo img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  display: block;
  /* larghezza e altezza in px le mette cabin.js: Flip misura male le percentuali */
}

/* ---- La parete della cabina ---- */
.parete {
  position: absolute;
  inset: 0;
  transform: translateZ(0) translateX(var(--par, 0px));
  pointer-events: none;
}
.parete svg { display: block; width: 100%; height: 100%; }

/* ---- La cappelliera ----
   Era una banda bianca ondulata disegnata in SVG, ed era l'elemento piu' finto
   dell'inquadratura: accanto a finestrini fotografici stonava. Ora e' una
   piastrella vera ripetuta al passo delle campate, con la sua striscia di luce
   di cortesia — quella che l'SVG stava fingendo con un gradiente.
   Sta piu' avanti della parete perche' sporge davvero verso il corridoio, e in
   basso si spegne nel trasparente, cosi' la luce si posa sulla parete invece di
   finire con una cucitura. */
.cappelliera {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateZ(24px);
  pointer-events: none;
  background: url('../assets/flight/cabin-bin.webp') repeat-x top left;
  background-size: auto 100%;
}

/* ---- Il vano del finestrino ----
   Non piu' un bordo disegnato con box-shadow, ma un asset vero
   (window-bay.webp): cornice, incasso profondo e guida della tendina, col BUCO
   trasparente al centro attraverso cui passa il panorama. E' lo stesso
   ragionamento dei sedili — quello che sembrava incollato al muro era la
   geometria disegnata in CSS, non il modo in cui era disegnata.

   Il buco dell'asset va allineato al foro che la scena ha gia' calcolato: le
   proporzioni le misura scripts/build-cabin-window.mjs e le riporta in cabin.js,
   perche' a occhio comparirebbe un anello di parete dentro al finestrino.
   I bordi esterni dell'asset sono sfumati, cosi' si posa sulla parete invece di
   sembrarci appoggiato sopra. */
.vani {
  position: absolute;
  inset: 0;
  transform: translateZ(4px);
  pointer-events: none;
}
.vano {
  position: absolute;
  top: var(--y);
  left: var(--x);
  translate: -50% -50%;
  width: var(--vw);
  height: var(--vh);
  background: url('../assets/flight/window-bay.webp') center / 100% 100% no-repeat;
}

/* ---- Vetro: riflessi sul doppio pannello ---- */
.vetri {
  position: absolute;
  inset: 0;
  transform: translateZ(-30px) translateX(var(--par, 0px));
  pointer-events: none;
}
.vetro {
  position: absolute;
  top: var(--y);
  left: var(--x);
  translate: -50% -50%;
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  overflow: hidden;
}
.vetro::before {
  /* riflesso diagonale del vetro interno */
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(118deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.10) 18%,
    rgba(255,255,255,0) 42%);
  mix-blend-mode: screen;
}
.vetro::after {
  /* il forellino di sfiato in basso: è il dettaglio che rende un finestrino d'aereo */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 7px; height: 7px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(10,14,20,0.72);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.22);
}

/* ---- Primo piano: bordo del sedile e vignettatura ---- */
.primo-piano {
  position: absolute;
  inset: 0;
  transform: translateZ(200px);
  pointer-events: none;
}

/* ---- Vignettatura e curvatura della fusoliera ----
   Fuori dalla scena, perche' devono restare attaccate ai bordi dello SCHERMO:
   se scorressero con la cabina, il buio si sposterebbe insieme alla parete e
   la fusoliera sembrerebbe piatta. */
.vignetta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cabina-alta, 100dvh);   /* come il cielo: vale sulla fascia */
  z-index: 5;
  pointer-events: none;
  background:
    /* ---- Gli attacchi con la pagina ----
       Misurato: al confine fra la testata e la cabina la luminosita' saltava da
       19 a 154 in venti pixel. Una fascia chiara incollata fra due blocchi scuri
       si legge come un pezzo appiccicato, non come una parte della pagina.
       Qui i due bordi si spengono nel navy del sito, quindi il passaggio c'e'
       ma non ha un taglio. Il centro resta intatto: la cabina non perde niente. */
    /* Piu' fermate di due: una rampa lineare si legge lei stessa come una
       fascia. In alto si ferma al 19% perche' i finestrini cominciano poco
       sotto e non devono essere velati. */
    linear-gradient(180deg,
      var(--navy, #031030) 0%,
      rgba(3,16,48,0.88) 3%,
      rgba(3,16,48,0.52) 8%,
      rgba(3,16,48,0.22) 13%,
      rgba(3,16,48,0) 19%),
    linear-gradient(0deg,
      var(--navy, #031030) 0%,
      rgba(3,16,48,0.82) 4%,
      rgba(3,16,48,0.42) 10%,
      rgba(3,16,48,0.16) 17%,
      rgba(3,16,48,0) 26%),
    /* velatura nella palette del sito: la cabina e' calda, la pagina fredda, e
       senza un accordo di tono restano due immagini diverse una sopra l'altra */
    linear-gradient(180deg, rgba(3,16,48,0.14), rgba(3,16,48,0.14)),
    /* i lati della fusoliera si allontanano e vanno in ombra */
    linear-gradient(90deg,
      rgba(8,10,15,0.62) 0%, rgba(8,10,15,0.28) 11%,
      rgba(8,10,15,0) 32%, rgba(8,10,15,0) 68%,
      rgba(8,10,15,0.28) 89%, rgba(8,10,15,0.62) 100%),
    radial-gradient(96% 88% at 50% 46%,
      rgba(0,0,0,0) 55%, rgba(0,0,0,0.20) 84%, rgba(0,0,0,0.44) 100%);
}

/* ---- Targhette: sopra ogni finestrino, come i numeri di fila veri ----
   Stanno sul piano della parete (z = +4), quindi durante l'avvicinamento
   crescono e sfilano via insieme alla cabina. Non sono UI appoggiata sopra. */
.targhette {
  position: absolute;
  inset: 0;
  transform: translateZ(26px);   /* appena davanti alla cappelliera */
  pointer-events: none;
}
.targhetta {
  position: absolute;
  left: var(--x);
  top: var(--y-bin, 3rem);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.9rem 0.32rem;
  border-radius: 3px;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Una targhetta non puo' essere piu' larga della portella su cui sta, o
     tornerebbe a passare sopra il giunto. Il limite e' la portella meno un
     filo, non una frazione: MONACO DI BAVIERA occupa 254px su 288 e con un
     tetto all'86% veniva troncato pur standoci. Chi non ci sta davvero — le
     mete diventeranno 27 — perde le ultime lettere invece di sbordare. */
  max-width: calc(var(--passo, 20rem) - 0.6rem);
  /* inciso nel pannello: testo in ombra e filo di luce sotto, come la plastica stampata */
  color: rgba(58,53,45,0.78);
  background: linear-gradient(180deg, rgba(0,0,0,0.055), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  transition: color 0.5s, opacity 0.5s;
  opacity: 0.62;
}
.targhetta.is-attiva {
  color: rgba(30,27,22,0.92);
  opacity: 1;
}
.targhetta .nome {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;   /* senza questo un figlio flex non si lascia stringere */
}
/* Il marchio, come una compagnia lo stampa sulla portella. Sta in scala di
   grigi finche' la meta non e' quella attiva: a colori su ogni campata
   diventerebbe una fila di bollini. */
.marchio {
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 0.5s, opacity 0.5s;
}
.targhetta.is-attiva .marchio {
  filter: none;
  opacity: 1;
}

.tendine {
  position: absolute;
  inset: 0;
  transform: translateZ(-6px);
  pointer-events: none;
}

/* ---- Le tendine ----
   I finestrini senza meta non devono rubare l'occhio a quelli che una meta ce
   l'hanno: mostravano una toppa di cielo azzurro piu' accesa delle foto. In un
   aereo vero la risposta esiste gia' ed e' la tendina abbassata - meta' cabina
   ce l'ha sempre. Cosi' spariscono senza sembrare spenti, e sono un dettaglio
   che si riconosce al volo. L'altezza varia: tutte uguali sembrerebbero finte. */
.tendina {
  position: absolute;
  top: var(--y);
  left: var(--x);
  translate: -50% -50%;
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  overflow: hidden;
  pointer-events: none;
}
.tendina::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--giu, 100%);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.05) 6%, rgba(0,0,0,0) 14%),
    linear-gradient(180deg, #cabfae 0%, #bdb2a1 60%, #b3a897 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.3);
}
/* la linguetta con cui si tira giu' */
.tendina::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--giu, 100%) - 9px);
  translate: -50% 0;
  width: 26%;
  height: 5px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #a99e8d, #8d8474);
}

/* ---- I link: invisibili, ma sono loro a governare ---- */
.presa {
  position: absolute;
  top: calc(var(--y) - var(--h) / 2);
  left: calc(var(--x) - var(--w) / 2);
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  z-index: 4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: center;
}
/* Immagine ed etichetta dentro il link servono SOLO al fallback senza JS.
   A scena attiva l'immagine va tolta del tutto: senza vincoli di dimensione si
   stampava a grandezza naturale sopra la cabina (ed era lei a gonfiare lo
   scrollWidth). L'etichetta resta per chi legge con lo schermo. */
.is-ready .presa img { display: none; }
.is-ready .presa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.scena:not(.is-ready) { display: flex; align-items: center; gap: 2rem; width: max-content; padding: 2rem; }
.scena:not(.is-ready) .presa { position: relative; inset: auto; translate: none; width: min(70vw, 320px); height: auto; color: #eee7dc; text-decoration: none; }
.scena:not(.is-ready) .presa img { display: block; width: 100%; aspect-ratio: .7; object-fit: cover; border-radius: 42% / 30%; }
.scena:not(.is-ready) .presa-label { display: block; text-align: center; padding: 1rem; }
.presa:focus-visible {
  outline: 3px solid #febd41;
  outline-offset: 6px;
}

/* ---- Far capire che si puo' cliccare ----
   Un finestrino fotorealistico non dice di essere un pulsante: e' proprio il
   fatto che sembri vero a togliergli l'aspetto di comando. Serve una risposta
   al passaggio del puntatore, ed e' il momento in cui dirlo - prima sarebbe
   decorazione. Un filo d'oro sul bordo, non un alone: i bagliori colorati
   erano gia' stati tolti dal sito perche' lo facevano sembrare generato. */
.presa::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--r) + 5px);
  box-shadow: inset 0 0 0 0 rgba(254,189,65,0);
  transition: box-shadow 0.28s ease;
  pointer-events: none;
}
.presa:hover::after {
  box-shadow: inset 0 0 0 2px rgba(254,189,65,0.9);
}
/* e la sua etichetta si accende insieme, cosi' l'occhio collega le due cose */
.presa:hover ~ .presa,
.presa:hover { cursor: pointer; }

/* ---- Il mondo a schermo intero, destinazione del Flip ---- */
.mondo-pieno {
  position: fixed;
  inset: 0;
  /* Sopra .cabina.in-volo, che durante il portale sta a 9999. Quando la cabina
     e' stata alzata sopra la navbar questo e' rimasto a 70, e la foto a schermo
     intero finiva DIETRO la cabina: si vedeva il finestrino ormai svuotato,
     cioe' il cielo. Un lampo azzurro di mezzo secondo, subito dopo
     l'ingrandimento. I due numeri vanno cambiati insieme. */
  z-index: 10000;
  overflow: hidden;
  visibility: hidden;
}
.mondo-pieno img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Non al centro: al 30%, come ritaglia l'hero della pagina meta. Cosi' la
     foto che la cabina lascia e quella che la meta mostra sono la STESSA
     inquadratura, e nel passaggio non si sposta. Finche' era al centro la
     differenza c'era comunque e andava percorsa dall'arrivo. */
  object-position: 50% 30%;
  display: block;
}
.cabina-comandi {
  position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 1.1rem; z-index: 6;
  color: #f3eee4; white-space: nowrap; font-size: .75rem; letter-spacing: .06em;
  text-shadow: 0 1px 8px #000;
}
.cabina-comandi span { font-weight: 700; }
.cabina-comandi button, .cabina-ritorno {
  border: 1px solid #ffffff45; background: #15191ddb; color: #f3eee4;
  min-width: 44px; min-height: 44px; border-radius: 50%; font: inherit; cursor: pointer;
}
.cabina-comandi button:disabled { opacity: .3; cursor: default; }
.cabina-comandi button:focus-visible, .cabina-ritorno:focus-visible { outline: 3px solid #febd41; outline-offset: 4px; }
.cabina-ritorno { position: fixed; top: 1.2rem; left: 1.2rem; z-index: 21; border-radius: 2rem; padding: .6rem 1rem; }
[hidden] { display: none !important; }

/* ---- Chi ha chiesto meno movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .camera { transition: none !important; }
}

/* ---- Le spalliere della fila davanti ----
   Stanno sul loro piano a +150, non sulla parete: sono davanti a te, quindi
   durante l'avvicinamento sfilano via molto piu' in fretta della fiancata.

   Non sono piu' disegnate in CSS: sono un asset vero (seat-side.webp, generato
   e scontornato) ripetuto lungo la fila. Il CSS tiene luce, sfocatura e
   posizione, l'asset tiene il materiale — che in CSS non veniva.
   L'asset resta ripetibile: e' cosi' che lo scorrimento fra le 27 mete continua
   a funzionare senza generare un sedile per meta.

   DI PROFILO, non di spalle. La camera guarda la fiancata, perpendicolare
   all'asse della fusoliera; i sedili sono rivolti verso la prua, quindi rispetto
   a noi si vedono di lato. Uno schienale visto frontalmente sarebbe corretto
   solo guardando lungo il corridoio. */
.sedili {
  position: absolute;
  inset: 0;
  transform: translateZ(150px);
  pointer-events: none;
  filter: blur(3px);
  /* Il taglio serve a non far crescere l'area di scorrimento con i sedili che
     escono dai bordi della cabina. Appiattisce il sottoalbero, ma i sedili sono
     gia' tutti sullo stesso piano — la profondita' e' su .sedili, non su loro. */
  overflow: hidden;
}
.sedile {
  position: absolute;
  left: var(--x);
  bottom: var(--sb, -56%);
  translate: -50% 0;
  width: var(--sw);
  aspect-ratio: 598 / 929;
  background: url('../assets/flight/seat-side.webp') center bottom / 100% auto no-repeat;
  /* la cabina e' illuminata dall'alto e dai finestrini: il tessuto in ombra
     va scurito e raffreddato, altrimenti il sedile sembra ritagliato e incollato */
  filter: brightness(var(--sl, 0.5)) saturate(0.85);
}