/* ============================================================
   RESTYLE SECTIONS — WORKER R4
   Re-skin visivo sezione per sezione. SOLO CSS, nessun HTML.
   Si carica DOPO tutti gli altri css: può sovrascrivere.

   Regole rispettate:
   - Solo variabili dei token (nessun colore nuovo: gli alpha
     nascono da color-mix sui colori di tokens.css).
   - Mai display:none su contenuti, mai testo nascosto.
   - Tutto responsive (verifica mentale a 375/500px).
   - Effetti animati (keyframes) solo dentro
     prefers-reduced-motion: no-preference. I micro-feedback di
     hover restano transizioni (collassano a 0.01ms sotto
     reduced-motion per via della regola globale di base.css).
   ============================================================ */


/* ============================================================
   CAPITOLI — numero + filo + label dentro le .eyebrow
   (motion.js inietta .chap__n e .chap__rule; il testo originale
   dell'eyebrow resta la label). L'hero è escluso: la sua eyebrow
   "ETERNAVA" mantiene il colore accent.
   ============================================================ */

.chap__n {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--accent);
}

.chap__rule {
  width: clamp(2.5em, 5vw, 4em);
  height: 1px;
  background: var(--glass-brd);
}

/* Label del capitolo: discreta (ink-faint), più respiro sotto */
main section .eyebrow:has(.chap__n) {
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}


/* ============================================================
   01 — HERO
   ============================================================ */

/* Parola finale "resta." (em.parola-resta, solo via motion.js):
   gradiente testo violet→cyan. -webkit-text-fill-color è il
   modo robusto per il gradient text, funziona anche se i char
   vengono splittati in span inline. */
/* Niente gradient-clip: SplitText trasla i caratteri fuori dal box
   del genitore e il testo clippato sparirebbe durante l'animazione.
   Colore pieno: affidabile con qualunque split. */
.parola-resta {
  color: var(--accent-soft);
}

/* Portale video: bordo glass 1px (da .glass), radius generoso
   (radius-l, già da sections-a), glow violet morbido */
.s-hero__video-frame {
  box-shadow: var(--shadow-card), var(--glow-violet);
}


/* ============================================================
   02 — PROBLEMA
   ============================================================ */

/* Frase chiave: diventa display-quote */
.s-problema__text--emphasis {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  font-weight: 480;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* parole dello scrub reveal (motion.js splitta in parole):
   regola difensiva — inerte se lo span .w non viene emesso,
   mai nasconde il testo di default (opacity a 1). */
.s-problema__text--emphasis .w { opacity: 0.18; transition: opacity 0.3s ease; }
.s-problema__text--emphasis .w.on { opacity: 1; }


/* ============================================================
   03 — COME FUNZIONA
   ============================================================ */

.s-come__grid { counter-reset: comecard; }

/* Card asciutte: fondo bg-deep (opaco, niente blur inutile),
   bordo top 2px accent. position/isolation per il numero dietro. */
.s-come__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  counter-increment: comecard;
  background: var(--bg-deep);
  border: 1px solid var(--glass-brd);
  border-top: 2px solid var(--accent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* translate (proprietà individuale) per non collidere col
     transform inline lasciato dal reveal di GSAP */
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

/* Numero "1·2·3" grande in Fraunces dietro al titolo */
.s-come__card::before {
  content: counter(comecard);
  position: absolute;
  top: 0.3rem;
  right: 0.9rem;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 11vw, 6rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.12;
  pointer-events: none;
}

.s-come__card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-card), var(--glow);
}


/* ============================================================
   05 — TAVOLO
   ============================================================ */

/* Stage full-bleed: larghezza viewport (con gutter), centrato,
   breakout dal container. .s-tavolo ha overflow:hidden quindi
   niente scroll orizzontale. */
.s-tavolo__stage {
  width: min(100vw - 2rem, 1200px);
  max-width: min(100vw - 2rem, 1200px);
  /* full-bleed centrato senza transform (gsap anima scale sullo stage) */
  margin-inline: calc((100% - min(100vw - 2rem, 1200px)) / 2);
  /* doppio bordo: bordo esterno (da tavolo.css) + inset ring */
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--glass-brd);
}

/* Caption stile sottotitolo cinema: fondo più scuro, niente
   bordo, corpo testo, interlinea stretta. */
.s-tavolo__caption {
  background: color-mix(in srgb, var(--bg-void) 78%, transparent);
  border: 0;
  border-radius: var(--radius-s);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-body);
  line-height: 1.35;
}


/* ============================================================
   06 — FIGURE
   ============================================================ */

/* Card 300px su desktop (mobile resta il clamp del carosello) */
@media (min-width: 860px) {
  .s-figure__card { flex: 0 0 300px; }
}

/* Ritratto con overlay gradiente dal basso (bg-void → trasparente) */
.s-figure__media { position: relative; }
.s-figure__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-void), transparent 75%);
  pointer-events: none;
}

/* Nome in Fraunces 1.35rem */
.s-figure__name {
  font-size: 1.35rem;
}

/* Chip discreta: solo testo accent + pallino (niente pillola) */
.s-figure__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--chip-color, var(--accent));
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.s-figure__chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-color, var(--accent));
  flex-shrink: 0;
}


/* ============================================================
   07 — QUELLO CHE RESTA  (più arioso)
   ============================================================ */

.s-resta { padding-block: calc(var(--sp-6) * 1.5); }

/* Paragrafo pieno in Fraunces */
.s-resta__text--full {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.35;
  font-weight: 460;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* A 375/500px riduciamo il respiro verticale (sp-6*1.5 è molto) */
@media (max-width: 600px) {
  .s-resta { padding-block: var(--sp-6); }
}


/* ============================================================
   09 — PRIVACY  (icone in cerchio)
   ============================================================ */

/* Icona svg dentro un cerchio bordato teal. L'svg è l'elemento
   .s-privacy__icon: gli diamo un box content-box 28px + padding
   → cerchio ~55px col glifo centrato. */
.s-privacy__icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  padding: 0.85rem;
  box-sizing: content-box;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
}

/* Titoli più grandi */
.s-privacy__card-title {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}


/* ============================================================
   10 — TECNOLOGIA  (linea di scansione)
   ============================================================ */

/* Coda in stile mono: font-body + tracking + uppercase + small */
.s-tec__coda {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Linea di scansione: pseudo portatore alto 100% col bordo superiore
   (la linea visibile), traslata in translateY da 0 a 100% della sua
   altezza (= altezza blocco). Composita (solo transform/opacity).
   Di default opacity:0 → invisibile fuori no-preference. */
.s-tec__block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  border-top: 1px solid var(--cyan);
  /* drop-shadow (non box-shadow): su un portatore trasparente
     alto 100%, box-shadow glowerebbe tutto il rettangolo;
     drop-shadow segue l'alfa visibile = solo la linea da 1px */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 50%, transparent));
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes s-tec-scan {
    0%   { transform: translateY(0);    opacity: 0; }
    8%   { opacity: 0.55; }
    92%  { opacity: 0.55; }
    100% { transform: translateY(100%); opacity: 0; }
  }
  .s-tec__block::before {
    animation: s-tec-scan 6s linear infinite;
  }
}


/* ============================================================
   12 — SOSTIENI  (80vh, centrato)
   ============================================================ */

.s-sostieni {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-sostieni .container { width: 100%; }

/* h2 alla scala hero */
.s-sostieni__title { font-size: var(--fs-hero); }

/* Bottone warm più grande */
.s-sostieni__cta {
  padding: 1.1em 2.6em;
  font-size: 1.15rem;
}


/* ============================================================
   FOOTER — quattro righe su griglia orizzontale (desktop),
   hairline sopra (già da base.css).
   ============================================================ */

@media (min-width: 860px) {
  .footer .container {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--sp-3);
    align-items: start;
  }
  .footer p { margin-bottom: 0; }
}