/* ============================================================
   Occhialiamo — pagina di manutenzione
   Due design distinti:
   · MOBILE  (< 900px)  → schermo nero immersivo, composizione verticale
   · DESKTOP (>= 900px) → split-screen: pannello brand nero + pannello visivo chiaro
   ============================================================ */

/* ---------- Token brand ---------- */
:root{
  --nero:        #000000;
  --nero-soft:   #0d0d0d;
  --grigio:      #f4f4f4;   /* grigio di sfondo del sito */
  --grigio-mid:  #ececec;
  --bianco:      #ffffff;
  --testo-soft:  rgba(255,255,255,.62);
  --linea:       rgba(255,255,255,.14);

  --font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Arial, sans-serif;

  --sp: clamp(24px, 6vw, 64px);
}

/* ---------- Reset essenziale ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ -webkit-text-size-adjust:100% }

body{
  font-family:var(--font);
  background:var(--nero);
  color:var(--bianco);
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }

a{ color:inherit }


/* ============================================================
   1) DESIGN MOBILE  —  default (mobile first)
   Schermo nero pieno, logo al centro, tipografia grande,
   contatto ancorato in basso, alone luminoso di fondo.
   ============================================================ */

.stage{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.brand{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--sp) + env(safe-area-inset-top)) var(--sp)
          calc(var(--sp) + env(safe-area-inset-bottom));
  background:var(--nero);
  overflow:hidden;
}

/* alone radiale morbido dietro al contenuto (solo mobile) */
.brand::before{
  content:"";
  position:absolute;
  top:22%; left:50%;
  width:150vw; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.04) 32%,
      transparent 66%);
  pointer-events:none;
}

.brand__inner{
  position:relative;
  width:100%;
  max-width:520px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo{
  width:min(72vw, 300px);
  height:auto;
  animation:fade-up .7s cubic-bezier(.22,.8,.28,1) both;
}

.eyebrow{
  margin-top:36px;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--testo-soft);
  animation:fade-up .7s cubic-bezier(.22,.8,.28,1) .08s both;
}

.title{
  margin-top:14px;
  font-size:clamp(30px, 9.5vw, 46px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.02em;
  animation:fade-up .7s cubic-bezier(.22,.8,.28,1) .16s both;
}
.title em{
  font-style:normal;
  font-weight:300;
  display:block;
  color:var(--testo-soft);
}

.lead{
  margin-top:20px;
  font-size:clamp(15px, 4.1vw, 17px);
  line-height:1.65;
  font-weight:300;
  color:var(--testo-soft);
  max-width:34ch;
  animation:fade-up .7s cubic-bezier(.22,.8,.28,1) .24s both;
}
.lead strong{ color:var(--bianco); font-weight:500 }

/* tre puntini che pulsano = "lavori in corso" */
.dots{
  margin-top:32px;
  display:flex;
  gap:9px;
  animation:fade-up .7s cubic-bezier(.22,.8,.28,1) .32s both;
}
.dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--bianco);
  opacity:.28;
  animation:pulse 1.5s ease-in-out infinite;
}
.dots span:nth-child(2){ animation-delay:.22s }
.dots span:nth-child(3){ animation-delay:.44s }

.contact{
  margin-top:38px;
  padding-top:26px;
  width:100%;
  max-width:320px;
  border-top:1px solid var(--linea);
  animation:fade-up .7s cubic-bezier(.22,.8,.28,1) .4s both;
}
.contact__label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.contact__link{
  display:inline-block;
  margin-top:10px;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .25s ease, opacity .25s ease;
}
.contact__link:hover,
.contact__link:focus-visible{ border-bottom-color:var(--bianco) }

/* pulsante WhatsApp */
.wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:22px;
  padding:13px 24px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.wa__icon{ width:19px; height:19px; flex:none }
.wa:hover,
.wa:focus-visible{
  background:var(--bianco);
  color:var(--nero);
  border-color:var(--bianco);
}

/* focus visibile su tastiera */
.wa:focus-visible,
.contact__link:focus-visible{
  outline:2px solid var(--bianco);
  outline-offset:4px;
}

/* il pannello illustrato non esiste sul design mobile */
.art{ display:none }

/* telefoni bassi / landscape: composizione compatta, niente scroll */
@media (max-width:899px) and (max-height:640px){
  .logo{ width:min(52vw,210px) }
  .eyebrow{ margin-top:20px }
  .title{ margin-top:8px; font-size:clamp(24px,6vw,32px) }
  .lead{ margin-top:12px; font-size:14px; line-height:1.5 }
  .dots{ margin-top:16px }
  .contact{ margin-top:20px; padding-top:16px }
  .contact__link{ font-size:15px }
  .wa{ margin-top:14px; padding:13px 20px; font-size:14px }
  .wa__icon{ width:17px; height:17px }
}


/* ============================================================
   2) DESIGN DESKTOP  —  >= 900px
   Sempre nero, composizione centrata su un unico asse:
   illustrazione a filo, logo, testo e contatti impilati al centro.
   ============================================================ */

@media (min-width:900px){

  .stage{
    justify-content:center;
    align-items:center;
    min-height:100svh;
    padding:clamp(40px,6vh,72px) 48px;
  }

  /* --- blocco brand: non piu' colonna, solo contenuto centrato --- */
  .brand{
    flex:0 0 auto;
    width:100%;
    padding:0;
    background:none;
    overflow:visible;
  }

  /* alone ancorato al viewport: piu' ampio, non genera scrollbar */
  .brand::before{
    position:fixed;
    top:46%;
    width:min(1180px,130vh);
    background:radial-gradient(circle,
        rgba(255,255,255,.09) 0%,
        rgba(255,255,255,.035) 34%,
        transparent 66%);
  }

  .brand__inner{ max-width:640px }

  .logo{ width:clamp(230px,19vw,286px) }

  .eyebrow{
    margin-top:clamp(22px,4vh,44px);
    position:relative;
    font-size:11px;
    letter-spacing:.3em;
  }
  .eyebrow::before,
  .eyebrow::after{            /* trattini decorativi simmetrici */
    content:"";
    position:absolute;
    top:50%;
    width:34px; height:1px;
    background:rgba(255,255,255,.4);
  }
  .eyebrow::before{ right:calc(100% + 18px) }
  .eyebrow::after { left:calc(100% + 18px) }

  .title{
    margin-top:clamp(12px,2vh,20px);
    font-size:clamp(36px,min(3.4vw,6.2vh),54px);
    line-height:1.06;
  }

  .lead{
    margin-top:clamp(14px,2.6vh,24px);
    font-size:17px;
    max-width:46ch;
  }

  .dots{ margin-top:clamp(18px,3.5vh,36px) }

  .contact{
    margin-top:clamp(20px,4vh,42px);
    padding-top:clamp(16px,2.8vh,28px);
    max-width:360px;
  }

  .wa{
    margin-top:clamp(14px,2.4vh,24px);
    padding:14px 28px;
    font-size:15px;
  }

  /* --- illustrazione a filo bianca, sopra al logo --- */
  .art{
    display:block;
    order:-1;                 /* precede il blocco brand */
    color:var(--bianco);
    margin-bottom:clamp(18px,3.4vh,40px);
  }

  /* l'illustrazione si riduce anche in base all'altezza dello schermo */
  .art__frame{ width:clamp(200px,min(20vw,30vh),300px) }

  .glasses{
    width:100%;
    height:auto;
    overflow:visible;
    animation:float 7s ease-in-out infinite;
  }

  /* tracciamento progressivo delle linee al caricamento */
  .glasses .lens,
  .glasses .bridge,
  .glasses .temple{
    stroke-dasharray:640;
    stroke-dashoffset:640;
    animation:draw 1.6s cubic-bezier(.65,0,.35,1) forwards;
  }
  .glasses .temple { animation-delay:.10s }
  .glasses .lens--l{ animation-delay:.35s }
  .glasses .bridge { animation-delay:.75s }
  .glasses .lens--r{ animation-delay:.95s }
}

/* desktop bassi (es. 1280x720): composizione piu' raccolta */
@media (min-width:900px) and (max-height:780px){
  .logo{ width:clamp(190px,15vw,220px) }
  .lead{ font-size:16px }
  .wa{ padding:13px 24px; font-size:14px }
}

/* schermi molto ampi */
@media (min-width:1600px){
  .brand__inner{ max-width:680px }
  .art__frame{ width:340px }
}

/* ============================================================
   Animazioni
   ============================================================ */
@keyframes fade-up{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}
@keyframes pulse{
  0%,100%{ opacity:.22; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.35) }
}
@keyframes draw{
  to{ stroke-dashoffset:0 }
}
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-12px) }
}

/* Rispetta le preferenze di accessibilità */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .glasses .lens,.glasses .bridge,.glasses .temple{ stroke-dashoffset:0 }
}