/* Save the Date · 90s Party
   Impianto: una scena notturna a tutto schermo (la casa di mattoni con il portico bianco e la porta verde,
   come quella dei McCallister), poi una pagina lunga su fondo notte con le luci di Natale in testa,
   schede per quando/dove, la guida di stile a polaroid, lo schermo blu del videoregistratore per la conferma.
   Un solo tema, scuro, per scelta. Tutto il portone è disegnato in «u», l'unità della scena. */

@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/vt323-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alfa Slab One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/alfa-slab-one-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/archivo-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/archivo-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --notte: #0a1020;
  --notte-2: #121a2e;
  --notte-3: #1b2440;
  --crema: #f3e9d6;
  --crema-70: rgba(243, 233, 214, .7);
  --crema-40: rgba(243, 233, 214, .4);
  --crema-15: rgba(243, 233, 214, .15);
  --rosso: #c4142e;
  --rosso-scuro: #8e0f22;
  --verde: #1f6b45;
  --verde-porta: #1e3b2c;
  --oro: #f2c14e;
  --ottone: #d4a84b;
  --vhs-blu: #1a2bd6;
  --vhs-giallo: #ffe66d;
  --f-display: "Alfa Slab One", "Rockwell", "Georgia", serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-vcr: "VT323", "Courier New", monospace;
  --u: min(.72vh, 2.2vw);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { background: var(--notte); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--notte); color: var(--crema); font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

#neve { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }

/* ===================== LA SCENA ===================== */
.scena {
  position: fixed; inset: 0; z-index: 10; overflow: hidden;
  background: linear-gradient(180deg, #05080f 0%, #0b1226 50%, #15203f 100%);
  transition: transform 1.4s cubic-bezier(.6, 0, .4, 1), opacity 1.1s ease .3s;
  transform-origin: 50% 68%;
}
.scena.entrata { transform: scale(2.6) translateY(6%); opacity: 0; pointer-events: none; }
.scena.via { display: none; }

.cielo {
  position: absolute; inset: 0 0 auto 0; height: 50%;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 8%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 41% 24%, #fff 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 57% 12%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 66% 30%, #fff 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 9%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 88% 22%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 5% 36%, #fff 50%, transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 38%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 35% 40%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 72% 44%, #fff 50%, transparent 60%),
    radial-gradient(1.2px 1.2px at 50% 33%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 20% 48%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 62% 6%, #fff 50%, transparent 60%);
  opacity: .9;
}
.luna { position: absolute; left: 76%; top: 10%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff8e6, #e8dcc0 60%, #cfc2a4); box-shadow: 0 0 calc(6 * var(--u)) rgba(247, 239, 217, .35), 0 0 calc(18 * var(--u)) rgba(247, 239, 217, .12); }

.casa { position: absolute; left: 0; right: 0; bottom: 0; height: calc(116 * var(--u)); }
.mattoni {
  position: absolute; inset: 0;
  background-color: #8b4738;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23cdbfae'/%3E%3Crect x='.3' y='.3' width='7.4' height='4.4' fill='%238f4a3a'/%3E%3Crect x='8.3' y='.3' width='7.4' height='4.4' fill='%239a5241'/%3E%3Crect x='-3.7' y='5.3' width='7.4' height='4.4' fill='%23864335'/%3E%3Crect x='4.3' y='5.3' width='7.4' height='4.4' fill='%23a0563f'/%3E%3Crect x='12.3' y='5.3' width='7.4' height='4.4' fill='%23864335'/%3E%3C/svg%3E");
  background-size: calc(8 * var(--u)) calc(5 * var(--u));
}
.mattoni::before { /* la luce delle lanterne e il buio in alto */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 55% at 50% 62%, rgba(255, 190, 90, .34), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, 0) 60%);
}
.mattoni::after { /* la grana dei mattoni: ogni mattone un po' diverso */
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.9' intercept='.25'/%3E%3CfeFuncG type='linear' slope='.9' intercept='.25'/%3E%3CfeFuncB type='linear' slope='.9' intercept='.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
}
.grondaia {
  position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--u));
  background: linear-gradient(180deg, #fbfbff 0 50%, #e4dfd2 50% 72%, #cfc8b8 72% 100%);
  box-shadow: 0 calc(.8 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, .5);
}

/* le lucine: una fila di lampadine; ognuna ha il suo ritmo */
.luci { list-style: none; margin: 0; padding: 0 calc(1.5 * var(--u)); display: flex; justify-content: space-between; position: absolute; left: 0; right: 0; top: calc(2.6 * var(--u)); z-index: 2; }
.luci li { width: calc(.9 * var(--u)); height: calc(1.5 * var(--u)); border-radius: 40% 40% 50% 50%; position: relative; animation: lampeggia 2.4s ease-in-out infinite; }
.luci li::before { content: ""; position: absolute; left: 25%; right: 25%; top: calc(-.55 * var(--u)); height: calc(.6 * var(--u)); background: #2d3140; border-radius: 2px 2px 0 0; }
.luci .c1 { background: #ff4d4d; box-shadow: 0 0 calc(1.6 * var(--u)) #ff4d4d; }
.luci .c2 { background: #4de07a; box-shadow: 0 0 calc(1.6 * var(--u)) #4de07a; animation-delay: -.6s; }
.luci .c3 { background: #ffd24d; box-shadow: 0 0 calc(1.6 * var(--u)) #ffd24d; animation-delay: -1.2s; }
.luci .c4 { background: #5aa9ff; box-shadow: 0 0 calc(1.6 * var(--u)) #5aa9ff; animation-delay: -1.8s; }
@keyframes lampeggia { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* le finestre ai lati, con le persiane scure e la corona */
.finestra { position: absolute; bottom: calc(34 * var(--u)); width: calc(16 * var(--u)); height: calc(24 * var(--u)); }
.finestra.sx { left: calc(50% - 50 * var(--u)); }
.finestra.dx { left: calc(50% + 34 * var(--u)); }
.finestra .telaio { position: absolute; inset: 0; background: #f1ece0; padding: calc(.9 * var(--u)); box-shadow: 0 0 calc(5 * var(--u)) rgba(255, 190, 90, .3), inset 0 0 0 calc(.25 * var(--u)) #cfc8b8; }
.finestra .vetro {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(33.3% - .35 * var(--u)), #f1ece0 calc(33.3% - .35 * var(--u)) calc(33.3% + .35 * var(--u)), transparent calc(33.3% + .35 * var(--u)) calc(66.6% - .35 * var(--u)), #f1ece0 calc(66.6% - .35 * var(--u)) calc(66.6% + .35 * var(--u)), transparent calc(66.6% + .35 * var(--u))),
    linear-gradient(180deg, transparent calc(33.3% - .35 * var(--u)), #f1ece0 calc(33.3% - .35 * var(--u)) calc(33.3% + .35 * var(--u)), transparent calc(33.3% + .35 * var(--u)) calc(50% - .5 * var(--u)), #e4dfd2 calc(50% - .5 * var(--u)) calc(50% + .5 * var(--u)), transparent calc(50% + .5 * var(--u)) calc(66.6% - .35 * var(--u)), #f1ece0 calc(66.6% - .35 * var(--u)) calc(66.6% + .35 * var(--u)), transparent calc(66.6% + .35 * var(--u))),
    radial-gradient(90% 80% at 50% 75%, #ffd98a 0%, #d88a36 55%, #6b3a16 100%);
}
.finestra .tenda { position: absolute; top: 0; bottom: 0; left: 0; width: 24%; background: linear-gradient(90deg, #7c1a27, #a8232f 55%, rgba(168, 35, 47, 0)); opacity: .9; }
.finestra .tenda.dx { left: auto; right: 0; background: linear-gradient(270deg, #7c1a27, #a8232f 55%, rgba(168, 35, 47, 0)); }
.corona-finestra { position: absolute; left: 50%; top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); transform: translate(-50%, -50%); filter: drop-shadow(0 calc(.3 * var(--u)) calc(.4 * var(--u)) rgba(0, 0, 0, .5)); }
.finestra .persiana { position: absolute; top: calc(-.6 * var(--u)); bottom: calc(-.6 * var(--u)); left: calc(-3.4 * var(--u)); width: calc(3 * var(--u)); background: repeating-linear-gradient(180deg, #171c22 0 calc(1.1 * var(--u)), #262d36 calc(1.1 * var(--u)) calc(1.4 * var(--u))); box-shadow: 0 calc(.4 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .5); }
.finestra .persiana.dx { left: auto; right: calc(-3.4 * var(--u)); }
.finestra .davanzale { position: absolute; left: calc(-1.2 * var(--u)); right: calc(-1.2 * var(--u)); bottom: calc(-1.4 * var(--u)); height: calc(1.6 * var(--u)); background: linear-gradient(180deg, #fbfbff 0 45%, #d9d3c5 45%); box-shadow: 0 calc(.6 * var(--u)) var(--u) rgba(0, 0, 0, .45); }

/* il portico: frontone, trabeazione, pilastri, lanterne, stipite, scalini */
.portico { position: absolute; left: 50%; bottom: calc(9.5 * var(--u)); width: calc(32 * var(--u)); height: calc(100 * var(--u)); transform: translateX(-50%); }
.frontone { position: absolute; left: calc(-9 * var(--u)); right: calc(-9 * var(--u)); top: 0; height: calc(11 * var(--u)); clip-path: polygon(0 100%, 50% 0, 100% 100%); background: linear-gradient(180deg, #fbfbff, #e9e4d8 40%, #d7d1c2); }
.frontone i { position: absolute; left: calc(2.4 * var(--u)); right: calc(2.4 * var(--u)); top: calc(2.2 * var(--u)); bottom: calc(1.2 * var(--u)); clip-path: polygon(0 100%, 50% 0, 100% 100%); background: linear-gradient(180deg, #d9d3c4, #c7c0b0); }
.frontone::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; clip-path: polygon(0 100%, 50% 0, 100% 100%, 100% 100%, 50% 10%, 0 100%); background: #fff; }
.trabeazione { position: absolute; left: calc(-8 * var(--u)); right: calc(-8 * var(--u)); top: calc(11 * var(--u)); height: calc(3.6 * var(--u)); background: linear-gradient(180deg, #fbfbff 0 30%, #ebe6da 30% 70%, #d3cdbd 70%); box-shadow: 0 calc(.6 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .45); }
.pilastro { position: absolute; top: calc(14.6 * var(--u)); bottom: calc(6.6 * var(--u)); width: calc(4 * var(--u)); background: linear-gradient(90deg, #d8d2c4, #fbfbff 35%, #efeae0 70%, #c9c2b2); box-shadow: 0 0 calc(1.2 * var(--u)) rgba(0, 0, 0, .35); }
.pilastro.sx { left: calc(-6 * var(--u)); }
.pilastro.dx { right: calc(-6 * var(--u)); }
.pilastro .capitello { position: absolute; left: calc(-.6 * var(--u)); right: calc(-.6 * var(--u)); top: 0; height: calc(1.6 * var(--u)); background: linear-gradient(180deg, #fbfbff, #d3cdbd); }
.pilastro .base { position: absolute; left: calc(-.6 * var(--u)); right: calc(-.6 * var(--u)); bottom: 0; height: calc(2 * var(--u)); background: linear-gradient(180deg, #e9e4d8, #c9c2b2); }

.lanterna { position: absolute; top: calc(44 * var(--u)); width: calc(5 * var(--u)); height: calc(9 * var(--u)); }
.lanterna.sx { left: calc(-16 * var(--u)); }
.lanterna.dx { right: calc(-16 * var(--u)); }
.lanterna svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 calc(1.2 * var(--u)) rgba(255, 200, 100, .9)); }
.lanterna .bagliore { position: absolute; left: 50%; top: 45%; width: calc(34 * var(--u)); height: calc(34 * var(--u)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, .5) 0%, rgba(255, 190, 90, .16) 30%, rgba(255, 190, 90, 0) 68%); animation: respira 4s ease-in-out infinite; pointer-events: none; }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

.stipite {
  position: absolute; left: 0; right: 0; top: calc(14.6 * var(--u)); bottom: calc(6.6 * var(--u));
  background: linear-gradient(180deg, #f6f1e6, #e3dccb); padding: calc(2 * var(--u));
  box-shadow: inset 0 0 0 calc(.3 * var(--u)) #cfc7b4, 0 calc(.6 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .45);
  perspective: calc(150 * var(--u));
}
.lunetta { position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(2 * var(--u)); height: calc(5 * var(--u)); display: flex; gap: calc(.6 * var(--u)); padding: calc(.5 * var(--u)); background: #cfc7b4; }
.lunetta i { flex: 1; background: radial-gradient(80% 100% at 50% 100%, #ffd98a, #d88a36 70%, #8a4a1c); box-shadow: inset 0 0 calc(.6 * var(--u)) rgba(0, 0, 0, .35); }
.vano { position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(8 * var(--u)); bottom: calc(2 * var(--u)); overflow: hidden; background: #120c08; }

/* l'ingresso dei McCallister: carta da parati calda, scala con corrimano e festone, albero, lampadario */
.atrio { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease .3s; }
.scena.aperta .atrio { opacity: 1; }
.atrio .parete { position: absolute; inset: 0; background: linear-gradient(180deg, #6b4a2a 0%, #c9a06a 25%, #e6c58f 55%, #b98a52 100%); }
.atrio .parete::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(120, 70, 30, .12) 0 calc(.5 * var(--u)), transparent calc(.5 * var(--u)) calc(2.4 * var(--u))); }
.atrio .lampadario { position: absolute; left: 50%; top: 2%; width: calc(20 * var(--u)); height: calc(14 * var(--u)); transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 20%, rgba(255, 240, 200, .95), rgba(255, 220, 150, .35) 40%, transparent 70%); }
.atrio .lampadario::before { content: ""; position: absolute; left: 50%; top: 0; width: calc(3 * var(--u)); height: calc(2.6 * var(--u)); transform: translateX(-50%); background: radial-gradient(circle at 50% 30%, #fff6d6, #d4a84b 60%, #8a6420); border-radius: 50% 50% 40% 40%; }
.atrio .scala { position: absolute; left: 0; bottom: 18%; width: 62%; height: 60%; background: repeating-linear-gradient(180deg, #f1ece0 0 calc(1.1 * var(--u)), #8a1c2a calc(1.1 * var(--u)) calc(2.2 * var(--u)), #d8d2c4 calc(2.2 * var(--u)) calc(2.6 * var(--u)), #efeae0 calc(2.6 * var(--u)) calc(3.2 * var(--u))); clip-path: polygon(0 0, 100% 100%, 0 100%); box-shadow: inset calc(-2 * var(--u)) 0 calc(3 * var(--u)) rgba(0, 0, 0, .35); }
.atrio .corrimano { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atrio .albero { position: absolute; right: 8%; bottom: 18%; width: 0; height: 0; border-left: calc(5.5 * var(--u)) solid transparent; border-right: calc(5.5 * var(--u)) solid transparent; border-bottom: calc(19 * var(--u)) solid #1f4d33; filter: drop-shadow(0 0 var(--u) rgba(255, 220, 120, .6)); }
.atrio .albero-luci { position: absolute; right: 8%; bottom: 18%; width: calc(11 * var(--u)); height: calc(19 * var(--u)); overflow: visible; }
.atrio .pavimento { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(180deg, #6b3f22, #3b2214); }
.atrio .pavimento::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 0%, rgba(255, 220, 150, .45), transparent 70%); }

/* la porta verde */
.anta {
  position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(8 * var(--u)); bottom: calc(2 * var(--u)); margin: 0; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, #1a3527 0%, #22442f 30%, #1e3b2c 70%, #16301f 100%);
  box-shadow: inset 0 0 0 calc(.3 * var(--u)) rgba(0, 0, 0, .35), inset calc(-1 * var(--u)) 0 calc(2 * var(--u)) rgba(0, 0, 0, .3);
  transform-origin: left center; transform: rotateY(0deg);
  transition: transform 1.7s cubic-bezier(.5, 0, .25, 1), filter .4s ease;
}
.anta:hover, .anta:focus-visible { filter: brightness(1.12); outline: none; }
.anta:focus-visible { box-shadow: inset 0 0 0 calc(.3 * var(--u)) rgba(0, 0, 0, .35), 0 0 0 calc(.6 * var(--u)) var(--oro); }
.scena.bussata .anta { animation: scossa .5s ease; }
.scena.aperta .anta { transform: rotateY(-108deg); cursor: default; }
@keyframes scossa { 0%, 100% { transform: translateX(0) rotateY(0); } 20% { transform: translateX(calc(-.4 * var(--u))) rotateY(1.5deg); } 40% { transform: translateX(calc(.4 * var(--u))) rotateY(-1.5deg); } 60% { transform: translateX(calc(-.3 * var(--u))); } 80% { transform: translateX(calc(.3 * var(--u))); } }
.legno { /* la venatura del legno, appena accennata */
  position: absolute; inset: 0; opacity: .28; mix-blend-mode: overlay; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 400px;
}
.pannello { position: absolute; width: calc(11 * var(--u)); background: linear-gradient(135deg, #1b3828, #234a33 50%, #1a3627); box-shadow: inset calc(.35 * var(--u)) calc(.35 * var(--u)) calc(.5 * var(--u)) rgba(255, 255, 255, .13), inset calc(-.35 * var(--u)) calc(-.35 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .55), 0 0 0 calc(.35 * var(--u)) #132b1d, calc(.2 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) rgba(0, 0, 0, .35); }
.p1, .p3, .p5 { left: calc(3.6 * var(--u)); }
.p2, .p4, .p6 { left: calc(16.4 * var(--u)); }
.p1, .p2 { top: calc(4 * var(--u)); height: calc(11 * var(--u)); }
.p3, .p4 { top: calc(18 * var(--u)); height: calc(16 * var(--u)); }
.p5, .p6 { top: calc(38.5 * var(--u)); height: calc(20 * var(--u)); }
.battente { position: absolute; left: 50%; top: calc(34.6 * var(--u)); width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); transform: translateX(-50%); border-radius: 50%; border: calc(.6 * var(--u)) solid var(--ottone); box-shadow: 0 calc(.3 * var(--u)) calc(.5 * var(--u)) rgba(0, 0, 0, .6), inset 0 calc(.2 * var(--u)) calc(.2 * var(--u)) rgba(255, 240, 200, .6); }
.battente::before { content: ""; position: absolute; left: 50%; top: calc(-1.3 * var(--u)); width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7a8, #c99a3a 60%, #8a6420); }
.maniglia { position: absolute; left: calc(24.2 * var(--u)); top: calc(34 * var(--u)); width: calc(1.6 * var(--u)); height: calc(6 * var(--u)); background: linear-gradient(90deg, #8a6420, #e3b655 40%, #b8892c); border-radius: calc(.4 * var(--u)); box-shadow: 0 calc(.3 * var(--u)) calc(.5 * var(--u)) rgba(0, 0, 0, .6); }
.maniglia::before { content: ""; position: absolute; left: calc(-.6 * var(--u)); top: calc(1.2 * var(--u)); width: calc(2.8 * var(--u)); height: calc(.9 * var(--u)); background: linear-gradient(180deg, #ffe7a8, #c99a3a); border-radius: calc(.3 * var(--u)); }
.maniglia::after { content: ""; position: absolute; left: calc(.2 * var(--u)); top: calc(3.2 * var(--u)); width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); border-radius: 50%; background: #3a2a10; }
.piastra { position: absolute; left: calc(2.5 * var(--u)); right: calc(2.5 * var(--u)); bottom: calc(1.2 * var(--u)); height: calc(2.4 * var(--u)); background: linear-gradient(180deg, #e3b655, #b8892c 60%, #d4a84b); box-shadow: 0 calc(.2 * var(--u)) calc(.4 * var(--u)) rgba(0, 0, 0, .5), inset 0 calc(.15 * var(--u)) 0 rgba(255, 240, 200, .6); }
.corona { position: absolute; left: 50%; top: calc(6.5 * var(--u)); width: calc(19 * var(--u)); height: calc(19 * var(--u)); transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 calc(.6 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .6)); pointer-events: none; }
.festone { position: absolute; left: calc(-2 * var(--u)); top: calc(-2 * var(--u)); width: calc(36 * var(--u)); height: calc(81 * var(--u)); overflow: visible; pointer-events: none; filter: drop-shadow(0 calc(.4 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .55)); }

.gradini { position: absolute; left: 50%; bottom: 0; width: calc(52 * var(--u)); height: calc(6.6 * var(--u)); transform: translateX(-50%); }
.gradini i { position: absolute; left: 50%; transform: translateX(-50%); height: calc(2.2 * var(--u)); background: linear-gradient(180deg, #fbfbff 0 28%, #c3c0cf 28% 40%, #9a98a6 40%); box-shadow: 0 calc(.5 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .45); }
.gradini i:nth-child(1) { top: 0; width: calc(40 * var(--u)); }
.gradini i:nth-child(2) { top: calc(2.2 * var(--u)); width: calc(46 * var(--u)); }
.gradini i:nth-child(3) { top: calc(4.4 * var(--u)); width: calc(52 * var(--u)); }
.zerbino { position: absolute; left: 50%; top: calc(.2 * var(--u)); width: calc(16 * var(--u)); height: calc(1.9 * var(--u)); transform: translateX(-50%); background: #5a1420; color: rgba(243, 233, 214, .75); font: 400 calc(1.5 * var(--u))/calc(1.9 * var(--u)) var(--f-vcr); letter-spacing: .2em; text-align: center; box-shadow: inset 0 0 0 calc(.2 * var(--u)) #7a1f2c; }

.cespuglio { position: absolute; bottom: calc(8 * var(--u)); width: calc(30 * var(--u)); height: calc(13 * var(--u)); }
.cespuglio.sx { left: calc(50% - 62 * var(--u)); }
.cespuglio.dx { left: calc(50% + 32 * var(--u)); }
.cespuglio::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 20% 20% / 70% 70% 20% 20%; background: radial-gradient(60% 70% at 40% 30%, #2b5a3a, #163a27 70%, #0d2418); box-shadow: inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .5); }
.cespuglio::after { content: ""; position: absolute; left: 8%; right: 8%; top: calc(-.6 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, #fbfbff, rgba(251, 251, 255, .0)); opacity: .9; }
.cespuglio svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.neve-terra { position: absolute; left: 0; right: 0; bottom: 0; height: calc(9.5 * var(--u)); background: linear-gradient(180deg, rgba(251, 251, 255, 0) 0, #fbfbff calc(1.2 * var(--u)), #e9edf6 100%); }
.neve-terra::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(1.4 * var(--u)); background: radial-gradient(calc(3 * var(--u)) calc(1.4 * var(--u)) at 50% 100%, #fbfbff 60%, transparent 62%); background-size: calc(6 * var(--u)) calc(1.4 * var(--u)); }

.vignettatura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 70% at 50% 55%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.grana { /* la grana della pellicola */
  position: absolute; inset: -50%; width: 200%; height: 200%; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px; animation: grana .6s steps(5) infinite; will-change: transform;
}
@keyframes grana { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* corona, festone, lucine: gli elementi che il codice disegna */
.ago { stroke: rgba(0, 0, 0, .25); stroke-width: .08; }
.bacca { fill: #d81e2e; }
.bacca-luce { fill: #ff8a8a; }
.pigna { fill: #5a3a1e; stroke: #3c2612; stroke-width: .08; }
.lucina { animation: lampeggia 2.2s ease-in-out infinite; }
.lucina.c1 { fill: #ff6b6b; } .lucina.c2 { fill: #7dff9c; animation-delay: -.5s; } .lucina.c3 { fill: #ffe27a; animation-delay: -1s; } .lucina.c4 { fill: #8ac4ff; animation-delay: -1.5s; }
.fiocco-nastro { fill: #b5122a; stroke: #7a0d1d; stroke-width: .1; }
.fiocco-luce { fill: #d8203a; }

.hud { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); display: flex; gap: .8em; font: 400 clamp(18px, 2.6vw, 26px)/1 var(--f-vcr); color: var(--crema); text-shadow: 0 0 6px rgba(243, 233, 214, .55); letter-spacing: .04em; z-index: 3; }
.hud-sx { left: var(--gutter-l); }
.hud-dx { right: var(--gutter-r); }
.rec { color: #ff4d4d; animation: lampeggia 1.2s steps(2, start) infinite; }

.toc, .fumetto { position: absolute; z-index: 4; margin: 0; }
.toc { left: 50%; top: 16%; transform: translateX(-50%) rotate(-6deg); font: 400 clamp(44px, 9vw, 96px)/1 var(--f-vcr); color: var(--crema); text-shadow: 0 0 14px rgba(243, 233, 214, .7); animation: toc .5s ease; }
@keyframes toc { from { transform: translateX(-50%) rotate(-6deg) scale(.6); opacity: 0; } to { transform: translateX(-50%) rotate(-6deg) scale(1); opacity: 1; } }
.fumetto { left: calc(50% + 4 * var(--u)); top: 22%; background: var(--crema); color: var(--notte); font: 500 clamp(16px, 2.2vw, 22px)/1.2 var(--f-body); padding: .6em 1em; border-radius: 1.2em 1.2em 1.2em .2em; animation: toc .4s ease; }

.bussa { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1vh); transform: translateX(-50%); z-index: 4; text-align: center; pointer-events: none; animation: pulsa 2.2s ease-in-out infinite; }
/* sui telefoni la scritta cade sui gradini o sui cespugli: un cartellino chiaro la tiene leggibile */
@media (max-width: 720px), (max-height: 520px) {
  .bussa { width: max-content; max-width: calc(100vw - 32px); padding: 8px 16px 9px; border-radius: 14px; background: rgba(244, 240, 232, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
}
.bussa-titolo { display: block; font: 400 clamp(24px, 3.4vw, 34px)/1 var(--f-vcr); color: var(--notte); letter-spacing: .04em; }
.bussa-sotto { display: block; font: 400 clamp(15px, 2.1vw, 20px)/1.2 var(--f-vcr); color: var(--rosso); }
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.scena.bussata .bussa, .scena.aperta .bussa { visibility: hidden; }
.salta { position: absolute; right: var(--gutter-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 2vh); z-index: 4; font: 400 clamp(16px, 2vw, 20px)/1 var(--f-vcr); color: var(--notte-3); text-decoration: none; border-bottom: 1px solid rgba(27, 36, 64, .5); padding-bottom: 2px; }
.salta:hover, .salta:focus-visible { color: var(--rosso); border-color: var(--rosso); outline: none; }

/* il nastro: lo sfarfallio del videoregistratore tra la porta e l'invito */
.nastro { position: fixed; inset: 0; z-index: 20; background: #000; display: grid; place-items: center; }
.nastro canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.nastro .play { position: relative; font: 400 clamp(40px, 8vw, 90px)/1 var(--f-vcr); color: var(--crema); text-shadow: 3px 0 #ff2d2d, -3px 0 #2d8cff; letter-spacing: .06em; }

/* ===================== L'INVITO ===================== */
#invito { position: relative; z-index: 6; padding-inline: var(--gutter-l) var(--gutter-r); padding-block: 0 40px; max-width: 1080px; margin: 0 auto; }
#invito::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .18; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); }
.luci-testata { position: sticky; top: env(safe-area-inset-top, 0px); margin: 0 calc(50% - 50vw); width: 100vw; padding: 10px 14px 0; z-index: 3; background: linear-gradient(180deg, var(--notte) 55%, rgba(10, 16, 32, 0)); }
.luci-testata li { width: 9px; height: 15px; }
.luci-testata li::before { top: -6px; height: 6px; }
.luci-testata::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: #3b4254; z-index: -1; }

.vcr { font-family: var(--f-vcr); letter-spacing: .04em; }
.eyebrow { font-size: clamp(18px, 2.2vw, 22px); color: var(--oro); margin: 0 0 10px; text-transform: uppercase; }

.apertura { padding: 56px 0 10px; text-align: center; max-width: 760px; margin: 0 auto; }
.titolo:focus { outline: none; }
.titolo { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: .92; text-wrap: balance; display: grid; gap: .02em; }
.titolo .t1 { font-size: clamp(30px, 7vw, 60px); color: var(--crema); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 .04em 0 var(--rosso-scuro); }
.titolo .t2 { font-size: clamp(76px, 18vw, 170px); color: var(--rosso); text-transform: uppercase; letter-spacing: .02em; text-shadow: .03em .03em 0 var(--crema), .06em .06em 0 var(--rosso-scuro), 0 0 .3em rgba(196, 20, 46, .35); }
.bollo { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0 12px; margin: 18px auto 0; padding: 10px 18px; background: var(--vhs-blu); color: var(--vhs-giallo); transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--rosso), 0 0 30px rgba(26, 43, 214, .4); font-family: var(--f-display); }
.bollo-90 { grid-row: 1 / 3; font-size: clamp(40px, 7vw, 64px); line-height: 1; color: #fff; text-shadow: 3px 3px 0 var(--rosso); }
.bollo-party { font-size: clamp(16px, 2.6vw, 22px); letter-spacing: .3em; text-transform: uppercase; line-height: 1; align-self: end; }
.bollo-road { font: 400 clamp(18px, 2.6vw, 24px)/1 var(--f-vcr); letter-spacing: .08em; color: #fff; background: var(--rosso); padding: 4px 10px; margin-top: 6px; }
.lead { font-size: clamp(19px, 2.6vw, 25px); line-height: 1.4; margin: 30px auto 10px; max-width: 30em; color: var(--crema); text-wrap: balance; font-weight: 500; }
.firma { margin: 0; color: var(--crema-70); font-style: italic; }

.ticker { margin: 28px calc(50% - 50vw) 0; width: 100vw; overflow: hidden; border-top: 1px solid var(--crema-15); border-bottom: 1px solid var(--crema-15); background: rgba(243, 233, 214, .04); }
.ticker-corsa { display: flex; width: max-content; animation: corsa 40s linear infinite; }
.ticker span { white-space: nowrap; padding: 8px 0; font: 400 clamp(18px, 2.2vw, 22px)/1 var(--f-vcr); color: var(--oro); letter-spacing: .06em; }
@keyframes corsa { to { transform: translateX(-50%); } }

.dettagli { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 28px auto 0; max-width: 860px; }
.scheda { min-width: 0; background: var(--notte-2); border: 1px solid var(--crema-15); padding: 26px 26px 24px; position: relative; }
.scheda::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--rosso) 0 18px, var(--crema) 18px 36px, var(--verde) 36px 54px, var(--crema) 54px 72px); opacity: .9; }
.etichetta { margin: 0 0 8px; font: 400 13px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.grande { margin: 0; font-family: var(--f-display); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; color: var(--crema); text-wrap: balance; }
.medio { margin: 8px 0 0; font-size: 17px; color: var(--crema-70); }
.conto { margin: 16px 0 0; font-size: 22px; color: var(--oro); }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.azioni-centro { justify-content: center; margin: 14px 0 26px; }
.tasto { display: inline-block; padding: 11px 18px; border: 1px solid var(--rosso); background: var(--rosso); color: #fff; text-decoration: none; font: 500 15px/1 var(--f-body); letter-spacing: .02em; cursor: pointer; transition: background .25s, border-color .25s, transform .15s; }
.tasto:hover, .tasto:focus-visible { background: #d81e38; border-color: #d81e38; outline: none; transform: translateY(-1px); }
.tasto-vuoto { background: transparent; color: var(--crema); border-color: var(--crema-40); }
.tasto-vuoto:hover, .tasto-vuoto:focus-visible { background: rgba(243, 233, 214, .08); border-color: var(--crema); }
.tasto.copiato { background: var(--verde); border-color: var(--verde); color: #fff; }

.noshoes { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--crema-15); }
.timbro { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--rosso); color: var(--rosso); display: grid; place-items: center; align-content: center; gap: 0; transform: rotate(-12deg); background: rgba(196, 20, 46, .06); position: relative; }
.timbro-scarpa { font-size: 26px; line-height: 1; filter: grayscale(1) brightness(1.6); position: relative; }
.timbro-scarpa::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; background: var(--rosso); transform: rotate(-35deg); }
.timbro-testo { font: 700 11px/1.1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; text-align: center; margin-top: 4px; }
.noshoes-testo { margin: 0; font-size: 15px; color: var(--crema-70); }

.dress, .atmosfera, .rsvp { padding: 56px 0 0; text-align: center; }
.titolo-sezione { margin: 0 0 10px; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; color: var(--crema); text-wrap: balance; }
.testo { margin: 0 auto; max-width: 36em; color: var(--crema-70); text-wrap: pretty; }
.nota-piccola { margin: 22px auto 0; max-width: 40em; font-size: 14px; color: var(--crema-40); }

.filtri { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 4px; }
.filtro { padding: 8px 14px; border: 1px solid var(--crema-15); background: transparent; color: var(--crema-70); font: 400 18px/1 var(--f-vcr); letter-spacing: .04em; cursor: pointer; text-transform: uppercase; }
.filtro:hover, .filtro:focus-visible { border-color: var(--crema-40); color: var(--crema); outline: none; }
.filtro[aria-pressed="true"] { background: var(--vhs-blu); border-color: var(--vhs-blu); color: var(--vhs-giallo); }

.galleria { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 16px; }
.galleria li.fuori { display: none; }
.polaroid { margin: 0; background: #f8f3e8; padding: 8px 8px 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transform: rotate(var(--giro, 0deg)); transition: transform .3s ease, box-shadow .3s ease; position: relative; text-align: left; color: #2a2a2a; }
.polaroid:hover, .polaroid:focus-within { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 0 18px 34px rgba(0, 0, 0, .55); z-index: 2; }
.polaroid button { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.polaroid button:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.polaroid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%; background: #ddd; filter: saturate(.95) contrast(1.02); }
.polaroid figcaption { margin: 9px 2px 0; }
.polaroid .nome { display: block; font: 700 15px/1.25 var(--f-body); color: #1d1d1d; }
.polaroid .tribu { display: inline-block; margin-top: 4px; font: 400 13px/1 var(--f-vcr); letter-spacing: .06em; text-transform: uppercase; color: #8a1c2a; }
.polaroid .kit { margin: 6px 0 0; padding: 0 0 0 1em; font: italic 400 13px/1.35 var(--f-body); color: #3a3a3a; }
.polaroid .kit li { margin: 0; }
.polaroid .livello { position: absolute; left: 10px; top: 10px; z-index: 1; background: rgba(10, 16, 32, .85); color: var(--crema); font: 400 12px/1 var(--f-vcr); letter-spacing: .06em; padding: 4px 7px; text-transform: uppercase; }
.polaroid .livello.l2 { background: rgba(196, 20, 46, .9); }
.galleria li:nth-child(3n) .polaroid { --giro: 1.6deg; }
.galleria li:nth-child(3n+1) .polaroid { --giro: -1.4deg; }
.galleria li:nth-child(5n) .polaroid { --giro: 2.2deg; }
.polaroid.scelto::after { content: "QUESTO"; position: absolute; right: -8px; top: -12px; background: var(--rosso); color: #fff; font: 400 20px/1 var(--f-vcr); padding: 6px 10px; transform: rotate(8deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); letter-spacing: .06em; }
.polaroid.scelto { outline: 4px solid var(--oro); outline-offset: 3px; transform: rotate(0) scale(1.04); z-index: 3; }

.striscia { list-style: none; margin: 18px calc(-1 * var(--gutter-l)) 0 calc(-1 * var(--gutter-r)); padding: 10px var(--gutter-l) 16px var(--gutter-r); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.striscia li { flex: 0 0 auto; width: min(68vw, 260px); scroll-snap-align: start; }
.striscia .polaroid { padding-bottom: 8px; }
.striscia .polaroid img { aspect-ratio: 4 / 5; }
.striscia figcaption { font: italic 400 14px/1.3 var(--f-body); color: #2a2a2a; }

/* lo schermo blu del videoregistratore */
.vcr-schermo {
  position: relative; margin: 24px auto 0; max-width: 640px; text-align: left;
  background: var(--vhs-blu); color: var(--vhs-giallo); font: 400 clamp(20px, 2.6vw, 26px)/1.35 var(--f-vcr); letter-spacing: .03em;
  padding: 22px 24px 20px; border: 8px solid #0b0f1f; border-radius: 10px;
  box-shadow: 0 0 0 2px #2b3350, 0 0 40px rgba(26, 43, 214, .45), inset 0 0 60px rgba(0, 0, 0, .35);
}
.vcr-schermo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 4px); border-radius: 4px; }
.vcr-riga { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 7px 0; border: 0; min-width: 0; }
.vcr-riga:where(label) { cursor: text; }
.vcr-titolo { justify-content: center; letter-spacing: .08em; padding-bottom: 12px; text-shadow: 0 0 8px rgba(255, 230, 109, .5); white-space: nowrap; overflow: hidden; }
.vcr-chiave { flex: 0 0 12.5ch; text-transform: uppercase; }
.vcr-chiave::after { content: ":"; margin-left: 4px; }
.vcr-campo { flex: 1 1 10ch; min-width: 0; background: transparent; border: 0; border-bottom: 2px dashed rgba(255, 230, 109, .55); color: var(--vhs-giallo); font: inherit; letter-spacing: inherit; padding: 0 2px 2px; outline: none; text-transform: uppercase; border-radius: 0; }
.vcr-campo::placeholder { color: rgba(255, 230, 109, .5); text-transform: none; }
.vcr-campo:focus { border-bottom-style: solid; }
.vcr-scelte { padding: 7px 0; flex-wrap: wrap; }
.vcr-scelte legend { float: left; padding: 0; }
.vcr-opzione { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding-left: 1.3ch; cursor: pointer; white-space: nowrap; }
.vcr-opzione input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vcr-opzione::before { content: "▶"; position: absolute; left: 0; opacity: 0; }
.vcr-opzione:has(input:checked)::before { opacity: 1; }
.vcr-opzione:has(input:checked) span { text-shadow: 0 0 8px rgba(255, 230, 109, .6); }
.vcr-opzione:has(input:focus-visible) span { outline: 2px solid var(--vhs-giallo); outline-offset: 3px; }
.vcr-contatore { display: inline-flex; align-items: baseline; gap: 10px; }
.vcr-freccia { background: transparent; border: 0; padding: 10px 12px; margin: -10px -8px; cursor: pointer; touch-action: manipulation; color: var(--vhs-giallo); font: inherit; }
.vcr-freccia:hover, .vcr-freccia:focus-visible { text-shadow: 0 0 8px rgba(255, 230, 109, .8); outline: none; }
.vcr-contatore output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.vcr-nota-piccola { font-size: .75em; opacity: .75; }
.vcr-errore { color: #ffb3b3; text-shadow: 0 0 6px rgba(255, 80, 80, .6); }
.vcr-invio { padding-top: 14px; }
.vcr-tasto { background: transparent; border: 2px solid var(--vhs-giallo); color: var(--vhs-giallo); font: inherit; letter-spacing: .08em; padding: 6px 18px; cursor: pointer; transition: background .2s, color .2s; }
.vcr-tasto:hover, .vcr-tasto:focus-visible { background: var(--vhs-giallo); color: var(--vhs-blu); outline: none; }
.vcr-tasto[disabled] { opacity: .6; cursor: wait; }
.vcr-cursore { animation: lampeggia 1s steps(2, start) infinite; }
.vcr-link { background: none; border: 0; padding: 0; color: var(--vhs-giallo); text-decoration: underline; cursor: pointer; font: inherit; }
.vcr-piccolo { font-size: .8em; opacity: .85; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.conteggio { margin: 26px auto 0; max-width: 640px; }
.conteggio-numero { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.conteggio .n { font-family: var(--f-display); font-size: clamp(44px, 8vw, 72px); line-height: 1; color: var(--crema); font-variant-numeric: tabular-nums; }
.conteggio-testo { font-size: 18px; color: var(--crema-70); }
.conteggio-nomi { margin: 10px auto 0; color: var(--crema-70); font-size: 15px; max-width: 40em; line-height: 1.6; }
.conteggio-nomi b { color: var(--crema); font-weight: 500; }

.fine { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--crema-15); text-align: center; }
.fine .vcr { margin: 0; font-size: 20px; color: var(--crema-70); }
.piccolo { margin: 10px auto 0; font-size: 13px; color: var(--crema-40); max-width: 44em; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(5, 8, 16, .94); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 16px) var(--gutter-l); cursor: zoom-out; }
.lightbox figure { margin: 0; max-width: min(92vw, 720px); background: #f8f3e8; padding: 10px 10px 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.lightbox img { max-height: 72vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.lightbox figcaption { margin: 10px 4px 0; font: 400 16px/1.35 var(--f-body); color: #2a2a2a; text-align: center; }

@media (max-width: 720px) {
  .finestra, .cespuglio { display: none; }
  .lanterna.sx { left: calc(-12 * var(--u)); }
  .lanterna.dx { right: calc(-12 * var(--u)); }
  .luna { left: 70%; top: 14%; }
  .hud { font-size: 17px; }
  .fumetto { left: auto; right: var(--gutter-r); top: 16%; }
  .salta { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 46px); right: auto; left: 50%; transform: translateX(-50%); color: var(--crema-70); border-color: var(--crema-40); }
  .salta:hover, .salta:focus-visible { color: var(--crema); border-color: var(--crema); }
  .vcr-schermo { padding: 16px 14px 16px; }
  .vcr-chiave { flex-basis: 100%; }
  .vcr-riga { flex-wrap: wrap; gap: 6px 14px; }
  .vcr-scelte legend { float: none; }
  .vcr-scelte { gap: 6px 18px; }
  .galleria { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .noshoes { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .luci li, .lucina, .rec, .bussa, .vcr-cursore, .lanterna .bagliore, .grana, .ticker-corsa { animation: none; }
  .scena { transition: opacity .6s ease; }
  .scena.entrata { transform: none; }
  .anta { transition: transform .6s ease; }
  .scena.bussata .anta { animation: none; }
  .toc, .fumetto { animation: none; }
}

/* ===================== LA VIGNETTA A FUMETTO ===================== */
@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/bangers-latin-400-normal.woff2") format("woff2"); }
:root { --f-fumetto: "Bangers", "Impact", "Arial Black", sans-serif; --giallo-fumetto: #ffd54a; --nero-fumetto: #141414; }

/* la coppia che compare nella porta aperta */
.coppia-porta { position: absolute; left: 50%; bottom: 0; height: 88%; width: auto; max-width: none; transform: translate(-50%, 30%) scale(.8); opacity: 0; filter: drop-shadow(0 calc(.6 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .5)); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .9s, opacity .4s ease .9s; }
.scena.aperta .coppia-porta { transform: translate(-50%, 0) scale(1); opacity: 1; animation: dondola 2.6s ease-in-out 1.6s infinite; }
@keyframes dondola { 0%, 100% { transform: translate(-50%, 0) rotate(-1.5deg); } 50% { transform: translate(-50%, -1.5%) rotate(1.5deg); } }

.vignetta { position: fixed; inset: 0; z-index: 18; overflow: hidden; background: var(--giallo-fumetto); color: var(--nero-fumetto); cursor: pointer; border: 10px solid var(--nero-fumetto); animation: slam .55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes slam { from { transform: scale(1.25) rotate(-2deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.vignetta-raggi { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(20, 20, 20, .09) 0deg 4deg, transparent 4deg 12deg); animation: gira 60s linear infinite; will-change: transform; }
@keyframes gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.vignetta-retino { position: absolute; inset: 0; background: radial-gradient(circle, rgba(196, 20, 46, .55) 1.4px, transparent 1.6px); background-size: 9px 9px; mask-image: radial-gradient(70% 70% at 50% 60%, transparent 40%, #000 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, transparent 40%, #000 100%); }
#coriandoli { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vignetta-scena { position: absolute; inset: 0; }
.vignetta-titolo { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 3vh); transform: translateX(-50%) rotate(-4deg); margin: 0; font: 400 clamp(64px, 13vw, 180px)/1 var(--f-fumetto); color: var(--giallo-fumetto); letter-spacing: .03em; -webkit-text-stroke: 3px var(--nero-fumetto); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--rosso), 9px 9px 0 var(--nero-fumetto); animation: titolo-slam .5s cubic-bezier(.2, .9, .3, 1.3) .25s both; white-space: nowrap; }
@keyframes titolo-slam { from { transform: translateX(-50%) rotate(-12deg) scale(2.2); opacity: 0; } to { transform: translateX(-50%) rotate(-4deg) scale(1); opacity: 1; } }
.vignetta-coppia { position: absolute; left: 50%; bottom: 0; height: min(72vh, 110vw); width: auto; max-width: none; transform: translate(-50%, 40%); opacity: 0; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); animation: coppia-pop .7s cubic-bezier(.34, 1.56, .64, 1) .45s forwards, dondola-grande 3s ease-in-out 1.3s infinite; }
@keyframes coppia-pop { from { transform: translate(-50%, 40%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes dondola-grande { 0%, 100% { transform: translate(-50%, 0) rotate(-1deg); } 50% { transform: translate(-50%, -1%) rotate(1deg); } }

.balloon { position: absolute; margin: 0; background: #fff; color: var(--nero-fumetto); border: 3px solid var(--nero-fumetto); border-radius: 22px; padding: 12px 18px; font: 400 clamp(20px, 2.8vw, 32px)/1.05 var(--f-fumetto); letter-spacing: .04em; box-shadow: 5px 5px 0 var(--nero-fumetto); max-width: 34vw; text-align: center; opacity: 0; transform: scale(0); animation: balloon-pop .45s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.balloon::after { content: ""; position: absolute; width: 22px; height: 22px; background: #fff; border-right: 3px solid var(--nero-fumetto); border-bottom: 3px solid var(--nero-fumetto); bottom: -14px; left: 70%; transform: rotate(45deg); }
@keyframes balloon-pop { to { opacity: 1; transform: scale(1); } }
.balloon-gine { left: 3%; top: 30%; max-width: 28vw; animation-delay: 1.3s; }
.balloon-gine::after { left: 78%; }
.balloon-edo { right: 3%; top: 30%; max-width: 28vw; animation-delay: 2.1s; }
.balloon-edo::after { left: 18%; }
.vignetta-didascalia { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 18px); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); margin: 0; max-width: 42vw; background: var(--giallo-fumetto); border: 3px solid var(--nero-fumetto); box-shadow: 5px 5px 0 var(--nero-fumetto); padding: 10px 14px; font: 500 clamp(14px, 1.6vw, 18px)/1.3 var(--f-body); animation: balloon-pop .4s ease 2.8s forwards; opacity: 0; transform: scale(0); }
.vignetta-entra { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 18px); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); background: var(--rosso); color: #fff; border: 3px solid var(--nero-fumetto); box-shadow: 5px 5px 0 var(--nero-fumetto); padding: 12px 20px; font: 400 clamp(20px, 2.4vw, 28px)/1 var(--f-fumetto); letter-spacing: .06em; cursor: pointer; animation: balloon-pop .4s ease 3.2s forwards; opacity: 0; transform: scale(0); }
.vignetta-entra:hover, .vignetta-entra:focus-visible { background: #d81e38; outline: none; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--nero-fumetto); }

/* lo stereo: il lettore Spotify, in basso a destra */
.stereo { position: fixed; right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: transform .6s cubic-bezier(.2, .9, .3, 1), opacity .4s; }
.stereo.nascosto { transform: translateY(140%); opacity: 0; pointer-events: none; }
.stereo-tasto { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--crema-40); background: var(--notte-2); color: var(--crema); font: 400 28px/1 var(--f-vcr); cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); display: grid; place-items: center; }
.stereo-tasto:hover, .stereo-tasto:focus-visible { border-color: var(--oro); outline: none; }
.stereo.suona .stereo-nota { animation: nota 1s ease-in-out infinite; display: inline-block; }
@keyframes nota { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-4px) rotate(8deg); } }
.stereo-pannello { width: min(360px, calc(100vw - 28px)); background: var(--notte-2); border: 1px solid var(--crema-15); padding: 10px 12px 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.stereo.chiuso .stereo-pannello { display: none; }
.stereo-titolo { margin: 0 0 8px; font: 400 15px/1 var(--f-vcr); letter-spacing: .06em; color: var(--oro); }
.stereo-pannello iframe, #spotify { display: block; min-height: 80px; border-radius: 8px; }
.stereo-nota-piccola { margin: 6px 0 0; font-size: 12px; color: var(--crema-40); }

/* la coppia in flanella accanto alla conferma */
.rsvp-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; align-items: end; max-width: 900px; margin: 0 auto; }
.rsvp-fumetto { position: relative; justify-self: center; width: min(220px, 60vw); }
.rsvp-fumetto img { width: 100%; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
.balloon-rsvp { position: relative; left: 0; top: 0; margin: 0 0 14px 10%; font-size: 22px; max-width: none; opacity: 1; transform: none; animation: none; display: inline-block; }
.balloon-rsvp::after { left: 40%; }
.rsvp-modulo { min-width: 0; }
.rsvp-modulo .vcr-schermo { margin-top: 10px; }
@media (min-width: 860px) {
  .rsvp-corpo { grid-template-columns: 220px minmax(0, 1fr); }
  .rsvp-fumetto { justify-self: end; align-self: end; margin-bottom: 110px; }
}

/* quando e dove a sinistra, la conferma a destra; sul telefono una sotto l'altra */
.serata { margin: 28px auto 0; }
.serata .dettagli { margin-top: 0; }
@media (min-width: 960px) {
  .serata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px; align-items: start; }
  .serata .dettagli { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .serata .rsvp { padding-top: 0; text-align: left; scroll-margin-top: 56px; }
  .serata .rsvp .testo { margin: 0; padding-right: 150px; }
  /* la coppia in piedi sopra lo schermo blu, la nuvoletta alla sua sinistra */
  .serata .rsvp-corpo { display: block; position: relative; max-width: none; }
  .serata .rsvp-fumetto { position: absolute; right: 18px; bottom: 100%; width: 128px; margin: 0 0 -18px; z-index: 2; }
  .serata .balloon-rsvp { position: absolute; left: auto; right: calc(100% + 4px); top: 12%; z-index: 1; margin: 0; font-size: 20px; white-space: nowrap; }
  .serata .balloon-rsvp::after { left: auto; right: -14px; bottom: auto; top: calc(50% - 11px); transform: rotate(-45deg); }
  .serata .rsvp-modulo .vcr-schermo { max-width: none; margin-top: 18px; font-size: 22px; }
  .serata .conteggio { margin-left: 0; }
  .serata .conteggio-numero { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .balloon { max-width: 60vw; font-size: 20px; padding: 10px 14px; }
  .balloon-gine { left: 4%; top: 30%; max-width: 60vw; }
  .balloon-edo { right: 4%; top: 16%; max-width: 60vw; }
  .vignetta-coppia { height: min(60vh, 120vw); }
  .vignetta-didascalia { max-width: 62vw; font-size: 13px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); left: calc(env(safe-area-inset-left, 0px) + 12px); }
  .vignetta-entra { right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); padding: 10px 14px; font-size: 20px; }
  .vignetta-titolo { font-size: clamp(56px, 17vw, 90px); top: calc(env(safe-area-inset-top, 0px) + 2vh); }
  .stereo { right: calc(env(safe-area-inset-right, 0px) + 10px); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .vignetta, .vignetta-titolo, .vignetta-coppia, .balloon, .vignetta-didascalia, .vignetta-entra { animation: none; opacity: 1; transform: none; }
  .vignetta-titolo { transform: translateX(-50%) rotate(-4deg); }
  .vignetta-coppia { transform: translateX(-50%); }
  .vignetta-raggi, .scena.aperta .coppia-porta, .stereo.suona .stereo-nota { animation: none; }
}

/* ===================== IL CALZINO PIÙ A TEMA ===================== */
.calzini { padding: 56px 0 0; }
.calzini-pannello { position: relative; max-width: 860px; margin: 0 auto; background: var(--giallo-fumetto); color: var(--nero-fumetto); border: 4px solid var(--nero-fumetto); box-shadow: 8px 8px 0 var(--rosso); padding: 28px 30px 26px; transform: rotate(-1deg); overflow: hidden; }
.calzini-pannello::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(196, 20, 46, .35) 1.2px, transparent 1.4px); background-size: 9px 9px; mask-image: linear-gradient(90deg, transparent 55%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000); pointer-events: none; }
.calzini-eyebrow { margin: 0 0 6px; font: 400 22px/1 var(--f-vcr); letter-spacing: .06em; text-transform: uppercase; color: var(--rosso); }
.calzini-titolo { margin: 0; font: 400 clamp(34px, 6vw, 60px)/1 var(--f-fumetto); letter-spacing: .03em; color: var(--nero-fumetto); text-shadow: 3px 3px 0 #fff; }
.calzini-testo { margin: 12px 0 0; max-width: 36em; font: 500 17px/1.45 var(--f-body); position: relative; }

/* la guida a categorie */
.filtro .n { opacity: .6; margin-left: 6px; font-size: .85em; }
.galleria { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.galleria li.tavola { grid-column: span 2; }
.galleria li.tavola .polaroid img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
.polaroid .nome-solo { display: block; font: italic 400 14px/1.3 var(--f-body); color: #2a2a2a; }

/* il mood board: solo immagini, un muro */
.mood { padding: 56px 0 0; text-align: center; }
.mood-muro { list-style: none; margin: 22px calc(50% - 50vw) 0; width: 100vw; padding: 0 var(--gutter-l) 0 var(--gutter-r); display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 8px; }
.mood-muro li { margin: 0; overflow: hidden; background: var(--notte-2); }
.mood-muro li:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.mood-muro li:nth-child(7n+3) { grid-row: span 2; }
.mood-muro li:nth-child(11n+6) { grid-column: span 2; }
.mood-muro button { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mood-muro img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.03); transition: transform .5s ease; }
.mood-muro button:hover img, .mood-muro button:focus-visible img { transform: scale(1.06); }
.mood-muro button:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }
@media (max-width: 720px) {
  .calzini-pannello { padding: 20px 18px; transform: rotate(0); }
  .galleria { grid-template-columns: repeat(2, 1fr); }
  .galleria li.tavola { grid-column: span 2; }
  .mood-muro { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; gap: 6px; }
}

/* ===================== LA SIGLA: GLI AMICI IN SALOTTO =====================
   Il mondo è il disegno del salotto, 1680×944: sigla.js muove la telecamera (.sigla-mondo) e i personaggi in quelle misure.
   Alla fine la scena diventa una polaroid (.sigla.foto). */
.sigla { position: fixed; inset: 0; z-index: 19; overflow: hidden; background: #05070d; color: var(--crema); }
.sigla-cornice { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background: rgba(251, 248, 241, 0); transition: left .8s cubic-bezier(.2, .8, .2, 1), top .8s cubic-bezier(.2, .8, .2, 1), width .8s cubic-bezier(.2, .8, .2, 1), height .8s cubic-bezier(.2, .8, .2, 1), padding .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), background-color .4s, box-shadow .8s; }
.sigla.foto .sigla-cornice { background: #fbf8f1; transform: rotate(-2.2deg); box-shadow: 0 30px 70px rgba(0, 0, 0, .65); }
.sigla-palco { position: relative; width: 100%; height: 100%; overflow: hidden; background: #05070d; }
.sigla-mondo { position: absolute; left: 0; top: 0; width: 1680px; height: 944px; transform-origin: 0 0; will-change: transform; }
.sigla-salotto { position: absolute; left: 0; top: 0; width: 1680px; height: 944px; max-width: none; display: block; user-select: none; -webkit-user-select: none; }
.sigla-vano { position: absolute; z-index: 1; opacity: 0; box-shadow: inset 0 0 22px rgba(0, 0, 0, .55); }
.sigla-vano-bagno { background: repeating-linear-gradient(0deg, rgba(90, 130, 150, .25) 0 2px, transparent 2px 26px), repeating-linear-gradient(90deg, rgba(90, 130, 150, .25) 0 2px, transparent 2px 26px), linear-gradient(180deg, #eef7fa 0%, #bcd6df 55%, #7fa0ae 100%); }
.sigla-vano-cucina { background: radial-gradient(70% 45% at 50% 30%, rgba(255, 244, 200, .95), rgba(255, 244, 200, 0)), linear-gradient(180deg, #ffd88e 0%, #e3a253 60%, #9a5a25 100%); }
.sigla-vano-camera { background: radial-gradient(60% 30% at 50% 35%, rgba(255, 190, 120, .35), rgba(255, 190, 120, 0)), linear-gradient(180deg, #3b2a46, #1a1220); }
.sigla-anta { position: absolute; z-index: 2; background-image: url("/img/sigla/salotto.webp"); background-size: 1680px 944px; background-repeat: no-repeat; }
.sigla-fuoco { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 200, 110, .6), rgba(255, 120, 30, .22) 60%, rgba(255, 120, 30, 0)); mix-blend-mode: screen; animation: sigla-fiamma 1.3s ease-in-out infinite alternate; }
.sigla-riverbero { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 80, .24), rgba(255, 170, 80, 0)); mix-blend-mode: screen; animation: sigla-fiamma 1.7s ease-in-out infinite alternate-reverse; }
@keyframes sigla-fiamma { 0% { opacity: .55; transform: scale(.96); } 35% { opacity: .95; transform: scale(1.03); } 60% { opacity: .7; } 100% { opacity: 1; transform: scale(1.06); } }
.sigla-lucina { position: absolute; z-index: 3; border-radius: 50%; box-shadow: 0 0 10px 3px currentColor; animation: sigla-brilla 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes sigla-brilla { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.sigla-neve-finestra { position: absolute; z-index: 3; overflow: hidden; opacity: .55; pointer-events: none; }
.sigla-neve-finestra::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: calc(100% + 60px); background-image: radial-gradient(circle, #fff 1.5px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1.5px); background-size: 22px 30px, 15px 20px; background-position: 0 0, 7px 9px; animation: sigla-fiocchi 3s linear infinite; }
@keyframes sigla-fiocchi { to { transform: translateY(60px); } }
/* la cometa passa dietro i vetri: il cielo la ritaglia, il telaio le sta davanti */
.sigla-cielo { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.sigla-telaio { position: absolute; z-index: 4; max-width: none; pointer-events: none; user-select: none; -webkit-user-select: none; }
.sigla-cometa { width: 42px; height: 56px; }
.sigla-cometa::before { content: ""; position: absolute; left: -45%; top: -35%; width: 190%; height: 170%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 248, 210, .85), rgba(255, 214, 120, .35) 60%, transparent); }
.sigla-cometa img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 0 4px #fff6c8) drop-shadow(0 0 10px rgba(255, 214, 120, .9)); }
.sigla-cometa-coda { position: absolute; left: 50%; top: 50%; width: 220px; height: 24px; margin-top: -12px; transform-origin: 0 50%; transform: rotate(-50deg); border-radius: 0 50% 50% 0 / 0 50% 50% 0; background: linear-gradient(90deg, #fffdf0, rgba(255, 228, 140, .9) 22%, rgba(255, 170, 215, .45) 55%, transparent); filter: blur(1.5px); }
.sigla-scia { font: 400 16px/1 var(--f-fumetto); color: #fff7c2; text-shadow: 0 0 8px var(--giallo-fumetto), 0 0 3px #fff; }

.sigla-attore { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; will-change: transform; }
.sigla-attore > img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.sigla-ombra { position: absolute; left: 0; top: 0; z-index: 4; width: 100px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 20, 5, .62), rgba(45, 20, 5, 0)); transform-origin: 0 0; visibility: hidden; pointer-events: none; }
.sigla-acc { position: absolute; display: none; transform: translate(-50%, -50%); pointer-events: none; }
.sigla-acc svg { display: block; width: 100%; height: auto; }
.sigla-acc-scie { height: 30%; transform: translate(0, -50%); background: repeating-linear-gradient(180deg, transparent 0 30px, rgba(255, 255, 255, .9) 30px 37px, transparent 37px 64px); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.sigla-acc-scie-corte { height: 22%; }

.sigla-effetto { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; pointer-events: none; }
.sigla-scoppio { padding: 38px 54px; }
.sigla-scoppio::before, .sigla-scoppio::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50.0% 0.0%, 57.8% 15.9%, 71.7% 5.0%, 73.7% 20.3%, 89.1% 18.8%, 81.5% 34.8%, 98.7% 38.9%, 88.0% 50.0%, 98.7% 61.1%, 81.5% 65.2%, 89.1% 81.2%, 73.7% 79.7%, 71.7% 95.0%, 57.8% 84.1%, 50.0% 100.0%, 41.5% 87.0%, 28.3% 95.0%, 28.2% 77.4%, 10.9% 81.2%, 15.8% 66.5%, 1.3% 61.1%, 15.0% 50.0%, 1.3% 38.9%, 15.8% 33.5%, 10.9% 18.8%, 28.2% 22.6%, 28.3% 5.0%, 41.5% 13.0%); }
.sigla-scoppio::before { background: var(--nero-fumetto); }
.sigla-scoppio::after { inset: 8px; background: var(--giallo-fumetto); }
.sigla-scoppio span { position: relative; z-index: 1; display: block; font: 400 62px/1 var(--f-fumetto); letter-spacing: .03em; color: var(--rosso); -webkit-text-stroke: 3px var(--nero-fumetto); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--nero-fumetto); white-space: nowrap; }
.sigla-nota { font: 700 64px/1 "Georgia", serif; color: var(--giallo-fumetto); -webkit-text-stroke: 2px var(--nero-fumetto); paint-order: stroke fill; }
.sigla-bevanda { font: 56px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; -webkit-text-stroke: 0; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35)); }
.sigla-palla { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--nero-fumetto); background: radial-gradient(circle at 35% 30%, #fff, #e6f1f8 55%, #b4cddd); }
.sigla-polvere { width: 300px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 214, .95), rgba(255, 238, 214, 0)); }
.sigla-fumo { width: 340px; height: 260px; background: radial-gradient(closest-side, rgba(228, 230, 236, .95), rgba(228, 230, 236, .5) 60%, rgba(228, 230, 236, 0)); }
.sigla-scintille { font: 400 58px/1 var(--f-fumetto); letter-spacing: .25em; color: #fff7c2; text-shadow: 0 0 14px var(--giallo-fumetto), 0 0 4px #fff; white-space: nowrap; }

/* le scritte sopra la scena */
.sigla-cartiglio { position: absolute; z-index: 5; left: calc(env(safe-area-inset-left, 0px) + 18px); top: calc(env(safe-area-inset-top, 0px) + 62px); margin: 0; background: var(--giallo-fumetto); color: var(--nero-fumetto); border: 3px solid var(--nero-fumetto); box-shadow: 5px 5px 0 var(--nero-fumetto); padding: 10px 16px; font: 400 clamp(22px, 3vw, 34px)/1.05 var(--f-fumetto); letter-spacing: .04em; transform-origin: 0 0; animation: sigla-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.sigla-nome { position: absolute; z-index: 5; left: calc(env(safe-area-inset-left, 0px) + 18px); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); margin: 0; max-width: min(78vw, 560px); display: flex; flex-direction: column; gap: 4px; background: var(--giallo-fumetto); color: var(--nero-fumetto); border: 3px solid var(--nero-fumetto); box-shadow: 6px 6px 0 var(--rosso); padding: 10px 16px 12px; transform-origin: 0 100%; }
.sigla-nome[hidden], .sigla-cartiglio[hidden] { display: none; }
.sigla-nome.entra { animation: sigla-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.sigla-nome-chi { font: 400 clamp(26px, 3.4vw, 42px)/1 var(--f-fumetto); letter-spacing: .04em; }
.sigla-nome-frase { font: 500 clamp(14px, 1.5vw, 17px)/1.3 var(--f-body); }
.sigla-nome-frase[hidden] { display: none; }
@keyframes sigla-pop { from { opacity: 0; transform: scale(.3) rotate(-4deg); } to { opacity: 1; transform: none; } }
.sigla-hud { z-index: 6; transition: opacity .4s; }
.sigla-salta { position: absolute; z-index: 7; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); font: 400 clamp(18px, 2.2vw, 22px)/1 var(--f-vcr); letter-spacing: .06em; color: var(--crema); background: rgba(10, 16, 32, .74); border: 1px solid rgba(243, 233, 214, .45); padding: 10px 14px; cursor: pointer; }
.sigla-salta:hover, .sigla-salta:focus-visible { background: rgba(10, 16, 32, .92); border-color: var(--crema); outline: none; }
.sigla-flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }
.sigla-foto-titolo { position: absolute; z-index: 6; left: 50%; bottom: calc(100% - var(--foto-top, 30vh) + 18px); margin: 0; font: 400 clamp(52px, 9vw, 120px)/1 var(--f-fumetto); letter-spacing: .03em; color: var(--giallo-fumetto); -webkit-text-stroke: 3px var(--nero-fumetto); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--rosso), 8px 8px 0 var(--nero-fumetto); white-space: nowrap; opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(.3); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .55s, opacity .3s .55s; pointer-events: none; }
.sigla-foto-dida { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sotto, 0px); margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; text-align: center; font: italic 500 clamp(13px, 1.9vw, 22px)/1.2 var(--f-body); color: #2a2a2a; opacity: 0; transition: opacity .4s .7s; }
.sigla.foto .sigla-foto-titolo { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
.sigla.foto .sigla-foto-dida { opacity: 1; }
.sigla.foto .sigla-hud, .sigla.foto .sigla-nome { opacity: 0; }
.rivedi { margin: 18px 0 0; }
@media (max-width: 720px) {
  .sigla-nome { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); left: calc(env(safe-area-inset-left, 0px) + 12px); }
  .sigla-cartiglio { left: calc(env(safe-area-inset-left, 0px) + 12px); top: calc(env(safe-area-inset-top, 0px) + 56px); }
  .sigla-salta { right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
}