/* =========================================================
   HYPE ARENA — Coming Soon
   Palette e tipografia dal brand book.
   ========================================================= */

@font-face{font-family:'Sztos';src:url('../fonts/Sztos-BlackCondensed.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Sztos';src:url('../fonts/Sztos-BoldCondensed.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --lime:#D8F229; --lime-dk:#BED80D;
  --rosso:#FF3D1F; --rosso-dk:#EB1F00;
  --ant:#1E2422; --ant-dk:#171C1A;
  --carta:#F2F0EB;
  --display:'Sztos','Arial Narrow',Impact,sans-serif;
  --body:'Sora',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
.hype-body{background:var(--ant-dk);overflow:hidden}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.hype{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate;
  font-family:var(--body);color:var(--ant)}

/* ---------- sfondo ---------- */
.hype-bg,.hype-bg-fallback{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hype-bg-fallback{background-size:cover;background-position:center}
.hype-bg{display:block}
/* la riserva resta sempre sotto: il canvas la copre quando disegna, ma se
   perde un frame o il contesto WebGL non si vede mai lo sfondo vuoto */
.hype-bg{position:absolute;inset:0;z-index:1}
.hype-bg-fallback{z-index:0}
/* griglia di piccoli segni: cella 48px, come i due shader "grid" del file
   (forma diamond ritagliata alla cella: restano gli angoli scuri) */
.hype-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.26;
  background-size:48px 48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='%231E2422'%3E%3Crect x='22.4' y='23.65' width='3.2' height='.7'/%3E%3Crect x='23.65' y='22.4' width='.7' height='3.2'/%3E%3C/g%3E%3C/svg%3E")}
.hype-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(68% 58% at 50% 46%, rgba(30,36,34,.58) 0%, rgba(30,36,34,.30) 46%, rgba(30,36,34,0) 78%)}
.hype-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* Velo lime sopra lo sfondo animato: schiarisce la fiamma e stacca i testi
   delle schermate, header compresa. L'intensita' si regola dal pannello
   (Leggibilita' -> Velo lime): arriva come opacity in linea sull'elemento. */
.hype-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--lime)}

/* colore del logo e della scritta in alto, scelto dal pannello
   (Leggibilita' -> Colore delle scritte in alto) */
.hype[data-railcol="nero"] {--rail-col:var(--ant-dk);--ico:var(--ant-dk); --ico-hov:var(--rosso)}
.hype[data-railcol="rosso"]{--rail-col:var(--rosso); --ico:var(--rosso-dk);--ico-hov:var(--ant-dk)}
.hype[data-railcol="lime"] {--rail-col:var(--lime);  --ico:var(--lime);    --ico-hov:var(--ant-dk)}

/* Sfondo sfocato progressivamente sulle prime due schermate:
   nel file e' un LAYER_BLUR progressive sul rettangolo, raggio 24,8,
   nitido al 22,1% dell'altezza e pieno all'84%. */
.hype-bgblur{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 22.1%,#000 84%);
          mask-image:linear-gradient(to bottom,transparent 22.1%,#000 84%)}

/* ---------- schermate ---------- */
.hype-screen{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:clamp(18px,2.6vw,40px) clamp(20px,3.4vw,64px);
  transition:opacity .55s cubic-bezier(.45,0,.55,1)}
.hype-screen[hidden]{display:none}
.hype-screen.is-out{opacity:0;pointer-events:none}

/* il velo di sfocatura e' posizionato, quindi dipingerebbe sopra ai blocchi
   in flusso: il contenuto va alzato di un livello */
.hype-loadcore,.hype-logocore,.hype-follow,.hype-foot,.hype-rail,.hype-main{position:relative;z-index:1}

/* ---------- rail ---------- */
.hype-rail{display:flex;justify-content:space-between;align-items:center;flex:0 0 auto}
.hype-logo{color:var(--rail-col,var(--rosso));display:block;line-height:0}
.hype-logo svg{width:clamp(76px,6vw,104px);height:auto}
.hype-rail-txt{font-weight:600;font-size:clamp(10px,1vw,15px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--rail-col,var(--rosso))}

/* ---------- caricamento ---------- */
.hype-loadcore{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(10px,1.6vh,22px)}
.hype-shard{width:clamp(120px,13vw,200px);height:auto;display:block;overflow:visible}
.hype-shard-off{fill:var(--ant);opacity:.22}
.hype-shard-fill{fill:var(--rosso)}
.hype-shard--full{fill:var(--rosso);width:clamp(110px,11vw,170px)}
.hype-pct{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,70px);
  line-height:1;letter-spacing:-.035em;color:var(--rosso-dk);font-variant-numeric:tabular-nums}

/* ---------- schermata logo ---------- */
.hype-logocore{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.hype-biglogo{color:var(--rosso);line-height:0;display:block;
  opacity:0;transform:translateY(18px)}
.hype-biglogo svg{width:clamp(240px,21vw,404px);height:auto}
.is-ready .hype-biglogo{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}

/* ---------- marquee ---------- */
/* Il contenitore e' ancorato in basso e ha una fascia di respiro SOTTO il
   testo: il filter:blur() sborda oltre il riquadro e overflow:hidden lo
   taglierebbe di netto, disegnando una riga orizzontale. Con la fascia, il
   taglio finisce fuori schermo e il fondo del testo resta coperto dal footer. */
.hype-marquee{position:absolute;left:0;right:0;bottom:-12vh;padding-bottom:16vh;
  z-index:-1;pointer-events:none;overflow:hidden;line-height:0}
.hype-marquee-track{position:relative;display:flex;width:max-content;
  animation:hypeSlide 42s linear infinite;will-change:transform}
/* Blur progressivo del file (Y start 17,37% raggio 0 -> Y end 62,57% raggio 79).
   Sul web non esiste come proprieta: due tracce identiche in dissolvenza
   incrociata, con maschere verticali opposte agli stessi stop. La nitida
   DEVE sparire dove entra la sfocata, altrimenti resta visibile sotto e il
   basso non diventa mai morbido. */
.hype-marquee-track{
  -webkit-mask-image:linear-gradient(to bottom,#000 17.37%,transparent 62.57%);
          mask-image:linear-gradient(to bottom,#000 17.37%,transparent 62.57%)}
.hype-marquee-track--blur{position:absolute;top:0;left:0;right:auto;bottom:auto;
  filter:blur(clamp(16px,4.1vw,79px));
  -webkit-mask-image:linear-gradient(to bottom,transparent 17.37%,#000 62.57%);
          mask-image:linear-gradient(to bottom,transparent 17.37%,#000 62.57%)}
.hype-marquee span{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(240px,58vw,1120px);line-height:.755;letter-spacing:-.015em;
  color:var(--lime);padding-right:.1em;white-space:nowrap}
@keyframes hypeSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- pagina ---------- */
.hype-main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(8px,1.2vh,16px)}
.hype-eyebrow{margin:0 0 clamp(4px,1vh,10px);color:var(--rosso);font-weight:700;
  font-size:clamp(10px,.95vw,15px);letter-spacing:.16em;text-transform:uppercase}
.hype-title{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(46px,7.4vw,118px);line-height:.88;letter-spacing:-.035em;color:var(--ant)}
.hype-title span{display:block}
.hype-lead{margin:clamp(10px,1.6vh,20px) 0 clamp(14px,2.2vh,26px);max-width:34ch;
  font-size:clamp(13px,1.1vw,18px);line-height:1.5;color:var(--ant)}

/* ---------- form ---------- */
.hype-form{display:flex;gap:8px;width:min(564px,100%)}
.hype-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hype-field{flex:1 1 auto;min-width:0}
.hype-field input{width:100%;height:64px;border-radius:10px;
  border:1px solid var(--lime-dk);background:rgba(30,36,34,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:0 20px;font-family:var(--body);font-size:15px;color:var(--carta);
  transition:border-color .18s ease,box-shadow .18s ease}
.hype-field input::placeholder{color:rgba(242,240,235,.78)}
.hype-field input:focus{outline:none;border-color:var(--lime);border-width:2px;
  box-shadow:0 0 0 4px rgba(216,242,41,.18)}
.hype-form.is-error .hype-field input{border-color:var(--rosso);border-width:2px}
.hype-submit{flex:0 0 auto;height:64px;padding:0 26px;border:1px solid var(--lime-dk);
  border-radius:10px;background:var(--rosso);color:var(--lime);cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;transition:transform .14s ease,filter .18s ease}
.hype-submit:hover{filter:brightness(1.08)}
.hype-submit:active{transform:scale(.97)}
.hype-submit[disabled]{opacity:.6;cursor:default}

.hype-msg{margin:10px 0 0;min-height:20px;font-size:13px;line-height:1.4;color:var(--rosso);font-weight:600}
.hype-msg.is-ok{color:var(--ant);background:rgba(30,36,34,.85);color:var(--lime);
  display:inline-block;padding:10px 18px;border-radius:10px;border:1px solid var(--lime-dk);
  letter-spacing:.14em;text-transform:uppercase;font-size:14px}

/* ---------- social + footer ---------- */
.hype-follow{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:clamp(12px,2.2vh,26px)}
/* nel file il blocco social chiude a 978 e il footer apre a 1077: 99px di stacco */
.hype-screen--load .hype-follow,
.hype-screen--logo .hype-follow{margin-bottom:clamp(44px,8.6vh,99px)}
.hype-follow-lab{font-weight:600;font-size:clamp(9px,.8vw,12px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--rail-col,var(--rosso))}
.hype-social{display:flex;gap:18px;align-items:center}
.hype-social a{color:var(--ico,var(--rosso-dk));line-height:0;border-radius:6px;
  transition:transform .16s ease,color .16s ease}
.hype-social a:hover,
.hype-social a:focus-visible{color:var(--ico-hov,var(--ant));transform:translateY(-2px)}
.hype-social a:focus-visible{outline:2px solid var(--ico-hov,var(--ant));outline-offset:4px}
.hype-social svg{width:26px;height:26px}

.hype-foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin:0 calc(-1 * clamp(20px,3.4vw,64px)) calc(-1 * clamp(18px,2.6vw,40px));
  padding:16px clamp(20px,3.4vw,64px);
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ant-dk);
  font-size:clamp(10px,.82vw,13px);color:var(--lime)}
.hype-foot a{color:var(--lime)}
.hype-foot-mark{color:var(--rosso);line-height:0}
.hype-foot-mark svg{width:26px;height:26px}

/* ---------- entrate ---------- */
[data-in]{opacity:0;transform:translateY(22px)}
.is-ready [data-in]{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.is-ready [data-in="1"]{transition-delay:.06s}
.is-ready [data-in="2"]{transition-delay:.14s}
.is-ready [data-in="3"]{transition-delay:.22s}
.is-ready [data-in="4"]{transition-delay:.34s}
.is-ready [data-in="5"]{transition-delay:.46s}
.is-ready [data-in="6"]{transition-delay:.58s}
.hype-shard--full{opacity:0;transform:scale(.9) translateY(18px)}
.is-ready .hype-shard--full{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .hype-screen{padding:16px 18px}
  .hype-form{flex-direction:column;gap:10px}
  .hype-field input,.hype-submit{height:56px;width:100%}
  .hype-marquee{opacity:.4}
  .hype-foot{flex-direction:column;gap:8px;text-align:center}
  .hype-foot-mark{display:none}
  .hype-lead{max-width:30ch}
  /* su mobile il titolo va in lime */
  .hype-title{color:var(--lime)}

  /* Stacco fisso sotto le icone social.
     Senza questo, su telefono il contenuto centrato sborda dal suo
     riquadro e le icone finiscono sotto la barra scura del footer.
     min-height:0 toglie il blocco che impedisce a un elemento flex
     di stringersi sotto la misura del suo contenuto. */
  .hype-main{min-height:0;padding-bottom:28px}
  .hype-follow{margin-top:14px}
  .hype-screen--load .hype-follow,
  .hype-screen--logo .hype-follow{margin-bottom:28px}
}

/* telefoni corti (iPhone SE e simili): il verticale si stringe,
   altrimenti nemmeno i 28px di stacco bastano */
@media (max-width:860px) and (max-height:740px){
  .hype-title{font-size:clamp(38px,11.4vw,58px)}
  .hype-lead{margin:6px 0 12px;font-size:13px}
  .hype-eyebrow{margin-bottom:4px;font-size:10px}
  .hype-form{gap:8px}
  .hype-field input,.hype-submit{height:50px}
  .hype-main{gap:4px}
  .hype-social svg{width:23px;height:23px}
  .hype-social{gap:16px}
}

/* schermi bassi (16:9 e portatili): si stringe in verticale,
   altrimenti il footer finisce sotto la piega */
@media (min-width:861px) and (max-height:860px){
  .hype-screen{padding-top:clamp(14px,2vw,28px);padding-bottom:clamp(14px,2vw,28px)}
  .hype-main{gap:4px}
  .hype-shard--full{width:clamp(84px,8vw,128px)}
  .hype-title{font-size:clamp(40px,5.6vw,88px)}
  .hype-lead{margin:8px 0 14px;font-size:clamp(12px,1vw,16px)}
  .hype-eyebrow{margin-bottom:6px}
  .hype-field input,.hype-submit{height:56px}
  .hype-follow{margin-top:clamp(8px,1.4vh,18px);gap:7px}
  .hype-social svg{width:22px;height:22px}
  .hype-foot{padding:11px clamp(20px,3.4vw,64px)}
  .hype-screen--load .hype-follow,
  .hype-screen--logo .hype-follow{margin-bottom:clamp(28px,6vh,70px)}
}

@media (prefers-reduced-motion:reduce){
  .hype-marquee-track{animation:none}
  [data-in]{opacity:1;transform:none}
}