/* Palchi: la corsa alta, il palco appiccicoso con la tela, il foglio da disegno, le annotazioni,
   le stazioni (tavole con i segni di taglio), i testi, il cartiglio, la lente. */
.corsa { position: relative; height: calc((var(--s, 3) + 1) * 100svh); }
.corsa[data-corsa="home"] { --s: 5.8; }
.corsa[data-corsa="castello"] { --s: 2.7; }
.corsa[data-corsa="torre"] { --s: 3; }
/* senza WebGL la home è più corta: la tavola II segue subito la I */
.senza-gl .corsa[data-corsa="home"] { --s: 2.4; }
@media (prefers-reduced-motion: reduce) {
  .corsa[data-corsa="home"] { --s: 2.6; }
  .corsa[data-corsa="castello"], .corsa[data-corsa="torre"] { --s: 1.4; }
  .palco [data-strato], .palco .stazione, .palco .stazione img { transition: opacity .5s ease; }
}
.palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* geometria delle stazioni, condivisa con i testi. La I sta nella fascia tra la testata e il cartiglio
     (in basso a destra, alto circa 135 px): non lo tocca mai, nemmeno con i segni di taglio */
  --w1: min(960px, 58vw, calc((100svh - 300px) * 16 / 9));
  --cy1: calc(50% - 54px);
  /* le foto lasciano sempre ai testi accanto almeno 18–22rem */
  --h2: min(1280px, calc(100svh - 196px), calc((100vw - 2 * var(--margine) - 12vw - 22rem) / .75));
  /* la lente: torre-001 è larga 1785 px, quindi al massimo 892 px CSS (alta 960) sugli schermi retina */
  --hl: min(960px, calc(100svh - 176px), calc((100vw - 3 * var(--margine) - 6vw - 18rem) * 1496 / 1390));
}
/* schermi bassi: il cartiglio si riduce a una riga, la stazione I torna al centro */
@media (max-height: 45rem) and (min-height: 34.01rem) and (min-width: 48rem) and (min-aspect-ratio: 1/1) {
  .palco { --w1: min(960px, 58vw, calc((100svh - 250px) * 16 / 9)); --cy1: calc(50% - 6px); }
}
.palco .tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.senza-gl .palco .tela { display: none; }

/* il foglio: cornice sottile con le tacche di riferimento, come una tavola */
.foglio { position: absolute; inset: calc(var(--testata) + 10px) max(12px, calc(var(--margine) - 28px)) 14px; border: 1px solid var(--linea-tenue); pointer-events: none; z-index: 1; }
.foglio::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--linea-tenue) 0 1px, transparent 1px 8.3333%) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--linea-tenue) 0 1px, transparent 1px 8.3333%) bottom / 100% 7px no-repeat,
    repeating-linear-gradient(180deg, var(--linea-tenue) 0 1px, transparent 1px 12.5%) left / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--linea-tenue) 0 1px, transparent 1px 12.5%) right / 7px 100% no-repeat;
}

/* annotazioni in SVG: linee sottili, scritte tecniche su un velo del fondo (niente aloni attorno alle lettere) */
.note { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.note .richiamo, .note .linea, .note .est, .note .tacca { fill: none; stroke: var(--bianco); stroke-width: 1; }
.note .richiamo { stroke-opacity: .85; }
.note .mira { fill: rgb(31 58 92 / .35); stroke: var(--bianco); stroke-width: 1; }
.note .fondo-nota { fill: rgb(24 47 75 / .74); }
.note .punto { fill: var(--bianco); }
.note text {
  font-family: var(--carattere); font-stretch: 75%; font-weight: 600; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  fill: var(--bianco);
}
.note .nota-quota .linea, .note .nota-quota .tacca, .note .nota-quota .est { stroke: var(--sabbia); }
.note .nota-quota .est { stroke-opacity: .7; }
.note .testo-quota { font-style: italic; text-transform: none; letter-spacing: .015em; font-stretch: 92%; font-weight: 400; font-size: 15px; fill: var(--sabbia); }

/* stazioni: la foto vera compare sopra i punti già allineati */
.stazione { position: absolute; margin: 0; z-index: 2; opacity: 0; pointer-events: none; }
.stazione .cornice { position: absolute; inset: 0; }
.stazione img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--foto, 0); background: center / cover no-repeat; }
.stazione figcaption { position: absolute; left: 0; max-width: 100%; top: calc(100% + 26px); }
.staz-1 { width: var(--w1); height: calc(var(--w1) * 9 / 16); left: calc(100% - var(--w1) - var(--margine) - 1vw); top: calc(var(--cy1) - var(--w1) * 9 / 32); }
.staz-2 { height: var(--h2); width: calc(var(--h2) * .75); left: calc(var(--margine) + 5vw); top: calc(50% - var(--h2) / 2 + 24px); }
.staz-2 figcaption { top: calc(100% + 24px); }
.staz-piena { inset: 0; opacity: 1; }
/* a tutto schermo i segni di taglio non servono: compaiono solo quando la tavola si ferma prima dei bordi */
.staz-piena .tacche::before { display: none; }
.staz-lente { height: var(--hl); width: calc(var(--hl) * 1390 / 1496); left: calc(100% - var(--hl) * 1390 / 1496 - var(--margine) - 4vw); top: calc(50% - var(--hl) / 2 + 22px); pointer-events: auto; }
/* schermi retina molto larghi: la variante più grande è di 3200 px, quindi la foto piena si ferma a 1600 px CSS
   (2133 a 1,5×), con i segni di taglio sul blu; mai più larga di 4:3, così la copertura scala sulla larghezza */
@media (min-resolution: 2dppx) and (min-width: 1601px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1601px) {
  .staz-piena { inset: auto; left: calc(50% - 800px); width: 1600px; height: min(1200px, calc(100% - var(--testata) - 64px)); top: calc(var(--testata) + 32px); }
  .staz-piena .tacche::before { display: block; }
}
@media (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx) and (min-width: 2134px) {
  .staz-piena { inset: auto; left: calc(50% - 1066px); width: 2133px; height: min(1600px, calc(100% - var(--testata) - 64px)); top: calc(var(--testata) + 32px); }
  .staz-piena .tacche::before { display: block; }
}

/* testi del palco */
.palco [data-strato] { position: absolute; z-index: 4; }
/* i testi delle stazioni partono nascosti: li accende la regia (niente lampi prima che arrivi lo script) */
.testo-staz, .testo-lente, .didascalia-piena { opacity: 0; visibility: hidden; }
.eroe-testo { left: var(--margine); bottom: clamp(88px, 15svh, 170px); width: min(40rem, 44vw); }
.eroe-testo .titolo { font-size: clamp(2.35rem, 1.1rem + 3.7vw, 4.5rem); }
.eroe-testo .sotto { margin: 1.15rem 0 0; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); font-weight: 330; color: rgb(241 238 230 / .9); max-width: 28em; }
.invito { display: flex; align-items: center; gap: 12px; margin: 2.2rem 0 0; color: var(--sabbia); }
.invito .freccia { position: relative; width: 1px; height: 38px; background: var(--linea-tenue); overflow: hidden; }
.invito .freccia::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--sabbia); animation: scende 2.6s var(--lenta) infinite; }
@keyframes scende { to { transform: translateY(350%); } }

.testo-staz { width: min(27rem, calc(100% - var(--w1) - 3 * var(--margine) - 2vw)); left: var(--margine); }
.testo-1 { top: calc(var(--cy1) - 9.5rem); }
.testo-2 { left: calc(var(--margine) + 5vw + var(--h2) * .75 + 7vw); width: min(30rem, calc(100% - var(--h2) * .75 - 2 * var(--margine) - 14vw)); top: calc(50% - 8rem); }
.testo-staz .citazione p { font-size: clamp(1.3rem, 1rem + .95vw, 1.85rem); }
.testo-staz .fatto { margin: 1.6rem 0 1.4rem; font-weight: 330; color: rgb(241 238 230 / .9); max-width: 26em; }
.nota-quota { margin: 2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linea-tenue); font-stretch: 90%; font-size: .98rem; color: rgb(241 238 230 / .88); max-width: 26em; }
.nota-quota .tecnico { color: var(--sabbia); margin-right: .7em; }

/* cartiglio: la tabellina in basso a destra di ogni tavola */
.cartiglio { position: absolute; right: calc(var(--margine) + 14px); bottom: 32px; z-index: 4; margin: 0; display: grid; grid-template-columns: auto auto; border: 1px solid var(--linea-tenue); background: rgb(31 58 92 / .72); }
.cartiglio div { display: contents; }
.cartiglio dt, .cartiglio dd { margin: 0; padding: 4px 10px 3px; border-bottom: 1px solid var(--linea-tenue); white-space: nowrap; }
.cartiglio dt { color: var(--sabbia); border-right: 1px solid var(--linea-tenue); }
.cartiglio div:last-child > * { border-bottom: 0; }
/* schermi bassi: una riga sola, stazione e punti */
@media (max-height: 45rem) and (min-height: 34.01rem) and (min-width: 48rem) and (min-aspect-ratio: 1/1) {
  .cartiglio { grid-template-columns: repeat(4, auto); }
  .cartiglio div:nth-child(1), .cartiglio div:nth-child(2), .cartiglio div:nth-child(5) { display: none; }
  .cartiglio dt, .cartiglio dd { border-bottom: 0; }
  .cartiglio div:nth-child(3) dd { border-right: 1px solid var(--linea-tenue); }
}

/* progetti: titolo sul palco, epigrafe, didascalia della foto piena; un velo del fondo sotto il titolo */
.testa-progetto::before {
  content: ""; position: absolute; inset: -18vh -12vw -10vh calc(-1 * var(--margine)); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 30% 60%, rgb(31 58 92 / .82), rgb(31 58 92 / .5) 45%, rgb(31 58 92 / 0) 72%);
}
.testa-progetto { left: var(--margine); bottom: clamp(80px, 13svh, 150px); width: min(42rem, 52vw); }
.testa-progetto .attacco { margin-top: 1.2rem; }
.epigrafe { margin: 1.3rem 0 0; display: flex; flex-direction: column; gap: .4rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); font-weight: 300; }
.epigrafe .tecnico { color: var(--sabbia); font-style: normal; }
.didascalia-piena { left: var(--margine); bottom: 24px; margin: 0; padding: 7px 11px 6px; background: rgb(24 47 75 / .82); color: var(--bianco); }
.testo-lente { left: var(--margine); top: calc(50% - 4rem); width: min(24rem, calc(100% - var(--hl) * 1390 / 1496 - 3 * var(--margine) - 6vw)); }
.testo-lente p:last-child { font-weight: 330; font-size: 1.1rem; }
/* l’istruzione giusta per lo strumento che si ha in mano */
.se-tocco { display: none; }
@media (hover: none) and (pointer: coarse) { .se-tocco { display: inline; } .se-puntatore { display: none; } }

/* la lente: un foro nella foto; sotto, la tela con il disegno allineato */
.lente { cursor: crosshair; }
.lente img {
  -webkit-mask-image: radial-gradient(circle var(--lr, 0px) at var(--lx, 50%) var(--ly, 50%), transparent 98.4%, #000 100%);
  mask-image: radial-gradient(circle var(--lr, 0px) at var(--lx, 50%) var(--ly, 50%), transparent 98.4%, #000 100%);
}
.anello {
  position: absolute; left: 0; top: 0; z-index: 3; width: calc(var(--lr, 0px) * 2); height: calc(var(--lr, 0px) * 2);
  transform: translate(calc(var(--lx, 0px) - var(--lr, 0px)), calc(var(--ly, 0px) - var(--lr, 0px)));
  border: 1px solid rgb(241 238 230 / .92); border-radius: 50%; opacity: 0; transition: opacity .35s; touch-action: none; cursor: grab;
}
.lente.attiva .anello { opacity: 1; }
.anello::before {
  content: ""; position: absolute; inset: -10px;
  background:
    linear-gradient(var(--bianco) 0 0) 50% 0 / 1px 14px no-repeat,
    linear-gradient(var(--bianco) 0 0) 50% 100% / 1px 14px no-repeat,
    linear-gradient(var(--bianco) 0 0) 0 50% / 14px 1px no-repeat,
    linear-gradient(var(--bianco) 0 0) 100% 50% / 14px 1px no-repeat,
    linear-gradient(var(--bianco) 0 0) 50% 50% / 9px 1px no-repeat,
    linear-gradient(var(--bianco) 0 0) 50% 50% / 1px 9px no-repeat;
}
.anello-dic { position: absolute; left: calc(85.4% + 6px); top: calc(85.4% + 4px); white-space: nowrap; color: var(--bianco); text-shadow: 0 0 3px rgb(31 58 92 / .9), 0 0 1px rgb(31 58 92); }
.lente:focus-visible { outline-offset: 8px; }
.lente:focus-visible .anello { border-color: var(--sabbia); }

/* senza WebGL la tavola I sta accanto al titolo fin dall’inizio: il testo le lascia spazio */
@media (min-width: 48rem) and (min-aspect-ratio: 1001/1000), (min-width: 75rem) {
  .senza-gl .eroe-testo { width: min(40rem, calc(100% - var(--w1) - 2 * var(--margine) - 4vw)); }
  .senza-gl .eroe-testo .titolo { font-size: clamp(2.2rem, .9rem + 2.6vw, 3.6rem); }
}

/* Three non è arrivato: niente punti, restano le fotografie delle stazioni, ferme */
.senza-3d .corsa { height: 100svh; }
.senza-3d .staz-1, .senza-3d .staz-lente, .senza-3d .stazione img { opacity: 1; }
.senza-3d .staz-2, .senza-3d .testo-staz, .senza-3d .testo-lente, .senza-3d .lente .anello, .senza-3d .eroe-testo .invito { display: none; }
.senza-3d .lente img { -webkit-mask-image: none; mask-image: none; }
.senza-3d .lente { cursor: auto; }
.senza-3d .didascalia-piena { opacity: 1; visibility: visible; }
/* senza WebGL la foto della lente c’è dall’inizio: il titolo della torre le lascia spazio */
.senza-gl #torre .testa-progetto { width: min(42rem, calc(100% - var(--hl) * 1390 / 1496 - 3 * var(--margine) - 6vw)); }
@media (max-width: 47.99rem) and (min-height: 34.01rem), (max-aspect-ratio: 1/1) and (max-width: 74.99rem) {
  .senza-gl #torre .testa-progetto { width: auto; bottom: auto; top: calc(var(--testata) + 50px + var(--hl) + 52px); }
}
@media (max-width: 47.99rem) and (min-height: 34.01rem) and (max-height: 48.75rem) {
  .senza-gl #torre .palco { --hl: min(960px, calc((100vw - 2 * var(--g)) * 1496 / 1390), calc(100svh - 370px)); }
}
/* senza WebGL, sul telefono: il titolo sotto la tavola 4:5 (come il testo della stazione); il cartiglio non serve */
@media (max-width: 47.99rem) and (min-height: 34.01rem) {
  .senza-gl .eroe-testo { bottom: auto; top: calc(var(--testata) + 30px + var(--h1) + 72px); }
  .senza-gl .cartiglio, .senza-gl .eroe-testo .invito { display: none; }
}

/* in verticale (telefoni e tablet tenuti dritti): le stazioni in alto, i testi sotto. --g è il margine laterale.
   I telefoni in orizzontale non passano di qui: hanno il loro impianto più sotto */
@media (max-width: 47.99rem) and (min-height: 34.01rem), (max-aspect-ratio: 1/1) and (max-width: 74.99rem) {
  .palco {
    --g: max(16px, min(var(--margine), 48px));
    --w1: min(960px, calc(100vw - 2 * var(--g)));
    --h1: calc(var(--w1) * 9 / 16);
    --h2: min(1280px, calc((100vw - 4 * var(--g)) * 4 / 3), calc(100svh - 450px));
    --hl: min(960px, calc((100vw - 2 * var(--g)) * 1496 / 1390), calc(100svh - 330px));
  }
  .staz-1 { left: calc(50% - var(--w1) / 2); top: calc(var(--testata) + 58px); height: var(--h1); }
  .staz-2 { left: calc(50% - var(--h2) * .375); top: calc(var(--testata) + 38px); }
  .staz-lente { left: calc(50% - var(--hl) * 1390 / 1496 / 2); top: calc(var(--testata) + 50px); }
  .stazione figcaption, .staz-2 figcaption { top: calc(100% + 17px); }
  .eroe-testo { left: var(--g); right: var(--g); width: auto; bottom: 104px; }
  .invito { margin-top: 1.4rem; }
  .testo-staz, .testo-2 { left: var(--g); right: var(--g); width: auto; }
  /* sotto la foto: la didascalia (fino a due righe), poi il testo della stazione */
  .testo-1 { top: calc(var(--testata) + 58px + var(--h1) + 74px); }
  .testo-2 { top: calc(var(--testata) + 38px + var(--h2) + 72px); }
  .testo-staz .occhiello { margin-bottom: .7rem; }
  .nota-quota { margin-top: 1.1rem; padding-top: .7rem; }
  /* il cartiglio in fondo: stazione e punti (si fa da parte quando arrivano i testi delle stazioni) */
  .cartiglio { left: var(--g); right: var(--g); bottom: 16px; grid-template-columns: 1fr 1fr; }
  .cartiglio div { display: flex; flex-direction: column; border-right: 1px solid var(--linea-tenue); }
  .cartiglio div:nth-child(1), .cartiglio div:nth-child(2), .cartiglio div:nth-child(5) { display: none; }
  .cartiglio div:nth-child(4) { border-right: 0; }
  .cartiglio dt, .cartiglio dd { border: 0; padding: 4px 10px 3px; }
  .cartiglio dt { padding-bottom: 0; }
  .testa-progetto { left: var(--g); right: var(--g); width: auto; bottom: 92px; }
  .didascalia-piena { left: var(--g); right: var(--g); bottom: 16px; }
  .testo-lente { left: var(--g); right: var(--g); width: auto; max-width: 34rem; top: calc(var(--testata) + 50px + var(--hl) + 52px); }
}
/* telefono: la stazione I è una tavola 4:5 centrata sul castello (alta al massimo 1080 px nativi / 2),
   il foglio sparisce, caratteri più piccoli; le note tecniche non scendono sotto gli 11 px */
@media (max-width: 47.99rem) and (min-height: 34.01rem) {
  .palco { --h1: min(calc((100vw - 2 * var(--g)) * 5 / 4), calc(100svh - 448px)); --w1: calc(var(--h1) * 4 / 5); }
  .staz-1 { top: calc(var(--testata) + 30px); }
  .staz-1 img { object-position: 50% 42%; }
  .testo-1 { top: calc(var(--testata) + 30px + var(--h1) + 72px); }
  .foglio { display: none; }
  .note text { font-size: 11px; letter-spacing: .06em; }
  .note .testo-quota { font-size: 13px; }
  .eroe-testo .titolo { font-size: clamp(2.1rem, 1.5rem + 3vw, 2.6rem); }
  .testo-staz .citazione p { font-size: 1.24rem; }
  .testo-staz .fatto { margin: 1rem 0 .8rem; font-size: 1rem; }
  .nota-quota { font-size: .9rem; }
}
/* telefoni bassi: il fatto resta nella pagina del castello, qui la tavola e la citazione */
@media (max-width: 47.99rem) and (min-height: 34.01rem) and (max-height: 48.75rem) {
  .palco { --h1: min(calc((100vw - 2 * var(--g)) * 5 / 4), calc(100svh - 344px)); --h2: min(calc((100vw - 64px) * 4 / 3), calc(100svh - 410px)); }
  .testo-staz .fatto { display: none; }
  .eroe-testo { bottom: 64px; }
}

/* telefoni in orizzontale (e finestre basse): le foto delle stazioni alte quanto lo schermo, i testi accanto;
   niente foglio né cartiglio, titoli più piccoli */
@media (max-height: 34rem) and (min-aspect-ratio: 1/1) {
  .palco {
    --g: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --hb: calc(100svh - var(--testata) - 56px);
    --w1: min(960px, calc(var(--hb) * 16 / 9), 58vw);
    --cy1: calc(var(--testata) + 22px + var(--w1) * 9 / 32);
    --h2: min(1280px, calc(var(--hb) - 16px));
    --hl: min(960px, calc(var(--hb) - 16px));
  }
  .foglio, .cartiglio { display: none; }
  .staz-1 { left: calc(100% - var(--w1) - var(--g) - 12px); }
  .staz-2 { left: calc(var(--g) + 12px); top: calc(var(--testata) + 22px); }
  .staz-lente { left: calc(100% - var(--hl) * 1390 / 1496 - var(--g) - 12px); top: calc(var(--testata) + 22px); }
  .stazione figcaption, .staz-2 figcaption { top: calc(100% + 9px); font-size: .75rem; line-height: 1.35; }
  .tacche { --t: 9px; --g: 4px; }
  .eroe-testo { left: var(--g); bottom: 16px; width: min(26rem, 46vw); }
  .eroe-testo .titolo, .testa-progetto .titolo { font-size: clamp(1.5rem, 1rem + 4vh, 2.3rem); }
  .eroe-testo .sotto { margin-top: .6rem; font-size: .95rem; }
  .invito { margin-top: .8rem; }
  .invito .freccia { height: 26px; }
  .testo-staz { left: var(--g); width: calc(100% - var(--w1) - 2 * var(--g) - 48px); top: calc(var(--testata) + 18px); }
  .testo-2 { left: calc(var(--g) + 12px + var(--h2) * .75 + 36px); right: var(--g); width: auto; top: calc(var(--testata) + 18px); }
  .testo-staz .occhiello { margin-bottom: .5rem; }
  .testo-staz .citazione p { font-size: clamp(1.02rem, .7rem + 2.4vh, 1.3rem); }
  .testo-staz .firma { margin-top: .5rem; font-size: .84rem; }
  .testo-staz .fatto { display: none; }
  .testo-staz .vai { margin-top: .8rem; }
  .nota-quota { margin-top: .9rem; padding-top: .6rem; font-size: .88rem; }
  .testa-progetto { left: var(--g); bottom: 16px; width: min(30rem, 52vw); }
  .testa-progetto .attacco { margin-top: .6rem; font-size: 1rem; }
  .epigrafe { margin-top: .6rem; font-size: 1.05rem; }
  .didascalia-piena { left: auto; right: var(--g); bottom: 12px; }
  .testo-lente { left: var(--g); top: calc(var(--testata) + 40px); width: calc(100% - var(--hl) * 1390 / 1496 - 2 * var(--g) - 48px); }
  .note text { font-size: 11px; }
}