/* ---- scroll-fx layer (GSAP/ScrollTrigger) — additive, safe to remove ---- */

/* fly-through storytelling (home) */
/* altezza 100lvh (schermo con la barra del browser ridotta, com'e' mentre si scorre): con 100svh,
   su Safari iOS e Chrome Android la foto ancorata finiva 75-100 px sopra il fondo e sotto restava
   una fascia crema vuota. Didascalia e pallini sono spostati della stessa differenza (lvh-svh),
   cosi' restano dove erano; sul computer lvh = svh e non cambia nulla */
.fly{position:relative;height:100vh;height:100svh;height:100lvh;background:#0c1622;overflow:hidden}
.fly-stage{position:absolute;inset:0;opacity:0;visibility:hidden}
.fly-stage.is-first{opacity:1;visibility:visible}
.fly-stage img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.06)}
.fly-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,14,22,.58),rgba(9,14,22,.10) 45%,rgba(9,14,22,.28))}
.fly-cap{position:absolute;left:0;right:0;bottom:9vh;bottom:calc(9vh + 100lvh - 100svh);text-align:center;color:var(--ivory);padding:0 20px}
.fly-cap h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,58px);letter-spacing:.01em;margin:0;color:var(--ivory);text-shadow:0 6px 40px rgba(0,0,0,.5)}
.fly-kicker{display:block;font:600 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sand);margin-bottom:14px}
.fly-dots{position:absolute;right:26px;top:50%;top:calc(50% - (100lvh - 100svh) / 2);transform:translateY(-50%);display:flex;flex-direction:column;gap:11px;z-index:5}
.fly-dots span{width:7px;height:7px;border-radius:50%;background:rgba(245,240,232,.35);transition:background .35s,transform .35s}
.fly-dots span.on{background:var(--sand);transform:scale(1.4)}

/* tiny scroll-down cue — appears at the top of a full-screen story section, fades as soon as you scroll */
.fly-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;color:rgba(245,240,232,.78);pointer-events:none;opacity:0;transition:opacity .55s ease;filter:drop-shadow(0 2px 7px rgba(0,0,0,.5))}
.fly-cue.show{opacity:1}
.fly-cue svg{display:block;width:19px;height:19px}
.fly-cue.show .chev{display:block;animation:cuebob 1.9s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-width:600px){.fly-cue{bottom:16px}}
@media (prefers-reduced-motion:reduce){.fly-cue .chev{animation:none}}
/* dark chevron for cues sitting over light (ivory/paper) sections */
.fly-cue.on-light{color:rgba(27,43,66,.5);filter:drop-shadow(0 1px 2px rgba(245,240,232,.7))}
/* the single page-wide cue is pinned to the viewport bottom */
.fly-cue.fixed-cue{position:fixed;bottom:20px;z-index:50}
/* hero now uses the elegant chevron cue above, in place of the old vertical line */
.scroll-cue{display:none}

/* smoother compositing for parallaxed layers */
.hero-bg,.cta-bg img,.media-frame{will-change:transform}

@media (max-width:600px){
  .fly-cap h2{font-size:clamp(24px,7.4vw,34px)}
  .fly-cap{bottom:7vh;bottom:calc(7vh + 100lvh - 100svh)}
  .fly-dots{right:13px;gap:9px}
}

@media (prefers-reduced-motion: reduce){
  .fly{display:none}
}

/* ============================================================
   LUX REFINEMENTS  (page transitions, cursor, reveals, etc.)
   ============================================================ */

/* #10 selection + refined scrollbar */
::selection{background:var(--sand);color:var(--navy)}
html{scrollbar-color:rgba(184,169,138,.6) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(184,169,138,.42);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:rgba(184,169,138,.7)}

/* #5 reading-progress thread */
.read-bar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--sand),#dccaa2);z-index:130;pointer-events:none}

/* #5 smart nav hide on scroll-down */
.nav{will-change:transform}
.nav.nav-hidden{transform:translateY(-118%)}
body.menu-open .nav.nav-hidden{transform:none}

/* #2 heading mask reveal */
.h2.mask{overflow:hidden;padding-bottom:.09em}
.mrise{display:block}

/* #3 image curtain reveal helper */
.curtain{clip-path:inset(0 0 0 0)}

/* #8 press / "as featured in" — nastro continuo, a ogni larghezza.
   Etichetta sopra, nomi sotto in una riga che scorre da sola e si richiude:
   escono da un lato e rientrano dall'altro, senza frecce ne' barre. */
.press .container{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 0}
.press-lbl{font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}
.press a{font-family:var(--serif);color:var(--earth);letter-spacing:.02em;transition:opacity .25s,color .25s}
.press a:hover{opacity:1;color:var(--navy)}

/* la striscia e' la finestra, il nastro ci scorre dentro */
.press-strip{display:block;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(28px,5vw,72px),#000 calc(100% - clamp(28px,5vw,72px)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 clamp(28px,5vw,72px),#000 calc(100% - clamp(28px,5vw,72px)),transparent 100%)}
/* niente gap ma un margine per elemento: col gap le due meta' del nastro non
   misurerebbero uguale e a fine giro si vedrebbe uno scatto */
.press-track{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;padding:2px 0}
.press-track a{flex:0 0 auto;white-space:nowrap;font-size:clamp(17px,1.5vw,21px);opacity:.78;margin-right:clamp(30px,3.4vw,54px)}
.press-strip.is-nastro .press-track{animation:press-scorre var(--press-durata,34s) linear infinite}
/* si ferma solo col focus da tastiera: chi naviga col tab deve poter mirare il link.
   Col dito e col mouse non si ferma mai. */
.press-strip.is-fermo .press-track{animation-play-state:paused}
@keyframes press-scorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* senza JS il nastro non viene costruito: i nomi tornano una riga centrata che va a capo */
.press-strip:not(.is-nastro) .press-track{flex-wrap:wrap;justify-content:center;width:auto;max-width:100%;
  row-gap:10px;padding:2px 22px}
@media (prefers-reduced-motion:reduce){
  /* nessuno scorrimento: riga centrata, e le copie vanno nascoste
     o si leggerebbero i nomi piu' volte */
  .press-strip.is-nastro .press-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;max-width:100%;
    row-gap:10px;padding:2px 22px}
  .press-strip.is-nastro .press-copia{display:none}
}

/* #9 footer signature */
.foot-sig{flex-basis:100%;order:9;margin-top:20px;padding-top:20px;border-top:1px solid rgba(245,240,232,.12);font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(245,240,232,.72);text-align:center;width:100%}

/* #11 hero slideshow layering */
.hero-bg.slideshow img{position:absolute;inset:0}

/* #12 fireflies canvas */
.fx-fireflies{position:absolute;inset:0;z-index:1;pointer-events:none}
.cta .cta-inner{position:relative;z-index:3}

@media (prefers-reduced-motion: reduce){
  .read-bar{display:none}
  .nav.nav-hidden{transform:none}
  .h2.mask{overflow:visible}
}

/* language switch (replaces the IT/EN toggle after the i18n split) */
/* nella nav misura e tipografia arrivano dal gruppo .nav-right in alt.css;
   qui restano bordo e colore, piu' il caso .mob del menu mobile che non e' in .nav-right */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(245,240,232,.5);border-radius:2px;padding:9px 12px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,232,.82);text-decoration:none;transition:background .2s,color .2s}
@media (hover:hover){.lang-switch:hover{background:var(--sand);color:var(--navy)}}
/* EN/IT nel menu del telefono: aveva bordo e testo blu notte (pensati per un menu chiaro) sul menu
   blu notte, quindi non si vedeva; e da ".mobile-nav a" prendeva il corpo 29px delle voci.
   Ora e' il quadrato 44x44 avorio della barra in alto */
.mobile-nav a.lang-switch.mob{margin-top:14px;align-self:center;box-sizing:border-box;width:44px;height:44px;padding:0;font:600 11px/1 var(--sans);letter-spacing:.14em;border-color:rgba(245,240,232,.5);color:rgba(245,240,232,.82)}