/* ==================================================================
   LDL — intestazione della pagina Chi siamo.

   Il fondo blu era piatto e fermo. Qui diventa un campo che respira:
   due aloni ampi che derivano lentamente, una trama di triangoli — il
   marcatore del marchio — che sale impercettibile, e un velo scuro che
   sta SOPRA l'animazione e SOTTO il testo, cosi' il contrasto non
   dipende mai da dove si trovano gli aloni in quel momento.

   Il foglio viene caricato solo da questa pagina: non pesa sulle altre.
   ================================================================== */

.hero-chi{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1200px 680px at 12% -10%, rgba(0,180,205,.20), transparent 60%),
    radial-gradient(900px 620px at 92% 110%, rgba(0,110,150,.24), transparent 62%),
    linear-gradient(162deg,#002C40 0%,#00202E 52%,#001A26 100%),
    #00202E;
  padding-block:clamp(88px,10vw,132px) clamp(72px,8vw,104px);
}

/* --- gli aloni che derivano -------------------------------------- */
.hero-chi .campo{
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(420px 420px at 22% 30%, rgba(0,233,250,.16), transparent 58%),
    radial-gradient(520px 520px at 76% 64%, rgba(0,150,190,.18), transparent 60%),
    radial-gradient(320px 320px at 52% 88%, rgba(0,233,250,.10), transparent 62%);
  animation:chiDeriva 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes chiDeriva{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to  {transform:translate3d(3%,2.5%,0) scale(1.08)}
}

/* --- la trama di triangoli ---------------------------------------
   Un unico triangolo in SVG, ripetuto dal browser e fatto salire
   molto lentamente. Nessuna immagine da scaricare.                 */
.hero-chi .trama{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'>\
<path d='M48 14 L80 70 L16 70 Z' fill='none' stroke='%2300E9FA' stroke-opacity='0.085' stroke-width='1.1'/>\
</svg>");
  background-size:96px 84px;
  animation:chiSale 46s linear infinite;
}
@keyframes chiSale{ from{background-position:0 0} to{background-position:0 -840px} }

/* --- il velo: garantisce il contrasto comunque -------------------- */
.hero-chi::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,rgba(0,26,38,.72) 0%,rgba(0,26,38,.46) 48%,rgba(0,26,38,.20) 100%);
}
.hero-chi > .container{position:relative; z-index:2}

/* --- il testo entra in scena -------------------------------------
   Nessuna classe nascondente nel CSS di base: se le animazioni non
   fossero supportate, il testo resta semplicemente visibile.        */
/* le briciole si fermavano a 6,92:1 nel punto piu' chiaro del ciclo,
   otto centesimi sotto la soglia AAA che il resto del sito rispetta */
.hero-chi .breadcrumbs{color:#C2D6DC;animation:chiSu .7s cubic-bezier(.22,1,.3,1) both}
.hero-chi h1          {animation:chiSu .9s cubic-bezier(.22,1,.3,1) .10s both}
.hero-chi .lead       {animation:chiSu .9s cubic-bezier(.22,1,.3,1) .22s both}
.hero-chi .disc       {animation:chiSu .9s cubic-bezier(.22,1,.3,1) .34s both}
@keyframes chiSu{ from{opacity:0;transform:translate3d(0,18px,0)} to{opacity:1;transform:none} }

.hero-chi h1{max-width:18ch}
.hero-chi .lead{color:#CFE0E6;max-width:62ch}

/* --- le quattro discipline --------------------------------------- */
.hero-chi .disc{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;list-style:none;padding:0}
.hero-chi .disc li{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(0,233,250,.34);border-radius:999px;
  padding:9px 16px 9px 13px;color:#DCEDF1;
  font-family:'Jura',system-ui,sans-serif;font-weight:600;font-size:.88rem;
  background:rgba(255,255,255,.045);
  transition:border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.22,1,.3,1);
}
/* il triangolo del marchio come punto elenco */
.hero-chi .disc li::before{
  content:"";width:0;height:0;flex:none;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--cyan);
  transition:transform .35s cubic-bezier(.22,1,.3,1);
}
@media (hover:hover){
  .hero-chi .disc li:hover{
    border-color:var(--cyan);background:rgba(0,233,250,.10);transform:translateY(-2px);
  }
  .hero-chi .disc li:hover::before{transform:rotate(180deg)}
}

@media(max-width:1000px){
  .hero-chi h1{max-width:none}
  .hero-chi .disc li{font-size:.83rem;padding:8px 13px 8px 11px}
}

/* chi ha chiesto meno movimento non deve vedere nulla muoversi */
@media (prefers-reduced-motion:reduce){
  .hero-chi .campo,
  .hero-chi .trama{animation:none}
  .hero-chi .breadcrumbs,
  .hero-chi h1,
  .hero-chi .lead,
  .hero-chi .disc{animation:none}
  .hero-chi .disc li{transition:none}
  .hero-chi .disc li:hover{transform:none}
}