/* Il profilo della modella.
   Una schermata sola, mai una pagina da scorrere: tutto sta dentro il display, su qualunque
   dispositivo. Le misure sono fluide (clamp sull'altezza vera, dvh), quindi nessun numero fisso
   decide se una riga ci sta o no.

   Gli effetti sono tutti del browser, zero librerie (il servizio ha una CSP severa: niente CDN,
   niente codice in linea):
   - vetro liquido  (backdrop-filter + bordo di luce + riflesso che passa; rifrazione vera con il
                     filtro SVG dove il browser la sa fare)
   - velluto vivo   (@property su un angolo + gradiente conico che respira) e grana di pellicola
   - mazzo 3D       (parallasse col puntatore, trascinamento col dito, transizione condivisa)
   - tipografia che entra lettera per lettera, con una lama di luce che la attraversa
   - @starting-style + allow-discrete: i fogli entrano ed escono senza lampi, senza JS d'appoggio
*/

/* ---------------------------------------------------------------- caratteri */
@font-face {
  font-family: 'Playfair';
  src: url('/static/caratteri/PlayfairDisplay-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair';
  src: url('/static/caratteri/PlayfairDisplay-italic-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'InterLv';
  src: url('/static/caratteri/Inter-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterLv';
  src: url('/static/caratteri/Inter-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ colori */
/* Burlesque: velluto scuro, bordeaux, oro vecchio, un rosa cipria per la pelle.
   Il logo e' in questa gamma: la pagina ci si appoggia invece di competere. */
:root {
  --nero: #0a0608;
  --velluto: #1b0710;
  --bordeaux: #4a0d20;
  --rosso: #c8102e;
  --oro: #d8b36a;
  --oro-chiaro: #f3e3bb;
  --cipria: #f3c6ce;
  --panna: #f7efe6;
  --muto: #b49ba4;
  --vetro-bordo: color-mix(in oklab, var(--oro-chiaro) 42%, transparent);
  --raggio: 22px;
  --dock: calc(62px + env(safe-area-inset-bottom));
  color-scheme: dark;
}

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --lama { syntax: '<percentage>'; initial-value: -30%; inherits: false; }

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  /* La regola della casa: la pagina non scorre MAI. Scorre, quando serve, solo l'interno di un
     foglio o una striscia di foto — e di lato, non di sotto. */
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font: 16px/1.5 'InterLv', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--panna);
  background: var(--nero);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.serif { font-family: 'Playfair', ui-serif, Georgia, serif; font-weight: 600; }
.muto { color: var(--muto); }
.piccolo { font-size: .82rem; }
.filtri { position: absolute; width: 0; height: 0; }

/* Il velluto che respira: un gradiente conico che gira lentissimo (24 s) dietro a due aloni
   caldi. Si anima una variabile registrata, non un'immagine: costa niente e non scatta mai. */
body::before {
  content: '';
  position: fixed; inset: -20%;
  background:
    radial-gradient(42% 34% at 50% 6%, color-mix(in oklab, var(--rosso) 26%, transparent), transparent 70%),
    radial-gradient(58% 48% at 18% 22%, color-mix(in oklab, var(--bordeaux) 70%, transparent), transparent 72%),
    radial-gradient(46% 40% at 86% 82%, color-mix(in oklab, var(--bordeaux) 55%, transparent), transparent 74%),
    conic-gradient(from var(--ang) at 50% 50%, #120409, #22060f, #310a18, #16050c, #120409);
  filter: blur(46px) saturate(1.05);
  animation: respira 24s linear infinite;
  z-index: -2;
}
@keyframes respira { to { --ang: 360deg; } }

/* I bordi restano al buio, come in un teatro: tiene l'occhio al centro, dove c'e' lei. */
.palco::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 85% at 50% 42%, transparent 42%, #06030580 78%, #060305 100%),
    linear-gradient(to bottom, #06030566, transparent 22%, transparent 72%, #060305aa);
}

/* Grana di pellicola: toglie il «digitale» e fa sembrare il nero un tessuto. */
body::after {
  content: '';
  position: fixed; inset: 0;
  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='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  z-index: -1;
}

/* ------------------------------------------------------------- vetro liquido */
/* Tre strati, e ognuno regge da solo se il browser non sa fare il successivo:
   1. fondo sfocato e saturo (ovunque)  2. bordo di luce e ombra interna (ovunque)
   3. rifrazione vera col filtro SVG (solo dove backdrop-filter accetta url(), oggi Chromium). */
.vetro {
  position: relative;
  background: color-mix(in oklab, var(--velluto) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--vetro-bordo);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--oro-chiaro) 45%, transparent),
    inset 0 -14px 28px -18px color-mix(in oklab, var(--rosso) 60%, transparent),
    0 18px 50px -20px #000;
}
/* Il riflesso che scorre: una lama di luce obliqua, lenta, che passa e torna. */
.vetro::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(104deg, transparent calc(var(--lama) + 0%),
    color-mix(in oklab, var(--oro-chiaro) 22%, transparent) calc(var(--lama) + 8%),
    transparent calc(var(--lama) + 18%));
  animation: lama 9s ease-in-out infinite;
}
@keyframes lama { 0%, 55% { --lama: -30%; } 100% { --lama: 120%; } }

@supports (backdrop-filter: url(#rifrazione)) {
  .vetro.rifrange {
    -webkit-backdrop-filter: url(#rifrazione) blur(14px) saturate(1.7);
    backdrop-filter: url(#rifrazione) blur(14px) saturate(1.7);
  }
}

/* ------------------------------------------------------------------ palco */
.palco {
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto var(--dock);
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right));
  gap: clamp(6px, 1.4dvh, 16px);
}

.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }

/* Il logo: piu' grande di prima (si leggeva appena), ma senza diventare un adesivo appoggiato
   sul velluto. Due cose lo tengono dentro la scena invece che sopra:
   - un bagliore caldo (le lampadine del marchio continuano oltre i suoi bordi: e' la luce
     dell'insegna, non un rettangolo);
   - quel bagliore scende verso il mazzo di foto che sta subito sotto, sul telefono, cosi' i due
     pezzi si leggono come un'unica luce e non come due elementi separati uno sopra l'altro. */
.logo { position: relative; display: inline-flex; }
/* Senza un logo suo (una modella nuova non ce l'ha ancora) il marchio e' il nome scritto: stesso
   posto, stessa aria, nessun riquadro vuoto e nessuna immagine di un'altra. */
.logo-nome {
  display: block; position: relative; z-index: 1;
  font-size: clamp(1.7rem, 5.4vw, 2.6rem); line-height: 1.1; letter-spacing: .01em;
  color: var(--oro-chiaro);
  text-shadow: 0 10px 22px color-mix(in oklab, var(--rosso) 38%, transparent);
}
.logo img {
  display: block; height: clamp(42px, 7.5dvh, 68px); width: auto;
  position: relative; z-index: 1;
  filter:
    drop-shadow(0 0 1px color-mix(in oklab, var(--oro-chiaro) 35%, transparent))
    drop-shadow(0 10px 22px color-mix(in oklab, var(--rosso) 38%, transparent));
}
.logo::after {
  content: '';
  position: absolute; left: -35%; right: 10%; top: 10%; height: 320%;
  background: radial-gradient(55% 60% at 32% 18%,
    color-mix(in oklab, var(--oro) 26%, transparent), transparent 72%);
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}

/* «È online adesso»: la stessa levetta che la modella usa per il bot accende questo puntino.
   È la cosa che vende di più in una pagina come questa, e non le costa un gesto in più. */
.pillola {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--panna); background: color-mix(in oklab, var(--velluto) 70%, transparent);
  border: 1px solid var(--vetro-bordo); border-radius: 999px; padding: 7px 13px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  cursor: default;
}
.punto { width: 9px; height: 9px; border-radius: 50%; background: #39d98a; position: relative; }
.punto::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid #39d98a; animation: pulsa 2.2s ease-out infinite;
}
@keyframes pulsa { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.pillola[data-stato="away"] .punto { background: var(--oro); }
.pillola[data-stato="away"] .punto::after { border-color: var(--oro); }
.pillola[data-stato="spento"] .punto { background: #6b5560; }
.pillola[data-stato="spento"] .punto::after { display: none; }

/* ------------------------------------------------------------------ mazzo */
.mazzo {
  position: relative;
  min-height: 0;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
}
.carta {
  position: absolute; inset: 0; margin: auto;
  width: min(72vw, 40dvh * 0.78, 340px);
  height: min(58dvh, 100%);
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 20px;
  transform-style: preserve-3d;
  /* --d = distanza dalla carta attiva, la calcola il JS; --px/--py = il puntatore. */
  --d: calc(var(--t) - var(--attiva, 0));
  transform:
    translate3d(calc(var(--d) * 13% + var(--px, 0) * 14px), calc(var(--d) * -1.4% + var(--py, 0) * 10px), 0)
    rotateY(calc(var(--d) * -14deg + var(--px, 0) * 6deg))
    rotateX(calc(var(--py, 0) * -5deg))
    scale(calc(1 - max(var(--d), -1 * var(--d)) * 0.11));
  transition: transform .62s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, filter .5s ease;
  z-index: calc(10 - max(var(--d), -1 * var(--d)));
  opacity: calc(1 - max(var(--d), -1 * var(--d)) * 0.22);
  filter: saturate(calc(1 - max(var(--d), -1 * var(--d)) * 0.25));
}
.carta img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 20px;
  border: 1px solid color-mix(in oklab, var(--oro) 55%, transparent);
  box-shadow: 0 30px 70px -30px #000, 0 0 0 1px #00000040,
    0 0 60px -18px color-mix(in oklab, var(--rosso) 70%, transparent);
}
/* Quale carta e' la prima, la seconda, la terza: lo dice il CSS, non un attributo `style` in
   linea — la CSP del servizio (`style-src 'self'`) scarta gli stili scritti nel marcatore, e il
   mazzo resterebbe impilato in un punto solo. Dal JavaScript invece si puo' (e' il CSSOM). */
.carta:nth-child(1) { --t: 0; will-change: transform; }
.carta:nth-child(2) { --t: 1; }
.carta:nth-child(3) { --t: 2; }
.carta:nth-child(4) { --t: 3; }
.puntini { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; gap: 6px; justify-content: center; }
.puntini i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--panna) 35%, transparent); transition: all .3s; }
.puntini i.on { width: 18px; border-radius: 3px; background: var(--oro); }

/* ---------------------------------------------------------------- insegna */
.insegna { text-align: center; display: grid; gap: clamp(4px, 1dvh, 10px); }
.nome {
  margin: 0; font-size: clamp(2.4rem, 11vw, 4.2rem); line-height: .96;
  letter-spacing: .01em; font-weight: 700;
  background: linear-gradient(96deg, var(--oro-chiaro), var(--oro) 35%, #fff 48%, var(--oro) 62%, var(--oro-chiaro));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: luce 7s ease-in-out infinite;
}
@keyframes luce { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
/* Lettera per lettera, una volta sola, all'ingresso. */
.nome span { display: inline-block; animation: lettera .7s cubic-bezier(.2, .9, .25, 1) backwards; }
.nome span:nth-child(1) { animation-delay: .05s } .nome span:nth-child(2) { animation-delay: .11s }
.nome span:nth-child(3) { animation-delay: .17s } .nome span:nth-child(4) { animation-delay: .23s }
.nome span:nth-child(5) { animation-delay: .29s } .nome span:nth-child(6) { animation-delay: .35s }
.nome span:nth-child(7) { animation-delay: .41s }
/* I nomi non sono tutti lunghi come «Lovunoe»: le lettere oltre la settima continuano a entrare
   una dietro l'altra invece di comparire tutte insieme a meta' parola. */
.nome span:nth-child(8) { animation-delay: .47s } .nome span:nth-child(9) { animation-delay: .53s }
.nome span:nth-child(10) { animation-delay: .59s } .nome span:nth-child(11) { animation-delay: .65s }
.nome span:nth-child(12) { animation-delay: .71s } .nome span:nth-child(13) { animation-delay: .77s }
.nome span:nth-child(14) { animation-delay: .83s } .nome span:nth-child(15) { animation-delay: .89s }
.nome span:nth-child(16) { animation-delay: .95s }

/* Un profilo appena nato non ha ancora una chat. Spariscono i tasti che ci porterebbero — non
   la voce «Chat» del dock: togliere una voce cambia la forma della pagina, e chi la tocca
   merita di leggere perche' non si puo' ancora scrivere, non di non trovarla piu'. */
body.senza-contatto [data-telegram],
body.senza-contatto #scorciatoie { display: none; }
body.senza-contatto .con-contatto,
body:not(.senza-contatto) .senza-contatto-dice { display: none; }
@keyframes lettera {
  from { opacity: 0; transform: translateY(.5em) rotateX(55deg); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.riga { margin: 0; color: var(--cipria); font-size: clamp(.8rem, 3.4vw, .98rem); letter-spacing: .04em; }
.freccia { color: var(--oro); }

.inviti { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-bottom: clamp(6px, 1.6dvh, 16px); }

/* ------------------------------------------------------------------ tasti */
.tasto {
  font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--vetro-bordo); color: var(--panna);
  background: color-mix(in oklab, var(--velluto) 65%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.tasto:active { transform: scale(.96); }
.tasto.grande { min-height: 52px; font-size: 1.02rem; padding: 0 26px; }
.tasto.pieno { width: 100%; }
.tasto.oro {
  background: linear-gradient(130deg, var(--oro-chiaro), var(--oro) 55%, #b98f45);
  color: #2a0712; border-color: transparent;
  box-shadow: 0 14px 34px -16px var(--oro), inset 0 1px 0 #fff8;
}
.tasto.oro:hover { box-shadow: 0 18px 42px -14px var(--oro), inset 0 1px 0 #fff8; }
.tasto.telegram { background: linear-gradient(130deg, #37aee2, #1d8cc0); color: #04131c; border-color: transparent; }
.tasto.telegram svg { width: 20px; height: 20px; fill: currentColor; }
.tasto.fantasma { background: none; border-color: color-mix(in oklab, var(--panna) 22%, transparent); color: var(--muto); text-decoration: none; }

/* ------------------------------------------------------------------- dock */
.dock {
  position: absolute; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  /* Quante voci ci sono lo dice la pagina: il listino si puo' spegnere, i portali possono
     non esserci. Il JS scrive --voci, il dock si stringe o si allarga. */
  display: grid; grid-template-columns: repeat(var(--voci, 5), 1fr);
  border-radius: 999px; padding: 6px; z-index: 40;
}
.voce {
  font: inherit; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; color: var(--muto); padding: 7px 2px 6px; cursor: pointer;
  border-radius: 999px; transition: color .25s, background .25s;
}
.voce svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.voce.on { color: var(--nero); background: linear-gradient(130deg, var(--oro-chiaro), var(--oro)); }
.voce:active { transform: scale(.94); }

/* ------------------------------------------------------------------ fogli */
/* Un foglio copre il palco fino al dock. Entra ed esce con @starting-style e
   `transition-behavior: allow-discrete`: nessun lampo, nessuna classe da togliere a mano. */
.velo {
  position: absolute; inset: 0; z-index: 30; background: #05030480;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 1; transition: opacity .35s, display .35s allow-discrete;
  @starting-style { opacity: 0; }
}
.velo[hidden] { display: block !important; opacity: 0; pointer-events: none; }

.foglio {
  position: absolute; z-index: 35;
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: calc(var(--dock) + 8px);
  max-height: calc(100dvh - var(--dock) - clamp(70px, 14dvh, 130px));
  display: flex; flex-direction: column;
  border-radius: var(--raggio);
  padding: 4px 4px 10px;
  transition: opacity .38s cubic-bezier(.2,.8,.2,1), transform .38s cubic-bezier(.2,.8,.2,1), display .38s allow-discrete;
  @starting-style { opacity: 0; transform: translateY(26px) scale(.98); }
}
.foglio[hidden] { display: flex !important; opacity: 0; transform: translateY(26px) scale(.98); pointer-events: none; }

.foglio-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
}
.foglio-testa h2 { margin: 0; font-size: clamp(1.2rem, 5.2vw, 1.55rem); }
.chiudi {
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in oklab, var(--panna) 10%, transparent);
  border: 1px solid var(--vetro-bordo); color: var(--panna);
}
.foglio-corpo { padding: 0 14px 6px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.foglio-corpo::-webkit-scrollbar { width: 0; }

/* ------------------------------------------------------------------- bio */
.bio-occhiello { margin: 0 0 8px; font-size: .68rem; letter-spacing: .22em; color: var(--oro); }
.bio-testo { margin: 0 0 10px; font-size: clamp(.92rem, 3.8vw, 1.02rem); line-height: 1.55; }
.bio-testo em { font-family: 'Playfair', serif; font-style: italic; color: var(--cipria); }
/* Quanti «fatti» mostrare lo decide lei dall'area privata (0..6): auto-fit li dispone da solo,
   senza bisogno di un numero di colonne scritto a mano che diventerebbe sbagliato appena ne
   toglie o aggiunge uno. */
.fatti { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; padding: 0; margin: 14px 0 6px; }
.fatti li { text-align: center; padding: 10px 4px; border-radius: 14px; background: #ffffff0a; border: 1px solid #ffffff14; }
.fatti b { display: block; font-family: 'Playfair', serif; font-size: 1.05rem; color: var(--oro-chiaro); }
.fatti span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muto); }
.bio-firma { margin: 12px 0 0; text-align: right; font-style: italic; color: var(--cipria); }

/* --------------------------------------------------------------- listino */
.listino {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-rows: 1fr; gap: 10px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.listino::-webkit-scrollbar { display: none; }
.listino .pagina-listino { display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
/* I pallini sotto: dicono che ce n'e' ancora, e dove sei. Senza, una pagina sola sembra tutto. */
.pagine { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.pagine i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--panna) 30%, transparent); transition: all .3s; }
.pagine i.on { width: 18px; border-radius: 3px; background: var(--oro); }
.voce-listino {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 16px;
  background: linear-gradient(120deg, #ffffff0c, #ffffff04);
  border: 1px solid #ffffff16; color: var(--panna); font: inherit;
  /* entrano a scalare, una dopo l'altra */
  animation: entra .5s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay: calc(var(--i) * 55ms);
  transition: border-color .25s, transform .2s, background .25s;
}
.voce-listino:hover { border-color: var(--oro); transform: translateX(3px); }
.voce-listino b { display: block; font-size: clamp(.9rem, 3.7vw, 1rem); }
.voce-listino small { color: var(--muto); font-size: .76rem; }
.prezzo {
  font-family: 'Playfair', serif; font-weight: 700; font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  color: var(--oro-chiaro); white-space: nowrap;
}
.voce-listino.top { border-color: color-mix(in oklab, var(--oro) 55%, transparent); background: linear-gradient(120deg, #d8b36a1f, #ffffff05); }
.sigillo { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nero); background: var(--oro); border-radius: 999px; padding: 2px 7px; margin-left: 7px; vertical-align: 2px; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.nota-listino { margin: 10px 0 2px; text-align: center; font-size: .74rem; color: var(--muto); letter-spacing: .04em; }

/* --------------------------------------------------------------- gallerie */
/* Niente scorrimento in verticale: le foto stanno in pagine che scorrono di LATO, con lo scatto
   (scroll-snap). Si sfoglia come un album, non si scende come una lista. */
.griglia {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: 1fr;          /* una riga sola: le pagine stanno in fila, non impilate */
  gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  height: min(42dvh, 340px);
}
.griglia::-webkit-scrollbar { display: none; }
.pagina { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; scroll-snap-align: start; }
/* Tre tessere o meno: una riga sola, alte quanto il foglio. Mezza griglia vuota sotto due foto
   sembra una galleria rotta, non una galleria piccola. */
.pagina.corta { grid-template-rows: 1fr; grid-template-columns: repeat(var(--col, 3), 1fr); }
.tessera {
  position: relative; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: 14px; background: #2a0712;
  animation: entra .45s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay: calc(var(--i) * 40ms);
}
.tessera img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tessera:hover img { transform: scale(1.06); }
.tessera .play {
  position: absolute; inset: auto 8px 8px auto; width: 26px; height: 26px; border-radius: 50%;
  background: #000000a8; display: grid; place-items: center; color: #fff; font-size: .6rem;
}
/* VIP: si vede che c'e', non si vede cosa. Sfocata, con la serratura e un luccichio che passa. */
/* La sfocatura vera e' gia' nel file che arriva dal server (`teaser.jpg`): qui si aggiunge solo
   un velo, altrimenti si sfoca due volte e non si capisce nemmeno che c'e' una persona. */
.chiusa .tessera img { filter: blur(2px) saturate(.8) brightness(.78); transform: scale(1.04); }
.chiusa .tessera::after {
  content: ''; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8cf93' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2.4'/%3E%3Cpath d='M8.2 10V7.8a3.8 3.8 0 0 1 7.6 0V10'/%3E%3C/svg%3E") center / 26px no-repeat,
    radial-gradient(60% 60% at 50% 50%, #0000, #0a0608aa);
}
.chiusa .tessera::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, transparent 35%, #f3e3bb33 50%, transparent 65%);
  background-size: 300% 100%; animation: luccica 3.4s ease-in-out infinite;
}
@keyframes luccica { 0%, 60% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.tag-free, .tag-vip {
  font-family: 'InterLv', sans-serif; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; vertical-align: 4px;
}
.tag-free { background: #39d98a22; color: #7ff0bb; border: 1px solid #39d98a55; }
.tag-vip { background: linear-gradient(120deg, var(--oro-chiaro), var(--oro)); color: #2a0712; }

/* -------------------------------------------------------------- contatti */
.contatti { display: grid; gap: 12px; text-align: center; }
.scorciatoie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.scorciatoia {
  font: inherit; font-size: .84rem; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: 14px; color: var(--panna);
  background: #ffffff0b; border: 1px solid #ffffff16;
}
.scorciatoia:hover { border-color: var(--oro); }

/* ------------------------------------------------------------------ lente */
/* La foto a tutto schermo: con la transizione condivisa parte dalla carta e ci torna. */
.lente {
  position: fixed; inset: 0; z-index: 60; background: #04020399;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: grid; place-items: center; padding: 18px;
}
.lente img {
  max-width: min(94vw, 620px); max-height: 82dvh; object-fit: contain;
  border-radius: 18px; border: 1px solid color-mix(in oklab, var(--oro) 50%, transparent);
  box-shadow: 0 40px 90px -30px #000;
  view-transition-name: foto-grande;
}
.lente-chiudi { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; }

/* ------------------------------------------------------------------ 18+ */
.eta { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: #05030466; }
.eta-scheda { max-width: 380px; border-radius: var(--raggio); padding: 26px 22px; text-align: center; }
.eta-occhiello { margin: 0 0 6px; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.eta-scheda h1 { margin: 0 0 8px; font-size: 1.7rem; }
.eta-scheda p { margin: 0 0 16px; font-size: .9rem; }
.eta-tasti { display: grid; gap: 8px; }

/* ------------------------------------------------- transizioni fra i fogli */
/* Cambiare foglio e' un cambio di vista, non un rimpiazzo di nodi: lo fa il browser. */
::view-transition-old(foglio) { animation: via .22s ease-in both; }
::view-transition-new(foglio) { animation: dentro .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes via { to { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes dentro { from { opacity: 0; transform: translateY(14px) scale(.99); } }

/* --------------------------------------------------- chi non vuole il moto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before { animation: none; }
}

/* Sul telefono il riassunto non ci sta: la bio e' nel suo foglio. Sul computer lo spazio c'e'
   gia', e lasciarlo vuoto sarebbe un peccato. */
.solo-largo { display: none; }
.sommario { margin: 2px 0 0; max-width: 34ch; color: var(--muto); font-size: .95rem; line-height: 1.55; }
.sommario em { font-family: 'Playfair', serif; font-style: italic; color: var(--cipria); }

/* ----------------------------------------------------- schermi orizzontali */
/* Un telefono girato, o un computer: il mazzo sta a sinistra e il testo a destra, e tutto
   continua a stare dentro una schermata sola. */
@media (min-width: 760px) and (min-height: 420px) {
  .palco {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: auto minmax(0, 1fr) var(--dock);
    column-gap: clamp(20px, 5vw, 70px);
    padding-inline: clamp(24px, 6vw, 90px);
    align-items: center;
  }
  .barra { grid-column: 1 / -1; }
  .mazzo { grid-row: 2; grid-column: 1; }
  .carta { width: min(34vw, 420px); height: min(66dvh, 560px); }
  .insegna { grid-row: 2; grid-column: 2; text-align: left; align-content: center; }
  .inviti { justify-content: flex-start; }
  .nome { font-size: clamp(3.4rem, 7vw, 6rem); }
  .solo-largo { display: block; }
  .dock { left: auto; right: clamp(24px, 6vw, 90px); width: min(460px, 46vw); }
  .foglio { left: auto; right: clamp(24px, 6vw, 90px); width: min(460px, 46vw); }
  .griglia { height: min(38dvh, 320px); }
  /* Sul computer il mazzo sta a fianco, non sotto: il ponte di luce verso di lui non serve piu',
     e un bagliore cosi' esteso qui sembrerebbe solo una macchia. Resta un alone piu' piccolo,
     tutto intorno al logo. */
  .logo::after { left: -14%; right: -14%; top: 6%; height: 150%; }
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 759px) {
  .nome { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .carta { width: min(38vw, 220px); height: min(62dvh, 260px); }
}

/* ------------------------------------------------------------- portali */
/* «Dove mi trovi»: i posti dove lavora, oltre a qui. Ogni portale conosciuto ha la sua tinta
   (--tinta, la scrive il JS dal dominio); gli altri prendono l'oro della pagina. */
.portali { display: grid; gap: 8px; align-content: start; overflow-y: auto; max-height: 46dvh; scrollbar-width: none; }
.portali::-webkit-scrollbar { display: none; }
.portale {
  --tinta: var(--oro);
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px; text-decoration: none; color: var(--panna);
  background: #ffffff0b; border: 1px solid #ffffff16;
  animation: entra .45s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay: calc(var(--i) * 50ms);
  transition: border-color .25s, background .25s, transform .25s;
}
.portale:hover, .portale:focus-visible {
  border-color: color-mix(in oklab, var(--tinta) 70%, transparent);
  background: color-mix(in oklab, var(--tinta) 10%, #ffffff0b);
  transform: translateX(3px);
}
.portale-punto {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-family: 'Playfair', serif; font-size: 1.1rem; font-weight: 700; color: #140a0f;
  background: linear-gradient(140deg, color-mix(in oklab, var(--tinta) 85%, #fff), var(--tinta));
}
.portale b { display: block; font-size: .98rem; letter-spacing: .01em; }
.portale small { color: var(--muto); font-size: .76rem; }
.portale-freccia { color: var(--tinta); font-size: 1.1rem; }

/* ---------------------------------------------------- video in galleria */
.tessera .durata {
  position: absolute; inset: auto auto 8px 8px; padding: 1px 7px; border-radius: 999px;
  background: #000000a8; color: #fff; font-size: .62rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.chiusa .tessera .durata, .chiusa .tessera .play { z-index: 3; }

/* La lente che suona: il video sta dentro lo schermo come la foto, con i suoi comandi. */
.lente video { max-width: min(94vw, 1100px); max-height: 86dvh; border-radius: 16px; background: #000; display: block; }
.lente-nota {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  margin: 0; padding: 8px 16px; border-radius: 999px; font-size: .86rem;
  color: var(--panna); background: #0a0608cc; max-width: 80vw; text-align: center;
}