/* ————————————————————————————————————————————————————————————————
   OBSCURA — obscura.globeinc.dev
   Direzione: "stampa a contatto". Carta calda, inchiostro, UN rosso.
   Fraunces (display) · Schibsted Grotesk (testo) · Spline Sans Mono
   (occhielli e marcature di bordo pellicola). Filetti hairline come
   unico divisore; le strip nere con edge-print sono il marchio.
   ———————————————————————————————————————————————————————————————— */

:root {
  --carta: oklch(96.6% 0.009 88);
  --carta-alta: oklch(98.2% 0.006 90);
  --inchiostro: oklch(21% 0.014 78);
  --grafite: oklch(36% 0.014 76);
  --cenere: oklch(50% 0.013 80);
  --filetto: color-mix(in oklab, var(--inchiostro) 16%, transparent);
  --rosso: oklch(52% 0.2 24);
  --rosso-chiaro: oklch(58% 0.21 25);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --testo: "Schibsted Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --mono: "Spline Sans Mono", "SF Mono", ui-monospace, monospace;

  --misura: 1120px;
  --bordo-pagina: clamp(1.25rem, 4.5vw, 3.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--rosso); color: var(--carta); }

a { color: inherit; text-decoration-color: var(--filetto); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--rosso); }
/* height:auto è OBBLIGATORIO insieme a max-width:100%: senza, l'attributo HTML height="…"
   resta un valore CSS fisso mentre solo la larghezza si restringe → immagine schiacciata
   E contenitore alto quanto l'originale (causa anche gli spazi vuoti nelle sezioni sotto). */
img { max-width: 100%; height: auto; display: block; }

/* ————— Tipografia ————— */

h1, h2, h3 { font-family: var(--display); font-weight: 460; line-height: 1.04; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.6vw, 4.9rem); font-variation-settings: "opsz" 90; }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); font-variation-settings: "opsz" 60; }
h3 { font-size: 1.28rem; font-weight: 540; letter-spacing: -0.005em; }
p { margin: 0; }
.piombo { color: var(--grafite); }
.misura-prosa { max-width: 34em; }

.occhiello {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cenere);
}
.occhiello.rosso { color: var(--rosso); }

/* Numero di fotogramma: la sequenza d'uso è reale (raccogli→…→pubblica). */
.fotogramma {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--rosso);
}
.fotogramma::after { content: " ▸"; }

/* ————— Struttura ————— */

.involucro { max-width: var(--misura); margin-inline: auto; padding-inline: var(--bordo-pagina); }

header.testata {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--filetto);
}
.marchio {
  font-family: var(--display); font-weight: 560; font-size: 1.32rem; letter-spacing: 0.01em;
  text-decoration: none;
}
.marchio i { font-style: normal; color: var(--rosso); }
nav.principale { display: flex; gap: 1.6rem; font-size: 0.92rem; }
nav.principale a { position: relative; text-decoration: none; color: var(--grafite); padding-bottom: 2px; }
nav.principale a:hover { color: var(--inchiostro); }
/* Filo che si apre da sinistra sotto il link, come un provino che si srotola. */
nav.principale a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px;
  background: var(--rosso); transition: right 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
nav.principale a:hover::after { right: 0; }
@media (prefers-reduced-motion: reduce) { nav.principale a::after { transition: none; } }

footer.chiusa {
  border-top: 1px solid var(--filetto);
  margin-top: clamp(4rem, 9vw, 7.5rem);
  padding-block: 2.4rem 3rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: baseline; justify-content: space-between;
  font-size: 0.9rem; color: var(--cenere);
}
footer.chiusa nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
footer.chiusa a { position: relative; text-decoration: none; color: var(--grafite); padding-bottom: 2px; }
footer.chiusa a:hover { color: var(--inchiostro); }
footer.chiusa a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px;
  background: var(--rosso); transition: right 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
footer.chiusa a:hover::after { right: 0; }
@media (prefers-reduced-motion: reduce) { footer.chiusa a::after { transition: none; } }

/* ————— Strip edge-print (il marchio della pagina) ————— */

.pellicola {
  background: var(--inchiostro);
  color: color-mix(in oklab, var(--carta) 82%, transparent);
  overflow: hidden;
  padding-block: 0.5rem;
  user-select: none;
}
.pellicola .nastro {
  display: flex; gap: 3.5rem; width: max-content;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
  animation: scorri 46s linear infinite;
}
.pellicola b { font-weight: 500; color: var(--rosso-chiaro); }
@keyframes scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pellicola .nastro { animation: none; } }

/* ————— Hero ————— */

.eroe { padding-block: clamp(3.2rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); }
.eroe-griglia { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.eroe h1 { margin-block: 0.9rem 1.15rem; }
.eroe .sotto { font-size: 1.14rem; line-height: 1.65; color: var(--grafite); max-width: 30em; }

.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 2rem; }
.bottone {
  font-family: var(--testo); font-weight: 600; font-size: 0.98rem;
  background: var(--inchiostro); color: var(--carta);
  border: 1px solid var(--inchiostro); border-radius: 999px;
  padding: 0.78rem 1.5rem; text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1), background 0.2s ease;
}
.bottone:hover { background: var(--rosso); border-color: var(--rosso); transform: translateY(-1px); }
.bottone.spento { background: transparent; color: var(--cenere); border-color: var(--filetto); cursor: default; }
.bottone.spento:hover { transform: none; background: transparent; }
.nota-mono { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cenere); }

/* Coppia di schermate sovrapposte, asimmetriche di proposito. */
.scena { position: relative; min-height: clamp(390px, 46vw, 560px); }
.telefono {
  border: 1px solid var(--filetto); border-radius: 2rem; padding: 9px;
  background: var(--carta-alta);
  box-shadow: 0 36px 70px -42px color-mix(in oklab, var(--inchiostro) 55%, transparent);
  width: min(58%, 300px);
}
/* Sollevare la stampa al passaggio del mouse: solo dove il puntatore lo permette
   davvero (niente "hover fantasma" su touch), leggero e via transform/shadow soltanto. */
@media (hover: hover) and (pointer: fine) {
  .telefono, .vignetta-gallery, .vignetta-onset, .vignetta-censura {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s ease;
  }
  .telefono:hover {
    transform: translateY(-7px);
    box-shadow: 0 46px 86px -40px color-mix(in oklab, var(--inchiostro) 62%, transparent);
  }
  .vignetta-gallery:hover, .vignetta-onset:hover, .vignetta-censura:hover { transform: translateY(-7px); }
}
.telefono img { border-radius: 1.45rem; }
.scena .telefono:first-child { position: absolute; left: 0; top: 6%; z-index: 2; }
.scena .telefono:last-child { position: absolute; right: 0; top: 0; width: min(52%, 268px); opacity: 0.96; }

/* ————— Sezioni-fotogramma ————— */

.fotogrammi { display: grid; gap: clamp(4.5rem, 10vw, 8rem); padding-block: clamp(4rem, 9vw, 7rem); }
.quadro { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.quadro.inverso > .visivo { order: -1; }
.quadro h2 { margin-block: 0.75rem 1rem; }
.quadro .prosa { color: var(--grafite); max-width: 30em; }
.quadro ul { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; color: var(--grafite); font-size: 0.98rem; }
.quadro ul li { padding-left: 1.15rem; position: relative; }
.quadro ul li::before { content: "—"; position: absolute; left: 0; color: var(--rosso); }

.visivo { display: grid; justify-items: center; }
.visivo .telefono { width: min(78%, 320px); }

/* Vignetta GALLERY (mini-anteprima scura della pagina web servita) */
.vignetta-gallery {
  width: min(100%, 420px);
  background: oklch(17% 0.01 300); color: oklch(94% 0.005 90);
  border-radius: 1.1rem; padding: 1.5rem;
  display: grid; gap: 1rem;
  box-shadow: 0 36px 70px -45px color-mix(in oklab, var(--inchiostro) 70%, transparent);
}
.vignetta-gallery .url {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  background: oklch(24% 0.01 300); border-radius: 999px; padding: 0.5rem 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: oklch(72% 0.008 90);
}
.vignetta-gallery .url b { color: oklch(94% 0.005 90); font-weight: 500; }
.vignetta-gallery .griglietta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.vignetta-gallery .griglietta img { border-radius: 0.45rem; aspect-ratio: 4/5; object-fit: cover; }
.vignetta-gallery .piede { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; }
.vignetta-gallery .pin { color: oklch(72% 0.008 90); }
.vignetta-gallery .pin b { color: oklch(94% 0.005 90); letter-spacing: 0.3em; font-weight: 500; }
.vignetta-gallery .cuore { color: oklch(62% 0.21 22); }

/* Vignetta ON-SET (cornice nera, foto piena, chrome minima) */
.vignetta-onset {
  position: relative; width: min(78%, 300px);
  border-radius: 2rem; overflow: hidden; background: black;
  box-shadow: 0 36px 70px -45px color-mix(in oklab, var(--inchiostro) 70%, transparent);
}
.vignetta-onset img { aspect-ratio: 9/16; object-fit: cover; opacity: 0.94; }
.vignetta-onset .chrome {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: white;
}
.vignetta-onset .chrome .riga { display: flex; justify-content: space-between; align-items: center; }
.vignetta-onset .bolla { background: oklch(0% 0 0 / 0.55); border-radius: 999px; padding: 0.42rem 0.8rem; }

/* Vignetta CENSURA (metà nitida, metà sfocata) */
.vignetta-censura { position: relative; width: min(78%, 320px); border-radius: 1.4rem; overflow: hidden; box-shadow: 0 36px 70px -45px color-mix(in oklab, var(--inchiostro) 60%, transparent); }
.vignetta-censura img { aspect-ratio: 3/4; object-fit: cover; }
.vignetta-censura .velo {
  position: absolute; inset: 0 0 0 52%;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-left: 2px solid var(--rosso);
}
.vignetta-censura .etichetta {
  position: absolute; bottom: 0.9rem; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.2em; color: white; background: oklch(0% 0 0 / 0.55); border-radius: 999px; padding: 0.35rem 0.7rem;
}
.vignetta-censura .etichetta.prima { left: 0.9rem; }
.vignetta-censura .etichetta.dopo { right: 0.9rem; }

/* Vignetta SEZIONI (righe occhiello + provini) */
.vignetta-sezioni { width: min(100%, 400px); display: grid; gap: 1.15rem; }
.vignetta-sezioni .riga { display: grid; gap: 0.5rem; }
.vignetta-sezioni .riga > span { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--filetto); padding-bottom: 0.35rem; }
.vignetta-sezioni .conta { font-family: var(--mono); font-size: 0.66rem; color: var(--cenere); }
.vignetta-sezioni .provini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.vignetta-sezioni .provini img { aspect-ratio: 1; object-fit: cover; border-radius: 0.4rem; }

/* "Documento" del PDF esportato: stessa idea delle righe-sezione, ma come un file pronto,
   non un'altra griglia di foto — il PDF è un OUTPUT, deve leggersi diverso dalle sezioni.
   `.vignetta-sezioni` sta su sfondo --carta (non è una card scura come le altre vignette),
   quindi qui il mix è verso --inchiostro, non verso --carta. */
.vignetta-sezioni .pdf-esporta {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.2rem; padding: 0.75rem 0.9rem;
  background: color-mix(in oklab, var(--inchiostro) 4%, transparent);
  border: 1px dashed var(--filetto);
  border-radius: 0.6rem;
}
.vignetta-sezioni .pdf-esporta .glifo { color: var(--rosso); font-size: 1.05rem; line-height: 1; }
.vignetta-sezioni .pdf-esporta .nome { font-family: var(--testo); font-weight: 600; font-size: 0.86rem; }
.vignetta-sezioni .pdf-esporta .peso { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cenere); }

/* ————— Dichiarazione privacy (manifesto) ————— */

.manifesto {
  border-block: 1px solid var(--filetto);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  display: grid; gap: 1.4rem; justify-items: start;
}
.manifesto h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 14em; }
.manifesto p { max-width: 38em; color: var(--grafite); font-size: 1.08rem; }

/* ————— Prezzi ————— */

.listino { padding-block: clamp(4rem, 9vw, 7rem); }
.listino-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.6rem; }
.piano { border-top: 2px solid var(--inchiostro); padding-top: 1.4rem; display: grid; gap: 1.1rem; align-content: start; }
.piano.pro { border-top-color: var(--rosso); }
.piano .prezzo { font-family: var(--display); font-size: 2.1rem; font-weight: 500; }
.piano .prezzo small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cenere); display: block; margin-top: 0.3rem; }
.piano ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; color: var(--grafite); font-size: 0.97rem; }
.piano ul li { padding-left: 1.15rem; position: relative; }
.piano ul li::before { content: "—"; position: absolute; left: 0; color: var(--cenere); }
.piano.pro ul li::before { color: var(--rosso); }

/* ————— Pagine legali / supporto ————— */

.documento { padding-block: clamp(3rem, 7vw, 5rem); max-width: 46em; }
.documento h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-block: 0.8rem 0.6rem; }
.documento .aggiornato { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cenere); }
.documento section { margin-top: 2.8rem; display: grid; gap: 0.9rem; }
.documento h2 { font-size: 1.5rem; }
.documento p, .documento li { color: var(--grafite); }
.documento ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.documento strong { color: var(--inchiostro); font-weight: 600; }

.faq { display: grid; gap: 0; margin-top: 2rem; }
.faq details { border-top: 1px solid var(--filetto); padding-block: 1.1rem; }
.faq details:last-child { border-bottom: 1px solid var(--filetto); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
/* Un solo glifo che ruota a croce invece di scambiare "+"/"–": stessa lettura,
   ma il movimento è continuo, non un salto tra due caratteri. */
.faq summary::after {
  content: "+"; display: inline-block; font-family: var(--mono); color: var(--rosso);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary { transition: color 0.25s ease; }
.faq summary:hover { color: var(--rosso); }
.faq details p { margin-top: 0.7rem; color: var(--grafite); max-width: 40em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ————— Motion: ingresso orchestrato ————— */

.svela { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1), transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.svela.dentro { opacity: 1; transform: none; }
.eroe .svela:nth-child(1) { transition-delay: 0.05s; }
.eroe .svela:nth-child(2) { transition-delay: 0.14s; }
.eroe .svela:nth-child(3) { transition-delay: 0.23s; }
.eroe .svela:nth-child(4) { transition-delay: 0.32s; }

/* Sviluppo in camera oscura: le foto entrano sfocate e scolorite, come in vaschetta,
   e mettono a fuoco da sole — coerente col nome del sito, zero JS in più (stesso
   hook .svela/.dentro dell'IntersectionObserver già in pagina). */
.svela img {
  filter: blur(7px) saturate(0.2) contrast(0.94);
  opacity: 0;
  transition: filter 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.05s, opacity 0.9s ease 0.05s;
}
.svela.dentro img { filter: blur(0) saturate(1) contrast(1); opacity: 1; }
/* I due telefoni dell'eroe non devono mettere a fuoco all'unisono. */
.scena .telefono:last-child img { transition-delay: 0.24s; }

/* Le voci degli elenchi arrivano una alla volta dentro alla sezione che già scorre in
   dissolvenza: un secondo strato di cadenza, non un'animazione a sé — per questo lo
   stagger è più breve del fade del blocco padre. */
.quadro ul li, .listino ul li {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.svela.dentro ul li { opacity: 1; transform: none; }
.quadro ul li:nth-child(1), .listino ul li:nth-child(1) { transition-delay: 0.16s; }
.quadro ul li:nth-child(2), .listino ul li:nth-child(2) { transition-delay: 0.27s; }
.quadro ul li:nth-child(3), .listino ul li:nth-child(3) { transition-delay: 0.38s; }
.quadro ul li:nth-child(4), .listino ul li:nth-child(4) { transition-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
  .svela { opacity: 1; transform: none; transition: none; }
  .svela img { filter: none; opacity: 1; transition: none; }
  .quadro ul li, .listino ul li { opacity: 1; transform: none; transition: none; }
}

/* ————— Responsive ————— */

@media (max-width: 820px) {
  .eroe-griglia, .quadro, .listino-griglia { grid-template-columns: 1fr; }
  .quadro.inverso > .visivo { order: 0; }
  .scena { min-height: 0; display: flex; gap: 4%; margin-top: 1rem; }
  .scena .telefono:first-child, .scena .telefono:last-child { position: static; width: 48%; }
  nav.principale { gap: 1.1rem; font-size: 0.88rem; }
}