/* =========================================================
   portfolio: "La Costellazione" (Daybreak)
   Night-to-dawn growth journey with an interactive star map.
   Josefin Sans (display) · Mona Sans (body) · Space Mono (data/etichette).
   Never use Inter.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, form { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* scrollbar nativa nascosta: si naviga con rotella/touch e con la linea di progresso */
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------- Tokens ---------- */
:root {
  --night:   #05070F;
  --ink:     #F3ECDD;
  --ink-2:   #B9B2A4;
  --muted:   #6F6A60;
  --accent:  #FFB04A;
  --accent-2:#FF7E5F;
  --ice:     #8FE3F2;   /* strumenti di bordo / spazio freddo */
  --rule:    rgba(243, 236, 221, 0.14);

  --display: "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:    "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-eyebrow: 0.74rem;
  --t-body:    clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  --t-lead:    clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  --t-h3:      clamp(1.8rem, 1.3rem + 2vw, 3rem);
  --t-h2:      clamp(2.6rem, 1.7rem + 4.5vw, 6.5rem);
  --t-giga:    clamp(3.4rem, 1.4rem + 9vw, 9rem);
  --t-metric:  clamp(3.5rem, 2rem + 8vw, 9rem);

  --pad-x:     clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(6rem, 12vw, 14rem);
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --maxw:      1400px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (hover: none) { body { cursor: auto; } }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: normal; }
::selection { background: var(--accent); color: var(--night); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }

/* le sezioni "seguono la camera": parallasse/inclinazione live (vedi initCameraFollow) */
[data-follow] { will-change: transform; }

.eyebrow {
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.7em;
}

/* ---------- Deep space (il viaggio) ---------- */
/* Lo spazio è il fondo costante: nessuna alba in cielo, ma una stella verso
   cui si vola. Caldo solo al centro/in basso (la rotta punta alla luce). */
.space {
  position: fixed; inset: 0; z-index: -6;
  background:
    radial-gradient(120% 80% at 50% 128%, rgba(255, 150, 70, 0.07), transparent 56%),
    linear-gradient(180deg, #02030A 0%, #05070F 46%, #070A16 100%);
}
/* nubi di gas lontane: aloni morbidi che danno profondità allo spazio vuoto */
.nebula { position: fixed; inset: 0; z-index: -5; pointer-events: none; overflow: hidden; }
.nebula span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.42; mix-blend-mode: screen; }
.nebula span:nth-child(1) { width: 62vw; height: 62vw; left: -12vw; top: 4vh; background: radial-gradient(circle, rgba(64, 92, 200, 0.55), transparent 66%); }
.nebula span:nth-child(2) { width: 52vw; height: 52vw; right: -10vw; top: 46vh; background: radial-gradient(circle, rgba(126, 64, 156, 0.42), transparent 66%); }
.nebula span:nth-child(3) { width: 48vw; height: 48vw; left: 16vw; top: 122vh; background: radial-gradient(circle, rgba(36, 158, 168, 0.34), transparent 66%); }
@media (prefers-reduced-motion: no-preference) {
  .nebula span { animation: nebulaDrift 46s ease-in-out infinite alternate; }
  .nebula span:nth-child(2) { animation-duration: 58s; }
  .nebula span:nth-child(3) { animation-duration: 70s; }
}
@keyframes nebulaDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, -3vh) scale(1.12); } }

/* la stella di destinazione: lontana e fioca alla partenza, cresce verso l'arrivo */
.star-ahead {
  position: fixed; left: 50%; top: 46%; z-index: -5; pointer-events: none;
  width: min(60vmin, 560px); height: min(60vmin, 560px);
  transform: translate(-50%, -50%) scale(calc(0.45 + var(--rise, 0) * 1.05));
  opacity: calc(0.06 + var(--rise, 0) * 0.82);
  background: radial-gradient(circle, rgba(255, 247, 230, 0.96) 0%, rgba(255, 202, 128, 0.5) 17%, rgba(255, 140, 80, 0.16) 39%, transparent 62%);
  filter: blur(4px); will-change: transform, opacity;
}
/* il campo stellare in volo (canvas 2D disegnato in main.js) */
.voyage { position: fixed; inset: 0; z-index: -4; pointer-events: none; }

.vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 42%, transparent 46%, rgba(0,0,0,0.62) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* iOS Safari ridimensiona la barra di ricerca in basso senza far scattare un resize
   affidabile: un layer fixed con solo inset:0 resta ancorato a un viewport "vecchio"
   e il fondo appare tagliato in basso quando la barra si mostra/nasconde. 100dvh segue
   il viewport visibile in tempo reale e risolve il taglio (Safari 15.4+, tutti i browser moderni). */
@supports (height: 100dvh) {
  .space, .nebula, .voyage, .vignette, .grain, .daybreak, .intro, .viewer { height: 100dvh; }
}

/* ---------- Alba d'arrivo ----------
   Il fondale che sorge quando il viaggio atterra. Spento di default (opacity 0),
   si accende con .is-dawn sul <body>. In modalità animata è la timeline dei
   progetti a pilotarne l'opacità (scrub); in reduced-motion la accende un
   IntersectionObserver. Fisso al viewport: la luce resta bassa come un orizzonte. */
.daybreak {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 1.1s var(--ease);
  background:
    linear-gradient(180deg, #FCF7F0 0%, #FBEAD9 44%, #F7D9BC 72%, #F2C79E 100%);
}
/* il sole basso all'orizzonte: alone caldo che sale dal fondo/centro */
.daybreak__sun {
  position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%);
  width: min(150vw, 1500px); height: min(115vh, 1000px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 226, 168, 0.95) 0%, rgba(255, 205, 135, 0.55) 34%, rgba(255, 190, 120, 0.16) 58%, transparent 74%);
  filter: blur(4px);
}

/* transizione morbida dei livelli spaziali che si dissolvono all'arrivo */
.space, .nebula, .star-ahead, .voyage, .vignette, .grain { transition: opacity 1.1s var(--ease); }
.is-dawn .daybreak { opacity: 1; }
.is-dawn .space, .is-dawn .nebula, .is-dawn .star-ahead,
.is-dawn .voyage, .is-dawn .vignette, .is-dawn .grain { opacity: 0; }
/* la telemetria di volo si spegne: siamo atterrati (HUD, rotta, waypoint dei progetti) */
.hud, .spine, .vp__rail, .vp__cue { transition: opacity .8s var(--ease); }
.is-dawn .hud, .is-dawn .spine,
.is-dawn .vp__rail, .is-dawn .vp__cue { opacity: 0; pointer-events: none; }
/* il menu passa a inchiostro scuro sulla luce */
.is-dawn .nav { mix-blend-mode: normal; color: #2A1709; }
.is-dawn .lg-f, .is-dawn .lg-h { stroke: #2A1709; }
.is-dawn .lg-b { stroke: #C0410C; }

/* ---------- Progress spine ---------- */
.spine { position: fixed; left: clamp(0.4rem, 1.6vw, 1.6rem); top: 0; bottom: 0; z-index: 40; width: 18px; pointer-events: auto; cursor: pointer; }
.spine__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--rule); }
.spine__fill { position: absolute; left: 50%; top: 0; width: 2px; height: 0%; transform: translateX(-50%); background: linear-gradient(to bottom, var(--accent-2), var(--accent)); box-shadow: 0 0 12px var(--accent), 0 0 28px rgba(255,176,74,0.5); }
.spine__dot { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; pointer-events: none; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent-2); transition: width .2s var(--ease), height .2s var(--ease); }
.spine:hover .spine__dot, .spine.is-grabbing .spine__dot { width: 14px; height: 14px; }
/* il punto è la nave: una scia tenue lo segue lungo la rotta */
.spine__dot::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 26px; transform: translateX(-50%); background: linear-gradient(to top, var(--accent), transparent); opacity: 0.7; }

/* waypoint lungo la rotta: una destinazione per sezione */
.spine__ticks { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; transform: translateX(-50%); pointer-events: none; }
.spine__tick { position: absolute; left: 0; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); background: var(--night); border: 1px solid color-mix(in srgb, var(--ice) 55%, transparent); transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.spine__tick.is-active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 9px var(--accent), 0 0 20px rgba(255,176,74,0.5); }
.spine__tick::after {
  content: attr(data-label); position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%) rotate(-45deg); transform-origin: left center; white-space: nowrap;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); opacity: 0; transition: opacity .25s var(--ease);
}
.spine:hover .spine__tick::after { opacity: 0.8; }
@media (max-width: 720px) { .spine { display: none; } }

/* ---------- Telemetria di bordo (HUD) ---------- */
.hud {
  position: fixed; left: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1rem, 3vw, 2.2rem); z-index: 40;
  pointer-events: none; font-family: var(--mono); display: flex; flex-direction: column; gap: 0.45rem;
  opacity: 0.78; mix-blend-mode: screen;
}
.hud__line { display: flex; align-items: center; gap: 0.7rem; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; }
.hud__k { width: 3.4em; color: color-mix(in srgb, var(--ice) 65%, var(--ink-2)); }
.hud__bar { width: 96px; height: 3px; border-radius: 2px; background: rgba(143, 227, 242, 0.16); overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--ice), var(--accent)); box-shadow: 0 0 8px var(--ice); transition: width .12s linear; }
.hud__dest { color: var(--ink); letter-spacing: 0.16em; }
.hud__coord { font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .hud { display: none; } }

/* ---------- Marcatore di destinazione (waypoint inline) ---------- */
/* blocco a tutta riga: forza la sua linea (l'eyebrow che segue va a capo) */
.dest-mark {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.7em;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ice); opacity: 0.85; margin-bottom: 1.1rem;
}
.dest-mark::before { content: ""; width: 6px; height: 6px; flex: none; border: 1px solid var(--ice); transform: rotate(45deg); box-shadow: 0 0 8px color-mix(in srgb, var(--ice) 60%, transparent); }
/* nelle sezioni centrate il marcatore si centra come il resto */
.constellation__head .dest-mark, .impact .dest-mark, .contact .dest-mark { justify-content: center; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor__ring { position: fixed; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.8); transform: translate(-50%, -50%); transition: width .3s var(--ease), height .3s var(--ease), opacity .3s; }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; opacity: 0.6; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem clamp(1.25rem, 5vw, 3.5rem);
  font-size: 0.82rem; mix-blend-mode: difference; color: #fff;
}
.nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.02em; }
.brand-mark { width: 22px; height: auto; overflow: visible; flex: none; }

/* logo: sole che culmina sull'orizzonte. lg-f anello principale, lg-b alone d'alba, lg-h orizzonte */
.lg-f { stroke: var(--ink); }
.lg-b { stroke: var(--accent); }
.lg-h { stroke: var(--ink); }

/* ---------- Intro / entrata ---------- */
html.intro-lock, html.intro-lock body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 1000; background: var(--night); display: grid; place-items: center; will-change: transform; }
.intro__logo { width: clamp(96px, 15vw, 184px); height: auto; overflow: visible; }
.intro__logo .lg-b { filter: drop-shadow(0 0 28px rgba(255, 176, 74, 0.55)); }
.nav__menu { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.nav__menu a { opacity: 0.75; transition: opacity .25s; }
.nav__menu a:hover { opacity: 1; }
@media (max-width: 640px) { .nav__menu a:not(.nav__cta) { display: none; } }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--section-y) var(--pad-x) 8rem; }
.hero__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; position: relative; --glow-shift: 0%; }
/* alone d'alba basso, all'orizzonte: lontano dal titolo per non ridurne la nitidezza */
.hero__inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -40%;
  width: min(96vw, 1100px); height: min(44vw, 440px);
  transform: translate(-50%, var(--glow-shift));
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,176,74,0.14) 0%, rgba(255,126,95,0.05) 44%, transparent 72%);
  filter: blur(48px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__inner::before { animation: dawnBreath 9s ease-in-out infinite; }
}
@keyframes dawnBreath { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.78; } }
.hero__title { font-size: var(--t-giga); font-weight: 300; line-height: 0.96; max-width: 16ch; }
.hero__title em {
  background: linear-gradient(96deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255,176,74,0.42));
}
.hero__lead { margin-top: 2rem; font-size: var(--t-lead); color: var(--ink-2); max-width: 36ch; font-weight: 300; }
.hero__cue { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.hero__cue span { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(46px); opacity: 0; } }

/* =========================================================
   Progetti: viaggio tra i pianeti (fly-through pinnato)
   La camera si muove laterale + frontale: ogni progetto è un
   pianeta che entra da un lato, si avvicina, mostra le info,
   e sfreccia oltre mentre arriva il successivo. (main.js)
   ========================================================= */
.voyage-projects { position: relative; }
.vp__head { position: relative; z-index: 3; text-align: center; padding-top: clamp(7rem, 12vh, 11rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); pointer-events: none; }
.vp__head h2 { font-size: var(--t-h2); font-weight: 300; margin: 1.2rem auto 0; max-width: 18ch; }
.vp__head h2 em { color: var(--accent); }
.vp__head .eyebrow { justify-content: center; }
.vp__hint { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 1.4rem; }

.vp__stage { position: relative; height: 100vh; overflow: hidden; }
.vp__scene { position: absolute; inset: 0; }

/* ogni cella copre il palco: la finestra è centrale, il pannello su un lato.
   La prospettiva dà profondità all'avvicinamento 3D (rotationY in main.js). */
/* di default la cella non intercetta i click: solo la cella ATTIVA viene
   riattivata via JS (onUpdate), così le celle sovrapposte e trasparenti non
   rubano i click al bottone/pianeta. Statico e mobile: sempre attive. */
.vp__cell { position: absolute; inset: 0; perspective: 1600px; pointer-events: none; }
.vp--static .vp__cell { pointer-events: auto; }
.vp--static .vp__panel { transform: translateY(-50%); }
/* la "card" e l'intestazione esistono solo a mobile: su desktop la card è
   display:contents (nessun box, bioma/pianeta restano figli effettivi della
   cella) e l'intestazione è nascosta. Il fly-through desktop resta identico. */
.vp__head-m { display: none; }
.vp__card { display: contents; }

/* ---- la "finestra" di destinazione: un riquadro luminoso nello spazio
   verso cui la camera vira e si allinea, poi lo attraversa ---- */
.vp__planet { position: absolute; top: 50%; width: min(40vw, 560px); aspect-ratio: 16 / 11; will-change: transform, opacity, filter; }
.vp__planet--left { left: clamp(2rem, 5vw, 5.5rem); }
.vp__planet--right { right: clamp(2rem, 5vw, 5.5rem); }
.vp__atmo { position: absolute; inset: -16%; border-radius: 36px; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--vp-accent) 50%, transparent) 0%, transparent 62%); filter: blur(34px); opacity: 0.62; }
@media (prefers-reduced-motion: no-preference) { .vp__atmo { animation: atmoPulse 7s ease-in-out infinite; } }
@keyframes atmoPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.04); } }
.vp__body { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: #04060e; cursor: pointer; transition: transform .6s var(--ease); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7), 0 0 90px -20px color-mix(in srgb, var(--vp-accent) 70%, transparent); }
.vp__body img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.04) brightness(0.92); }
.vp__shade { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(180deg, rgba(2, 3, 10, 0.1), rgba(2, 3, 10, 0.52)), radial-gradient(130% 130% at 26% 16%, transparent 38%, rgba(2, 3, 10, 0.5) 100%); }
/* cornice luminosa nel colore del progetto */
.vp__rim { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-accent) 55%, transparent), inset 0 0 34px -8px color-mix(in srgb, var(--vp-accent) 80%, white 10%), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
/* mirino: due tacche d'angolo che incorniciano la destinazione */
.vp__body::before, .vp__body::after { content: ""; position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none; border: 0 solid color-mix(in srgb, var(--vp-accent) 85%, white 10%); opacity: 0.85; }
.vp__body::before { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; }
.vp__body::after { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }
.vp__cell:hover .vp__body { transform: scale(1.02); }
.vp__cell:hover .vp__body img { filter: saturate(1.12) contrast(1.06) brightness(1); }

/* ---- bioma: il cielo/ambiente del progetto sboccia all'arrivo e recede
   verso lo spazio profondo quando la camera riparte (opacità via main.js) ---- */
.vp__biome { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; overflow: hidden; }
.vp__sky { position: absolute; inset: 0; background: var(--biome-sky, transparent); }
.vp__sun { position: absolute; inset: 0; background: var(--biome-glow, transparent); mix-blend-mode: screen; }
/* foschia d'orizzonte in basso: dà profondità e àncora la scena (no fondo piatto) */
.vp__horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: var(--biome-haze, transparent); filter: blur(8px); pointer-events: none; }
/* velo sul lato del testo: leggibilità + profondità (no spazio vuoto piatto) */
.vp__biome::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.vp__biome--left::after { background: linear-gradient(90deg, rgba(4, 18, 34, 0.36), transparent 46%); }
.vp__biome--right::after { background: linear-gradient(270deg, rgba(4, 18, 34, 0.36), transparent 46%); }
/* nuvole: forme casuali (cluster di blob sfocati), generate in main.js. Derivano
   in idle e si muovono con la velocità di scroll (come il campo stellare). */
.vp__clouds { position: absolute; inset: 0; pointer-events: none; }
.vp__cloud { position: absolute; pointer-events: none; will-change: transform; }
.vp__cloud i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.42) 55%, transparent 72%); filter: blur(10px); }

/* ---- bioma "galassia": il campo stellare globale (.voyage) resta dietro,
   sopra aggiungiamo stelle extra + una Via Lattea ricca di viola (Prop Firm Armour) ---- */
.vp__biome--galaxy .vp__horizon { display: none; }            /* niente foschia d'orizzonte nello spazio */
/* stelle EXTRA (oltre al campo stellare globale): nove strati, alcune tinte viola/blu */
.vp__stars { position: absolute; inset: 0; pointer-events: none; opacity: 0.95;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 14%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 42% 62%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.7px 1.7px at 82% 48%, #fff, transparent 60%),
    radial-gradient(1px 1px at 30% 84%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 52%, rgba(206, 196, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 54% 36%, rgba(190, 205, 255, 0.85), transparent 60%),
    radial-gradient(1.4px 1.4px at 92% 78%, #fff, transparent 60%),
    radial-gradient(0.9px 0.9px at 73% 90%, rgba(225, 210, 255, 0.82), transparent 60%);
  background-size: 210px 210px, 180px 180px, 150px 150px, 250px 250px, 170px 170px, 130px 130px, 200px 200px, 280px 280px, 160px 160px;
  background-repeat: repeat;
}
/* banda della Via Lattea: nube nebulosa diagonale, molti gradienti, dominante VIOLA */
.vp__milkyway { position: absolute; left: 50%; top: 50%; width: 210%; height: 78%;
  transform: translate(-50%, -50%) rotate(-24deg); pointer-events: none;
  mix-blend-mode: screen; filter: blur(16px); opacity: 0.92;
  background:
    radial-gradient(52% 46% at 44% 50%, rgba(140, 90, 240, 0.30), transparent 70%),    /* viola nucleo */
    radial-gradient(40% 80% at 28% 50%, rgba(170, 100, 255, 0.24), transparent 72%),   /* viola chiaro */
    radial-gradient(34% 72% at 60% 50%, rgba(96, 120, 255, 0.20), transparent 72%),    /* blu */
    radial-gradient(30% 66% at 80% 50%, rgba(80, 200, 165, 0.16), transparent 72%),    /* verde brand */
    radial-gradient(26% 60% at 16% 50%, rgba(215, 110, 255, 0.20), transparent 74%),   /* magenta-viola */
    radial-gradient(30% 66% at 70% 50%, rgba(255, 201, 53, 0.10), transparent 72%),    /* oro */
    radial-gradient(95% 135% at 50% 50%, rgba(150, 120, 255, 0.12), transparent 78%);  /* lavata viola */
}
/* nubi di nebulosa secondarie (più viola, sfalsate) per profondità e ricchezza */
.vp__milkyway::before { content: ""; position: absolute; inset: -10% 0; filter: blur(22px); opacity: 0.8;
  background:
    radial-gradient(22% 50% at 38% 42%, rgba(160, 90, 255, 0.22), transparent 72%),
    radial-gradient(20% 46% at 58% 58%, rgba(120, 80, 230, 0.20), transparent 72%),
    radial-gradient(18% 42% at 74% 44%, rgba(210, 120, 255, 0.16), transparent 74%); }
/* nucleo brillante, alone caldo + viola */
.vp__milkyway::after { content: ""; position: absolute; left: 44%; top: 50%; width: 32%; height: 64%;
  transform: translate(-50%, -50%); filter: blur(12px);
  background: radial-gradient(circle at 50% 50%, rgba(255, 245, 225, 0.5), rgba(170, 120, 255, 0.2) 44%, transparent 72%); }
@media (prefers-reduced-motion: no-preference) {
  .vp__biome--galaxy .vp__stars { animation: vpTwinkle 6s ease-in-out infinite; }
  @keyframes vpTwinkle { 0%, 100% { opacity: 0.66; } 50% { opacity: 0.98; } }
}

/* ---- pianeta toon: grande ed eroe, verso il centro (niente colonna stretta) ---- */
.vp__planet--orb { aspect-ratio: 1 / 1; width: min(56vw, 780px); top: 50%; }
.vp__planet--orb.vp__planet--right { left: 58%; right: auto; }
.vp__planet--orb.vp__planet--left { left: 42%; right: auto; }
.vp__body--orb { border-radius: 50%; background: transparent; overflow: visible; box-shadow: none; perspective: 900px; }
.vp__body--orb::before, .vp__body--orb::after { display: none; }
.vp__orb-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
/* pianeta pulito come i riferimenti: solo una morbida ombra di contatto, nessun
   alone/bolla/vetro. Idle = bob + leggera oscillazione 3D (vp__orb-inner). */
.vp__body--orb img { object-fit: contain; border-radius: 0; box-shadow: none; filter: saturate(1.04) contrast(1.02) drop-shadow(0 26px 40px rgba(0, 0, 0, 0.4)); }
.vp__planet--orb .vp__atmo { display: none; }
.vp__cell:hover .vp__body--orb img { filter: saturate(1.1) contrast(1.04) brightness(1.03) drop-shadow(0 26px 40px rgba(0, 0, 0, 0.4)); }
/* pianeta 3D (three.js): riempie l'orbe, ombra di contatto morbida come il fermo-immagine */
.vp__planet3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.4)); }
.vp__cell.is-3d .vp__planet-fallback { opacity: 0; }
/* la vita idle ora è la ROTAZIONE lenta del pianeta (WebP animato), niente overlay */
/* sfera segnaposto finché non arriva il render toon (mare + isola + luce) */
.vp__body--orb.is-placeholder {
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(circle at 52% 62%, #f3e1b4 0 13%, rgba(243, 225, 180, 0) 15%),
    radial-gradient(circle at 50% 50%, #4ec6d4 0%, #2186b6 58%, #155f86 100%);
  box-shadow: inset -16px -22px 46px rgba(0, 0, 0, 0.42), 0 34px 70px -22px rgba(0, 0, 0, 0.55);
}
/* niente bob/oscillazione: il pianeta sta fermo e maestoso */

/* ---- "apertura del ristorante": una cornice da trattoria che copre TUTTO il
   viewport e si monta DAGLI ANGOLI all'arrivo (angoli a squadra -> bordi di legno
   che crescono dagli angoli -> tenda a righe, insegna che cala, lucine a festone,
   sala che si illumina). Il pianeta resta al centro come su un palco. Smontata via
   GSAP; lo stato di RIPOSO qui è "montata" (reduced-motion / layout statico). ---- */
.vp__opening { position: absolute; inset: 0; z-index: 3; pointer-events: none; --wood: #3a2417; --wood2: #5a3a23; --gold: #f2c14e; --frame-top: clamp(62px, 9vh, 92px); --frame-pad: clamp(12px, 1.8vw, 26px); }
/* il pianeta con apertura sta dentro la cornice: limitato anche in altezza (vh) */
.has-opening .vp__planet--orb { width: min(48vw, 78vh, 680px); }
/* bordi della cornice (travi di legno) che crescono dagli angoli verso il centro */
.vp__op-edge { position: absolute; background: linear-gradient(var(--a, 180deg), var(--wood2), var(--wood)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); border-radius: 4px; }
.vp__op-edge--t { top: var(--frame-top); left: var(--frame-pad); right: var(--frame-pad); height: 9px; }
.vp__op-edge--b { bottom: var(--frame-pad); left: var(--frame-pad); right: var(--frame-pad); height: 9px; }
.vp__op-edge--l { left: var(--frame-pad); top: var(--frame-top); bottom: var(--frame-pad); width: 9px; --a: 90deg; }
.vp__op-edge--r { right: var(--frame-pad); top: var(--frame-top); bottom: var(--frame-pad); width: 9px; --a: 90deg; }
/* angoli a squadra dorati: compaiono per primi */
.vp__op-corner { position: absolute; width: 42px; height: 42px; border: 0 solid var(--gold); }
.vp__op-corner--tl { top: var(--frame-top); left: var(--frame-pad); border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 7px; }
.vp__op-corner--tr { top: var(--frame-top); right: var(--frame-pad); border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 7px; }
.vp__op-corner--br { bottom: var(--frame-pad); right: var(--frame-pad); border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 7px; }
.vp__op-corner--bl { bottom: var(--frame-pad); left: var(--frame-pad); border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 7px; }
/* tenda a righe (terracotta + crema) con bordo smerlato, lungo tutto il bordo alto */
.vp__op-awning { position: absolute; top: calc(var(--frame-top) + 6px); left: var(--frame-pad); right: var(--frame-pad); height: 30px; background: repeating-linear-gradient(90deg, #b8472f 0 22px, #f3e3c6 22px 44px); filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.3)); -webkit-mask: linear-gradient(#000 0 0) top / 100% 64% no-repeat, radial-gradient(circle at 50% 0, #000 70%, transparent 72%) bottom / 22px 38% repeat-x; mask: linear-gradient(#000 0 0) top / 100% 64% no-repeat, radial-gradient(circle at 50% 0, #000 70%, transparent 72%) bottom / 22px 38% repeat-x; }
/* lucine a festone lungo tutto il bordo alto (più archi) */
.vp__op-lights { position: absolute; top: var(--frame-top); left: var(--frame-pad); right: var(--frame-pad); height: 92px; }
.vp__op-lights i { position: absolute; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6dd, #ffcf7a 55%, #f0a93f 100%); box-shadow: 0 0 8px 2px rgba(255, 193, 110, 0.85), 0 0 18px 6px rgba(255, 170, 90, 0.45); }
/* la "sala" si illumina: vignettatura calda interna alla cornice */
.vp__op-glow { position: absolute; inset: var(--frame-pad); top: var(--frame-top); border-radius: 10px; box-shadow: inset 0 0 120px 22px rgba(255, 176, 96, 0.16), inset 0 -46px 130px -32px rgba(255, 150, 80, 0.3); }

/* ---- pannello informazioni: blocco compatto centrato in verticale, su un lato.
   Uno scrim morbido dietro al testo garantisce il contrasto sopra il cielo chiaro. ---- */
.vp__panel { position: absolute; top: 50%; width: min(34ch, 40vw); display: flex; flex-direction: column; gap: 0.7rem; z-index: 4; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
/* niente lastra di vetro (glassmorphism rimosso): il testo vive direttamente sul
   cielo, l'ombra del testo ne garantisce il contrasto (desktop e mobile uguali) */
.vp__panel::before { display: none; }
.vp__panel--left { left: clamp(1.5rem, 5vw, 5.5rem); align-items: flex-start; }
.vp__panel--right { right: clamp(1.5rem, 5vw, 5.5rem); align-items: flex-end; text-align: right; }
.vp__idx { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.28em; color: var(--vp-accent); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45); }
.vp__idx span { color: #fff; opacity: 0.82; }
.vp__sector { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vp-accent); font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45); }
.vp__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 4rem); line-height: 0.98; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45); }
.vp__summary { color: #f3ece2; font-size: clamp(1rem, 0.94rem + 0.4vw, 1.18rem); line-height: 1.5; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); }
/* logo pittorico (senza testo) sopra l'indice: es. Baia. Grande, senza ombra. */
.vp__brand { display: flex; margin-bottom: 0.35rem; }
.vp__brand img { height: clamp(60px, 7vw, 92px); width: auto; object-fit: contain; }
.vp__panel--right .vp__brand { justify-content: flex-end; }
.vp__panel--left .vp__brand { justify-content: flex-start; }
/* logo "logotext" che SOSTITUISCE il titolo (contiene già il nome): es. Antica, PFArmour.
   Contenitore ad aspetto fisso -> niente deformazione. */
.vp__brandtitle { display: flex; margin: 0.1rem 0; }
.vp__brandtitle img { display: block; object-fit: contain; }
.vp__brandtitle--round img { height: clamp(104px, 13vw, 156px); width: clamp(104px, 13vw, 156px); border-radius: 50%; object-fit: cover; }
.vp__brandtitle--wordmark img { height: clamp(46px, 6vw, 84px); width: auto; max-width: min(100%, 360px); }
.vp__panel--right .vp__brandtitle { justify-content: flex-end; }
.vp__panel--left .vp__brandtitle { justify-content: flex-start; }
/* logo ANIMATO = il loader del sito PFArmour: scudo a punti (verde) + parola (bianca) + barra.
   Stato a riposo = tutto visibile; riparte ad ogni ingresso scena via .vp__cell.is-current. */
.vp__brandanim { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.1rem 0; }
.vp__panel--right .vp__brandanim { align-items: flex-end; }
.vp__panel--left .vp__brandanim { align-items: flex-start; }
.vp__brandanim .pf-logo { width: clamp(190px, 24vw, 300px); height: auto; display: block; }
.vp__brandanim .pf-logo path { fill: #fff; }
.vp__brandanim .pf-mark .pf-dot { fill: var(--vp-accent); transform-box: fill-box; transform-origin: center; }
.vp__cell.is-current .vp__brandanim .pf-logo { animation: vpSplashIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vp__cell.is-current .vp__brandanim .pf-dot { animation: vpSplashDot 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vp__cell.is-current .vp__brandanim .pf-dot--1 { animation-delay: 0.12s; }
.vp__cell.is-current .vp__brandanim .pf-dot--2 { animation-delay: 0.26s; }
.vp__cell.is-current .vp__brandanim .pf-dot--3 { animation-delay: 0.40s; }
@keyframes vpSplashIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes vpSplashDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .vp__cell.is-current .vp__brandanim .pf-logo,
  .vp__cell.is-current .vp__brandanim .pf-dot { animation: none; }
}
.vp__metric { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.9rem; margin-top: 0.2rem; border-top: 1px solid var(--rule); width: 100%; }
.vp__panel--right .vp__metric { align-items: flex-end; }
.vp__metric-num { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.8rem); line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.vp__metric-num--qual { color: var(--vp-accent); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); }
.vp__metric-num .aff { color: var(--vp-accent); }
.vp__metric-cap { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); max-width: 30ch; line-height: 1.4; }
.vp__deliv { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vp__panel--right .vp__deliv { justify-content: flex-end; }
.vp__deliv li { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0.36rem 0.78rem; }
.vp__open { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(8, 12, 22, 0.52); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--vp-accent) 80%, white 12%); border-radius: 999px; padding: 0.85rem 1.5rem; cursor: pointer; box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.vp__open .arrow { transition: transform .3s var(--ease); }
.vp__open:hover { background: var(--vp-accent); border-color: var(--vp-accent); color: #06101a; transform: translateY(-2px); }
.vp__open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- isola specchiata / ingrandita (per-progetto, es. Baia) ---- */
.is-flipped .vp__body--orb img { transform: scaleX(-1); }
.is-big .vp__planet--orb { width: min(62vw, 92vh, 960px); }

/* ---- anteprima "TV" del progetto: appare e segue il cursore sull'hover del pianeta ---- */
.vp__tv { position: absolute; left: 0; top: 0; width: clamp(220px, 20vw, 300px); transform: translate(-50%, -120%); opacity: 0; visibility: hidden; z-index: 5; pointer-events: none; transition: opacity .25s var(--ease); }
.vp__tv.is-on { opacity: 1; visibility: visible; }
.vp__tv-set { position: relative; background: linear-gradient(160deg, #2c2118, #15100b); border-radius: 16px; padding: 12px 12px 20px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vp__tv-set::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 32%; height: 8px; transform: translateX(-50%); background: #15100b; border-radius: 0 0 6px 6px; box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.6); } /* piedino TV */
.vp__tv-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #05060a; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 38px rgba(0, 0, 0, 0.6); transform-origin: center; }
.vp__tv-media { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.12) contrast(1.06); }
.vp__tv-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; opacity: 0.5; }
.vp__tv-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 42%); }
.vp__tv-cap { position: absolute; left: 16px; bottom: 3px; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vp-accent); }
@media (prefers-reduced-motion: no-preference) { .vp__tv.is-on .vp__tv-screen { animation: tvOn .5s var(--ease); } }
@keyframes tvOn { 0% { transform: scaleY(0.012); filter: brightness(3.2); } 42% { transform: scaleY(0.012); filter: brightness(3.2); } 60% { transform: scaleY(1); filter: brightness(1.7); } 100% { transform: scaleY(1); filter: brightness(1); } }

/* ---- immersione "sala" (NCC): 4 quarti del venue che si COSTRUISCONO dagli angoli e
   riempiono lo schermo, poi il walkthrough prende vita. Stato di riposo = montata. ---- */
.vp__room { position: absolute; inset: 0; z-index: 0; overflow: hidden; cursor: pointer; }
.vp__room-wall { position: absolute; width: 50%; height: 50%; background-image: var(--room-img); background-size: 200% 200%; background-repeat: no-repeat; backface-visibility: hidden; will-change: transform; }
.vp__room-wall--tl { top: 0; left: 0; transform-origin: 0% 0%; background-position: 0% 0%; }
.vp__room-wall--tr { top: 0; right: 0; transform-origin: 100% 0%; background-position: 100% 0%; }
.vp__room-wall--bl { bottom: 0; left: 0; transform-origin: 0% 100%; background-position: 0% 100%; }
.vp__room-wall--br { bottom: 0; right: 0; transform-origin: 100% 100%; background-position: 100% 100%; }
.vp__room-video { position: absolute; inset: 0; }
.vp__room-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* velo per la leggibilità del pannello (lato sinistro per NCC) + base */
.vp__room-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4, 8, 20, 0.82) 0%, rgba(4, 8, 20, 0.45) 30%, transparent 56%), linear-gradient(0deg, rgba(4, 8, 20, 0.5), transparent 38%); }
@media (prefers-reduced-motion: no-preference) { .vp__room:hover .vp__room-video video { transform: scale(1.03); transition: transform .6s var(--ease); } }
.vp__open:hover .arrow { transform: translate(3px, -3px); }

/* ---- cronometro di rotta (01 02 03) + spunta ---- */
.vp__rail { position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 3rem); transform: translateX(-50%); z-index: 4; display: flex; gap: 1.4rem; pointer-events: none; }
.vp__dot { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--ink-2); opacity: 0.4; transition: opacity .3s var(--ease), color .3s var(--ease); }
.vp__dot.is-active { opacity: 1; color: var(--accent); }
.vp__cue { position: absolute; right: clamp(1.4rem, 5vw, 3rem); bottom: clamp(1.4rem, 4vh, 3rem); z-index: 4; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice); opacity: 0.6; pointer-events: none; }

/* ---- mobile / tablet: ogni progetto è una SCHERMATA IMMERSIVA come il desktop:
   il bioma (cielo) riempie tutto lo schermo, il pianeta fluttua libero (niente
   cornice), intestazione in alto e testi in basso sovrapposti alla scena ---- */
@media (max-width: 900px) {
  .vp__stage { height: auto; overflow: visible; padding-bottom: 0; }
  .vp__scene { position: static; }

  .vp__cell {
    position: relative; inset: auto; pointer-events: auto; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    min-height: 100svh; gap: 1rem;
    padding: clamp(5rem, 16vw, 7rem) var(--pad-x) clamp(2.4rem, 8vw, 3.4rem);
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .vp__cell.is-in, .vp--static .vp__cell { opacity: 1; transform: none; }
  .vp--static .vp__cell { transition: none; }

  /* la card resta display:contents (come desktop): bioma e pianeta diventano figli
     diretti della cella, così il cielo va a tutto schermo e il pianeta non è incorniciato */
  .vp__card { display: contents; }
  .vp__biome { opacity: 1; }            /* cielo immersivo a tutto schermo */
  .vp__atmo, .vp__opening, .vp__tv { display: none; }

  /* pianeta grande che fluttua libero nel cielo */
  .vp__planet, .vp__planet--left, .vp__planet--right { position: relative; left: auto; right: auto; top: auto; transform: none; margin: 0; }
  /* orbe edge-to-edge: dà spazio al 3D quando lo si ingrandisce (niente clipping precoce) */
  .vp__cell .vp__planet--orb { position: relative; left: auto; right: auto; top: auto; z-index: 1; width: min(100vw, 620px); aspect-ratio: 1 / 1; }

  /* sala (NCC): il venue a tutto schermo */
  .vp__room { position: absolute; inset: 0; z-index: 0; width: auto; aspect-ratio: auto; border-radius: 0; }
  /* su mobile (verticale) usa l'immagine in formato ritratto a piena qualità, niente landscape stirato */
  .vp__room-wall { background-image: var(--room-img-mobile, var(--room-img)); }
  .vp__room-video { display: none; }
  .vp__room-scrim { background: linear-gradient(0deg, rgba(4, 8, 20, 0.62), transparent 44%), linear-gradient(180deg, rgba(4, 8, 20, 0.42), transparent 28%); }

  /* intestazione sopra al cielo */
  .vp__head-m { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.85rem; width: 100%; max-width: 460px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
  .vp__head-m .vp__idx { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.26em; color: #fff; }
  .vp__head-m .vp__idx span { color: rgba(255, 255, 255, 0.65); }
  .vp__head-m .vp__sector { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
  .vp__head-m::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent); }

  /* testi in basso, su lastra di vetro per leggibilità sopra al cielo chiaro */
  .vp__panel, .vp__panel--left, .vp__panel--right {
    position: relative; z-index: 2; top: auto; transform: none; left: auto; right: auto;
    width: 100%; max-width: 460px; align-items: flex-start; text-align: left; gap: 0.7rem;
  }
  .vp__panel .vp__idx, .vp__panel .vp__sector { display: none; } /* spostati nell'intestazione */
  .vp__panel--right .vp__metric, .vp__panel--right .vp__deliv { align-items: flex-start; justify-content: flex-start; }
  .vp__panel--right .vp__brand, .vp__panel--right .vp__brandtitle { justify-content: flex-start; }
  .vp__metric { align-items: flex-start; }
  .vp__title { font-size: clamp(2.1rem, 8vw, 3.1rem); }
  .vp__summary { font-size: clamp(1rem, 3.6vw, 1.12rem); }

  .vp__rail, .vp__cue { display: none; }
}
/* il pianeta "fluttua" dolcemente nel cielo (solo mobile, se il moto è ok) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .vp__cell .vp__orb-inner { animation: vpFlow 7s ease-in-out infinite; }
}
@keyframes vpFlow {
  0%, 100% { transform: translateY(2%) rotate(-1.1deg); }
  50% { transform: translateY(-4%) rotate(1.1deg); }
}

/* ---- mobile: fly-through PINNATO come il desktop. La sezione si fissa e lo
   scroll pilota la timeline GSAP; le celle tornano sovrapposte (assolute) così
   un pianeta sfila mentre il successivo arriva, e tra le scene il campo stellare
   fisso si vede attraverso le celle trasparenti. (.vp--pinned aggiunta da JS) ---- */
@media (max-width: 900px) {
  .vp--pinned .vp__stage { height: 100dvh; overflow: hidden; padding-bottom: 0; }
  .vp--pinned .vp__scene { position: absolute; inset: 0; }
  .vp--pinned .vp__cell {
    position: absolute; inset: 0; min-height: 0;
    opacity: 1; transform: none; transition: none; /* opacità e moto li guida GSAP */
  }
  .vp--pinned .vp__room-video { display: block; } /* il walkthrough della sala prende vita */

  /* CTA a tutta larghezza, bersaglio tattile più comodo */
  .vp--pinned .vp__open {
    width: 100%; justify-content: center;
    margin-top: 1.1rem; padding: 1.05rem 1.5rem; font-size: 0.78rem;
  }
}

/* =========================================================
   Marquee: ponte tipografico verso i numeri
   ========================================================= */
.marquee { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0 clamp(1rem, 4vw, 3rem); }
.marquee__track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
.marquee__inner {
  display: flex; align-items: center; gap: clamp(2.2rem, 5vw, 4.5rem); padding-right: clamp(2.2rem, 5vw, 4.5rem);
  font-family: var(--display); font-weight: 300; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.15;
  white-space: nowrap; color: var(--ink);
}
.marquee__inner .ghost { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 50%, transparent); }
.marquee__star { width: clamp(18px, 2.6vw, 30px); height: auto; flex: none; fill: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   Project viewer (camera fly-in overlay)
   ========================================================= */
.viewer {
  position: fixed; inset: 0; z-index: 200; display: none;
  overflow-y: auto; overscroll-behavior: contain;
}
.viewer.is-open { display: block; }
.viewer__backdrop {
  position: fixed; inset: 0; background: rgba(5,7,15,0.78);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
}
.viewer__close {
  position: fixed; top: 1.4rem; left: clamp(1.25rem, 5vw, 3.5rem); z-index: 5;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); opacity: 0.85; transition: opacity .25s, transform .25s var(--ease);
}
.viewer__close:hover { opacity: 1; transform: translateX(-3px); }
.viewer__nav { position: fixed; top: 1.4rem; right: clamp(1.25rem, 5vw, 3.5rem); z-index: 5; display: flex; gap: 1.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.viewer__nav button { transition: color .25s; }
.viewer__nav button:hover { color: var(--accent); }
.viewer__nav button:disabled { opacity: 0.3; cursor: default; }

.viewer__stage {
  position: relative; z-index: 2; min-height: 100vh;
  max-width: var(--maxw); margin-inline: auto; padding: 7rem var(--pad-x) 6rem;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.viewer__visual { display: flex; flex-direction: column; gap: 1.6rem; }
.viewer__index { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); }
.case__tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.case__metric { display: flex; align-items: baseline; gap: 0.4rem; line-height: 0.9; }
.case__metric .num { font-family: var(--display); font-weight: 300; font-size: var(--t-metric); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--ink); }
.case__metric .num--qual { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem); letter-spacing: -0.01em; }
.case__metric .pre, .case__metric .suf { font-family: var(--display); font-size: clamp(2rem, 1rem + 4vw, 4rem); color: var(--accent); }
.case__metric-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-2); max-width: 28ch; }
.chart { width: 100%; max-width: 560px; overflow: visible; margin-top: 0.6rem; }
.chart__area { fill: url(#area-grad); opacity: 0; }
.chart__line { fill: none; stroke: url(#line-grad); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,176,74,0.7)); }
.chart__pen { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); opacity: 0; }
.chart__base { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; }

.viewer__body { display: flex; flex-direction: column; gap: 2.4rem; }
.vblock .client { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.7rem; }
.vblock h3 { font-size: var(--t-h3); font-weight: 300; margin-bottom: 0.9rem; }
.vblock h3 em { color: var(--accent); }
.vblock p { color: var(--ink-2); max-width: 46ch; }
.vblock .deliverables { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.vblock .deliverables li { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 0.85rem; }
.vsub { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.vsub div { display: flex; flex-direction: column; }
.vsub .k { font-family: var(--display); font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.vsub .l { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }
.fly { opacity: 0; }

@media (max-width: 900px) {
  .viewer__stage { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 6rem; }
}

/* =========================================================
   Impact
   ========================================================= */
.impact { padding: var(--section-y) 0; text-align: center; }
.impact .eyebrow { justify-content: center; }
.impact h2 { font-size: var(--t-h2); font-weight: 300; margin: 1.4rem auto 4rem; max-width: 16ch; }
.impact h2 em { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.stat { position: relative; text-align: left; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
/* la riga d'accento si disegna quando il numero entra in vista */
.stat::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) 0.25s; }
.stat.is-in::before { transform: scaleX(1); }
.stat .num { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); font-variant-numeric: tabular-nums; line-height: 0.95; }
.stat .num .accent { color: var(--accent); }
.stat .lab { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.9rem; max-width: 22ch; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.5rem; } .stat .num { font-size: clamp(1.8rem, 6vw, 2.8rem); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } .stat .num { font-size: clamp(2rem, 9vw, 2.8rem); } .stat .lab { max-width: none; } }

/* =========================================================
   Arrivo / Alba (chi siamo · cosa facciamo) — scrollytelling pinnato
   La sezione si aggancia (pin) e una timeline scrubbed porta i beat
   dentro e fuori schermo con una choreografia coerente, mentre il sole
   sorge dietro i testi. Vedi initArrival(). Fallback statico: beat impilati.
   ========================================================= */
.arrival { position: relative; }
.arrival__stage { position: relative; }
.arrival--pinned .arrival__stage { height: 100dvh; overflow: hidden; }

/* cielo dietro i testi: il sole sorge lungo la choreografia. Solo gradienti: leggero e fluido. */
.arrival__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* sole: disco nitido (::before) dentro un alone caldo. Sale allo scroll (initArrival). */
.arrival__sun {
  position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%);
  width: min(60vmin, 580px); height: min(60vmin, 580px); border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, rgba(255, 240, 214, 0.8) 0%, rgba(255, 214, 150, 0.4) 32%, rgba(255, 196, 126, 0.12) 54%, transparent 72%);
}
.arrival__sun::before {
  content: ""; position: absolute; inset: 27%; border-radius: 50%;
  background: radial-gradient(circle, #FFFEF9 0%, #FFF3D6 46%, #FFDC96 74%, rgba(255, 204, 122, 0.55) 92%, transparent 100%);
}
/* raggi d'alba statici a corona dall'orizzonte (dipinti una volta: nessuna animazione perenne) */
.arrival__rays {
  position: absolute; left: 50%; bottom: 1%; transform: translate(-50%, 50%);
  width: min(118vmin, 1180px); height: min(118vmin, 1180px); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 206, 146, 0.11) 0deg 2.6deg, transparent 2.6deg 13deg);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 22%, transparent 58%); mask: radial-gradient(circle, transparent 8%, #000 22%, transparent 58%);
  opacity: 0.5;
}

/* beat: impilati (fallback statico); sovrapposti a schermo intero quando pinnato */
.arrival__beat { position: relative; z-index: 1; text-align: center; padding-block: clamp(4rem, 12vh, 8rem); }
.arrival--pinned .arrival__beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-block: clamp(4rem, 9vh, 6.5rem); }
.arrival__beat > .wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.arrival__beat .eyebrow { justify-content: center; color: #9A3412; }
.arrival__title { font-size: var(--t-h2); font-weight: 300; line-height: 1.02; margin: 1.4rem auto 0; max-width: 18ch; color: #2A1709; text-shadow: 0 2px 30px rgba(255, 240, 214, 0.55); }
.arrival__title em { color: #C0410C; }
.arrival__lead { margin: 1rem auto 0; max-width: 40ch; font-size: var(--t-lead); font-weight: 300; line-height: 1.5; color: #5A4326; }
.arrival__do-title { font-size: var(--t-h3); font-weight: 300; margin: 1.1rem auto clamp(1.8rem, 4.5vw, 3rem); color: #2A1709; }
.arrival__do-title em { color: #C0410C; }

/* discipline: elenco verticale; l'icona si "disegna" quando la voce entra (via initArrival) */
.disciplines { display: flex; flex-direction: column; gap: clamp(1.4rem, 3.5vw, 2.4rem); width: 100%; max-width: 800px; }
.discipline { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); text-align: left; padding-bottom: clamp(1.4rem, 3.5vw, 2.2rem); border-bottom: 1px solid rgba(90, 67, 38, 0.16); }
.discipline:last-child { border-bottom: 0; padding-bottom: 0; }
.discipline__n { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; color: #B07B3A; }
.discipline__icon { width: clamp(40px, 5vw, 54px); height: auto; color: #C0410C; }
.discipline__icon > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.discipline__txt h4 { font-family: var(--display); font-weight: 400; font-size: var(--t-h3); color: #2A1709; margin-bottom: 0.3rem; }
.discipline__txt p { color: #5A4326; font-size: 1rem; max-width: 44ch; }
@media (max-width: 640px) {
  .discipline { grid-template-columns: auto 1fr; }
  .discipline__n { display: none; }
}

/* =========================================================
   Brand con cui abbiamo lavorato (sull'alba: inchiostro scuro)
   ========================================================= */
.brands { padding: clamp(4rem, 8vw, 7rem) 0; text-align: center; }
.brands .eyebrow { justify-content: center; color: #9A3412; }
.brands__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(2.8rem, 6.5vw, 6rem); margin-top: 2.6rem; }
.brands__row li { display: flex; align-items: center; opacity: 0.7; transition: opacity .3s var(--ease); }
.brands__row li:hover { opacity: 1; }
.brands__row img { height: clamp(40px, 5.2vw, 64px); width: auto; filter: brightness(0) opacity(0.82); }
.brand-word { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); color: #2A1709; letter-spacing: 0.01em; }
.brand-word em { color: #C0410C; }

/* =========================================================
   Studio / services
   ========================================================= */
.services { padding: var(--section-y) 0; }
.services__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem; }
.services__head h2 { font-size: var(--t-h2); font-weight: 300; max-width: 12ch; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
/* nuvole, non lastre: niente bordo, raggi grandi e leggermente irregolari,
   velo che si addensa in alto (la cima illuminata) e sfuma verso i bordi,
   alone luminoso al posto dell'ombra dura. L'inchiostro resta caldo e scuro
   per il contrasto */
.pillar {
  --pa: var(--p-accent, var(--accent));
  position: relative; overflow: hidden; color: #2b1d10;
  background: radial-gradient(140% 110% at 50% 0%, rgba(255, 252, 245, 0.92) 0%, rgba(255, 249, 240, 0.65) 52%, rgba(255, 246, 235, 0.5) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(130%); backdrop-filter: blur(26px) saturate(130%);
  border: 0; border-radius: 3.2rem 3.8rem 3.4rem 4rem;
  padding: clamp(2.2rem, 3.4vw, 3rem); min-height: 360px; display: flex; flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 30px 70px -30px rgba(94, 56, 22, 0.22),
    0 0 50px -10px rgba(255, 252, 240, 0.3);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* in hover la nuvola si schiarisce, come sole attraverso la foschia */
.pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(120% 90% at 50% 12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.18) 72%); transition: opacity .55s var(--ease); pointer-events: none; }
.pillar:hover::before { opacity: 1; }
/* bagliore che insegue il cursore dentro la card (vedi [data-glow] in main.js) */
.pillar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--gx, 78%) var(--gy, 18%), color-mix(in srgb, var(--pa) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.pillar:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 38px 84px -32px rgba(94, 56, 22, 0.26),
    0 0 80px -6px rgba(255, 252, 240, 0.5);
}
.pillar:hover::after { opacity: 1; }
.pillar__icon { width: clamp(42px, 5vw, 54px); height: auto; color: var(--pa); transition: transform .6s var(--ease), filter .6s var(--ease); }
/* l'icona si ridisegna tratto dopo tratto a ogni hover */
.pillar__icon > * { stroke-dasharray: 1; }
.pillar:hover .pillar__icon { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pa) 55%, transparent)); }
.pillar:hover .pillar__icon > * { animation: icon-draw .9s var(--ease) both; }
.pillar:hover .pillar__icon > :nth-child(2) { animation-delay: .14s; }
.pillar:hover .pillar__icon > :nth-child(3) { animation-delay: .28s; }
@keyframes icon-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* carattere di movimento per icona: il mondo si inclina, la stella ruota
   su se stessa (simmetria a 4 punte), la curva di crescita sale */
.pillar:nth-child(1):hover .pillar__icon { transform: rotate(-8deg) scale(1.06); }
.pillar:nth-child(2):hover .pillar__icon { transform: rotate(90deg) scale(1.08); }
.pillar:nth-child(3):hover .pillar__icon { transform: translateY(-3px) scale(1.06); }
.pillar__num { position: absolute; top: 1.3rem; right: 1.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: #8a7657; transition: color .4s var(--ease); }
.pillar:hover .pillar__num { color: var(--pa); }
.pillar h3 { font-size: var(--t-h3); font-weight: 300; margin: auto 0 0.8rem; }
.pillar p { color: #4a3a28; font-size: 1rem; max-width: 34ch; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } .pillar { min-height: auto; } }

/* =========================================================
   Contact
   ========================================================= */
/* l'arrivo è luminoso (alba): testo e bottone scuri per il contrasto */
.contact { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-block: clamp(6rem, 14vh, 10rem); }
.contact > *:not(.contact__halo) { position: relative; z-index: 1; }
/* sole focale dietro il titolo: la "tua alba" che sorge. Cresce durante l'aggancio (main.js) */
.contact__halo {
  position: absolute; z-index: 0; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: min(115vh, 1040px); height: min(115vh, 1040px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 238, 205, 0.92) 0%, rgba(255, 216, 152, 0.55) 26%, rgba(255, 197, 130, 0.18) 50%, transparent 70%);
  filter: blur(6px);
}
.contact .eyebrow { justify-content: center; color: #9A3412; }
.contact h2 { font-size: var(--t-giga); font-weight: 300; line-height: 0.98; margin: 1.4rem auto 0; max-width: 14ch; color: #2a1709; text-shadow: 0 2px 34px rgba(255, 240, 214, 0.6); }
.contact h2 em {
  background: linear-gradient(100deg, #C0410C 0%, #E8730C 55%, #F4A23E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 26px rgba(224, 120, 40, 0.32)); text-shadow: none;
}
.contact__lead { margin: 1.8rem auto 0; max-width: 46ch; font-size: var(--t-lead); font-weight: 300; line-height: 1.5; color: #5A4326; }
.contact__cta { display: inline-flex; align-items: center; gap: 0.9rem; margin-top: 2.6rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; background: #1c1206; border: 1px solid #1c1206; color: #FBEFD9; border-radius: 999px; padding: 1.15rem 2.1rem; box-shadow: 0 18px 44px -18px rgba(20, 12, 4, 0.65), 0 0 0 0 rgba(255, 176, 74, 0); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.contact__cta:hover { background: var(--accent); border-color: var(--accent); color: #1c1206; transform: translateY(-2px); box-shadow: 0 22px 52px -18px rgba(20, 12, 4, 0.5), 0 0 46px -6px rgba(255, 176, 74, 0.6); }
.contact__cta .arrow { transition: transform .3s var(--ease); }
.contact__cta:hover .arrow { transform: translate(4px, -4px); }

/* ---------- Footer ---------- */
/* footer arioso sull'alba: testo scuro leggibile, niente banda scura né riga dura */
/* il footer è sull'alba luminosa: inchiostro scuro caldo per leggibilità */
.footer { padding-block: 3rem 4rem; }
.footer__seo { max-width: 70ch; margin: 0 0 1.6rem; color: #6b5232; font-size: 0.92rem; line-height: 1.6; }
.footer__row { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: #7a6244; }
.footer__row a { color: #2a1709; transition: color .25s var(--ease); }
.footer__row a:hover { color: #9A3412; }
.footer__socials { display: flex; gap: 1.4rem; }

/* =========================================================
   Reveals (varied directions, not just fade-up)
   ========================================================= */
.reveal { opacity: 0; filter: blur(10px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); transform: translateY(34px); }
.reveal[data-reveal="left"]  { transform: translateX(-48px); }
.reveal[data-reveal="right"] { transform: translateX(48px); }
.reveal[data-reveal="scale"] { transform: scale(0.92); }
.reveal[data-reveal="rise"]  { transform: translateY(60px); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
/* su mobile niente scorrimenti orizzontali: i titoli grandi uscivano dallo schermo */
@media (max-width: 760px) {
  .reveal[data-reveal="left"], .reveal[data-reveal="right"] { transform: translateY(30px); }
  h1, h2, h3 { overflow-wrap: break-word; }
  /* i titoli di sezione centrati restavano su una riga e toccavano i bordi: forziamo il wrap */
  .impact h2, .constellation__head h2 { font-size: clamp(2rem, 8.5vw, 2.7rem); max-width: 13ch; }
  /* queste sezioni azzerano il padding orizzontale di .wrap: lo ripristiniamo su mobile
     così numeri e testi non toccano i bordi dello schermo */
  .impact, .brands, .services, .contact { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .footer__row { flex-direction: column; gap: 0.9rem; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
/* =========================================================
   Viewer v2: clip-path portal + real environments
   ========================================================= */
.viewer { display: none; overflow: hidden; pointer-events: none; background: transparent; }
.viewer.is-open { display: block; pointer-events: auto; }
.viewer__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.viewer__env { min-height: 100vh; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.viewer__close, .viewer__nav { z-index: 6; }
/* bagliore della stella: emana dal punto cliccato durante la transizione */
.viewer__flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  mix-blend-mode: screen; transform-origin: var(--fx, 50%) var(--fy, 50%);
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
    rgba(255,247,230,0.95) 0%, rgba(255,208,150,0.6) 18%, rgba(255,184,120,0.18) 40%, rgba(0,0,0,0) 62%); }

/* fly-in content, CSS staggered */
.fly { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.viewer.is-revealed .fly { opacity: 1; transform: none; }

/* camera zoom-out while the portal opens */
.camera.is-zooming { transition: transform .85s var(--ease), opacity .85s var(--ease), filter .85s var(--ease); transform: scale(1.4) !important; opacity: 0; filter: blur(5px); }
.node--feature .node__star { width: 22px; height: 22px; }
.node--feature .node__label { color: var(--ink); }

/* shared blocks (used by both environments) */
.vblock .client { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.7rem; }
.vblock h3 { font-size: var(--t-h3); font-weight: 300; margin-bottom: 0.9rem; }
.vblock h3 em { color: var(--accent); }
.vblock p { color: var(--ink-2); max-width: 48ch; }
.vblock .deliverables { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.vblock .deliverables li { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 0.85rem; }
.vsub { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.vsub div { display: flex; flex-direction: column; }
.vsub .k { font-family: var(--display); font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.vsub .l { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }
.chart { width: 100%; max-width: 560px; overflow: visible; }
.chart__area { fill: url(#area-grad); opacity: 0; }
.chart__line { fill: none; stroke: url(#line-grad); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,176,74,0.7)); }
.chart__pen { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); opacity: 0; }
.chart__base { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; }

/* ----- Environment: studio (dark, placeholder projects) ----- */
.env--studio { background: #080A14; color: var(--ink); min-height: 100vh; }
.env--studio .env__grid { max-width: var(--maxw); margin-inline: auto; padding: 7rem var(--pad-x) 6rem; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; min-height: 100vh; }
.env--studio .viewer__visual { display: flex; flex-direction: column; gap: 1.5rem; }
.env--studio .viewer__body { display: flex; flex-direction: column; gap: 2.2rem; }
.viewer__index { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); }
.case__tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.case__metric { display: flex; align-items: baseline; gap: 0.4rem; line-height: 0.9; }
.case__metric .num { font-family: var(--display); font-weight: 300; font-size: var(--t-metric); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--ink); }
.case__metric .num--qual { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem); letter-spacing: -0.01em; }
.case__metric .pre, .case__metric .suf { font-family: var(--display); font-size: clamp(2rem, 1rem + 4vw, 4rem); color: var(--accent); }
.case__metric-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-2); max-width: 28ch; }
/* placeholder ambienti spaziali (Nephrology) in attesa di spatial.io */
.spatial-holo { margin-top: 1.3rem; height: 170px; border: 1px solid var(--rule); border-radius: 8px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 130%, rgba(57,184,198,0.18), transparent 70%); }
.spatial-holo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(circle at 50% 75%, #000, transparent 78%); mask-image: radial-gradient(circle at 50% 75%, #000, transparent 78%); }
.spatial-holo span { position: relative; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .env--studio .env__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ----- Environment: Baia Calenella (bright Mediterranean) ----- */
.env--baia { --e-bg: #FAF3E5; --e-ink: #103A43; --e-ink2: #4C6B6E; --e-sea: #1C9B97; --e-gold: #F2B33D;
  background: var(--e-bg); color: var(--e-ink); min-height: 100vh; }
.env--baia ::selection { background: var(--e-gold); color: #fff; }
.env__hero { position: relative; height: 78vh; min-height: 440px; overflow: hidden; }
.env__hero-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 6.5s var(--ease); }
.viewer.is-revealed .env--baia .env__hero-img { transform: scale(1); }
.env__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,30,40,0.30) 0%, transparent 28%, rgba(8,30,40,0.60) 100%); }
.env__hero-inner { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(2rem, 5vw, 5rem); color: #fff; max-width: 32ch; }
.env__loc { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #FCE9C4; }
.env__title { font-family: var(--display); font-weight: 300; font-size: clamp(3rem, 2rem + 5vw, 6.5rem); line-height: 0.92; margin: 0.6rem 0; }
.env__tagline { font-family: var(--display); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); opacity: 0.96; }
.env__wrap { max-width: 1200px; margin-inline: auto; padding: clamp(3rem, 6vw, 6rem) var(--pad-x) 7rem; }
.env__metric { text-align: center; border-bottom: 1px solid rgba(16,58,67,0.15); padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.env__metric .big { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(4rem, 2rem + 11vw, 11rem); line-height: 0.9; color: var(--e-sea); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.env__metric .suf { display: block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--e-ink2); margin-top: 1rem; }
.env__cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.env__story { display: flex; flex-direction: column; gap: 2.4rem; }
.env--baia .vblock h3 { color: var(--e-ink); }
.env--baia .vblock h3 em { color: var(--e-sea); }
.env--baia .vblock p { color: var(--e-ink2); }
.env--baia .vblock .deliverables li { color: var(--e-ink2); border-color: rgba(16,58,67,0.2); }
.env--baia .client { color: var(--e-sea); }
.env--baia .vsub .k { color: var(--e-ink); }
.env--baia .vsub .l { color: var(--e-ink2); }
.env--baia .chart__base { stroke: rgba(16,58,67,0.18); }
.env--baia .chart__line { filter: drop-shadow(0 0 6px rgba(28,155,151,0.5)); }
.env__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.env__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.env__gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.env__chart-wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 820px) { .env__cols { grid-template-columns: 1fr; } }

/* =========================================================
   Case study v3 (editorial, per-project themed) — .cs
   ========================================================= */
/* Controlli fissi sempre leggibili su qualsiasi cover (chiara, scura o "rumorosa").
   Niente mix-blend-mode: su sfondi a tono medio spariva. Pillola a contrasto garantito. */
.viewer__close, .viewer__nav button {
  color: #fff; opacity: 1;
  background: rgba(8,12,20,0.62);
  -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  padding: 0.55rem 0.95rem; line-height: 1; box-shadow: 0 2px 12px rgba(0,0,0,0.28);
}
.viewer__nav { gap: 0.6rem; color: #fff; }
.viewer__close:hover, .viewer__nav button:hover { background: rgba(8,12,20,0.82); color: #fff; transform: none; }
.viewer__close:focus-visible, .viewer__nav button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cs { background: var(--c-bg); color: var(--c-ink); min-height: 100vh; }
.cs ::selection { background: var(--c-accent); color: var(--c-bg); }

/* rivelazione allo scroll delle sezioni del corpo */
.cs-rise { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.cs-rise.is-vis { opacity: 1; transform: none; }

/* barra di avanzamento (assume il colore del progetto) */
.viewer__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 7; background: rgba(255,255,255,0.09); }
.viewer__progress > i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--cur-accent, var(--accent)); transition: transform .12s linear; }

/* ----- Cover ----- */
/* ogni cover segue il layout di Baia Calenella: split 50/50, testo su fondo tema a
   sinistra, elemento visivo (foto o motivo) a destra */
.cs__cover { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; padding: 0; overflow: hidden; }
.cs__cover-bg { position: relative; overflow: hidden; border-left: 1px solid var(--c-rule); }
.cs__cover-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s var(--ease); }
.viewer.is-revealed .cs__cover-img { transform: scale(1); }
.cs__cover-inner { position: relative; z-index: 2; align-self: center; max-width: none; padding: clamp(2rem, 5vw, 5.5rem); }
@media (max-width: 760px) {
  /* cover mobile: foto in alto come banda hero, testo che scorre subito sotto.
     Niente min-height a tutto schermo: spariscono i vuoti del vecchio layout. */
  .cs__cover { grid-template-columns: 1fr; grid-template-rows: auto; min-height: auto; }
  .cs__cover-bg { order: -1; height: 44vh; border-left: 0; border-bottom: 1px solid var(--c-rule); }
  .cs__cover-inner { align-self: start; padding: clamp(1.9rem, 8vw, 2.8rem); }
  /* nome del progetto a testo, solo su mobile (selettore più specifico per vincere sull'ordine) */
  .cs__cover-inner .cs__cover-name { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.0; letter-spacing: -0.01em; color: var(--c-ink); margin: 0.15rem 0 0; }
  .cs__cover-inner .cs__cover-logo--wordmark { display: none; } /* logo già "a parola": su mobile basta il nome */
  .cs__cue { display: none; } /* decorativo: ridondante su mobile */
  .viewer__close-txt { display: none; }
  .viewer__close { font-size: 1rem; top: 1rem; left: 1.1rem; }
  .viewer__nav { top: 1rem; right: 1.1rem; gap: 0.5rem; font-size: 0.66rem; }
}

/* identità della cover: il logo del progetto come elemento principale (niente nome+logo insieme) */
.cs__cover-logo { display: block; max-height: clamp(56px, 8vw, 104px); max-width: min(100%, 24rem); width: auto; height: auto; margin: 0.2rem 0; }
.cs__cover-logo--plate { background: #fff; padding: 0.7rem 1rem; border-radius: 12px; box-sizing: border-box; }
.cs__cover-logo--mono { filter: brightness(0) invert(1); }
.cs__cover-logo--round { width: clamp(86px, 11vw, 128px); height: clamp(86px, 11vw, 128px); max-width: none; max-height: none; border-radius: 18px; object-fit: cover; }
.cs__cover-name { display: none; } /* visibile solo su mobile (vedi media query) */
.cs__eyebrow { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); }
.cs__eyebrow--top { margin-bottom: 1.1rem; }
.cs__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.8rem, 1.6rem + 7vw, 7.5rem); line-height: 0.92; letter-spacing: -0.01em; }
.cs__summary { font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.7rem); line-height: 1.5; margin-top: 1.6rem; max-width: 42ch; opacity: 0.94; }
.cs__client { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1.4rem; opacity: 0.7; }
.cs__cue { position: absolute; right: clamp(2rem, 6vw, 5.5rem); bottom: clamp(2rem, 6vw, 5.5rem); z-index: 2; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); opacity: 0.85; }
.cs__cover--photo .cs__cue { color: #fff; }

/* ----- Body ----- */
.cs__body { max-width: 1080px; margin-inline: auto; padding: clamp(5rem, 11vw, 10rem) clamp(1.5rem, 6vw, 4rem); display: flex; flex-direction: column; gap: clamp(5rem, 12vw, 11rem); }
.cs__chapter { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 4rem); align-items: start; }
.cs__kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-accent); padding-top: 0.5rem; }
.cs__kicker::before { content: ""; display: block; width: 26px; height: 2px; background: var(--c-accent); margin-bottom: 0.9rem; opacity: 0.85; }
.cs__lead { font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.18; color: var(--c-ink); max-width: 26ch; }
.cs__text { font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.22rem); line-height: 1.62; color: var(--c-ink2); max-width: 58ch; }

.cs__deliv { margin-top: 2rem; max-width: 58ch; counter-reset: d; border-top: 1px solid var(--c-rule); }
.cs__deliv li { counter-increment: d; display: flex; align-items: baseline; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--c-rule); font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink); }
.cs__deliv li::before { content: counter(d, decimal-leading-zero); color: var(--c-accent); font-size: 0.74rem; opacity: 0.85; }

.cs__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--c-rule); padding-top: clamp(1.8rem, 4vw, 2.6rem); }
.cs__fig { min-width: 0; }
.cs__fig-num { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(2.3rem, 1.6rem + 2.1vw, 3.6rem); line-height: 0.9; color: var(--c-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.cs__fig-num .aff { color: var(--c-accent); }
.cs__fig-cap { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.05em; line-height: 1.45; color: var(--c-ink2); margin-top: 0.9rem; max-width: 26ch; }
.cs__qual { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: 0.95; color: var(--c-accent); }
.cs__qual + .cs__fig-cap { margin-top: 1rem; max-width: 40ch; }
.cs__outcome { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--c-ink2); max-width: 52ch; margin-top: 1.6rem; }
.cs__pull { font-family: var(--display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1.12; color: var(--c-ink); max-width: 24ch; }

.cs__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.cs__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.cs__gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* su desktop la galleria diventa una striscia: l'immagine su cui passi si allarga */
@media (min-width: 761px) {
  .cs__gallery { display: flex; gap: 0.7rem; height: clamp(320px, 52vh, 540px); }
  .cs__gallery img { flex: 1 1 0%; min-width: 0; height: 100%; aspect-ratio: auto; border-radius: 12px; transition: flex-grow .8s var(--ease), filter .8s var(--ease); }
  .cs__gallery img:first-child { aspect-ratio: auto; }
  .cs__gallery img:hover { flex-grow: 2.2; }
  .cs__gallery:hover img:not(:hover) { filter: brightness(0.72) saturate(0.8); }
}

/* clip dell'ambiente: banda cinematografica + striscia sfalsata */
.cs__clip { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cs__clipband { display: grid; gap: 0.9rem; }
.cs__clipband .cs__clip { aspect-ratio: 21 / 9; border-radius: 12px; border: 1px solid var(--c-rule); box-shadow: 0 24px 60px rgba(0,0,0,0.22); }
.cs__media-cap { color: var(--c-ink2); max-width: 56ch; }
.cs__clipstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); align-items: start; }
.cs__clipcell { margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--c-rule); aspect-ratio: 4 / 5; transform: translateY(calc(var(--i, 0) * 1.7rem)); box-shadow: 0 18px 44px rgba(0,0,0,0.2); }
@media (max-width: 760px) { .cs__clipstrip { grid-template-columns: 1fr 1fr; } .cs__clipcell { transform: none; } }

.cs__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--c-rule); padding-top: 2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink2); }
.cs__foot button { transition: color .25s var(--ease); }
.cs__foot button:hover { color: var(--c-accent); }
.cs__foot button[data-go-close] { color: var(--c-ink); }

@media (max-width: 760px) {
  .cs__chapter { grid-template-columns: 1fr; gap: 1rem; }
  .cs__kicker::before { margin-bottom: 0.6rem; }
  .cs__figures { grid-template-columns: 1fr; }
}

/* ----- Motifs (cover backgrounds) ----- */
.cs__cover-bg--grid { background: radial-gradient(120% 80% at 72% 28%, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 60%), var(--c-bg); }
.cs__cover-bg--grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--c-rule) 1px, transparent 1px), linear-gradient(90deg, var(--c-rule) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 70% 35%, #000, transparent 78%); mask-image: radial-gradient(circle at 70% 35%, #000, transparent 78%); }
.cs__cover-bg--grid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(64deg, transparent 44%, color-mix(in srgb, var(--c-accent) 65%, transparent) 50%, transparent 56%); opacity: 0.5; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }

.cs__cover-bg--warm { background: radial-gradient(90% 70% at 50% 118%, color-mix(in srgb, var(--c-accent) 34%, transparent), transparent 62%), radial-gradient(60% 50% at 16% 12%, color-mix(in srgb, var(--c-accent2) 16%, transparent), transparent 60%), var(--c-bg); }

.cs__cover-bg--holo { background: var(--c-bg); }
.cs__cover-bg--holo::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -10%; height: 92%; background-image: linear-gradient(color-mix(in srgb, var(--c-accent) 34%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 34%, transparent) 1px, transparent 1px); background-size: 54px 54px; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000, transparent 72%); mask-image: linear-gradient(to top, #000, transparent 72%); }
.cs__cover-bg--holo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 16%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 62%); }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .deck__card { position: relative !important; top: auto !important; }
  .deck__card.is-lit .deck__metric::before, .stat.is-in::before { transform: scaleX(1); }
  .deck__media img, .deck__media video { filter: none; }
  body { cursor: auto; }
  .cursor, .hero__cue span { display: none; }
  .fly, .cs-rise { opacity: 1 !important; transform: none !important; }
  .viewer__flash { display: none !important; }
  .viewer__env { opacity: 1 !important; }
  .env__hero-img { transform: none !important; }
}