/* Home cinematografica — animazione originale + overlay dei nuovi testi */
:root{
  --bg:#0b0d10;
  --cream:#efe9dc;
  --sec:#c9c5bb;
  --grey:#8f948a;
  --sage:#d9dcb8;
  --text:#c9c5bb;
  --font:"Inika", Georgia, "Times New Roman", serif;
  --pad:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,p,ul{margin:0;font-weight:400}
ul{list-style:none;padding:0}

/* ---------- HEADER ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:clamp(18px,3vw,40px) var(--pad) 0;transition:background .3s}
.top.solid{background:linear-gradient(var(--bg) 60%, rgba(11,13,16,0));padding-bottom:16px}
.nav-left{display:flex;align-items:center;font-size:clamp(15px,1.5vw,19px)}
.nav-left a{color:var(--cream);opacity:.9;transition:opacity .2s}
.nav-left a:hover{opacity:1}
.brand{display:flex;flex-direction:column;align-items:center;justify-self:center}
.brand img{width:clamp(84px,8.5vw,130px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.lang{justify-self:end;display:flex;gap:9px;align-items:center;font-size:14px;letter-spacing:.06em}
.lang span{color:var(--grey);opacity:.6}
.lang a{color:var(--grey);transition:color .2s}
.lang a:hover{color:var(--cream)}
.lang a.on{color:var(--sage)}

/* ---------- IL VIAGGIO (animazione) ---------- */
.hero{position:relative;height:400vh}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
/* i bordi dell'immagine sfumano nel fondo pagina (stesso colore #0b0d10): nessuno stacco */
.stagewrap{position:absolute;inset:0;overflow:hidden;background:var(--bg);
  -webkit-mask-image:radial-gradient(140% 136% at 50% 50%, #000 82%, transparent 100%);
  mask-image:radial-gradient(140% 136% at 50% 50%, #000 82%, transparent 100%)}
/* fascia scura in fondo: rende leggibili i testi minimi e fonde nel fondo */
.hero-sticky::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;z-index:3;pointer-events:none;
  background:linear-gradient(transparent, var(--bg) 90%)}
.stage{position:absolute;left:0;top:0;transform-origin:0 0}
.stage .mask{position:absolute;overflow:hidden}
.stage img{position:absolute;left:0;top:0;object-fit:cover;max-width:none;user-select:none;-webkit-user-drag:none}
.stage .free{position:absolute;left:0;top:0}
.stage img,.stage .mask{will-change:transform}

/* ---------- OVERLAY: testi MINIMI, in basso (l'immagine è la protagonista) ---------- */
.ov{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:0 var(--pad) 84px;pointer-events:none;opacity:0}
.ov *{ text-shadow:0 1px 12px rgba(8,10,13,.9) }

.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin:0}
.title{font-size:clamp(24px,3vw,40px);line-height:1.12;margin:10px 0 0}
.title__l1,.title__l2{display:block}
.title__l1{color:var(--cream)}
.title__l2{font-style:italic;color:var(--sage)}
.sub{max-width:520px;margin:12px auto 0;font-size:13px;letter-spacing:.02em;line-height:1.5;color:var(--sec)}

/* scene 01–03 (minime) */
.ov-scene .sc-num{font-size:11px;letter-spacing:.3em;color:var(--sage);opacity:.85}
.ov-scene .sc-word{font-size:clamp(24px,3vw,40px);line-height:1.1;color:var(--cream);margin:8px 0 8px}
.ov-scene .sc-line{max-width:520px;margin:0 auto;font-size:13px;letter-spacing:.02em;line-height:1.5;color:var(--sec)}
.ov-scene .sc-keys{margin-top:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}

/* finale */
.ov-finale .btn-sage{pointer-events:auto;margin-top:20px;background:var(--sage);color:#12140d;padding:13px 26px;border-radius:6px;
  font-size:clamp(14px,1.3vw,17px);transition:opacity .2s,transform .2s;text-shadow:none}
.ov-finale .btn-sage:hover{opacity:.9;transform:translateY(-1px)}
.finale-title{font-size:clamp(20px,2.4vw,32px)}

/* SCORRI */
.scroll-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sage);opacity:.85;transition:opacity .4s}
.scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--sage),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- FOOTER ---------- */
.foot{position:relative;z-index:2;display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;
  padding:26px var(--pad) 34px;font-size:14px;color:var(--grey);border-top:1px solid rgba(239,233,220,.1);background:var(--bg)}
.foot a:hover{color:var(--cream)}
.foot [data-insta]{display:inline-flex;align-items:center;gap:.34em}
.foot [data-insta]::after{content:"↗";font-size:.9em;opacity:.8}

/* ---------- MOBILE ---------- */
@media (max-width:820px){
  :root{--pad:20px}
  .brand img{width:78px}
  .lang{font-size:12px;gap:7px}
  .ov{padding:96px 22px}
  .sub{font-size:15px}
  .ov-scene .sc-line{font-size:16px}
}
@media (max-width:600px){
  .eyebrow__a{display:block}
  .eyebrow__sep{display:none}
}
@media (prefers-reduced-motion:reduce){ .scroll-hint i{animation:none} }