/* ============================================================
   IL MARCHIO — Hupla (`core/marchio.js`)

   Il carattere del nome, il simbolo e il suo movimento. È un foglio
   condiviso: il marchio sta nel guscio, sulla porta, nella console.

   **Come si muove.** Da sinistra a destra, a scaglioni di
   `--motion-stagger`, con un rimbalzo piccolo (`--ease-back`) e mai
   rotazioni: il simbolo è una timeline. La barra neutra arriva per
   ultima, perché è il lavoro che sta per entrare.
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;
  src:url('../assets/fonts/bricolage-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:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;
  src:url('../assets/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}

/* ---- il simbolo ---- */
.brand-mark{background:none;border-radius:0;box-shadow:none;color:inherit;}
.brand-mark .hp-mark{width:100%;height:100%;overflow:visible;}
.hp-s1{stop-color:var(--primary);}
.hp-s2{stop-color:var(--amber);}
.hp-b2{opacity:.7;}
.hp-b3{fill:var(--dim);}
.hp-b{transform-box:fill-box;transform-origin:left center;}

/* ---- il nome: minuscolo, Bricolage ExtraBold ---- */
.brand-name{font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.045em;text-transform:lowercase;line-height:1;}

/* ---- intro: le barre si pianificano una dopo l'altra ---- */
/* Lento e morbido: poco più di un secondo per barra, una curva che
   atterra senza rimbalzo, e un filo di dissolvenza perché la barra non
   «scatti» fuori dal nulla. */
.hp-intro .hp-b{animation:hp-grow 1.1s var(--ease-out) both;}
.hp-intro .hp-b2{animation-delay:.22s;}
.hp-intro .hp-b3{animation-delay:.44s;}
@keyframes hp-grow{from{transform:scaleX(0);opacity:0;}40%{opacity:1;}}

/* ---- passarci sopra: la linea di oggi, andata e ritorno ----
   La muove `marchioOggiVia()` in `core/marchio.js`; qui solo le tinte.
   Il riempimento è `--primary-deep`, l'arancione che di notte non si
   schiarisce: sopra al gradiente deve restare «lavoro fatto». */
.hp-oggi{pointer-events:none;}
.hp-oggi .hp-f{fill:var(--primary-deep);opacity:.55;}
.hp-linea{fill:var(--text);opacity:0;transition:opacity .25s ease .2s;}
.hp-oggi.on .hp-linea{opacity:1;transition-delay:0s;}

/* ---- il timer che corre: le barre respirano, a turno ---- */
.hp-live .hp-b1{animation:hp-lit1 4.2s ease-in-out infinite;}
.hp-live .hp-b2{animation:hp-lit2 4.2s ease-in-out infinite;}
.hp-live .hp-b3{animation:hp-lit3 4.2s ease-in-out infinite;}
@keyframes hp-lit1{0%,100%{opacity:.55;}12%,40%{opacity:1;}}
@keyframes hp-lit2{0%,100%{opacity:.4;}25%,50%{opacity:.85;}}
@keyframes hp-lit3{0%,100%{opacity:.6;}8%,32%{opacity:1;}}

/* ---- il caricamento del primo avvio ---- */
.hp-load .hp-b{animation:hp-resched 2.2s var(--ease-inout) infinite;}
.hp-load .hp-b2{animation-delay:.25s;}
.hp-load .hp-b3{animation-delay:.5s;}

/* ---- l'attesa del primo avvio (`index.html`) ----
   Solo finché l'app non sa chi sei (`jt-avvio`), e solo se l'attesa
   dura: comparire dopo tre decimi evita il lampo sugli avvii veloci. */
.hp-splash{display:none;}
body.jt-avvio .hp-splash{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:var(--bg);pointer-events:none;
  animation:hp-splash-in .4s var(--ease-out) .3s both;}
.hp-splash .brand-mark{width:72px;height:72px;}
@keyframes hp-splash-in{from{opacity:0;}}
@keyframes hp-resched{0%,100%{transform:scaleX(1);}50%{transform:scaleX(.35);}}

@media (prefers-reduced-motion:reduce){
  .hp-intro .hp-b,.hp-live .hp-b,.hp-load .hp-b,body.jt-avvio .hp-splash{animation:none;}
}