*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#111}
body{font-family:"Inter",system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{background:none;border:0;color:inherit;cursor:pointer;font:inherit}

/* a tutto schermo */
.slider{position:fixed;inset:0;overflow:hidden;container-type:size;touch-action:none}   /* lo swipe cambia slide, non scorre la pagina */
/* le slide non fanno da contesto di sovrapposizione: gli strati di due slide si ordinano per livello
   (intermezzo sotto, testi, superficie sopra), come nell'originale */
.slide{position:absolute;inset:0;visibility:hidden}
.slide.vista{visibility:visible}

/* sfondo: un solo canvas, disegnato da app.js (passaggio "skew vertical" e zoom lento) */
.cielo{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

.L{position:absolute;display:block;height:auto;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
.gruppo>img{position:absolute;display:block;height:auto;user-select:none;-webkit-user-drag:none}
.gruppo>.fascio{object-fit:fill;opacity:0;will-change:opacity,filter}
/* dischi volanti: base con le luci quasi spente + tre gruppi di luci che si accendono in sequenza */
.disco{display:block}
.gruppo>.disco{position:absolute}
.disco>img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.disco>.luce{position:absolute;left:0;top:0;opacity:.3;animation:luce 1.5s ease-in-out infinite}
.disco>.l2{animation-delay:.5s}
.disco>.l3{animation-delay:1s}
@keyframes luce{0%,60%,100%{opacity:.3}30%{opacity:1}}
.superficie .figura{position:absolute}
.ombra{background:radial-gradient(50% 50% at 50% 50%,rgba(70,40,55,.32),rgba(70,40,55,0) 70%)}
/* le superfici sono prolungate in basso con la loro trama, che poi sfuma: nessun bordo netto */
.superficie img,.superficie picture{display:block;width:100%;height:auto}


/* testi: cqw = 1% della larghezza dello schermo (1cqw = 16px su 1600) */
.T{position:absolute;will-change:transform,opacity}
.kicker{left:14.37%;font-size:1.25cqw;font-weight:400;letter-spacing:.0625cqw;text-transform:uppercase}
.titolo{left:14.37%;font-weight:800;font-size:9.375cqw;line-height:1.03;letter-spacing:-.0625cqw;white-space:nowrap}
.para{right:14.37%;text-align:right;font-weight:300;font-size:1.5cqw;line-height:1.25}
.more{right:14.37%;font-size:1.375cqw;font-weight:700;text-transform:uppercase}
.more.linea{padding-bottom:.6cqw;border-bottom:1px solid rgba(255,255,255,.65)}
.slide.scuro .T{color:#222}
.slide.scuro .more.linea{border-color:rgba(34,34,34,.65)}
/* sito bilingue: ogni testo ha <span class="en"> e <span class="it">, si vede la lingua di <html lang> */
html[lang="en"] .it,html[lang="it"] .en{display:none}

/* interfaccia, posizioni dell'originale */
.ui{position:absolute;z-index:200;font-size:1.25cqw}
.marchio{left:3.13%;top:4.2%;font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:-.03em;font-size:2.1cqw;line-height:1;display:inline-flex}
.z{position:relative;display:inline-block}
.z::after{content:"";position:absolute;left:50%;top:50%;width:.07em;height:.5em;background:currentColor;transform:translate(-50%,-50%) rotate(32deg)}
/* selettore di lingua in alto a destra, allineato al centro del marchio: la lingua attiva piena, l'altra attenuata */
.lingua{right:3.13%;top:calc(4.2% + .3cqw);display:flex;align-items:baseline;gap:.45cqw;font-weight:700;text-transform:uppercase}
.lingua button{text-transform:inherit;opacity:.5;transition:opacity .2s}
.lingua button:hover,.lingua button[aria-pressed="true"]{opacity:1}
.lingua i{font-style:normal;font-weight:300;opacity:.5}
.conta{left:3.13%;top:88.1%;font-weight:700}
.contatto{right:3.13%;top:87.98%;font-weight:700;text-transform:uppercase}
/* instagram: icona ben visibile, centrata sulla riga in basso (01-04, frecce, contatti) */
.social{left:14.37%;top:calc(88.1% + .76cqw);transform:translateY(-50%);display:flex;align-items:center}
.social a{display:block;opacity:.9;transition:opacity .2s}
.social a:hover{opacity:1}
.social svg{width:clamp(22px,1.6cqw,30px);height:auto;fill:currentColor;display:block}
.frecce{right:16.6%;top:86.6%;display:flex;align-items:center;gap:1.2cqw}
.frecce button{display:block;padding:.3cqw;opacity:.85}
.frecce button:hover{opacity:1}
.frecce svg{width:.75cqw;display:block}
.frecce i{display:block;width:1px;height:2.6cqw;background:currentColor;opacity:.6}

/* grana di pellicola leggera */
.grana{position:absolute;inset:0;z-index:150;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-size:256px 256px}

/* avanzamento automatico: barra di 3px sul bordo destro, come l'originale */
.barra{position:absolute;right:0;top:0;width:3px;height:0;z-index:200;background:rgba(255,255,255,.5);border-radius:0 0 3px 3px;pointer-events:none}

/* scrivici: finestrella con l'indirizzo e i modi per scrivere (solo computer) */
.posta{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(17,17,17,.45);backdrop-filter:blur(6px)}
.posta[hidden]{display:none}
.posta-box{position:relative;background:#fff;color:#111;padding:36px 44px 32px;min-width:min(440px,100%)}
.posta-kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.posta-indirizzo{font-weight:800;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;margin:8px 0 6px;user-select:all}
.posta-nota{font-size:13px;font-weight:300;opacity:.6}
.posta-vie{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px;font-size:14px;font-weight:700;text-transform:uppercase}
.posta-vie a{padding-bottom:3px;border-bottom:1px solid currentColor}
.posta-chiudi{position:absolute;right:14px;top:8px;font-size:28px;line-height:1;opacity:.5}
.posta-chiudi:hover{opacity:1}

/* telefono in orizzontale (schermo basso e più largo del modulo dell'originale, 1600×840): i caratteri si misurano
   sull'altezza, così il titolo non invade la riga sotto (1,905cqh = 1cqw del modulo). Il computer non è toccato */
@media (min-aspect-ratio: 1905/1000) and (max-height: 520px) {
  .kicker{font-size:2.381cqh;letter-spacing:.119cqh}
  .titolo{font-size:17.86cqh;letter-spacing:-.119cqh}
  .para{font-size:2.857cqh}
  .more{font-size:2.619cqh}
  .more.linea{padding-bottom:1.143cqh}
}

/* telefono in verticale: misure del livello "mobile" dell'originale, rilevate a 390×844.
   La scena è una colonna con le proporzioni di quel telefono, centrata: sui telefoni più larghi e sui tablet la composizione
   resta la stessa, mentre cielo e terreni (più larghi della colonna) coprono tutto lo schermo. q = 1% della larghezza della colonna.
   Le posizioni dei singoli strati sono nei data-mob dell'HTML; qui colonna, caratteri, margini e interfaccia */
@media (max-aspect-ratio: 1/1) {
  .slide,.ui{--q:min(1cqw,.462cqh)}
  .slide{left:50%;right:auto;width:calc(var(--q)*100);margin-left:calc(var(--q)*-50)}
  .kicker{left:10.26%;font-size:calc(var(--q)*3.33);letter-spacing:calc(var(--q)*.08)}
  .titolo{left:10.26%;font-size:calc(var(--q)*10.26);line-height:1.12;letter-spacing:calc(var(--q)*-.08)}
  .para{right:10.26%;font-size:calc(var(--q)*3.33);line-height:1.54}
  .more{right:10.26%;font-size:calc(var(--q)*4.1)}
  .more.linea{padding-bottom:calc(var(--q)*1.2)}
  /* nella slide 4 il blocco dei testi è centrato, come nell'originale */
  .slide.scuro .kicker,.slide.scuro .titolo{left:13.3%}
  .slide.scuro .para,.slide.scuro .more{right:14.1%}
  .ui{font-size:calc(var(--q)*3.85)}
  .marchio{left:5.13%;top:2.4%;font-size:calc(var(--q)*6.4)}
  .conta{display:none}
  /* contatti sempre a portata: in basso al centro, tra youtube e le frecce */
  .contatto{right:auto;left:50%;top:92.9%;transform:translateX(-50%)}
  .lingua{right:5.13%;top:calc(2.4% + var(--q)*.87);gap:calc(var(--q)*1.2)}
  .social{left:5.13%;top:calc(92.9% + var(--q)*2.33)}
  .social svg{width:max(22px,calc(var(--q)*6))}
  .frecce{right:5.13%;top:92.4%;gap:calc(var(--q)*3.6)}
  .frecce button{padding:calc(var(--q)*1.2)}
  .frecce svg{width:calc(var(--q)*3.1)}
  .frecce i{height:calc(var(--q)*6.4)}
}