/* ==========================================================================
   VISION EXPLORER — style.css
   Token, reset, tipografia globale, componenti condivisi, navbar, footer.
   Gli stili delle singole sezioni sono in css/sections.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root{

  /* Palette — 5 colori + 2 grigi di testo. Nessun gradiente decorativo. */
  --navy:        #181b31;   /* superficie scura dominante */
  --navy-deep:   #101223;   /* footer */
  --offwhite:    #f5f5f5;   /* superficie chiara */
  --white:       #ffffff;
  --orange:      #ee790f;   /* accento: linea di salita, ordinali, CTA */
  --blue:        #0071ba;   /* link e hover su fondo chiaro */
  --sky:         #5bc2e5;   /* label e meta su fondo navy */
  --ink:         #2d3436;   /* body su chiaro */
  --ink-soft:    #636e72;   /* meta su chiaro */

  /* Hairline — unico strumento di separazione. Niente ombre. */
  --line-dark:   rgba(255,255,255,.14);
  --line-light:  rgba(0,0,0,.10);

  /* Layout */
  --container:   1440px;
  --gutter:      clamp(20px, 5vw, 96px);
  --nav-h:       96px;
  --nav-h-min:   72px;

  /* Ritmo verticale delle sezioni */
  --section-y:   clamp(88px, 12vw, 180px);

  /* Raggi — usati solo su CTA e info box hero.
     Tutto il resto (tag, placeholder, immagini, hairline) resta ad angolo vivo. */
  --radius-btn:  8px;
  --radius-box:  12px;

  /* Tipografia — Montserrat, font unico. Contrasto di peso 300 <-> 800. */
  --font:        "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display:   clamp(3rem, 8.2vw, 7rem);
  --fs-statement: clamp(2rem, 5.2vw, 4.25rem);
  --fs-h2:        clamp(1.9rem, 4vw, 3.4rem);
  --fs-h3:        clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-lead:      clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body:      1.0625rem;
  --fs-meta:      .8125rem;
  --fs-tag:       .75rem;

  /* Motion */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --t-fast:      .24s;
  --t-med:       .45s;
}


/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* `clip` e non `hidden`: `hidden` renderebbe il body un contenitore di scroll,
     rompendo scroll-behavior:smooth e i salti alle ancore. */
  overflow-x:clip;
}

body.is-locked{overflow:hidden}

h1,h2,h3,p,ul,figure,address{margin:0}
ul{padding:0;list-style:none}
img,video{display:block;max-width:100%;height:auto}
address{font-style:normal}

a{color:inherit;text-decoration:none}

/* L'enfasi in linea usa 600. Il default `bold` vale 700, che non è fra i pesi
   caricati: il browser ripiegherebbe su 800, troppo pesante nel corpo del testo. */
strong,b{font-weight:600}

button{
  font:inherit;color:inherit;
  background:none;border:0;padding:0;
  cursor:pointer;
}

/* Ancore: compensano la navbar fissa */
section[id]{scroll-margin-top:var(--nav-h-min)}

/* Focus visibile e coerente su entrambe le superfici */
:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.u-visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--orange);color:var(--white);
  padding:.9em 1.4em;
  font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:12px}


/* --------------------------------------------------------------------------
   4. TIPOGRAFIA CONDIVISA
   -------------------------------------------------------------------------- */

/* Eyebrow — box con bordo arancio, solo su fondo navy */
.eyebrow{
  display:inline-block;
  border:1px solid var(--orange);
  color:var(--orange);
  padding:.62em 1.15em;
  font-size:var(--fs-tag);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
}

/* Tag di sezione — solo tipografico, con regola breve */
.tag{
  display:flex;
  align-items:center;
  gap:.9em;
  font-size:var(--fs-tag);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.tag::after{
  content:"";
  width:clamp(40px,6vw,88px);
  height:1px;
  background:var(--orange);
}


/* --------------------------------------------------------------------------
   5. BOTTONI E CTA
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  padding:1.15em 2em;
  font-size:var(--fs-meta);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  text-align:center;
  border-radius:var(--radius-btn);
  transition:background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}

/* Primaria — decisione approvata: fondo arancio, testo bianco.
   NOTA: contrasto 2,85:1, sotto la soglia WCAG AA. Vedi brief §3.4. */
.btn--primary{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  background:var(--blue);      /* #0071ba — bianco su blu: 5,16:1, AA */
  border-color:var(--white);
  color:var(--white);
}

/* Secondaria su fondo chiaro */
.btn--outline{
  border-color:var(--navy);
  color:var(--navy);
}
.btn--outline:hover,
.btn--outline:focus-visible{
  background:var(--navy);
  color:var(--white);
}

.btn--block{display:flex;width:100%}


/* --------------------------------------------------------------------------
   6. LINEA DI SALITA — rail di avanzamento lettura
   -------------------------------------------------------------------------- */
.rail{
  display:none;
  position:fixed;
  left:clamp(14px,2.2vw,34px);
  top:0;bottom:0;
  width:1px;
  z-index:90;
  pointer-events:none;
}
.rail__fill{
  display:block;
  width:100%;height:100%;
  background:var(--orange);
  transform:scaleY(var(--scroll-progress,0));
  transform-origin:top center;
}
@media (min-width:1024px){
  .rail{display:block}
}


/* --------------------------------------------------------------------------
   7. NAVBAR
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--nav-h);
  border-bottom:1px solid transparent;
  transition:height var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.nav.is-scrolled{
  height:var(--nav-h-min);
  background:var(--navy);
  border-bottom-color:var(--line-dark);
}

.nav__inner{
  height:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* Lockup loghi */
.nav__brand{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:clamp(12px,1.4vw,20px);
  flex:0 0 auto;
}
.nav__logo{width:auto}
/* NOTA: il logo Enne Effe fornito ha rapporto 1,5:1 con il wordmark nella fascia
   centrale: sotto i ~50px di altezza diventa illeggibile. Vedi TODO asset. */
.nav__logo--ef{height:clamp(34px,4vw,54px)}
.nav__logo--bm{height:clamp(16px,1.7vw,22px)}
.nav__divider{
  width:1px;
  height:clamp(26px,3vw,40px);
  background:rgba(255,255,255,.24);
}

/* Menu desktop */
.nav__menu{
  display:flex;
  align-items:center;
  gap:clamp(20px,3vw,48px);
}
.nav__list{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.2vw,36px);
}
.nav__link{
  position:relative;
  display:inline-block;
  padding-block:.4em;
  font-size:var(--fs-meta);
  font-weight:600;
  letter-spacing:.05em;
  color:rgba(255,255,255,.86);
  transition:color var(--t-fast) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-med) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible{color:var(--white)}
.nav__link:hover::after,
.nav__link:focus-visible::after{transform:scaleX(1)}

.nav__cta{padding:1em 1.5em}

/* Hamburger — tre linee, nessuna icona di libreria */
.nav__toggle{
  position:relative;
  z-index:2;
  display:none;
  width:44px;height:44px;
  margin-right:-10px;
  align-items:center;
  justify-content:flex-end;
}
.nav__toggle-lines{
  display:block;
  width:26px;
  position:relative;
}
.nav__toggle-lines i{
  display:block;
  height:1px;
  background:var(--white);
  transition:transform var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.nav__toggle-lines i + i{margin-top:7px}
.nav__toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}


/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.footer{
  background:var(--navy-deep);
  border-top:1px solid var(--line-dark);
  padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px);
  color:rgba(255,255,255,.66);
}
.footer__inner{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.footer__claim{
  margin-top:20px;
  max-width:32ch;
  font-size:var(--fs-meta);
  font-weight:300;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.footer__coltitle{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sky);
  margin-bottom:16px;
}
.footer__list li + li{margin-top:10px}
.footer__list a{
  font-size:var(--fs-meta);
  color:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.footer__list a:hover,
.footer__list a:focus-visible{
  color:var(--white);
  border-bottom-color:var(--orange);
}
.footer__address{
  font-size:var(--fs-meta);
  line-height:1.9;
  color:rgba(255,255,255,.66);
}

/* Lockup loghi riutilizzabile */
.lockup{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,22px);
}
.lockup__ef{height:clamp(56px,6vw,88px);width:auto}
.lockup__bm{height:clamp(22px,2.4vw,32px);width:auto}
.lockup__divider{
  width:1px;height:clamp(40px,4.4vw,64px);
  background:var(--line-light);
}
.lockup--dark .lockup__divider{background:rgba(255,255,255,.24)}

/* Footer: stessa proporzione, scala ridotta */
.footer .lockup__ef{height:clamp(44px,4.6vw,64px)}
.footer .lockup__bm{height:clamp(18px,1.9vw,25px)}
.footer .lockup__divider{height:clamp(30px,3.4vw,46px)}


/* --------------------------------------------------------------------------
   9. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
/* Quando i reveal sono disattivati (JS o reduced-motion) nulla resta nascosto */
.no-reveal .reveal{
  opacity:1;
  transform:none;
  transition:none;
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE — NAVBAR
   -------------------------------------------------------------------------- */
@media (max-width:1023px){

  .nav__toggle{display:flex}

  .nav__menu{
    position:fixed;
    inset:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    z-index:1;
    padding:var(--nav-h) var(--gutter) 48px;
    background:var(--navy);
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity var(--t-med) var(--ease),
               transform var(--t-med) var(--ease),
               visibility var(--t-med);
  }
  .nav__menu.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav__list{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    width:100%;
  }
  .nav__list li{width:100%;border-top:1px solid var(--line-dark)}
  .nav__list li:last-child{border-bottom:1px solid var(--line-dark)}

  .nav__link{
    display:block;
    width:100%;
    padding-block:clamp(18px,3.4vw,26px);
    font-size:clamp(1.4rem,5.6vw,2rem);
    font-weight:300;
    letter-spacing:-.01em;
    color:var(--white);
  }
  .nav__link::after{display:none}

  .nav__cta{
    width:100%;
    margin-top:clamp(28px,5vw,44px);
    padding-block:1.25em;
  }
}


/* --------------------------------------------------------------------------
   11. RESPONSIVE — FOOTER
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .footer__inner{grid-template-columns:minmax(0,1fr);gap:36px}
}


/* --------------------------------------------------------------------------
   12. PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .rail{display:none}
}