/* ═══════════════════════════════════════════════════════
   MISSIONE.CSS — H2OPEN Mission Page
   Variabili, reset, body, cursor, grain, loader, nav,
   footer, scroll-cue → ereditati da style.css
   Architettura scroll-driven identica a distributori.css
═══════════════════════════════════════════════════════ */

/* ── Sfondo uniforme ── */
.scroll-section              { background: var(--deep); }
.scroll-section .sticky-wrap { background: var(--deep); }
#miss-finale                 { background: var(--deep); }

/* ── Bridge drop — fixed, attraversa boundary sezioni ── */
#miss-bridge-drop {
  position: fixed; left: 50%; top: 0;
  z-index: 35; pointer-events: none;
  transform: translateX(-50%) translateY(-10vh);
  opacity: 0; will-change: transform, opacity;
}
#miss-bridge-drop img {
  height: clamp(44px, 7vw, 78px); width: auto;
  filter: drop-shadow(0 0 18px rgba(0,196,240,.55));
  display: block;
}
#miss-bridge-canvas {
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 34;
}

/* Bridge Hero (M1→M2) + Bridge Thirst (M2→M3) */
#miss-bridge-hero, #miss-bridge-thirst {
  position: fixed; left: 50%; top: 0;
  z-index: 36; pointer-events: none;
  transform: translateX(-50%) translateY(-10vh);
  opacity: 0; will-change: transform, opacity;
}
#miss-bridge-hero img {
  height: clamp(56px, 9vw, 100px); width: auto;
  filter: drop-shadow(0 0 24px rgba(0,196,240,.65));
  display: block;
}
#miss-bridge-thirst img {
  height: clamp(44px, 7vw, 78px); width: auto;
  filter: drop-shadow(0 0 18px rgba(0,196,240,.55));
  display: block;
}

/* Bridge 2 + 3 — stesso pattern di Bridge 1 */
#miss-bridge2-drop, #miss-bridge3-drop {
  position: fixed; left: 50%; top: 0;
  z-index: 33; pointer-events: none;
  transform: translateX(-50%) translateY(-10vh);
  opacity: 0; will-change: transform, opacity;
}
#miss-bridge2-drop img, #miss-bridge3-drop img {
  height: clamp(44px, 7vw, 78px); width: auto;
  filter: drop-shadow(0 0 18px rgba(0,196,240,.55));
  display: block;
}
#miss-bridge2-canvas, #miss-bridge3-canvas {
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 32;
}

/* ── Nav link attivo ── */
.nav-link--active { color: var(--water) !important; }


/* ════════════════════════════════════════════════════════
   COMMONS — helpers condivisi
════════════════════════════════════════════════════════ */
.ln { display: block; overflow: hidden; }
.ln em {
  display: inline-block; font-style: normal;
  transform: translateY(110%); will-change: transform;
}


/* ════════════════════════════════════════════════════════
   SEC M1 — OUVERTURE: La goccia nel buio
   320vh — goccia cade, si ferma, parole emergono
════════════════════════════════════════════════════════ */
#miss-hero { height: 380vh; overflow-x: clip; }
#miss-hero .sticky-wrap { overflow: visible; }

#miss-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, #081020 0%, var(--deep) 72%);
}

/* Goccia */
#miss-drop-wrap {
  position: absolute; left: 50%; top: -18vh;
  transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  will-change: transform;
}
#miss-drop-img {
  height: clamp(56px, 9vw, 100px); width: auto;
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(0,196,240,.65));
  will-change: transform, opacity;
  transition: filter 0.6s;
}
#miss-drop-glow {
  position: absolute; inset: -80%;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,196,240,.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Canvas ripple impatto */
#miss-drop-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Testo hero */
#miss-hero-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10; text-align: center;
  padding-bottom: 8vh; pointer-events: none;
  opacity: 0;
}
#miss-hero-eyebrow {
  font-family: var(--mono); font-size: clamp(.54rem, 1vw, .68rem);
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--water); margin-bottom: 24px;
}
#miss-hero-title {
  font-family: var(--clash); font-size: clamp(2.2rem, 6vw, 8.5rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.025em; color: var(--ice);
}
#miss-hero-title span { display: block; overflow: hidden; }
#miss-hero-title em {
  display: inline-block; font-style: normal;
  transform: translateY(110%); will-change: transform;
}
#miss-hero-sub {
  font-family: var(--inter); font-size: clamp(.8rem, 1.3vw, 1.1rem);
  font-weight: 300; color: rgba(255,255,255,.38);
  margin-top: 28px; letter-spacing: .04em;
  opacity: 0;
}

/* particelle stelle canvas fisso */
#miss-stars-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}


/* ════════════════════════════════════════════════════════
   SEC M2 — IL MONDO ASSETATO
   420vh — griglia punti + counter 768M
════════════════════════════════════════════════════════ */
#miss-thirst { height: 420vh; overflow-x: clip; }

#miss-thirst-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
#miss-thirst-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #081420 0%, var(--deep) 68%);
}

#miss-thirst-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10; text-align: center;
  padding: 0 clamp(20px, 4vw, 80px);
  pointer-events: none;
}
#miss-thirst-eyebrow {
  font-family: var(--mono); font-size: clamp(.52rem, .9vw, .66rem);
  letter-spacing: .4em; text-transform: uppercase;
  color: rgba(0,196,240,.5); margin-bottom: 20px;
  opacity: 0;
}
#miss-thirst-counter {
  font-family: var(--clash); font-size: clamp(4rem, 14vw, 17rem);
  font-weight: 700; letter-spacing: -.04em;
  color: var(--ice);
  line-height: 0.9;
  opacity: 0;
  /* scia glow rossa/drammatica solo per questa sezione */
  text-shadow:
    0 0 60px rgba(255,59,59,.2),
    0 0 120px rgba(255,59,59,.08);
}
#miss-thirst-counter .counter-unit {
  font-family: var(--mono); font-size: clamp(1rem, 2.5vw, 2.5rem);
  color: rgba(0,196,240,.6); margin-left: 4px;
  vertical-align: super;
  font-weight: 400;
}
#miss-thirst-label {
  font-family: var(--clash); font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 600; color: rgba(255,255,255,.55);
  margin-top: 12px; opacity: 0;
}
#miss-thirst-sub {
  font-family: var(--inter); font-size: clamp(.76rem, 1.2vw, 1rem);
  font-weight: 300; color: rgba(255,255,255,.28);
  margin-top: 20px; max-width: 520px;
  line-height: 1.7; opacity: 0;
}

/* Goccia che riappare su questa sezione */
#miss-drop2-wrap {
  position: absolute; left: 50%; top: 20px;
  transform: translateX(-50%);
  z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  will-change: transform, opacity;
  opacity: 0;
}
#miss-drop2-img {
  height: clamp(44px, 7vw, 80px); width: auto;
  filter: drop-shadow(0 0 18px rgba(0,196,240,.55));
}


/* ════════════════════════════════════════════════════════
   SEC M3 — LA FORMULA
   460vh — bottiglia + pipeline counter + regola 10%
════════════════════════════════════════════════════════ */
#miss-formula { height: 540vh; overflow-x: clip; }
#miss-formula .sticky-wrap { overflow: visible; }

#miss-formula-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 40%, #081828 0%, var(--deep) 70%);
}

/* Bottiglia al centro */
#miss-bottle-wrap {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  z-index: 5; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
#miss-bottle-img {
  height: clamp(180px, 28vh, 340px); width: auto;
  filter: drop-shadow(0 0 40px rgba(0,196,240,.22));
}

/* Header formula — sinistra */
#miss-formula-header {
  position: absolute; left: clamp(20px, 5vw, 80px); top: 50%;
  transform: translateY(-50%);
  z-index: 10; pointer-events: none;
  max-width: clamp(200px, 28vw, 400px);
}
#miss-formula-eyebrow {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--water); margin-bottom: 18px; opacity: 0;
}
#miss-formula-title {
  font-family: var(--clash); font-size: clamp(1.8rem, 3vw, 3.8rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.02em;
  color: var(--ice);
}

/* Pipeline destra */
#miss-pipeline {
  position: absolute; right: clamp(20px, 5vw, 80px); top: 50%;
  transform: translateY(-46%);
  z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; gap: 0;
  width: clamp(220px, 28vw, 380px);
}
.miss-pipe-step {
  display: flex; align-items: flex-start; gap: 16px;
  opacity: 0; transform: translateX(30px);
  will-change: opacity, transform;
}
.miss-pipe-connector {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; margin-top: 4px;
}
.miss-pipe-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--water);
  box-shadow: 0 0 10px rgba(0,196,240,.6);
  flex-shrink: 0;
}
.miss-pipe-line {
  width: 1px; height: clamp(24px, 3.2vh, 36px);
  background: linear-gradient(to bottom, rgba(0,196,240,.5), rgba(0,196,240,.15));
}
.miss-pipe-last .miss-pipe-line { display: none; }

.miss-pipe-content { flex: 1; padding-bottom: clamp(14px, 2vh, 22px); }
.miss-pipe-label {
  font-family: var(--mono); font-size: clamp(.56rem, .9vw, .68rem);
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(0,196,240,.45); margin-bottom: 4px;
}
.miss-pipe-val {
  font-family: var(--clash); font-size: clamp(1.3rem, 2.4vw, 2.8rem);
  font-weight: 700; color: var(--ice); line-height: 1.1;
}
.miss-pipe-val .highlight { color: var(--water); }
.miss-pipe-sub {
  font-family: var(--inter); font-size: clamp(.66rem, 1vw, .8rem);
  font-weight: 300; color: var(--ghost); margin-top: 3px; line-height: 1.5;
}

/* Blocco Regola 10% — schermo pieno, centrato, split orizzontale */
#miss-rule10 {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 0 clamp(24px, 6vw, 100px);
  z-index: 12; pointer-events: none;
  opacity: 0;
}

/* Sinistra: numero + label */
#miss-rule10-left {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
}
#miss-rule10-number {
  font-family: var(--clash); font-size: clamp(5rem, 13vw, 16rem);
  font-weight: 700; letter-spacing: -.04em;
  color: var(--water);
  text-shadow:
    0 0 60px rgba(0,196,240,.30),
    0 0 140px rgba(0,196,240,.10);
  line-height: 0.85;
  will-change: transform, opacity;
}
#miss-rule10-unit {
  font-family: var(--mono); font-size: clamp(.5rem, 1vw, .78rem);
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(0,196,240,.45); display: block;
  margin-top: 14px; text-align: right;
  opacity: 0;
}

/* Divisore verticale */
#miss-rule10-divider {
  width: 1px; height: clamp(100px, 18vh, 220px);
  background: linear-gradient(to bottom,
    transparent 0%, rgba(0,196,240,.35) 30%,
    rgba(0,196,240,.35) 70%, transparent 100%);
  flex-shrink: 0;
  opacity: 0;
}

/* Destra: testo */
#miss-rule10-right {
  display: flex; flex-direction: column; gap: 16px;
  max-width: clamp(220px, 28vw, 420px);
}
#miss-rule10-sub {
  font-family: var(--inter); font-size: clamp(.8rem, 1.2vw, 1rem);
  font-weight: 300; color: rgba(255,255,255,.45);
  line-height: 1.75;
  opacity: 0;
}
#miss-rule10-sub em {
  color: rgba(0,196,240,.5); font-style: normal;
  display: block; margin-top: 10px;
  font-size: .88em; letter-spacing: .02em;
}

/* Mobile: stack verticale */
@media (max-width: 760px) {
  #miss-rule10 { flex-direction: column; gap: 18px; text-align: center; }
  #miss-rule10-left { align-items: center; }
  #miss-rule10-unit { text-align: center; }
  #miss-rule10-divider { width: clamp(60px, 30vw, 160px); height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,196,240,.35), transparent); }
  #miss-rule10-right { max-width: 90vw; align-items: center; text-align: center; }
}

/* Goccia che transita */
#miss-drop3-wrap {
  position: absolute; left: 50%; top: 18px;
  transform: translateX(-50%);
  z-index: 8; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
#miss-drop3-img {
  height: clamp(44px, 7vw, 78px); width: auto;
  filter: drop-shadow(0 0 18px rgba(0,196,240,.55));
}


/* ════════════════════════════════════════════════════════
   SEC M4 — UGANDA
   440vh — mappa Africa PCB + partner card
════════════════════════════════════════════════════════ */
#miss-uganda { height: 440vh; overflow-x: clip; }

#miss-uganda-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 70% at 54% 50%, #091520 0%, var(--deep) 65%);
}

/* Mappa Africa */
#miss-africa-wrap {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-56%, -50%);
  z-index: 4; pointer-events: none;
  width: clamp(200px, 34vw, 460px);
  opacity: 0; will-change: opacity;
}
#miss-africa-wrap svg { width: 100%; height: auto; }

/* Testo Uganda — destra */
#miss-uganda-text {
  position: absolute; right: clamp(20px, 5vw, 80px); top: 50%;
  transform: translateY(-50%);
  z-index: 10; pointer-events: none;
  max-width: clamp(240px, 32vw, 480px);
}
#miss-uganda-eyebrow {
  font-family: var(--mono); font-size: clamp(.52rem, .85vw, .65rem);
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--water); margin-bottom: 18px; opacity: 0;
}
#miss-uganda-title {
  font-family: var(--clash); font-size: clamp(1.9rem, 3.2vw, 4rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.02em;
  color: var(--ice);
}

/* Blockquote impatto */
#miss-uganda-quote {
  margin-top: 28px;
  border-left: 2px solid var(--water);
  padding-left: 20px;
  opacity: 0; transform: translateX(20px);
  will-change: opacity, transform;
}
#miss-uganda-quote p {
  font-family: var(--inter); font-size: clamp(.78rem, 1.2vw, 1rem);
  font-weight: 400; color: rgba(255,255,255,.55);
  line-height: 1.7;
}
#miss-uganda-quote strong { color: var(--water); font-weight: 600; }

/* Card partner */
#miss-partner-card {
  margin-top: 28px;
  background: rgba(0,196,240,.04);
  border: 1px solid rgba(0,196,240,.14);
  border-radius: 12px; padding: 18px 22px;
  opacity: 0; transform: translateY(16px);
  will-change: opacity, transform;
}
#miss-partner-label {
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(0,196,240,.45); margin-bottom: 8px;
}
#miss-partner-name {
  font-family: var(--clash); font-size: clamp(.95rem, 1.6vw, 1.3rem);
  font-weight: 700; color: var(--ice); margin-bottom: 6px;
}
#miss-partner-desc {
  font-family: var(--inter); font-size: clamp(.68rem, 1vw, .82rem);
  font-weight: 300; color: var(--ghost); line-height: 1.55;
}

/* Cuore riempibile scroll-driven — Uganda */
#miss-heart-wrap {
  position: absolute; left: clamp(60px, 7vw, 120px); bottom: 6vh;
  z-index: 5; pointer-events: none;
  opacity: 0; will-change: opacity, transform;
  --hw:  clamp(100px, 14vw, 170px);
  --hh:  calc(var(--hw) * 0.875);
  --wvh: calc(var(--hw) * 0.25);
  --fill: 0;
  filter: drop-shadow(0 0 clamp(8px,1.2vw,18px) rgba(0,196,240,.45));
}
.miss-heart {
  position: relative;
  width: var(--hw); height: var(--hh);
  overflow: hidden;
  clip-path: url(#heart-clip);
  /* sfondo navy profondo — la cyan luminosa emerge come acqua */
  background: radial-gradient(ellipse at 50% 30%, #021c38 0%, #010c1e 100%);
}
/* .miss-tank rimosso: il solid rectangle creava la riga orizzontale.
   Ora è la wave body (v9999) a coprire tutto il basso del cuore. */
.miss-curve {
  position: absolute;
  bottom: calc(var(--fill) * var(--hh) - var(--wvh));
  width: 100%; height: var(--wvh);
  overflow: visible; /* la fill body scende oltre l'SVG, .miss-heart clippa */
  z-index: 6;
}
.miss-curve use {
  animation: miss-wave 2s cubic-bezier(.55,.5,.45,.5) infinite;
}
.miss-curve use:nth-child(1) { animation-duration: 3s; fill: rgba(0,196,240,0.32); }
.miss-curve use:nth-child(2) { animation-duration: 4s; fill: rgba(0,236,255,0.22); }
.miss-curve use:nth-child(3) { animation-duration: 2s; fill: rgba(0,196,240,0.88); }
@keyframes miss-wave {
  0%   { transform: translateX(-90px); }
  100% { transform: translateX(85px); }
}

/* Goccia transitante */
#miss-drop4-wrap {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  z-index: 8; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
#miss-drop4-img {
  height: clamp(44px, 7vw, 78px); width: auto;
  filter: drop-shadow(0 0 18px rgba(0,196,240,.55));
}

/* Canvas ripple landing Uganda */
#miss-uganda-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 7;
}


/* ════════════════════════════════════════════════════════
   SEC M5 — LA VISIONE
   400vh — testo accelerato + tre pillole
════════════════════════════════════════════════════════ */
#miss-vision { height: 400vh; overflow-x: clip; }

#miss-vision-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 65% at 50% 50%, #0A1824 0%, var(--deep) 68%);
}

#miss-vision-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10; text-align: center;
  padding: 0 clamp(20px, 6vw, 100px);
  pointer-events: none;
}
#miss-vision-title-a {
  font-family: var(--clash); font-size: clamp(2.2rem, 5.5vw, 8rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.025em;
  color: rgba(255,255,255,.25);
  opacity: 0;
}
#miss-vision-title-b {
  font-family: var(--clash); font-size: clamp(2.2rem, 5.5vw, 8rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.025em;
  color: var(--ice);
  opacity: 0; margin-top: -4px;
}
#miss-vision-title-a .ln em,
#miss-vision-title-b .ln em {
  transform: translateY(110%);
}

/* Pillole terminale */
#miss-pills {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 48px; align-items: flex-start;
  opacity: 0;
}
.miss-pill {
  display: flex; align-items: center; gap: 14px;
  background: rgba(0,196,240,.04);
  border: 1px solid rgba(0,196,240,.12);
  border-radius: 6px; padding: 12px 20px;
  opacity: 0; transform: translateX(40px);
  will-change: opacity, transform;
}
.miss-pill-arrow {
  font-family: var(--mono); font-size: .72rem;
  color: var(--water); flex-shrink: 0;
}
.miss-pill-text {
  font-family: var(--mono); font-size: clamp(.62rem, 1vw, .78rem);
  letter-spacing: .06em; color: var(--ice); line-height: 1.4;
}
.miss-pill-text strong { color: var(--water); }

#miss-vision-tagline {
  font-family: var(--inter); font-size: clamp(.78rem, 1.2vw, 1rem);
  font-weight: 300; color: rgba(255,255,255,.3);
  margin-top: 36px; line-height: 1.7; text-align: center;
  max-width: 440px; opacity: 0;
}

/* Goccia che accelera */
#miss-drop5-wrap {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  z-index: 8; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
#miss-drop5-img {
  height: clamp(52px, 8.5vw, 96px); width: auto;
  filter: drop-shadow(0 0 30px rgba(0,196,240,.75));
  /* glow più intenso — goccia che accelera */
}


/* ════════════════════════════════════════════════════════
   SEC M6 — IL POZZO — Finale
   380vh — goccia cade nel pozzo, esplosione ripple, testo
════════════════════════════════════════════════════════ */
#miss-well { height: 380vh; overflow-x: clip; }
#miss-well .sticky-wrap { overflow: visible; }

#miss-well-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 55%, #060E1A 0%, var(--deep) 62%);
}

/* Pozzo PNG */
#miss-well-wrap {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
#miss-well-img {
  width: clamp(160px, 24vw, 300px); height: auto;
  filter: drop-shadow(0 0 30px rgba(0,196,240,.15));
}

/* Canvas ripple esplosione finale */
#miss-well-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 7;
}

/* Goccia finale — cade nel pozzo */
#miss-drop6-wrap {
  position: absolute; left: 50%; top: -12vh;
  transform: translateX(-50%);
  z-index: 10; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
#miss-drop6-img {
  height: clamp(60px, 9.5vw, 110px); width: auto;
  filter: drop-shadow(0 0 28px rgba(0,196,240,.7));
}

/* Testo finale */
#miss-well-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 15; text-align: center;
  padding: 0 clamp(20px, 6vw, 100px);
  pointer-events: none; opacity: 0;
}
#miss-finale-line1 {
  font-family: var(--clash); font-size: clamp(2.4rem, 6.5vw, 9.5rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--ice);
  line-height: 0.96; display: block; overflow: hidden;
}
#miss-finale-line1 em {
  display: inline-block; font-style: normal;
  transform: translateY(110%); will-change: transform;
}
#miss-finale-line2 {
  font-family: var(--clash); font-size: clamp(2.4rem, 6.5vw, 9.5rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--water);
  line-height: 0.96; display: block; overflow: hidden;
}
#miss-finale-line2 em {
  display: inline-block; font-style: normal;
  transform: translateY(110%); will-change: transform;
}
#miss-finale-sub {
  font-family: var(--inter); font-size: clamp(.9rem, 1.6vw, 1.3rem);
  font-weight: 300; color: rgba(255,255,255,.35);
  margin-top: 32px; line-height: 1.65;
  opacity: 0;
}
#miss-finale-sub strong {
  color: rgba(255,255,255,.7); font-weight: 400;
}

/* Logo sigillo finale */
#miss-finale-seal-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
}
#miss-finale-seal-wrap::before {
  content: '';
  position: absolute;
  inset: -70%;
  background: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(0,196,240,.18) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}
#miss-finale-seal {
  width: clamp(120px, 16vw, 200px); height: auto;
  opacity: 0;
  /* Nessun filtro colore: SVG mostrato nei suoi colori originali */
  filter: drop-shadow(0 0 28px rgba(0,196,240,.45));
  position: relative; /* sopra il ::before */
}


/* ════════════════════════════════════════════════════════
   FOOTER — identico a distributori
════════════════════════════════════════════════════════ */
footer {
  position: relative; z-index: 10;
  border-top: 1px solid rgba(0,196,240,.06);
  padding: 32px clamp(24px, 6vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.footer-copy {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .18em; color: rgba(255,255,255,.2);
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .18em; color: rgba(255,255,255,.2);
  text-decoration: none; transition: color .25s;
}
.footer-links a:hover { color: var(--water); }


/* ════════════════════════════════════════════════════════
   SCROLL CUE
════════════════════════════════════════════════════════ */
.cue-drop {
  width: 2px; height: 18px; margin: 6px auto 0;
  background: linear-gradient(to bottom, var(--water), transparent);
  animation: cue-fall 1.4s ease-in-out infinite;
}
@keyframes cue-fall {
  0%   { opacity: 0; transform: translateY(-4px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}
#scroll-cue {
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.22); text-align: center;
}


/* ════════════════════════════════════════════════════════
   MOBILE — max-width: 640px
════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  /* Formula — stacking */
  #miss-formula-header {
    position: absolute; top: 6vh; left: 20px; transform: none;
    max-width: 90vw;
  }
  #miss-bottle-wrap {
    position: absolute; left: 50%; top: 44%;
    transform: translate(-50%, -50%); opacity: 1;
  }
  #miss-bottle-img { height: clamp(120px, 20vh, 220px); }
  #miss-pipeline {
    position: absolute; right: auto; left: 50%; bottom: 5vh; top: auto;
    transform: translateX(-50%); width: 90vw;
  }
  /* Uganda — stacking */
  #miss-africa-wrap {
    position: absolute; left: 50%; top: 12vh;
    transform: translateX(-52%); width: clamp(160px, 60vw, 300px);
  }
  #miss-uganda-text {
    position: absolute; right: auto; left: 50%; bottom: 5vh; top: auto;
    transform: translateX(-50%); max-width: 90vw; text-align: center;
  }
  #miss-uganda-quote { border-left: none; border-top: 1px solid var(--water); padding: 14px 0 0; }
  #miss-heart-wrap { display: none; }
  /* Pillole */
  #miss-pills { align-items: center; width: 90vw; }
  .miss-pill { width: 100%; }
}

@media (max-width: 640px) {
  #miss-hero { height: 340vh; }
  #miss-thirst { height: 380vh; }
  #miss-formula { height: 420vh; }
  #miss-uganda { height: 400vh; }
  #miss-vision { height: 360vh; }
  #miss-well { height: 340vh; }

  #miss-thirst-counter { font-size: clamp(3.5rem, 18vw, 8rem); }
  #miss-rule10-number  { font-size: clamp(3rem, 16vw, 7rem); }
  #miss-finale-line1,
  #miss-finale-line2   { font-size: clamp(2rem, 9vw, 5rem); }

  /* ── FOOTER: identico alla home ── */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-bottom: 82px;
    padding-top: 28px;
  }
  .footer-links { justify-content: center; gap: 16px; order: 1; }
  .footer-copy  { order: 2; opacity: .55; }
}