/* ==========================================================================
   SECONDA VISIONE — BASE (reset, atmosfera cinematica, sistema di rivelazione)
   Mission 10B.2-R3
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  width: 100%;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-size-body);
  line-height: var(--sv-line-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---------- Vignetta statica: nero vero ai bordi, nessuna tinta. ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0), rgba(0,0,0,0.55) 100%);
}

/* ---------- Grana finissima: pattern SVG inline, nessuna immagine. ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------- Ambient cinematico: luce rossa che deriva lentissima nel nero.
   Quasi subliminale: due bagliori sfocati, opacita' bassissima, movimento
   di 30-40s per ciclo. Solo transform + opacity (costo GPU trascurabile),
   nessun resize/reflow. Disattivato sotto prefers-reduced-motion. ---------- */
.sv-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sv-ambient__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.14;
  will-change: transform;
}
.sv-ambient__glow--a {
  top: -10%;
  left: 10%;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(circle, var(--sv-red-glow), transparent 70%);
  animation: sv-drift-a var(--sv-duration-ambient) ease-in-out infinite;
}
.sv-ambient__glow--b {
  bottom: -14%;
  right: 6%;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  background: radial-gradient(circle, var(--sv-red-glow), transparent 72%);
  opacity: 0.1;
  animation: sv-drift-b calc(var(--sv-duration-ambient) * 1.4) ease-in-out infinite;
}
@keyframes sv-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 6%) scale(1.08); }
}
@keyframes sv-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, -4%) scale(1.06); }
}
@media (max-width: 639px) {
  .sv-ambient__glow { filter: blur(46px); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-ambient__glow { animation: none; }
}

#main, header, footer { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--sv-focus-ring);
  outline-offset: 3px;
  border-radius: var(--sv-radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--sv-space-4);
  top: -100px;
  z-index: 200;
  background: var(--sv-red);
  color: var(--sv-text);
  padding: var(--sv-space-2) var(--sv-space-4);
  border-radius: var(--sv-radius-sm);
  font-family: var(--sv-font-sans);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--sv-duration-fast) var(--sv-ease);
}
.skip-link:focus { top: var(--sv-space-4); }

::selection { background: var(--sv-red-soft); color: var(--sv-text); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--sv-content-width-wide);
  margin: 0 auto;
  padding: 0 var(--sv-space-6);
}
@media (max-width: 639px) { .container { padding: 0 var(--sv-space-4); } }
@media (max-width: 374px) { .container { padding: 0 var(--sv-space-3); } }

.prose { max-width: var(--sv-content-width); }

/* ---------- Sistema di rivelazione (firma motion del sito) ----------
   "Riemersione": ogni sezione emerge dal buio quando entra nel campo
   visivo, invece di comparire già completa. Attivato da web/static/js/motion.js
   tramite IntersectionObserver (classe .is-visible aggiunta una sola
   volta). Se JS è disabilitato, il CSS ha comunque uno stato finale
   visibile dopo un breve delay (vedi .sv-reveal:not(.is-visible) sotto),
   cosi' il contenuto non resta MAI nascosto senza JS. */
/* Progressive enhancement: senza JS (classe "js" mai aggiunta a <html>),
   .sv-reveal resta semplicemente visibile — nessun contenuto puo' mai
   restare nascosto per mancanza di JavaScript. Solo se JS conferma di
   essere attivo lo stato di partenza diventa "nascosto in attesa di
   entrare nel campo visivo", gestito da web/static/js/motion.js. */
.js .sv-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--sv-duration-reveal) var(--sv-ease-soft),
              transform var(--sv-duration-reveal) var(--sv-ease-soft);
}
.js .sv-reveal.is-visible { opacity: 1; transform: none; }

.sv-stagger > * { transition-delay: calc(var(--sv-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .js .sv-reveal { opacity: 1; transform: none; transition: none; }
}