/* ==========================================================================
   PAGINE PICCOLE (contatti, social) — stesso vocabolario della home
   Quattro ruoli tipografici, non uno di piu':
   display   Pirata One 400, la prima parte solo contorno come nel logo
   titolo    Heebo 900, stretto
   testo     Heebo 400
   etichetta Heebo 400 maiuscolo spaziato
   ========================================================================== */
@font-face{font-family:'Heebo';font-weight:400;font-display:swap;src:url(../fonts/heebo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-weight:400;font-display:swap;src:url(../fonts/heebo-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Heebo';font-weight:900;font-display:swap;src:url(../fonts/heebo-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-weight:900;font-display:swap;src:url(../fonts/heebo-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pirata One';font-weight:400;font-display:swap;src:url(../fonts/pirata-one-400-latin.woff2) format('woff2')}

:root{
  --nero:#0b0b0c;--bianco:#fff;--rosso:#ff0000;--giallo:#ffce00;--grigio:#a29e96;
  --curva:cubic-bezier(.2,.7,.2,1);
  --gut:clamp(16px,6vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;background:var(--nero);color:var(--bianco);
  font:400 17px/1.6 'Heebo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--rosso);outline-offset:4px}
::selection{background:var(--rosso);color:#fff}

/* il noise della hero: la gif animata, sullo sfondo e appena visibile;
   il contenuto sta sopra */
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;background:url(../img/noise.gif)}
main{position:relative;z-index:1}

/* i quattro ruoli */
.eti{font:400 12px/1.4 'Heebo',sans-serif;letter-spacing:.22em;text-transform:uppercase;margin:0}
.display{font:400 clamp(84px,17vw,260px)/.82 'Pirata One',serif;margin:0;letter-spacing:-.01em}
.display .vuoto{color:transparent;-webkit-text-stroke:.028em var(--bianco)}
.titolo{font:900 clamp(26px,3.2vw,46px)/1.05 'Heebo',sans-serif;letter-spacing:-.025em;margin:0}

/* il pulsante: lo stesso della pagina UI/UX. Pieno bianco il principale,
   vuoto con il filo sottile gli altri; al passaggio rimbalza su */
.pulsante{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font:400 15px/1 'Heebo',sans-serif;text-decoration:none;
  padding:.85rem 1.7rem;min-height:50px;border-radius:999px;border:1px solid #fff;background:#fff;color:#000;
  /* la molla: sale oltre e ricade, all'andata e al ritorno */
  transition:transform .55s cubic-bezier(.3,2.1,.5,1),background-color .3s,color .3s,border-color .3s}
.pulsante:hover{transform:translateY(-4px) scale(1.04)}
.pulsante:active{transform:translateY(1px) scale(.97);transition-duration:.12s}
.pulsante--vuoto{background:transparent;color:#fff;border-color:#2b2b33}
.pulsante--vuoto:hover{border-color:#fff}
.pulsante:focus-visible{outline:2px solid #fff;outline-offset:4px}
.pulsanti{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* comparse: sfocate e in salita, come nella home */
/* l'animazione tiene solo la partenza (backwards): finita, lascia l'elemento
   libero, cosi' l'hover dei pulsanti non viene coperto */
.entra{animation:entra .9s var(--curva) backwards;animation-delay:var(--rit,0ms)}
@keyframes entra{from{opacity:0;filter:blur(12px);transform:translateY(18px)}}

@media (prefers-reduced-motion:reduce){
  .entra{animation:none}
  .pulsante{transition:none}
}