/* ==========================================================================
   Hero della home con lo Stormo (stormo.js). Solo la home la carica.
   Identico fra it/ ed en/.

   Il canvas sta dietro a tutta la hero; un velo del colore di fondo copre la
   meta' sinistra, cosi' il testo resta leggibile qualunque cosa passi dietro.
   Su telefono lo stormo vola in alto e il velo sale dal basso.
   ========================================================================== */

/* Le tinte azzurre dello stormo: le tre del Respiro chiaro in chiaro, i teal
   del Respiro scuro in scuro (playbook cap. 05). */
:root { --st-near: #00AEEF; --st-mid: #3CC3E8; --st-far: #A5E4EB; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --st-near: #3CCBFF; --st-mid: #0F9CB5; --st-far: #07454E; }
}
:root[data-theme="dark"] { --st-near: #3CCBFF; --st-mid: #0F9CB5; --st-far: #07454E; }

.hero-stormo { --st-bg: var(--bg); align-items: stretch; }
.hero-stormo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: pan-y; }

/* il velo prende il posto dei due aloni della hero standard */
.hero-stormo::before {
  top: 0; right: auto; bottom: 0; left: 0; width: 64%; height: auto; z-index: 1;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 52%, transparent 100%);
}
.hero-stormo::after { display: none; }

.hero-stormo .container { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; pointer-events: none; }
.hero-stormo .hero-text { text-align: left; max-width: 640px; padding: 96px 0; pointer-events: auto; }
.hero-stormo .hero-text .eyebrow,
.hero-stormo .hero-ctas,
.hero-stormo .hero-proof { justify-content: flex-start; }
.hero-stormo h1 { text-wrap: balance; font-size: clamp(40px, 5.6vw, 80px); font-stretch: 112%; line-height: .94; letter-spacing: -.045em; margin-left: 0; margin-right: 0; }
.hero-stormo .hero-sub { margin: 0 0 40px; max-width: 520px; }
/* sopra un fondo animato anche il secondario e' pieno: l'animazione non deve vedersi attraverso */
.hero-stormo .btn-ghost { background: var(--solid); }
.hero-stormo .btn-ghost:hover { background: var(--solid); border-color: var(--text); }

@media (max-width: 900px) {
  .hero-stormo { min-height: 0; }
  .hero-stormo .container { align-items: flex-end; min-height: 680px; }
  .hero-stormo::before { width: 100%; top: auto; height: 72%;
    background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 55%, transparent 100%); }
  .hero-stormo .hero-text { padding: 280px 0 48px; }
}
@media (forced-colors: active) { .hero-stormo > canvas { display: none; } }