/* ==========================================================================
   Solar CMA, HERO: SFONDO + CONTRATTO RUNTIME.
   Proprietario: sfondo hero, effetti runtime (pausa fuori viewport, scroll-linked).

   Contratto con site.js (scritto sulla .hero):
     .is-ready   font pronti + prima paint: parte la coreografia d'ingresso
     .is-paused  hero fuori viewport o tab nascosta: tutte le animazioni in pausa
     --hp        0..1, quanto la hero e' scrollata via (0 = tutta in vista)
     --px --py   puntatore -1..1 (lerp)
     --scene-x --scene-y --scene-w   centro e larghezza della scena, in px
                 (fallback CSS: 79% 50% desktop, come la scena originale)

   Strati (dal fondo): mesh statica, deriva lenta, luce che sorge, orbite fantasma
   (SVG), meridiani sulle 6 colonne, vignetta + dissolvenza, grana statica.
   Animazioni: solo transform/scale/opacity, 2 strati promossi (deriva, luce).
   Nessun filter, nessun backdrop-filter, nessun background-position animato.
   ========================================================================== */

/* --- Pausa globale: vale per tutto cio' che sta dentro la hero (anche A e B) --- */
.hero.is-paused *,
.hero.is-paused *::before,
.hero.is-paused *::after{animation-play-state:paused!important}

.hero>.hero-bg{
  --hb-x:var(--scene-x,79%);            /* centro della scena */
  --hb-y:var(--scene-y,50%);
  --hb-r:var(--scene-w,520px);          /* larghezza della scena: le orbite scalano con lei */
  --hb-g:max(4.5%,calc((100% - 1480px) / 2));   /* margine della griglia (come .hero) */
  --hb-ease:var(--ease-out,cubic-bezier(.22,1,.36,1));
  --hb-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .14 0 0 0 0 .28 0 0 0 1 -.34'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  position:absolute;z-index:0;inset:0;pointer-events:none;overflow:clip;
}
.hero-bg>span,.hero-bg>svg{position:absolute;display:block;pointer-events:none}

/* --------------------------------------------------------------------------
   1. Mesh: lavaggio luminoso a piu' strati (statico, tutto traslucido: il
      bordo alto si fonde con lo sfondo della pagina sotto l'header)
   -------------------------------------------------------------------------- */
.hb-mesh{
  inset:0;
  background:
    radial-gradient(56% 64% at var(--hb-x) var(--hb-y),rgba(255,236,150,.4),rgba(255,243,176,.14) 48%,transparent 76%),
    radial-gradient(48% 58% at 2% 104%,rgba(25,180,236,.22),transparent 70%),
    radial-gradient(36% 46% at 102% 102%,rgba(34,179,107,.2),transparent 72%),
    radial-gradient(38% 36% at 30% 24%,rgba(25,180,236,.09),transparent 74%),
    radial-gradient(46% 70% at 17% 54%,rgba(255,255,255,.72),transparent 72%);
}

/* --------------------------------------------------------------------------
   2. Deriva: un grande strato di macchie di colore che scivola lentissimo
      (solo transform; parallasse puntatore/scroll con la proprieta' translate)
   -------------------------------------------------------------------------- */
.hb-drift{
  inset:-10% -7%;
  background:
    radial-gradient(34% 40% at 16% 34%,rgba(25,180,236,.2),transparent 70%),
    radial-gradient(30% 38% at 90% 84%,rgba(34,179,107,.17),transparent 70%),
    radial-gradient(26% 30% at 58% 62%,rgba(255,212,38,.1),transparent 70%),
    radial-gradient(22% 28% at 44% 92%,rgba(22,70,201,.07),transparent 70%);
  translate:calc(var(--px,0) * -9px) calc(var(--py,0) * -6px + var(--hp,0) * -28px);
  will-change:transform;
  animation:hb-drift 52s ease-in-out infinite alternate;
}
@keyframes hb-drift{
  from{transform:translate3d(-2.4%,1.4%,0) scale(1)}
  to{transform:translate3d(2.8%,-1.8%,0) scale(1.07)}
}

/* --------------------------------------------------------------------------
   3. Luce che sorge dietro la scena
   -------------------------------------------------------------------------- */
.hb-sun{
  /* ellisse piu' larga che alta: il bagliore si spegne prima del bordo alto della hero (niente taglio) */
  left:calc(var(--hb-x) - var(--hb-r) * 1.15);
  top:calc(var(--hb-y) - var(--hb-r) * .66);
  width:calc(var(--hb-r) * 2.3);height:calc(var(--hb-r) * 1.32);
  background:radial-gradient(closest-side,
    rgba(255,252,232,.98) 0,rgba(255,238,142,.8) 20%,rgba(255,222,92,.46) 42%,
    rgba(255,226,140,.17) 62%,rgba(190,236,246,.1) 80%,rgba(190,236,246,0) 100%);
  translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -9px + var(--hp,0) * -64px);
  will-change:transform;
  transition:opacity 2.6s var(--hb-ease),transform 3.4s var(--hb-ease);
  animation:hb-breathe 15s ease-in-out infinite alternate;
}
@keyframes hb-breathe{from{scale:1}to{scale:1.08}}
/* con JS: parte sotto la scena e sale quando i font sono pronti (.is-ready). Senza JS: gia' al suo posto */
html.js .hero:not(.is-ready) .hb-sun{opacity:0;transform:translate3d(0,24%,0) scale(.78)}

/* --------------------------------------------------------------------------
   4. Orbite fantasma (SVG centrato sulla scena) e meridiani
   -------------------------------------------------------------------------- */
.hb-orbits{
  left:calc(var(--hb-x) - var(--hb-r) * 1.6);
  top:calc(var(--hb-y) - var(--hb-r) * 1.6);
  width:calc(var(--hb-r) * 3.2);height:calc(var(--hb-r) * 3.2);
  overflow:visible;
}
.hb-orbits circle{vector-effect:non-scaling-stroke}
/* dissolvenza in alto: gli archi non si interrompono sul bordo della hero */
.hb-orbits{
  -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--hb-r) * 1.6 - var(--hb-y)),#000 calc(var(--hb-r) * 1.6 - var(--hb-y) + 130px));
          mask-image:linear-gradient(180deg,transparent calc(var(--hb-r) * 1.6 - var(--hb-y)),#000 calc(var(--hb-r) * 1.6 - var(--hb-y) + 130px));
}

.hb-lines{
  top:0;bottom:0;left:var(--hb-g);right:var(--hb-g);
  border-right:1px solid rgba(11,36,71,.06);
  background:repeating-linear-gradient(90deg,rgba(11,36,71,.06) 0 1px,transparent 1px 16.6667%);
  -webkit-mask-image:linear-gradient(180deg,transparent 3%,#000 26%,#000 66%,transparent 97%),linear-gradient(90deg,rgba(0,0,0,.4),#000 56%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,transparent 3%,#000 26%,#000 66%,transparent 97%),linear-gradient(90deg,rgba(0,0,0,.4),#000 56%);
          mask-composite:intersect;
}

/* --------------------------------------------------------------------------
   5. Vignetta morbida + dissolvenza verso la sezione chiara successiva
   -------------------------------------------------------------------------- */
.hb-vig{
  inset:0;
  background:
    linear-gradient(180deg,rgba(251,254,255,0) 70%,rgba(251,254,255,.92) 96%,var(--paper,#fbfeff) 100%),
    radial-gradient(130% 100% at 50% 42%,transparent 58%,rgba(7,27,58,.055) 100%);
}

/* --------------------------------------------------------------------------
   6. Grana statica sottile (si dissolve ai bordi, niente taglio netto)
   -------------------------------------------------------------------------- */
.hb-grain{
  inset:0;
  background-image:var(--hb-noise);background-size:200px 200px;opacity:.17;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 66%,transparent 96%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 66%,transparent 96%);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .hb-orbits{left:calc(var(--hb-x) - var(--hb-r) * 1.4);top:calc(var(--hb-y) - var(--hb-r) * 1.4);width:calc(var(--hb-r) * 2.8);height:calc(var(--hb-r) * 2.8);
    -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--hb-r) * 1.4 - var(--hb-y)),#000 calc(var(--hb-r) * 1.4 - var(--hb-y) + 120px));
            mask-image:linear-gradient(180deg,transparent calc(var(--hb-r) * 1.4 - var(--hb-y)),#000 calc(var(--hb-r) * 1.4 - var(--hb-y) + 120px))}
}
@media(max-width:640px){
  .hero>.hero-bg{--hb-g:6%}
  .hb-mesh{background:
    radial-gradient(70% 36% at var(--hb-x) var(--hb-y),rgba(255,236,150,.42),rgba(255,243,176,.14) 50%,transparent 78%),
    radial-gradient(70% 34% at 0% 62%,rgba(25,180,236,.18),transparent 70%),
    radial-gradient(60% 30% at 100% 100%,rgba(34,179,107,.2),transparent 72%),
    radial-gradient(80% 24% at 40% 17%,rgba(25,180,236,.09),transparent 72%),
    radial-gradient(70% 22% at 30% 26%,rgba(255,255,255,.7),transparent 72%)}
  .hb-drift{display:none}
  .hb-sun{left:calc(var(--hb-x) - var(--hb-r) * .95);top:calc(var(--hb-y) - var(--hb-r) * .95);width:calc(var(--hb-r) * 1.9);height:calc(var(--hb-r) * 1.9)}
  .hb-orbits{left:calc(var(--hb-x) - var(--hb-r) * 1.25);top:calc(var(--hb-y) - var(--hb-r) * 1.25);width:calc(var(--hb-r) * 2.5);height:calc(var(--hb-r) * 2.5);
    -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--hb-r) * 1.25 - var(--hb-y)),#000 calc(var(--hb-r) * 1.25 - var(--hb-y) + 110px));
            mask-image:linear-gradient(180deg,transparent calc(var(--hb-r) * 1.25 - var(--hb-y)),#000 calc(var(--hb-r) * 1.25 - var(--hb-y) + 110px))}
  .hb-lines{background:repeating-linear-gradient(90deg,rgba(11,36,71,.06) 0 1px,transparent 1px 25%)}
  .hb-grain{opacity:.14}
}

/* --------------------------------------------------------------------------
   Movimento ridotto: tutto statico ma completo, niente scroll-linked
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero{--hp:0!important}
  .hb-drift,.hb-sun{translate:none!important;animation:none!important}
  .hb-sun{opacity:1!important;transform:none!important}
}