/* Lettera Dylog — base + reveal + hover/focus (stili strutturali inline nel markup, fedeli al design dc) */

/* ---------- font self-hosted (variabili, subset latin — niente richieste a Google, GDPR-clean) ---------- */
@font-face{
  font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../assets/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:#09090D; color:#FFFFFF; font-family:'Manrope', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
::selection{ background:#3B5BFF; color:#fff; }
/* #5570FF (non #3B5BFF) per testo blu su dark: 4.87:1, AA; il blu brand resta su fondi/dischi */
a{ color:#5570FF; }

/* ---------- reveal (dal runtime dc: opacity 0 + translateY 26px → in; gated su html.js così senza JS il contenuto resta visibile) ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
html.js [data-reveal].is-on{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- hover (da style-hover del design dc; base della pill qui e non inline, altrimenti l'inline vince sull'hover)
   gating su hover reale: su touch l'hover scatta al tap e resta appiccicato ---------- */
.cta-pill{ background:#3B5BFF; color:#FFFFFF; }
@media (hover: hover) and (pointer: fine){
  a:hover{ color:#2F4FF0; }
  #video-play:hover .play-disc{ transform:translateY(-2px) scale(1.04); }
  .cta-pill:hover{ transform:translateY(-2px); background:#2F4FF0; color:#FFFFFF; }
}

/* ---------- feedback al press (touch e mouse) ---------- */
.cta-pill:active{ transform:scale(0.97); }
#video-play:active .play-disc{ transform:scale(0.97); }

/* ---------- focus visibile (tastiera) ---------- */
a:focus-visible, button:focus-visible{ outline:2px solid #5570FF; outline-offset:4px; border-radius:6px; }
.cta-pill:focus-visible{ outline-offset:6px; border-radius:999px; }
/* il bottone play copre tutto il frame (overflow:hidden taglierebbe l'outline): ring sul disco */
#video-play:focus-visible{ outline:none; }
#video-play:focus-visible .play-disc{ outline:3px solid #fff; outline-offset:4px; }

/* ---------- ritmo verticale mobile ----------
   Le clamp del design usano vh: su schermi alti e stretti restano da desktop
   (93/118px di stacchi con titoli dimezzati). Qui la scala ~60%.
   !important necessario: gli stili strutturali sono inline, fedeli al dc. */
@media (max-width: 640px){
  main section:nth-of-type(1){ padding-top:44px !important; padding-bottom:64px !important; }
  main section:nth-of-type(1) p[data-reveal]{ margin-bottom:30px !important; }
  main section:nth-of-type(1) h1 + p{ margin-top:22px !important; }
  main section:nth-of-type(2){ padding-bottom:72px !important; }
  main section:nth-of-type(3){ padding-bottom:72px !important; }
  main section:nth-of-type(3) > div{ padding:36px 22px !important; }
  main section:nth-of-type(3) > div > p{ margin-bottom:36px !important; }
  main section:nth-of-type(3) > div > div{ gap:34px !important; }
  main section:nth-of-type(3) > div > div > div{ padding-top:20px !important; }
  main section:nth-of-type(4){ padding-bottom:72px !important; }
  main section:nth-of-type(4) > div > div:nth-of-type(1){ margin-top:28px !important; }
  main section:nth-of-type(4) > div > div:nth-of-type(2){ margin-top:52px !important; }
  footer{ padding-bottom:40px !important; }
}