/* ============================================================================
   AURORA — UN SISTEMA, DUE TINTE                       · grafico · 26 lug 2026
   ----------------------------------------------------------------------------
   Ordine di Dani: basta con tre stili scollegati (aurora chiara, blu elettrico,
   nero piatto). Ogni pagina si costruisce con DUE TINTE della stessa famiglia:

        ALTO  = AURORA NOTTE (blu elettrico) — hero, vortice, titolo
        ↓  passaggio SFUMATO, mai uno stacco netto
        BASSO = AURORA CHIARA (crema) — contenuto, testi, card

   PREFISSO --au- SU TUTTO: la home ha gia' un suo set di variabili dove
   --ink e --gold significano altro (near-black di testo, oro del brand).
   Con il prefisso i due sistemi convivono senza toccarsi.

   USO MINIMO (3 righe):
     <link rel="stylesheet" href="/a/hero.css">
     <section class="au-hero"> … vedi LEGGIMI … </section>
     <script src="/a/hero.js"></script>
   ============================================================================ */

:root{
  /* ---------- TINTA 1 · AURORA NOTTE (blu elettrico) ---------- */
  --au-notte:#0D1120;          /* fondo base della fascia alta                 */
  --au-notte-alta:#16224A;     /* schiarita al centro del gradiente            */
  --au-notte-fonda:#04060E;    /* bordo esterno                                */
  --au-blu:#3F6AF5;            /* blu dei bracci (campionato dalla copertina)  */
  --au-viola:#7C5CFF;          /* viola delle aurore                           */
  --au-teal:#2DD4BF;           /* terza luce                                   */
  --au-testo-notte:#F2F5FF;    /* testo sul blu                                */
  --au-muted-notte:#8F97B8;    /* testo secondario sul blu                     */
  --au-vetro:rgba(255,255,255,.07);      /* card sul blu                       */
  --au-vetro-bordo:rgba(255,255,255,.16);

  /* ---------- TINTA 2 · AURORA CHIARA (crema) ---------- */
  --au-crema:#FAF7F1;          /* fondo della parte bassa                      */
  --au-testo:#33302B;
  --au-muted:#A29A89;
  --au-card:rgba(255,255,255,.78);
  --au-card-bordo:rgba(255,255,255,.85);
  --au-ombra:0 6px 18px rgba(160,140,90,.15);

  /* ---------- ORO: l'unico accento, uguale nelle due tinte ---------- */
  --au-oro:#E5A50A;
  --au-oro-l:#FFD86E;
  --au-su-oro:#4D3D10;         /* testo sopra l'oro: mai bianco                */

  /* ---------- stati (validi in entrambe le tinte) ---------- */
  --au-ok:#3F9E63; --au-warn:#B08409; --au-err:#C75B4E;

  /* ---------- misure ---------- */
  --au-r:20px;                 /* raggio delle superfici                       */
  --au-r-pill:999px;
}

/* ============================================================================
   IL PASSAGGIO — la regola che tiene insieme le due tinte.
   La fascia alta NON finisce con una riga netta: sfuma nel colore di sotto.
   Basta indicare quale colore c'e' sotto con --au-sotto (default: crema).
   ============================================================================ */
.au-alto{
  position:relative;
  background:radial-gradient(120% 95% at 50% 34%,
              var(--au-notte-alta) 0%, var(--au-notte) 42%,
              var(--au-notte-fonda) 74%, var(--au-sotto, var(--au-crema)) 100%);
  color:var(--au-testo-notte);
}
.au-alto::after{                      /* dissolvenza finale verso la parte bassa */
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  pointer-events:none;z-index:1;
  background:linear-gradient(to bottom, transparent, var(--au-sotto, var(--au-crema)));
}
.au-basso{ background:var(--au-crema); color:var(--au-testo); }

/* quando la parte bassa e' a sua volta scura (es. artefatto), basta:
   <section class="au-alto" style="--au-sotto:#0D1120"> … */

/* ============================================================================
   HERO — la fascia alta "cockpit": vortice al centro, comandi ai lati.
   Le colonne laterali sono opzionali: senza, il centro si allarga da solo.
   ============================================================================ */
.au-hero{ min-height:100svh; display:flex; align-items:center; overflow:hidden }
.au-hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.au-hero-dentro{
  position:relative; z-index:2; width:100%; max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:minmax(250px,1fr) minmax(300px,1.2fr) minmax(250px,1fr);
  gap:clamp(16px,2.6vw,42px); align-items:center;
  padding:clamp(14px,2vh,28px) clamp(16px,3vw,40px) clamp(40px,5vh,60px);
}
.au-hero-dentro.senza-lati{ grid-template-columns:minmax(320px,900px); justify-content:center }
.au-centro{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px }
.au-kicker{ font-family:'DM Mono',monospace; font-size:clamp(10px,1.15vw,12.5px);
  letter-spacing:.3em; color:var(--au-muted-notte) }
.au-titolo{ font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; margin:2px 0 0;
  color:#F6F8FF; font-size:clamp(40px,5.4vw,82px); line-height:.9; letter-spacing:.02em;
  text-shadow:0 0 60px rgba(63,106,245,.35), 0 2px 0 rgba(2,4,9,.85) }
.au-sotto{ font-family:'Bebas Neue',Impact,sans-serif; color:var(--au-oro-l);
  letter-spacing:.16em; font-size:clamp(15px,1.7vw,23px); line-height:1.35;
  text-shadow:0 1px 18px rgba(2,4,9,.9) }
.au-lato{ display:flex; flex-direction:column; gap:clamp(12px,1.6vh,18px) }

/* comandi: rettangoli app, grandi, con alone che segue il cursore */
.au-cmd{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:4px;
  width:100%; cursor:pointer; text-align:left; border-radius:var(--au-r);
  text-decoration:none; color:inherit; font:inherit;   /* regge sia <button> sia <a>:
     senza queste tre, usato su <a> il comando esce sottolineato e col colore del link */
  padding:clamp(16px,2.2vh,25px) clamp(16px,1.7vw,23px);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease, border-color .2s ease }
.au-cmd::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 62%) }
.au-cmd:hover::before{ opacity:1 }
.au-cmd:hover{ transform:translateY(-3px) }
.au-cmd:active{ transform:scale(.985) }
.au-cmd b{ font-family:'Bebas Neue',Impact,sans-serif; font-weight:400;
  font-size:clamp(19px,2vw,29px); letter-spacing:.1em; line-height:1; display:block }
.au-cmd i{ font-style:normal; font-size:clamp(12.5px,1.15vw,15.5px); line-height:1.45; opacity:.88; display:block }
.au-cmd.con-icona{ flex-direction:row; align-items:center; gap:16px }
.au-cmd.con-icona .au-testo{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.au-ico{ font-size:clamp(19px,2vw,25px); line-height:1; flex:0 0 auto }
.au-cmd-oro{ border:none; color:var(--au-su-oro);
  background:linear-gradient(160deg, var(--au-oro-l) 0%, #F0B820 55%, #DCA20E 100%);
  box-shadow:0 12px 38px rgba(240,184,32,.34), inset 0 1px 0 rgba(255,255,255,.5) }
.au-cmd-oro::after{ content:""; position:absolute; top:0; bottom:0; width:38%; left:-45%;
  pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation:auLuccichio 5.5s ease-in-out infinite }
@keyframes auLuccichio{ 0%,72%{left:-45%} 100%{left:120%} }
.au-cmd-vetro{ color:#EAEFFF; border:1px solid rgba(255,255,255,.3); background:var(--au-vetro);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14) }
.au-cmd-vetro:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.45) }

/* freccia "scendi" */
.au-scendi{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2 }
.au-scendi span{ display:block; width:14px; height:14px;
  border-right:2px solid var(--au-muted-notte); border-bottom:2px solid var(--au-muted-notte);
  transform:rotate(45deg); animation:auRimbalzo 1.8s infinite }
@keyframes auRimbalzo{ 0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}
                        50%{transform:rotate(45deg) translate(5px,5px);opacity:1} }

@media (max-width:1080px){
  .au-hero-dentro{ grid-template-columns:1fr; gap:20px; padding-bottom:64px }
  .au-centro{ order:1 } .au-lato{ order:2; max-width:620px; width:100%; margin:0 auto }
  .au-titolo{ font-size:clamp(36px,10vw,66px) }
}

/* ============================================================================
   PARTE BASSA — superfici in aurora chiara, per il contenuto sotto l'hero.
   ============================================================================ */
.au-card{ background:var(--au-card); border:1px solid var(--au-card-bordo);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:22px; box-shadow:var(--au-ombra) }
.au-basso a{ color:#B8860B }
.au-pill{ border-radius:var(--au-r-pill); padding:9px 15px; font-size:12.5px;
  background:rgba(255,255,255,.6); color:var(--au-testo); border:none }