/* ============================================================
   ALBA28 — FX "IL SITO È UNA GIORNATA"
   Layer visivo aggiuntivo (variazione). Si attiva SOLO quando
   assets/js/sky.js aggiunge la classe .fx-on al <body>:
   senza JS il sito è esattamente quello originale.
   Nessuna regola di alba.css viene modificata: qui solo override
   ed elementi nuovi iniettati da JS (canvas, sole, onde, stelle).
   ============================================================ */

/* ============================================================
   0. CIELO GLOBALE — tinta di luce che attraversa la pagina
   (3 variabili interpolate da JS in base allo scroll)
   ============================================================ */
body.fx-on::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--sky1, #F7F1E5) 0%,
    var(--sky2, #F7F1E5) 52%,
    var(--sky3, #F7F1E5) 100%);
}
/* il contenuto scorre sopra il cielo */
body.fx-on main,
body.fx-on .site-footer { position: relative; z-index: 1; }
/* header (fixed, z100) e sticky-cta (fixed, z90) hanno già il loro livello */

/* ============================================================
   1. HERO — cielo generativo + ingresso editoriale
   ============================================================ */
.fx-hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
body.fx-on .hero__sky svg { position: relative; z-index: 1; }

/* Ingresso scenico degli elementi della hero (parte .fx-hero-in) */
body.fx-on .hero__kicker,
body.fx-on .hero .lede,
body.fx-on .hero__pledge,
body.fx-on .hero__actions {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
body.fx-on.fx-hero-in .hero__kicker  { opacity: 1; transform: none; transition-delay: 0.15s; }
body.fx-on.fx-hero-in .hero .lede    { opacity: 1; transform: none; transition-delay: 0.55s; }
body.fx-on.fx-hero-in .hero__pledge  { opacity: 1; transform: none; transition-delay: 0.80s; }
body.fx-on.fx-hero-in .hero__actions { opacity: 1; transform: none; transition-delay: 1.00s; }

/* Titolo: ogni parola sale da una maschera (markup generato da JS) */
.wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.22em;   /* i discendenti (g, p, y) non vengono tagliati */
  margin-bottom: -0.22em;
}
.wm__w {
  display: inline-block;
  transform: translateY(118%) rotate(3deg);
  transform-origin: 0% 100%;
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(0.30s + var(--i, 0) * 65ms);
  will-change: transform;
}
body.fx-hero-in .wm__w { transform: none; }

/* ============================================================
   2. L'ORIZZONTE NELL'HEADER — il sole percorre la barra fissa
   come una linea di progresso poetica: sorge a sinistra,
   culmina al centro, tramonta a destra. Non tocca mai i contenuti.
   ============================================================ */
body.fx-on .site-header__inner { position: relative; z-index: 1; }
.fx-suntrack {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
/* la linea d'orizzonte: un filo dorato sul bordo inferiore della barra */
.fx-suntrack__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right,
    transparent 4%,
    color-mix(in srgb, var(--sole) 55%, transparent) 50%,
    transparent 96%);
}
.fx-suntrack__sun {
  position: absolute; left: 0; bottom: 0;
  width: 3.4rem;
  will-change: transform;
}
/* alone grande che si diffonde nella barra (intensità via --glow da JS) */
.fx-suntrack__sun::before {
  content: "";
  position: absolute; inset: -170%;
  background: radial-gradient(closest-side,
    rgba(240, 162, 50, 0.38) 0%,
    rgba(240, 162, 50, 0.14) 45%,
    transparent 72%);
  opacity: var(--glow, 1);
}
.fx-suntrack__sun svg {
  width: 100%; height: auto; display: block;
  position: relative;
  filter: drop-shadow(0 0 0.7rem rgba(240, 162, 50, 0.55));
}
@media (max-width: 56rem) { .fx-suntrack__sun { width: 2.5rem; } }
/* la pozza di luce che il sole proietta sulla pagina sottostante:
   segue --sx (posizione orizzontale del sole, da JS), vive sopra il
   cielo (body::before) ma sotto i contenuti → illumina il "terreno",
   mai il testo: il contrasto resta intatto */
.fx-sunlight {
  position: fixed; left: 0; right: 0; top: 4.9rem;
  height: 55vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 11rem 13rem at var(--sx, 50%) 0%,
      rgba(240, 162, 50, 0.30) 0%,
      transparent 70%),
    radial-gradient(ellipse 27rem 24rem at var(--sx, 50%) 0%,
      rgba(240, 162, 50, 0.16) 0%,
      rgba(240, 162, 50, 0.05) 45%,
      transparent 72%);
}
@media (max-width: 56rem) {
  .fx-sunlight {
    background:
      radial-gradient(ellipse 8rem 10rem at var(--sx, 50%) 0%,
        rgba(240, 162, 50, 0.26) 0%,
        transparent 70%),
      radial-gradient(ellipse 18rem 19rem at var(--sx, 50%) 0%,
        rgba(240, 162, 50, 0.14) 0%,
        transparent 72%);
  }
}
/* menu mobile aperto: il cielo della barra si spegne */
.site-header:has(.nav-primary.is-open) .fx-suntrack { opacity: 0 !important; }

/* ============================================================
   3. STRATIGRAFIA VIVA — strati che scivolano + corona d'onde
   ============================================================ */
body.fx-on .strat__layer {
  opacity: 0;
  transform: translateX(-2.5rem);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out),
              background-color var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
body.fx-on .strat__layer:nth-child(even) { transform: translateX(2.5rem); }
body.fx-on .strat__layer.fx-in { opacity: 1; transform: none; }

/* il contenitore .strat è .reveal nel sito base, ma con 4 pannelli aperti
   è altissimo (~4000px) e la soglia del 12% lo terrebbe invisibile a lungo:
   con la variazione attiva l'ingresso è delegato ai singoli strati */
body.fx-on .strat.reveal { opacity: 1; transform: none; transition: none; }

/* ogni strato ha il colore del suo pilastro */
body.fx-on .strat__layer:nth-child(1) { --pc: var(--sole); }
body.fx-on .strat__layer:nth-child(2) { --pc: var(--salvia); }
body.fx-on .strat__layer:nth-child(3) { --pc: var(--bosco); }
body.fx-on .strat__layer:nth-child(4) { --pc: var(--ardesia); }
body.fx-on .strat__layer { border-bottom: 1px solid color-mix(in srgb, var(--pc) 45%, var(--line)); }
body.fx-on .strat__layer:hover { background: color-mix(in srgb, var(--pc) 5%, transparent); }

/* la corona d'onde sopra la lista (SVG iniettato da JS, morph in JS) */
.fx-strata-waves {
  display: block;
  width: 100%;
  height: 3.4rem;
  margin-bottom: var(--space-m);
}

/* ============================================================
   4. GIORNATA IMMERSIVA — il cielo della sezione vive il giorno
   (colori via --dsky1/--dsky2 da JS; di notte i testi virano)
   ============================================================ */
section.fx-daysky {
  background: linear-gradient(to bottom,
    var(--dsky1, #F7F1E5) 0%,
    var(--dsky2, #F7F1E5) 100%);
}
section.fx-daysky .wrap { position: relative; z-index: 1; }
.fx-day-stars {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* stato notte: attivato da JS oltre le 20:30 */
section.fx-daysky.is-night { color: #EFE8D8; }
section.fx-daysky.is-night h2,
section.fx-daysky.is-night h3 { color: #EFE8D8; }
section.fx-daysky.is-night .eyebrow { color: rgba(239, 232, 216, 0.72); }
section.fx-daysky.is-night .lede { color: rgba(239, 232, 216, 0.82); }
section.fx-daysky.is-night .moment { border-top-color: rgba(239, 232, 216, 0.20); }
section.fx-daysky.is-night .moment p { color: rgba(239, 232, 216, 0.75); }
section.fx-daysky.is-night .moment__time { color: rgba(239, 232, 216, 0.65); }
section.fx-daysky.is-night .moment.is-lit .moment__time { color: var(--sole); }
section.fx-daysky.is-night .day__clock { color: #EFE8D8; }
section.fx-daysky.is-night .day__phase { color: rgba(239, 232, 216, 0.72); }
section.fx-daysky.is-night .day__rail { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
section.fx-daysky.is-night .day__arc path { stroke: rgba(239, 232, 216, 0.30); }
section.fx-daysky.is-night .day__arc line { stroke: rgba(239, 232, 216, 0.60); }
section.fx-daysky.is-night .link-arrow { color: #EFE8D8; }
/* su mobile il rail ha sfondo blur chiaro: di notte diventa scuro */
@media (max-width: 56rem) {
  section.fx-daysky.is-night .day__rail {
    background: color-mix(in srgb, #1A2A42 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ============================================================
   5. LA LINEA DELLA MISURA — pulsazione che si disegna (JS/SVG)
   ============================================================ */
body.fx-on .measure__track::before {
  background: color-mix(in srgb, var(--ink-2) 25%, transparent);
}
.fx-measure-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
}
body.fx-on .measure__point::before {
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease), transform 0.5s var(--ease-out);
  background: var(--carta);
  border-color: var(--ink-3);
}
body.fx-on .measure__point.fx-lit::before {
  background: var(--sole);
  border-color: var(--sole);
  transform: scale(1.18);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--sole) 20%, transparent);
}
body.fx-on .measure__point.fx-lit .measure__t { color: var(--sole-ink); }

/* ============================================================
   6. MARQUEE CINETICO — la fascia sintetica scorre
   (attivato da JS con body.fx-marquee; cloni aria-hidden)
   ============================================================ */
body.fx-marquee .strip { overflow: clip; }
body.fx-marquee .strip__list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: fx-marquee var(--mq-dur, 36s) linear infinite;
  will-change: transform;
}
body.fx-marquee .strip__list:hover,
body.fx-marquee .strip:focus-within .strip__list { animation-play-state: paused; }
@keyframes fx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   7. LUCE NELLA BANDA — alone caldo che segue il cursore
   (coordinate --bx/--by da JS, solo pointer:fine)
   ============================================================ */
body.fx-on .band::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(26rem circle at var(--bx, 50%) var(--by, 38%),
    rgba(240, 162, 50, 0.15), transparent 70%);
}
body.fx-on .band .wrap { position: relative; z-index: 1; }
/* le CTA magnetiche ricevono il transform da JS: niente CSS qui */

/* ============================================================
   8. NOTTE STELLATA FINALE + linea d'alba del footer
   ============================================================ */
body.fx-on .cta-final {
  background: linear-gradient(to bottom, #101B29 0%, #1B2C40 55%, #22344F 100%);
  color: #EFE8D8;
  border-top-color: transparent;
}
body.fx-on .cta-final h2 { color: #EFE8D8; }
body.fx-on .cta-final .lede { color: rgba(239, 232, 216, 0.82); }
body.fx-on .cta-final .wrap { position: relative; z-index: 1; }
.fx-cta-stars {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* il sole della CTA tramonta sotto la sua linea d'orizzonte */
body.fx-on .cta-final__sun {
  transition: transform 2.4s var(--ease-out), opacity 2.4s var(--ease-out);
}
body.fx-on .cta-final.fx-night-in .cta-final__sun {
  transform: translateY(34%);
  opacity: 0.22;
}
/* footer: una linea d'alba sul bordo — il mattino dopo */
body.fx-on .site-footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--sole) 60%, transparent),
    transparent) 1;
}

/* ============================================================
   MOVIMENTO RIDOTTO — ogni effetto ha un fallback statico
   (sky.js non avvia le animazioni; qui il lato CSS)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.fx-on .hero__kicker,
  body.fx-on .hero .lede,
  body.fx-on .hero__pledge,
  body.fx-on .hero__actions {
    opacity: 1; transform: none; transition: none;
  }
  .wm__w { transform: none !important; transition: none !important; }
  body.fx-on .strat__layer { opacity: 1 !important; transform: none !important; transition: none; }
  .fx-suntrack, .fx-sunlight { display: none; }
  body.fx-on .cta-final__sun { transform: none; opacity: 1; transition: none; }
  body.fx-marquee .strip__list { animation: none; }
  body.fx-on .band::after { background: none; }
}