/* ==========================================================================
   Solar CMA, HERO: SCENA "osservatorio solare". Solo CSS + SVG inline.
   Proprietario: scena (sole, raggi, orbite, foglie, card in vetro).

   Architettura (tutto in cqw, la scena scala esattamente col contenitore):
   - 5 piani di parallasse dentro la cornice (.sc-p0..4) + foglia in primo
     piano e card di vetro fuori cornice. Il parallasse legge --px/--py
     (puntatore) e --hp (scroll della hero), sempre con fallback 0.
   - Movimento SOLO transform/opacity. Animazioni infinite: 11 al massimo
     (sole, raggi, 3 orbite x 2, scintille, alone, foglia). Tutte si fermano
     con .hero.is-paused (regola di hero-bg.css). Nessun mix-blend-mode.
   - Ingresso coreografato con .hero.is-ready. Senza JS (o senza .is-ready)
     la scena e' completa e statica. Con JS c'e' un failsafe a 3,2s.
   - Un solo backdrop-filter in tutta la hero: la card in vetro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenitore e token locali
   -------------------------------------------------------------------------- */
.hero .hero-art{
  --sx:57cqw;--sy:43cqw;      /* centro del sole */
  --tilt:71deg;               /* inclinazione del piano orbitale */
  --sc-e:cubic-bezier(.23,1,.32,1);
  --sc-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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 -.36'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  position:relative;
  container:scene/inline-size;
  width:100%;min-width:0;
  aspect-ratio:1/1;
  display:block;
  background:none;border-radius:0;overflow:visible;align-self:center;
  pointer-events:none;
}
.hero .hero-art>.scene-frame,
.hero .hero-art>.glass,
.hero .hero-art>.sc-leafA{position:absolute}
.sc-defs{position:absolute;width:0;height:0;overflow:hidden}

/* --------------------------------------------------------------------------
   Cornice (squircle) e cielo
   -------------------------------------------------------------------------- */
.scene-frame{
  inset:0;overflow:hidden;isolation:isolate;
  border-radius:7.8cqw;corner-shape:squircle;
  background:
    radial-gradient(54% 42% at 100% 0%,rgba(255,228,138,.46),transparent 70%),
    radial-gradient(92% 68% at 2% 0%,rgba(150,238,255,.72),transparent 62%),
    radial-gradient(58% 44% at 6% 98%,rgba(34,179,107,.4),transparent 70%),
    radial-gradient(70% 58% at 100% 100%,rgba(4,22,92,.72),transparent 68%),
    radial-gradient(76% 52% at 0% 100%,rgba(8,40,150,.46),transparent 72%),
    linear-gradient(172deg,#37c2f5 0%,#1b8ae4 27%,#1648cd 63%,#0a2a8c 100%);
  box-shadow:
    0 5cqw 9cqw -4.5cqw rgba(22,70,201,.56),
    0 12cqw 20cqw -10cqw rgba(25,180,236,.46),
    0 1.6cqw 3.4cqw -1.8cqw rgba(7,27,58,.4);
}
.scene-frame::after{
  content:"";position:absolute;inset:0;z-index:9;padding:1.5px;border-radius:inherit;corner-shape:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,236,150,.56) 26%,rgba(110,230,170,.3) 50%,rgba(255,255,255,.08) 74%,rgba(255,255,255,.52));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

/* piani di parallasse: i valori per piano sono --kx (px per unita' di puntatore) e --kh (px per unita' di scroll) */
.sc-p{
  position:absolute;inset:0;pointer-events:none;--kx:0;--kh:0;
  translate:
    calc(var(--px,0)*var(--kx)*1px)
    calc(var(--py,0)*var(--kx)*.72px + var(--hp,0)*var(--kh)*1px);
}
.sc-p0{--kx:9;--kh:16}
.sc-p1{--kx:4;--kh:10}
.sc-p2{--kx:-2;--kh:4}
.sc-p3{--kx:-11;--kh:-8}
.sc-p4{--kx:-34;--kh:-26}
.sc-p>*,.sf-cosmos>*{position:absolute;display:block}

/* polvere di luce lontana */
.sc-stars{inset:0;background-image:radial-gradient(circle at 33.4cqw 17.2cqw,#ffffffd7 0 0.11cqw,#fff0 0.25cqw),radial-gradient(circle at 9.8cqw 53.4cqw,#ffffffb6 0 0.12cqw,#fff0 0.28cqw),radial-gradient(circle at 6.5cqw 43.8cqw,#fff4be94 0 0.14cqw,#fff0 0.32cqw),radial-gradient(circle at 80.7cqw 14.6cqw,#ffffffa6 0 0.09cqw,#fff0 0.21cqw),radial-gradient(circle at 62.0cqw 92.1cqw,#fff4bece 0 0.11cqw,#fff0 0.25cqw),radial-gradient(circle at 14.1cqw 32.0cqw,#ffffffea 0 0.17cqw,#fff0 0.39cqw),radial-gradient(circle at 20.0cqw 57.7cqw,#ffffffd6 0 0.16cqw,#fff0 0.36cqw),radial-gradient(circle at 85.3cqw 71.6cqw,#fff4bead 0 0.14cqw,#fff0 0.32cqw),radial-gradient(circle at 95.1cqw 14.1cqw,#ffffffbc 0 0.14cqw,#fff0 0.32cqw),radial-gradient(circle at 74.2cqw 17.3cqw,#ffffffc4 0 0.13cqw,#fff0 0.30cqw),radial-gradient(circle at 85.3cqw 32.5cqw,#fff4bedc 0 0.14cqw,#fff0 0.33cqw),radial-gradient(circle at 91.8cqw 47.6cqw,#ffffffd8 0 0.15cqw,#fff0 0.35cqw),radial-gradient(circle at 18.8cqw 14.0cqw,#fff4be93 0 0.11cqw,#fff0 0.26cqw),radial-gradient(circle at 26.3cqw 39.7cqw,#fffffff0 0 0.16cqw,#fff0 0.37cqw),radial-gradient(circle at 80.0cqw 84.2cqw,#ffffffac 0 0.15cqw,#fff0 0.34cqw),radial-gradient(circle at 86.1cqw 93.0cqw,#ffffff9e 0 0.15cqw,#fff0 0.34cqw)}

/* --------------------------------------------------------------------------
   Luce del sole: alone a strati + raggi volumetrici
   -------------------------------------------------------------------------- */
.sc-halo{
  width:150cqw;height:150cqw;left:calc(var(--sx) - 75cqw);top:calc(var(--sy) - 75cqw);border-radius:50%;
  background:
    radial-gradient(circle 30cqw at 50% 50%,rgba(255,252,214,.96) 0,rgba(255,238,128,.88) 52%,rgba(255,216,56,.5) 80%,rgba(255,216,56,0) 100%),
    radial-gradient(circle 46cqw at 50% 50%,rgba(255,228,96,.6) 0,rgba(204,242,112,.42) 40%,rgba(84,222,152,.26) 64%,rgba(36,200,222,.12) 86%,rgba(36,200,222,0) 100%),
    radial-gradient(circle 75cqw at 50% 50%,rgba(130,224,255,.4) 0,rgba(70,194,255,.2) 42%,rgba(70,194,255,0) 100%);
}
.sc-rays{
  width:176cqw;height:176cqw;left:calc(var(--sx) - 88cqw);top:calc(var(--sy) - 88cqw);border-radius:50%;
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 15%,#000 27%,rgba(0,0,0,.5) 55%,transparent 98%);
          mask-image:radial-gradient(circle closest-side,transparent 15%,#000 27%,rgba(0,0,0,.5) 55%,transparent 98%);
}
.sc-rays-a{background:conic-gradient(from 0deg,#fff7cd00 5.8deg,#fff7cd24 8.5deg,#fff7cd50 11.1deg,#fff7cd24 13.8deg,#fff7cd00 16.5deg,#fff7cd00 32.7deg,#fff7cd44 34.9deg,#fff7cd96 37.1deg,#fff7cd44 39.3deg,#fff7cd00 41.5deg,#fff7cd00 64.7deg,#fff7cd38 66.2deg,#fff7cd7c 67.7deg,#fff7cd38 69.3deg,#fff7cd00 70.8deg,#fff7cd00 79.3deg,#fff7cd23 81.3deg,#fff7cd4e 83.4deg,#fff7cd23 85.4deg,#fff7cd00 87.5deg,#fff7cd00 105.0deg,#fff7cd24 106.6deg,#fff7cd51 108.1deg,#fff7cd24 109.7deg,#fff7cd00 111.3deg,#fff7cd00 130.9deg,#fff7cd2b 132.3deg,#fff7cd5f 133.6deg,#fff7cd2b 134.9deg,#fff7cd00 136.3deg,#fff7cd00 146.4deg,#fff7cd32 148.3deg,#fff7cd70 150.2deg,#fff7cd32 152.2deg,#fff7cd00 154.1deg,#fff7cd00 176.2deg,#fff7cd3f 178.2deg,#fff7cd8d 180.2deg,#fff7cd3f 182.2deg,#fff7cd00 184.3deg,#fff7cd00 202.4deg,#fff7cd38 204.4deg,#fff7cd7d 206.4deg,#fff7cd38 208.4deg,#fff7cd00 210.4deg,#fff7cd00 229.5deg,#fff7cd39 231.4deg,#fff7cd7f 233.3deg,#fff7cd39 235.3deg,#fff7cd00 237.2deg,#fff7cd00 239.2deg,#fff7cd2c 241.9deg,#fff7cd62 244.6deg,#fff7cd2c 247.3deg,#fff7cd00 250.0deg,#fff7cd00 267.5deg,#fff7cd45 269.9deg,#fff7cd99 272.4deg,#fff7cd45 274.9deg,#fff7cd00 277.4deg,#fff7cd00 289.1deg,#fff7cd3b 290.8deg,#fff7cd83 292.5deg,#fff7cd3b 294.3deg,#fff7cd00 296.0deg,#fff7cd00 326.2deg,#fff7cd2a 327.9deg,#fff7cd5e 329.6deg,#fff7cd2a 331.4deg,#fff7cd00 333.1deg,#fff7cd00 346.8deg,#fff7cd25 349.2deg,#fff7cd52 351.5deg,#fff7cd25 353.9deg,#fff7cd00 356.3deg);animation:sc-spin 240s linear infinite}
.sc-rays-b{background:conic-gradient(from 9deg,#cdf5ff00 11.8deg,#cdf5ff2d 13.3deg,#cdf5ff63 14.8deg,#cdf5ff2d 16.3deg,#cdf5ff00 17.8deg,#cdf5ff00 30.0deg,#cdf5ff29 31.6deg,#cdf5ff5b 33.1deg,#cdf5ff29 34.7deg,#cdf5ff00 36.2deg,#cdf5ff00 47.9deg,#cdf5ff32 49.1deg,#cdf5ff6e 50.4deg,#cdf5ff32 51.6deg,#cdf5ff00 52.8deg,#cdf5ff00 54.8deg,#cdf5ff2c 56.1deg,#cdf5ff61 57.3deg,#cdf5ff2c 58.5deg,#cdf5ff00 59.8deg,#cdf5ff00 79.1deg,#cdf5ff27 80.7deg,#cdf5ff56 82.3deg,#cdf5ff27 83.9deg,#cdf5ff00 85.4deg,#cdf5ff00 96.2deg,#cdf5ff20 97.1deg,#cdf5ff46 98.0deg,#cdf5ff20 98.9deg,#cdf5ff00 99.8deg,#cdf5ff00 114.1deg,#cdf5ff24 115.8deg,#cdf5ff50 117.4deg,#cdf5ff24 119.1deg,#cdf5ff00 120.7deg,#cdf5ff00 127.3deg,#cdf5ff27 128.6deg,#cdf5ff57 129.9deg,#cdf5ff27 131.3deg,#cdf5ff00 132.6deg,#cdf5ff00 146.7deg,#cdf5ff29 147.8deg,#cdf5ff5a 148.8deg,#cdf5ff29 149.8deg,#cdf5ff00 150.8deg,#cdf5ff00 167.9deg,#cdf5ff1c 169.1deg,#cdf5ff3e 170.2deg,#cdf5ff1c 171.4deg,#cdf5ff00 172.6deg,#cdf5ff00 183.1deg,#cdf5ff2d 184.1deg,#cdf5ff65 185.2deg,#cdf5ff2d 186.2deg,#cdf5ff00 187.3deg,#cdf5ff00 204.5deg,#cdf5ff1a 205.5deg,#cdf5ff3a 206.4deg,#cdf5ff1a 207.3deg,#cdf5ff00 208.2deg,#cdf5ff00 216.2deg,#cdf5ff18 217.4deg,#cdf5ff35 218.5deg,#cdf5ff18 219.6deg,#cdf5ff00 220.8deg,#cdf5ff00 233.8deg,#cdf5ff27 235.5deg,#cdf5ff56 237.3deg,#cdf5ff27 239.1deg,#cdf5ff00 240.9deg,#cdf5ff00 261.4deg,#cdf5ff20 262.6deg,#cdf5ff47 263.9deg,#cdf5ff20 265.1deg,#cdf5ff00 266.4deg,#cdf5ff00 275.6deg,#cdf5ff1f 276.8deg,#cdf5ff45 277.9deg,#cdf5ff1f 279.1deg,#cdf5ff00 280.3deg,#cdf5ff00 294.3deg,#cdf5ff2c 295.7deg,#cdf5ff63 297.2deg,#cdf5ff2c 298.6deg,#cdf5ff00 300.1deg,#cdf5ff00 316.3deg,#cdf5ff1e 317.3deg,#cdf5ff43 318.2deg,#cdf5ff1e 319.1deg,#cdf5ff00 320.1deg,#cdf5ff00 327.8deg,#cdf5ff2d 329.4deg,#cdf5ff63 331.1deg,#cdf5ff2d 332.7deg,#cdf5ff00 334.4deg,#cdf5ff00 342.8deg,#cdf5ff2e 343.9deg,#cdf5ff66 344.9deg,#cdf5ff2e 346.0deg,#cdf5ff00 347.1deg);rotate:23deg}

/* flare anamorfico con lieve aberrazione cromatica + fantasmi di lente */
.sc-streak{
  left:-8cqw;right:-8cqw;top:calc(var(--sy) - 1.5cqw);height:3cqw;
  background:
    linear-gradient(90deg,transparent,rgba(110,226,255,.55) 34%,rgba(214,248,255,.7) 58%,transparent) 0 20%/100% .15cqw no-repeat,
    linear-gradient(90deg,transparent,rgba(255,226,110,.6) 36%,rgba(255,252,222,.9) 58%,transparent) 0 50%/100% .28cqw no-repeat,
    linear-gradient(90deg,transparent,rgba(110,238,176,.5) 34%,rgba(220,255,236,.62) 58%,transparent) 0 80%/100% .15cqw no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  opacity:.8;
}
.sc-ghosts{
  inset:0;
  background:
    radial-gradient(circle 2.6cqw at 78.2cqw 21.8cqw,rgba(255,255,255,0) 52%,rgba(120,228,255,.34) 80%,rgba(255,232,120,.26) 92%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 3.8cqw at 93.4cqw 6.6cqw,rgba(255,255,255,0) 54%,rgba(110,238,176,.3) 82%,rgba(255,226,110,.24) 93%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 3.2cqw at 35.8cqw 64.2cqw,rgba(255,255,255,0) 50%,rgba(120,228,255,.3) 80%,rgba(255,232,120,.24) 92%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 6cqw at 23cqw 77cqw,rgba(255,255,255,.1) 0,rgba(255,255,255,0) 70%);
}

/* --------------------------------------------------------------------------
   Cosmo 3D: strumento, sole e piano orbitale inclinato
   (perspective in cqw: la proiezione e' identica a ogni dimensione)
   -------------------------------------------------------------------------- */
.sf-cosmos{
  position:absolute;inset:0;
  perspective:258cqw;perspective-origin:var(--sx) var(--sy);
  transform:rotate(-13deg);transform-origin:var(--sx) var(--sy);
}
.sf-world{position:absolute;left:var(--sx);top:var(--sy);width:0;height:0;transform-style:preserve-3d}

/* strumento: anelli graduati attorno al sole (astrolabio) */
.sc-inst{left:calc(var(--sx) - 100cqw);top:calc(var(--sy) - 100cqw);width:200cqw;height:200cqw;overflow:visible}
.sc-lbl{left:calc(var(--sx) - 100cqw);top:calc(var(--sy) - 100cqw);width:200cqw;height:200cqw;overflow:visible}
.sc-lbl text{font-family:inherit;font-size:1.5px;font-weight:600;letter-spacing:.24px;fill:#fff;fill-opacity:.9}

/* il sole */
.sf-sun{
  --sun:42cqw;
  position:absolute;width:var(--sun);height:var(--sun);left:calc(var(--sun)/-2);top:calc(var(--sun)/-2);
  animation:sc-breathe 9s ease-in-out infinite alternate;
}
.sf-sun>span{position:absolute;display:block}
/* corona: bagliore che nasce dal bordo e sfuma in giallo, verde acqua, cielo */
.sun-corona{
  inset:-14cqw;border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,250,214,0) 0,rgba(255,250,214,0) 57.5%,
    rgba(255,251,222,.92) 60.4%,rgba(255,238,140,.64) 62.6%,rgba(255,216,64,.36) 68%,
    rgba(206,244,122,.2) 76%,rgba(112,230,190,.1) 88%,rgba(112,230,190,0) 100%);
}
/* streamer della corona: fili di luce irregolari, statici */
.sun-streamers{
  inset:-10cqw;border-radius:50%;
  background:conic-gradient(from 3deg,#fff0aa00 4.9deg,#fff0aa3b 6.0deg,#fff0aa83 7.1deg,#fff0aa3b 8.2deg,#fff0aa00 9.3deg,#fff0aa00 17.9deg,#fff0aa23 19.0deg,#fff0aa4e 20.2deg,#fff0aa23 21.4deg,#fff0aa00 22.5deg,#fff0aa00 30.8deg,#fff0aa2c 31.7deg,#fff0aa61 32.7deg,#fff0aa2c 33.7deg,#fff0aa00 34.6deg,#fff0aa00 43.7deg,#fff0aa20 44.9deg,#fff0aa48 46.0deg,#fff0aa20 47.2deg,#fff0aa00 48.3deg,#fff0aa00 53.8deg,#fff0aa31 55.0deg,#fff0aa6d 56.2deg,#fff0aa31 57.4deg,#fff0aa00 58.5deg,#fff0aa00 68.5deg,#fff0aa38 69.2deg,#fff0aa7c 69.9deg,#fff0aa38 70.5deg,#fff0aa00 71.2deg,#fff0aa00 72.6deg,#fff0aa26 73.1deg,#fff0aa54 73.7deg,#fff0aa26 74.3deg,#fff0aa00 74.9deg,#fff0aa00 88.7deg,#fff0aa1e 89.2deg,#fff0aa43 89.7deg,#fff0aa1e 90.2deg,#fff0aa00 90.7deg,#fff0aa00 104.2deg,#fff0aa24 105.1deg,#fff0aa4f 106.0deg,#fff0aa24 106.9deg,#fff0aa00 107.8deg,#fff0aa00 113.4deg,#fff0aa19 114.4deg,#fff0aa38 115.4deg,#fff0aa19 116.3deg,#fff0aa00 117.3deg,#fff0aa00 128.3deg,#fff0aa25 129.0deg,#fff0aa52 129.7deg,#fff0aa25 130.3deg,#fff0aa00 131.0deg,#fff0aa00 132.9deg,#fff0aa35 133.7deg,#fff0aa77 134.5deg,#fff0aa35 135.3deg,#fff0aa00 136.1deg,#fff0aa00 148.1deg,#fff0aa24 148.9deg,#fff0aa50 149.7deg,#fff0aa24 150.5deg,#fff0aa00 151.3deg,#fff0aa00 158.7deg,#fff0aa32 159.2deg,#fff0aa6e 159.7deg,#fff0aa32 160.2deg,#fff0aa00 160.7deg,#fff0aa00 173.5deg,#fff0aa3b 173.9deg,#fff0aa83 174.4deg,#fff0aa3b 174.9deg,#fff0aa00 175.3deg,#fff0aa00 184.5deg,#fff0aa33 185.6deg,#fff0aa71 186.7deg,#fff0aa33 187.8deg,#fff0aa00 188.8deg,#fff0aa00 191.5deg,#fff0aa1a 192.5deg,#fff0aa39 193.6deg,#fff0aa1a 194.6deg,#fff0aa00 195.6deg,#fff0aa00 205.6deg,#fff0aa26 206.5deg,#fff0aa54 207.4deg,#fff0aa26 208.3deg,#fff0aa00 209.2deg,#fff0aa00 219.0deg,#fff0aa1a 219.5deg,#fff0aa39 220.0deg,#fff0aa1a 220.5deg,#fff0aa00 221.0deg,#fff0aa00 235.5deg,#fff0aa1f 236.6deg,#fff0aa46 237.8deg,#fff0aa1f 239.0deg,#fff0aa00 240.1deg,#fff0aa00 246.4deg,#fff0aa20 247.4deg,#fff0aa47 248.4deg,#fff0aa20 249.4deg,#fff0aa00 250.5deg,#fff0aa00 252.6deg,#fff0aa39 253.7deg,#fff0aa7f 254.9deg,#fff0aa39 256.1deg,#fff0aa00 257.2deg,#fff0aa00 271.3deg,#fff0aa25 272.0deg,#fff0aa52 272.7deg,#fff0aa25 273.4deg,#fff0aa00 274.1deg,#fff0aa00 276.6deg,#fff0aa2b 277.7deg,#fff0aa60 278.7deg,#fff0aa2b 279.7deg,#fff0aa00 280.8deg,#fff0aa00 293.0deg,#fff0aa1d 294.1deg,#fff0aa40 295.1deg,#fff0aa1d 296.1deg,#fff0aa00 297.1deg,#fff0aa00 300.4deg,#fff0aa35 301.5deg,#fff0aa75 302.6deg,#fff0aa35 303.7deg,#fff0aa00 304.8deg,#fff0aa00 311.1deg,#fff0aa1b 312.3deg,#fff0aa3b 313.5deg,#fff0aa1b 314.6deg,#fff0aa00 315.8deg,#fff0aa00 332.0deg,#fff0aa1c 332.7deg,#fff0aa3f 333.4deg,#fff0aa1c 334.1deg,#fff0aa00 334.8deg,#fff0aa00 337.1deg,#fff0aa2e 338.2deg,#fff0aa67 339.4deg,#fff0aa2e 340.5deg,#fff0aa00 341.6deg,#fff0aa00 349.1deg,#fff0aa25 350.3deg,#fff0aa52 351.4deg,#fff0aa25 352.5deg,#fff0aa00 353.7deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 66%,#000 71%,rgba(0,0,0,.5) 86%,transparent 100%);
          mask-image:radial-gradient(circle closest-side,transparent 66%,#000 71%,rgba(0,0,0,.5) 86%,transparent 100%);
}
/* due fili sottilissimi fuori asse: aberrazione cromatica del bordo */
.sun-fringe{inset:-.25cqw;border-radius:50%;border:.14cqw solid transparent;
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - .5cqw),#000 calc(100% - .3cqw));
          mask-image:radial-gradient(circle closest-side,transparent calc(100% - .5cqw),#000 calc(100% - .3cqw))}
.sun-fringe-c{border-color:rgba(120,230,255,.7);translate:-.2cqw -.2cqw;
  -webkit-mask-image:conic-gradient(from 200deg,transparent,#000 22%,transparent 46%);
          mask-image:conic-gradient(from 200deg,transparent,#000 22%,transparent 46%)}
.sun-fringe-g{border-color:rgba(110,240,176,.8);translate:.2cqw .2cqw;
  -webkit-mask-image:conic-gradient(from 20deg,transparent,#000 24%,transparent 50%);
          mask-image:conic-gradient(from 20deg,transparent,#000 24%,transparent 50%)}
/* disco: nucleo bianco caldo, oscuramento al bordo, granulazione statica */
.sun-disc{
  inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle closest-side at 47% 44%,#fffcea 0,#fff09a 22%,#ffd92e 54%,#ffc41f 80%,#ffab1a 100%);
  box-shadow:0 0 2.4cqw .5cqw rgba(255,232,120,.85),0 0 8cqw 1.6cqw rgba(255,236,150,.4);
}
.sun-gran{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.sun-shade{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 30%),
    linear-gradient(146deg,rgba(100,222,128,0) 54%,rgba(92,214,130,.62) 100%),
    radial-gradient(circle closest-side at 50% 50%,rgba(255,150,10,0) 60%,rgba(255,140,8,.4) 84%,rgba(216,96,0,.82) 100%);
}
/* filo di luce del bordo: giallo in alto a sinistra, verde del logo in basso a destra */
.sun-limb{
  inset:-.05cqw;border-radius:50%;
  background:conic-gradient(from 315deg,#fffbd2,#ffe45a 18%,#7fe69c 40%,#4de39a 52%,#a8ee8a 66%,#ffe45a 84%,#fffbd2);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - .34cqw),#000 calc(100% - .2cqw));
          mask-image:radial-gradient(circle closest-side,transparent calc(100% - .34cqw),#000 calc(100% - .2cqw));
  opacity:.95;
}

/* piano orbitale: anelli graduati, scie, pianeti */
.sf-plane{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--tilt))}
.ring,.sat{position:absolute;width:var(--d);height:var(--d);left:calc(var(--d)/-2);top:calc(var(--d)/-2);border-radius:50%}
.ring{
  border:max(1px,.17cqw) solid var(--rc,rgba(255,255,255,.7));
  -webkit-mask-image:conic-gradient(rgba(0,0,0,.18),#000 50%,rgba(0,0,0,.18));
          mask-image:conic-gradient(rgba(0,0,0,.18),#000 50%,rgba(0,0,0,.18));
}
.ring::before,.ring::after{content:"";position:absolute;inset:max(-1px,-.17cqw);border-radius:50%}
.ring::before{
  background:repeating-conic-gradient(from -.2deg,var(--rc,rgba(255,255,255,.7)) 0 .4deg,transparent .4deg 5deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 1.4cqw),#000 calc(100% - 1.36cqw));
          mask-image:radial-gradient(circle closest-side,transparent calc(100% - 1.4cqw),#000 calc(100% - 1.36cqw));
}
.ring::after{
  background:repeating-conic-gradient(from -.3deg,var(--rc,rgba(255,255,255,.7)) 0 .6deg,transparent .6deg 30deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 2.8cqw),#000 calc(100% - 2.76cqw));
          mask-image:radial-gradient(circle closest-side,transparent calc(100% - 2.8cqw),#000 calc(100% - 2.76cqw));
}
.sat{
  transform-style:preserve-3d;
  transform:rotateZ(var(--a0));
  animation:sc-orbit var(--t) linear infinite;
}
/* scia di cometa: filo nitido + velo largo, dietro al pianeta */
.sat::before,.sat::after{content:"";position:absolute;border-radius:50%}
.sat::before{
  inset:0;border:.2cqw solid var(--tr);
  -webkit-mask-image:conic-gradient(from 0deg,transparent 0 304deg,#000 360deg);
          mask-image:conic-gradient(from 0deg,transparent 0 304deg,#000 360deg);
}
.sat::after{
  inset:-.45cqw;border:.9cqw solid var(--tr2);
  -webkit-mask-image:conic-gradient(from 0deg,transparent 0 268deg,#000 360deg);
          mask-image:conic-gradient(from 0deg,transparent 0 268deg,#000 360deg);
}
/* pianeta: sfera con luce dal sole (in basso nel suo riferimento), terminatore, riflesso */
.planet{
  position:absolute;left:50%;top:0;
  width:var(--pd);height:var(--pd);margin:calc(var(--pd)/-2) 0 0 calc(var(--pd)/-2);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 84%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 122%,rgba(6,24,92,0) 44%,rgba(6,24,92,.56) 76%,rgba(4,14,66,.9) 100%),
    radial-gradient(circle at 50% 72%,var(--pc) 0,var(--pm) 44%,var(--pc2) 100%);
  box-shadow:
    inset 0 -.16cqw .24cqw -.04cqw rgba(255,255,255,.95),
    inset 0 .12cqw .3cqw rgba(0,10,70,.5),
    0 0 1cqw .1cqw var(--pg);
  transform:rotateZ(calc(var(--a0)*-1)) rotateX(calc(var(--tilt)*-1)) rotateZ(var(--a0));
  animation:sc-planet var(--t) linear infinite;
}
.ring-1,.sat-1{--d:64cqw}
.ring-2,.sat-2{--d:92cqw}
.ring-3,.sat-3{--d:124cqw}
.ring-1{--rc:rgba(255,238,160,.82)}
.ring-2{--rc:rgba(255,255,255,.78)}
.ring-3{--rc:rgba(186,255,214,.78)}
.sat-1{--t:44s;--a0:112deg;--pd:4.4cqw;--pc:#fffbd0;--pm:#ffd85a;--pc2:#e89a10;--pg:rgba(255,214,60,.7);--tr:rgba(255,240,170,.95);--tr2:rgba(255,214,70,.2)}
.sat-2{--t:82s;--a0:292deg;--pd:3.4cqw;--pc:#ffffff;--pm:#d8f2ff;--pc2:#6cb6ec;--pg:rgba(190,236,255,.7);--tr:rgba(255,255,255,.95);--tr2:rgba(200,240,255,.2)}
.sat-3{--t:136s;--a0:158deg;--pd:5.2cqw;--pc:#d4ffe4;--pm:#4fe39a;--pc2:#12874f;--pg:rgba(80,230,150,.7);--tr:rgba(190,255,214,.95);--tr2:rgba(80,230,150,.22)}

/* scintille di luce: poche, una sola animazione */
.sc-motes{inset:0;background-image:radial-gradient(circle at 66.6cqw 76.8cqw,#fff4bec8 0 0.20cqw,#fff0 0.46cqw),radial-gradient(circle at 96.7cqw 30.2cqw,#fff4be9d 0 0.22cqw,#fff0 0.51cqw),radial-gradient(circle at 27.5cqw 27.5cqw,#ffffffb2 0 0.18cqw,#fff0 0.41cqw),radial-gradient(circle at 28.2cqw 13.1cqw,#ffffffb2 0 0.29cqw,#fff0 0.67cqw),radial-gradient(circle at 32.2cqw 56.5cqw,#fff4bea3 0 0.27cqw,#fff0 0.62cqw),radial-gradient(circle at 9.7cqw 22.0cqw,#fff4beca 0 0.24cqw,#fff0 0.55cqw),radial-gradient(circle at 89.0cqw 81.4cqw,#fff4bee7 0 0.19cqw,#fff0 0.44cqw),radial-gradient(circle at 3.7cqw 45.7cqw,#ffffffc3 0 0.20cqw,#fff0 0.46cqw);animation:sc-twinkle 5.6s ease-in-out infinite alternate}

/* strumento: crocette e didascalia */
.sc-tick{position:absolute;width:2.4cqw;height:2.4cqw;z-index:4;opacity:.55;pointer-events:none;
  background:linear-gradient(#fff,#fff) 50% 0/1px 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 1px no-repeat}
.sc-tick-a{left:5cqw;top:5cqw}
.sc-tick-b{right:5cqw;top:5cqw}
.sc-tick-c{right:5cqw;bottom:5cqw}
.sc-tick-d{left:5cqw;bottom:5cqw}
.sc-label{position:absolute;display:block;z-index:4;left:9cqw;top:4.45cqw;pointer-events:none;
  font-size:clamp(8px,1.6cqw,10.5px);letter-spacing:.16em;font-weight:600;color:rgba(255,255,255,.86);line-height:1;white-space:nowrap}

/* --------------------------------------------------------------------------
   Foglie: pannelli solari botanici, con profondita' di campo statica
   -------------------------------------------------------------------------- */
.sc-lf{position:absolute;display:block;overflow:visible;width:var(--w);height:var(--w)}
.sc-lf-b{--w:24cqw;left:71cqw;top:64cqw;rotate:-14deg}
.sc-lf-d{--w:12cqw;left:7cqw;top:16cqw;rotate:36deg}
.sc-lf-c{--w:34cqw;left:83cqw;top:-18cqw;rotate:150deg;opacity:.6}
.sc-leafA{
  left:77cqw;top:71cqw;width:29cqw;height:29cqw;rotate:-40deg;pointer-events:none;
  translate:
    calc(var(--px,0)*-26px)
    calc(var(--py,0)*-19px + var(--hp,0)*-34px);
}
.sc-lf-a{--w:100%;animation:sc-float 13s ease-in-out infinite alternate}
.sc-bokeh{border-radius:50%;
  background:radial-gradient(circle closest-side,rgba(255,255,255,.1) 0,rgba(255,255,255,.12) 62%,rgba(255,255,255,.3) 88%,rgba(255,255,255,0) 100%)}
.sc-bokeh-a{width:5cqw;height:5cqw;left:10cqw;top:46cqw}
.sc-bokeh-b{width:3.4cqw;height:3.4cqw;left:90cqw;top:38cqw;opacity:.8}

/* vignettatura, luce radente e grana (tutto statico) */
.sc-vig{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 26%),
    radial-gradient(120% 100% at 56% 40%,rgba(3,14,70,0) 58%,rgba(3,14,70,.36) 100%)}
.sc-grain{position:absolute;inset:0;pointer-events:none;background-image:var(--sc-noise);background-size:200px 200px;opacity:.16}

/* --------------------------------------------------------------------------
   Card in vetro: bordo a gradiente, riflesso speculare, ombra interna, grana.
   E' l'unico backdrop-filter della hero.
   -------------------------------------------------------------------------- */
.glass{
  left:-3.6cqw;bottom:7cqw;width:57cqw;
  padding:3.5cqw 3.9cqw 3.7cqw;
  border-radius:5.6cqw;corner-shape:squircle;
  color:#fff;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(155deg,rgba(255,255,255,.26) 0,rgba(255,255,255,.07) 34%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.12) 100%),
    linear-gradient(180deg,rgba(9,36,130,.64),rgba(6,26,102,.58));
  -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(255,255,255,.1),
    inset 0 0 2.4cqw rgba(255,255,255,.07),
    inset 0 -3cqw 4cqw -2.4cqw rgba(3,14,70,.6),
    0 3.2cqw 6.4cqw -2.4cqw rgba(4,20,80,.62),0 .5cqw 1.4cqw rgba(4,20,80,.2);
  translate:calc(var(--px,0)*-12px) calc(var(--py,0)*-9px + var(--hp,0)*-12px);
}
.glass::before{
  content:"";position:absolute;inset:0;z-index:2;padding:1px;border-radius:inherit;corner-shape:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(190,240,255,.3) 30%,rgba(255,255,255,.05) 60%,rgba(255,236,150,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* riflesso che attraversa il vetro (una volta, dopo l'ingresso) */
.glass::after{
  content:"";position:absolute;z-index:1;inset:-20% -40%;pointer-events:none;
  background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.08) 54%,transparent 60%);
  transform:translateX(-70%);
}
.glass-grain{position:absolute;inset:0;z-index:0;background-image:var(--sc-noise);background-size:180px 180px;opacity:.15;pointer-events:none}
.glass-spec{position:absolute;inset:-12% -12% 30% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 90% at 14% 0%,rgba(255,255,255,.3),rgba(255,255,255,0) 64%);
  translate:calc(var(--px,0)*2.6cqw) calc(var(--py,0)*1.4cqw)}
.glass>*:not(.glass-grain):not(.glass-spec){position:relative;z-index:3}
.g-row{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  font-size:clamp(9px,1.9cqw,11.5px);font-weight:700;letter-spacing:.14em;line-height:1;color:#fff}
.g-id{display:inline-flex;align-items:center;gap:1.6cqw}
.g-dot{display:block;width:1.5cqw;height:1.5cqw;min-width:6px;min-height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8c8,var(--h-sun,#ffd426) 55%,#ffae1a);box-shadow:0 0 8px 1px rgba(255,200,50,.8)}
.g-orbit{display:block;width:clamp(15px,3.6cqw,22px);height:clamp(15px,3.6cqw,22px);flex:none;overflow:visible}
.g-title{margin:3.6cqw 0 3.6cqw;font-size:clamp(16px,4.5cqw,26px);line-height:1.1;font-weight:600;letter-spacing:-.03em;
  text-wrap:balance;text-shadow:0 1px 14px rgba(4,20,80,.4)}
.g-legend{display:flex;flex-wrap:wrap;gap:1.2cqw 3.2cqw;padding-top:2.6cqw;border-top:1px solid rgba(255,255,255,.26);
  font-size:clamp(9px,1.8cqw,11px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.92)}
.g-legend span{display:inline-flex;align-items:center;gap:1.3cqw}
.lg{display:block;width:1.4cqw;height:1.4cqw;min-width:6px;min-height:6px;border-radius:50%}
.lg-sun{background:#ffd426;box-shadow:0 0 7px rgba(255,214,60,.9)}
.lg-white{background:#fff;box-shadow:0 0 7px rgba(255,255,255,.9)}
.lg-leaf{background:#4de39a;box-shadow:0 0 7px rgba(77,227,154,.9)}

/* --------------------------------------------------------------------------
   Movimento continuo (le sole animazioni infinite della scena)
   -------------------------------------------------------------------------- */
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-breathe{from{transform:scale(1)}to{transform:scale(1.028)}}
@keyframes sc-twinkle{from{opacity:.4}to{opacity:1}}
@keyframes sc-orbit{from{transform:rotateZ(var(--a0))}to{transform:rotateZ(calc(var(--a0) + 360deg))}}
@keyframes sc-planet{
  from{transform:rotateZ(calc(var(--a0)*-1)) rotateX(calc(var(--tilt)*-1)) rotateZ(var(--a0))}
  to{transform:rotateZ(calc(var(--a0)*-1 - 360deg)) rotateX(calc(var(--tilt)*-1)) rotateZ(calc(var(--a0) + 360deg))}}
@keyframes sc-float{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-1.5cqw) rotate(4deg)}}

/* --------------------------------------------------------------------------
   Ingresso coreografato (parte con .hero.is-ready, solo transform/opacity).
   Con JS e prima di .is-ready la cornice, la foglia in primo piano e la card sono
   nascoste (failsafe a 3,2s); tutto il resto vive dentro la cornice. Senza JS: visibile.
   -------------------------------------------------------------------------- */
@keyframes sc-fade{from{opacity:0}}
@keyframes sc-frame{from{opacity:0;scale:.965}}
@keyframes sc-pop{from{opacity:0;scale:.74}}
@keyframes sc-bloom{from{opacity:0;scale:.82}}
@keyframes sc-rise{from{opacity:0;transform:translateY(4.5cqw)}}
@keyframes sc-leaf{from{opacity:0;scale:.8}}
@keyframes sc-sheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
@keyframes sc-failsafe{to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  .js .hero:not(.is-ready) .solar-scene .sc-in{opacity:0;animation:sc-failsafe .01s 3.2s forwards}

  .hero.is-ready .scene-frame{animation:sc-frame 1.3s var(--sc-e) .05s backwards}
  .hero.is-ready .sc-halo{animation:sc-fade 1.8s var(--sc-e) .3s backwards}
  .hero.is-ready .sc-rays-b{animation:sc-bloom 2s var(--sc-e) .5s backwards}
  .hero.is-ready .sc-rays-a{animation:sc-bloom 2s var(--sc-e) .65s backwards,sc-spin 240s linear infinite}
  .hero.is-ready .sf-sun{animation:sc-pop 1.6s var(--sc-e) .3s backwards,sc-breathe 9s ease-in-out infinite alternate}
  .hero.is-ready .sc-inst{animation:sc-bloom 1.8s var(--sc-e) .75s backwards}
  .hero.is-ready .ring-1{animation:sc-fade 1.2s var(--sc-e) .95s backwards}
  .hero.is-ready .ring-2{animation:sc-fade 1.2s var(--sc-e) 1.05s backwards}
  .hero.is-ready .ring-3{animation:sc-fade 1.2s var(--sc-e) 1.15s backwards}
  .hero.is-ready .sat-1>.planet{animation:sc-fade .9s var(--sc-e) 1.3s backwards,sc-planet var(--t) linear infinite}
  .hero.is-ready .sat-2>.planet{animation:sc-fade .9s var(--sc-e) 1.4s backwards,sc-planet var(--t) linear infinite}
  .hero.is-ready .sat-3>.planet{animation:sc-fade .9s var(--sc-e) 1.5s backwards,sc-planet var(--t) linear infinite}
  .hero.is-ready .sc-streak{animation:sc-fade 1.4s var(--sc-e) 1.25s backwards}
  .hero.is-ready .sc-ghosts{animation:sc-fade 1.6s var(--sc-e) 1.45s backwards}
  .hero.is-ready .sc-lbl{animation:sc-fade 1.2s var(--sc-e) 1.75s backwards}
  .hero.is-ready .sc-label{animation:sc-fade 1.2s var(--sc-e) 1.2s backwards}
  .hero.is-ready .sc-lf-c{animation:sc-leaf 1.6s var(--sc-e) 1.1s backwards}
  .hero.is-ready .sc-lf-b{animation:sc-leaf 1.6s var(--sc-e) 1.35s backwards}
  .hero.is-ready .sc-lf-d{animation:sc-leaf 1.6s var(--sc-e) 1.5s backwards}
  .hero.is-ready .sc-leafA{animation:sc-leaf 1.7s var(--sc-e) 1.55s backwards}
  .hero.is-ready .glass{animation:sc-rise 1.3s var(--sc-e) .95s backwards}
  .hero.is-ready .glass::after{animation:sc-sheen 1.9s var(--sc-e) 2.3s both}
}

/* --------------------------------------------------------------------------
   Prestazioni: i piani si promuovono solo mentre il puntatore e' sulla hero
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .hero:hover .sc-p,.hero:hover .sc-leafA{will-change:translate}
}
/* il parallasse da scroll lavora solo su desktop: su touch niente repaint a ogni frame */
@media (hover:none),(max-width:900px){
  .sc-p{translate:none}
  .sc-leafA,.glass{translate:none}
}
@media (prefers-reduced-motion:reduce){
  .sc-p,.sc-leafA,.glass,.glass-spec{translate:none}
}

/* --------------------------------------------------------------------------
   Responsive (scena)
   -------------------------------------------------------------------------- */
@supports not (corner-shape:squircle){
  .scene-frame{border-radius:7cqw}
  .glass{border-radius:5.2cqw}
}
@media(max-width:900px){
  .hero .hero-art{aspect-ratio:1/1.02}
}
@media(max-width:640px){
  .hero .hero-art{aspect-ratio:1/.96;--sx:56cqw;--sy:41cqw}
  .sc-label,.sc-lbl,.sc-ghosts,.sc-bokeh-b{display:none}
  .ring-3,.sat-3{display:none}
  .glass{left:-2.4cqw;bottom:5cqw;width:68cqw;padding:4.4cqw 5cqw 4.6cqw}
  .g-title{margin:3.4cqw 0 3.6cqw}
  .sc-leafA{left:74cqw;top:68cqw;width:30cqw;height:30cqw}
  .sc-lf-b{left:66cqw;top:60cqw}
}

/* browser senza container query: la scena decorativa si nasconde con grazia */
@supports not (width:1cqw){
  .hero .hero-art{display:none}
}

/* legenda della card e dettagli minuti solo quando la scena e' abbastanza larga */
@container scene (max-width:430px){
  .g-legend{display:none}
  .glass{width:62cqw}
  .sc-lbl,.sc-label{display:none}
}