/* Hero backgrounds (the Sfondo axis): notte | blu | alba-calda | alba-notte | alba-giorno | carta, on data-hx-bg. Any sign goes on any background.
   Alba is the v2 sky, exactly: one continuous progression from the warm horizon at the bottom of the first screen, through peach, sky and blue, to night at the top.
   It lives in a box as tall as the v2 hero (the first screen); below it the night carries on and the warm light fades behind proof and press. Knobs: --hx-bg, --hx-grain, --ha-h, --ha-k, --ha-warm, --ha-blur, data-ha-breath, --ha-speed. */
.hx-hero {
  --hx-bg: var(--night, #071846); --hx-bg-img: none; --hx-grain: 0.08;
  --hg-line-d: var(--sky, #62cefe);
  --ha-h: 1; --ha-k: 1; --ha-warm: 1; --ha-blur: 28px; --ha-speed: 1;
  --ha-c0: hsl(33 80% 82%); --ha-c0b: hsl(28 64% 66% / 0.75);
  --ha-c1: rgb(150 220 255 / 0.95); --ha-c2: rgb(3 115 226 / 0.95); --ha-c3: rgb(27 73 194 / 0.85); --ha-c4: rgb(19 57 156 / 0.55);
}
[data-hx-bg="notte"] { --hx-bg: var(--night, #071846); }
[data-hx-bg="blu"] { --hx-bg: var(--brand, #0373e2); --hg-line-d: #ffffff; }
[data-hx-bg="carta"] { --hx-bg: var(--warm, #f6f2ea); --hx-bg-img: radial-gradient(90% 90% at 78% 18%, #fffaf2 0%, transparent 55%), linear-gradient(180deg, transparent 50%, var(--sand-w, #efe8dc)); --hg-line-d: var(--cobalt, #1b49c2); }
/* the v2 night: deeper at the top, a little lighter towards the horizon */
[data-hx-bg^="alba"] { --hx-bg: #071a45; --hx-bg-low: #0b2257; --hx-bg-img: linear-gradient(180deg, #050f2b 0%, #071a45 40%, #0b2257 100%); }
/* Alba notte: the same single progression, the warm horizon lower and softer, much more night above it */
[data-hx-bg="alba-notte"] {
  --ha-hv: 0.7; --ha-wv: 0.75; --hx-bg: #061636; --hx-bg-low: #0a1e4c; --hx-bg-img: linear-gradient(180deg, #040c24 0%, #061636 55%, #0a1e4c 100%);
  --ha-c0: hsl(32 72% 78%); --ha-c1: rgb(150 220 255 / 0.75); --ha-c3: rgb(27 73 194 / 0.6); --ha-c4: rgb(19 57 156 / 0.3);
}
[data-hx-bg="alba-giorno"] {
  --hx-bg: #eef4fb; --hx-bg-low: #e8f0f9; --hx-bg-img: linear-gradient(180deg, #f4f8fd 0%, #eef4fb 40%, #e8f0f9 100%); --hg-line-d: var(--cobalt, #1b49c2);
  --ha-c0: hsl(36 72% 86%); --ha-c0b: hsl(34 60% 80% / 0.6);
  --ha-c1: rgb(214 235 251 / 0.95); --ha-c2: rgb(160 206 246 / 0.75); --ha-c3: rgb(111 178 240 / 0.4); --ha-c4: rgb(111 178 240 / 0.18);
}

.site .hero.hx-hero { --bg: var(--hx-bg); background-color: var(--hx-bg-low, var(--hx-bg)); background-image: var(--hx-bg-img); }
/* on Alba the gradient spans the first screen, as in v2; below it the lowest tone carries on */
.site .hero.hx-hero[data-hx-bg^="alba"] { background-size: 100% clamp(680px, 100svh, 1080px); background-repeat: no-repeat; }
.site .hero.hx-hero:not(.light) .sub { color: rgb(255 255 255 / 0.84); }
.hx-grain { position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: var(--hx-grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hx-hero.light .hx-grain { mix-blend-mode: multiply; filter: invert(1); opacity: calc(var(--hx-grain) * 0.7); }
.hf-light { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(118deg, transparent 38%, rgb(255 248 236 / 0.7) 52%, transparent 66%); mix-blend-mode: soft-light; }
[data-hx-bg="carta"] .hf-light { display: block; }
.hx-play .hf-light { animation: hx-light calc(3200ms / var(--ha-speed)) cubic-bezier(0.23, 1, 0.32, 1) backwards; }
@keyframes hx-light { from { transform: translateX(-60%); opacity: 0; } }

/* the sky: the v2 bands, same positions (from the bottom of the first screen), heights and colours; the warm one overflows below it and fades */
.ha-sky { display: none; position: absolute; left: 0; right: 0; top: 0; height: clamp(680px, 100svh, 1080px); z-index: 0; pointer-events: none; }
[data-hx-bg^="alba"] .ha-sky { display: block; }
.ha-st { position: absolute; left: -10%; right: -10%; border-radius: 50%; filter: blur(var(--ha-blur)); opacity: var(--ha-k); will-change: transform; }
.ha-st0 { bottom: calc(-14vh * var(--ha-h) * var(--ha-hv, 1)); height: 30vh; opacity: calc(var(--ha-k) * var(--ha-warm) * var(--ha-wv, 1)); background: radial-gradient(60% 100% at 56% 50%, var(--ha-c0), var(--ha-c0b) 55%, transparent 100%); }
.ha-st1 { bottom: calc(6vh * var(--ha-h) * var(--ha-hv, 1)); height: 20vh; background: radial-gradient(70% 100% at 55% 50%, var(--ha-c1), color-mix(in srgb, var(--ha-c1), transparent 55%) 55%, transparent); }
.ha-st2 { bottom: calc(19vh * var(--ha-h) * var(--ha-hv, 1)); height: 22vh; background: radial-gradient(75% 100% at 54% 50%, var(--ha-c2), color-mix(in srgb, var(--ha-c2), transparent 60%) 60%, transparent); }
.ha-st3 { bottom: calc(34vh * var(--ha-h) * var(--ha-hv, 1)); height: 26vh; background: radial-gradient(80% 100% at 52% 50%, var(--ha-c3), color-mix(in srgb, var(--ha-c3), transparent 70%) 60%, transparent); }
.ha-st4 { bottom: calc(52vh * var(--ha-h) * var(--ha-hv, 1)); height: 30vh; background: radial-gradient(85% 100% at 50% 50%, var(--ha-c4), transparent 70%); }

/* the only motion of the sky: a slow breath of the warm light */
.hx-play:not([data-ha-breath="false"]) :is(.ha-st0, .ha-st1) { animation: ha-breath calc(9s / var(--ha-speed)) ease-in-out infinite alternate; }
@keyframes ha-breath { to { transform: scale(1.05, 1.12); filter: blur(calc(var(--ha-blur) * 1.15)); } }

@media (max-width: 860px) {
  .ha-sky { height: clamp(600px, 100svh, 920px); }
  .site .hero.hx-hero[data-hx-bg^="alba"] { background-size: 100% clamp(600px, 100svh, 920px); }
  .ha-st0 { height: 22vh; bottom: calc(-8vh * var(--ha-h) * var(--ha-hv, 1)); } .ha-st1 { height: 14vh; bottom: calc(6vh * var(--ha-h) * var(--ha-hv, 1)); }
  .ha-st2 { height: 16vh; bottom: calc(15vh * var(--ha-h) * var(--ha-hv, 1)); } .ha-st3 { height: 18vh; bottom: calc(24vh * var(--ha-h) * var(--ha-hv, 1)); } .ha-st4 { height: 18vh; bottom: calc(33vh * var(--ha-h) * var(--ha-hv, 1)); }
}
}
@media (prefers-reduced-motion: reduce) {
  .hx-play :is(.ha-st, .hf-light) { animation: none; }
}