/* SKIMASK MILANO — sito SOLO verticale (colonna da telefono anche su PC), ambientato a Milano.
   4 temi (data-theme su <html>): arcade · mutant · neo · gotico.
   Ogni tema ridefinisce palette, font e sfondo col Duomo; il layout è lo stesso. */

:root {
  --col: 480px;
  --gut: 16px;
  --top-h: 58px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --line: rgb(var(--ink) / .16);
  --radius: 0px;
  --floor-h: 5%;
  --b-size: 16px;
  --m-size: 11px;
  --d-tt: uppercase;
  --d-lh: .95;
  --d-ls: 0;
  --d-w: 400;
  --logo-glow: rgb(var(--acc) / .45);
  color-scheme: dark;
}

/* ---------- TEMI ---------- */
:root, [data-theme="neo"] {
  --bg: 9 3 26; --bg2: 22 10 52; --ink: 232 250 255; --mute: 150 150 210;
  --acc: 54 240 255; --acc-ink: 6 4 20; --acc2: 255 79 216;
  --outer: #030010;
  --sky: linear-gradient(#04010e 0%, #12052e 45%, #3a0a5a 78%, #5b0f63 100%);
  --f-d: "Orbitron", system-ui, sans-serif; --f-b: "Rajdhani", system-ui, sans-serif; --f-m: "Share Tech Mono", ui-monospace, monospace;
  --d-w: 900; --d-ls: .02em; --d-lh: .98; --b-size: 18px; --m-size: 12px;
  --floor-h: 19%;
}
[data-theme="mutant"] {
  --bg: 5 12 6; --bg2: 13 28 15; --ink: 230 255 205; --mute: 130 175 118;
  --acc: 182 255 0; --acc-ink: 5 12 6; --acc2: 58 255 107;
  --outer: #010401;
  --sky: radial-gradient(120% 70% at 50% 100%, #1d4a10 0%, #0a1f0b 45%, #030803 100%);
  --f-d: "Rubik Wet Paint", system-ui, sans-serif; --f-b: "Space Grotesk", system-ui, sans-serif; --f-m: "JetBrains Mono", ui-monospace, monospace;
  --d-lh: 1; --radius: 24px; --floor-h: 7%;
}
[data-theme="gotico"] {
  --bg: 9 9 11; --bg2: 20 20 24; --ink: 241 236 226; --mute: 152 146 134;
  --acc: 240 190 60; --acc-ink: 12 10 8; --acc2: 255 182 72;
  --outer: #040405;
  --sky: linear-gradient(#020204 0%, #0b0b12 50%, #1b1a24 85%, #23212c 100%);
  --f-d: "Pirata One", Georgia, serif; --f-b: "EB Garamond", Georgia, serif; --f-m: "JetBrains Mono", ui-monospace, monospace;
  --d-tt: none; --d-lh: .92; --b-size: 18px; --m-size: 10px; --floor-h: 6%;
}
[data-theme="arcade"] {
  --bg: 10 6 32; --bg2: 24 14 62; --ink: 246 240 255; --mute: 160 148 222;
  --acc: 255 204 51; --acc-ink: 22 8 44; --acc2: 255 92 214;
  --outer: #04020f;
  --sky: linear-gradient(#04021a 0%, #120840 50%, #2e1270 85%, #47188a 100%);
  --f-d: "Press Start 2P", ui-monospace, monospace; --f-b: "VT323", ui-monospace, monospace; --f-m: "Silkscreen", ui-monospace, monospace;
  --d-lh: 1.25; --b-size: 21px; --m-size: 10px; --floor-h: 8%;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background: var(--outer);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  position: relative;
  max-width: var(--col);
  min-height: 100svh;
  margin: 0 auto;
  color: rgb(var(--ink));
  font-family: var(--f-b);
  font-size: var(--b-size);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (min-width: 520px) {
  html { background: radial-gradient(70% 90% at 50% 50%, rgb(var(--bg2) / .6), var(--outer)) fixed; }
  body { box-shadow: 0 0 0 1px rgb(var(--ink) / .08), 0 0 140px rgb(0 0 0 / .7); }
}
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: rgb(var(--acc)); color: rgb(var(--acc-ink)); }

.display {
  font-family: var(--f-d);
  font-weight: var(--d-w);
  text-transform: var(--d-tt);
  line-height: var(--d-lh);
  letter-spacing: var(--d-ls);
  overflow-wrap: normal;
}
.mono {
  font-family: var(--f-m);
  font-size: var(--m-size);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ---------- SFONDO MILANO (Duomo) ---------- */
.scene {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(100%, var(--col));
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--sky);
  pointer-events: none;
}
.scene .sky { position: absolute; left: 0; right: 0; top: 0; height: 78%; transition: opacity .8s; }
.sky-svg, .sky-px { width: 100%; height: 100%; }
.sky-px { object-fit: cover; image-rendering: pixelated; }
.scene .duomo {
  position: absolute;
  left: 50%;
  bottom: var(--floor-h);
  width: min(150%, 70svh);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: opacity .8s ease, transform 1.1s var(--ease);
  animation: duomo-in 1.6s var(--ease) both;
}
@keyframes duomo-in { from { opacity: 0; transform: translateX(-50%) translateY(8%) scale(.96); } }
.duomo-svg { width: 100%; height: auto; }
.duomo-px { width: 100%; height: auto; image-rendering: pixelated; }
.scene .floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h); overflow: hidden; }
/* il Duomo si fa da parte quando si scorre o si entra nelle pagine */
body.scene-dim .scene .duomo,
body:not([data-route="home"]) .scene .duomo { opacity: .2; transform: translateX(-50%) translateY(3%); }
body.scene-dim .scene .sky,
body:not([data-route="home"]) .scene .sky { opacity: .55; }

/* strato effetti sopra tutto (scanline, grana) */
.fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* ---------- BARRA IN ALTO ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) 4px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
body.is-scrolled .top, body:not([data-route="home"]) .top { background: rgb(var(--bg) / .9); border-bottom-color: var(--line); }
.top-back { grid-column: 1; display: grid; place-items: center; width: 44px; height: 44px; color: rgb(var(--acc)); }
.top-brand { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-logo { height: 38px; width: 38px; object-fit: contain; flex-shrink: 0; }
.top-name { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
[data-theme="arcade"] .top-name { font-size: 10px; }
[data-theme="neo"] .top-name { font-size: 14px; letter-spacing: .1em; }
/* sulla home in alto il logo grande c'è già: la barra resta vuota finché non si scorre */
body[data-route="home"]:not(.is-scrolled) .top-brand { opacity: 0; pointer-events: none; }
.top-brand { transition: opacity .35s; }
.top-meta { grid-column: 3; justify-self: end; padding-right: 10px; color: rgb(var(--mute)); white-space: nowrap; }

#view, .foot { position: relative; z-index: 1; }

/* comparsa a cascata a ogni cambio pagina */
.rv { animation: rv .85s var(--ease) both; animation-delay: calc(var(--i, 1) * 70ms); }
@keyframes rv { from { opacity: 0; transform: translateY(22px); } }

/* ---------- FOTO / SEGNAPOSTO ---------- */
.pic { position: absolute; inset: 0; overflow: hidden; background: rgb(var(--bg2)); }
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 1.1s var(--ease);
}
.img.is-loaded { opacity: 1; transform: scale(1); }
.knit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: rgb(var(--bg2));
  background-image:
    linear-gradient(135deg, rgb(var(--ink) / .06) 25%, transparent 25%),
    linear-gradient(225deg, rgb(var(--ink) / .06) 25%, transparent 25%);
  background-size: 14px 18px;
}
.knit-label { color: rgb(var(--mute)); }

/* ---------- HOME ---------- */
.hero {
  position: relative;
  padding: 10px var(--gut) 18px;
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to top, rgb(var(--bg)) 0%, rgb(var(--bg) / .2) 50%, rgb(var(--bg) / .5) 100%); }
.hero.has-media .hero-shade { opacity: 1; }
.hero-inner { position: relative; }
.hero-title { font-size: 26vw; --i: 1; text-align: center; }
@media (min-width: 480px) { .hero-title { font-size: 124px; } }

/* logo grande: il protagonista della home, davanti al Duomo */
.hero-logo {
  position: relative;
  width: min(44vw, 190px);
  aspect-ratio: 1;
  margin: 0 auto;
  --i: 1;
}
.hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / .6));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float { 50% { transform: translateY(-8px) rotate(-.6deg); } }

.label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gut) 14px;
  color: rgb(var(--ink) / .85);
}
.rule { flex: 1; height: 1px; background: rgb(var(--ink) / .3); }

.sec-grid, .sub-grid { display: grid; gap: 14px; padding: 0 12px; }
.card {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgb(var(--bg2));
  border-radius: var(--radius);
  isolation: isolate;
}
.sec-card { aspect-ratio: 4 / 5; }
.sub-card { aspect-ratio: 5 / 4; }
.sec-card-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(var(--bg) / .94) 0%, rgb(var(--bg) / .35) 45%, transparent 72%);
}
.sec-card-num, .sec-card-count {
  position: absolute;
  top: 14px;
  padding: 5px 8px;
  background: rgb(var(--bg) / .75);
  pointer-events: none;
  z-index: 2;
}
.sec-card-num { left: 14px; color: rgb(var(--acc)); }
.sec-card-count { right: 14px; color: rgb(var(--ink) / .85); }
.sec-card-body {
  position: absolute;
  left: 16px;
  right: 82px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec-card-title { font-size: 64px; }
.sub-card-title { font-size: 52px; }
.sec-card-sub { color: rgb(var(--ink) / .78); }
.go {
  position: absolute;
  right: 16px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgb(var(--acc));
  color: rgb(var(--acc-ink));
  transition: transform .5s var(--ease-back);
}
.arr { width: 24px; height: 24px; flex-shrink: 0; }
@media (hover: hover) {
  .card:hover .img.is-loaded, .prod:hover .img.is-loaded { transform: scale(1.04); }
  .card:hover .go { transform: rotate(-45deg) scale(1.06); }
}
.card:active, .prod:active { transform: scale(.985); transition: transform .15s; }

/* ---------- TESTATA PAGINE ---------- */
.page-head { padding: 26px var(--gut) 22px; }
.crumb { display: block; color: rgb(var(--mute)); margin-bottom: 14px; }
.page-title { font-size: 76px; --i: 1; }
.page-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.page-sub { color: rgb(var(--ink) / .8); }
.page-count { color: rgb(var(--acc)); white-space: nowrap; }

/* ---------- GRIGLIA PRODOTTI ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 12px;
  padding: 0 12px;
}
.prod { display: block; min-width: 0; }
.prod-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(var(--bg2)); border-radius: var(--radius); isolation: isolate; }
.prod-num {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  color: rgb(var(--ink) / .75);
  background: rgb(var(--bg) / .72);
  padding: 3px 6px;
  font-size: 9px;
}
.tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 5px 8px;
  font-size: 10px;
  background: rgb(var(--acc));
  color: rgb(var(--acc-ink));
}
.tag.is-sold { background: rgb(var(--ink)); color: rgb(var(--bg)); }
.prod.is-sold .img { filter: grayscale(1) brightness(.6); }
.prod-info { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 0; }
.prod-name { font-size: 24px; }
.prod-price { color: rgb(var(--acc)); font-size: 13px; }
.empty {
  grid-column: 1 / -1;
  padding: 64px 0;
  text-align: center;
  color: rgb(var(--mute));
  border: 1px dashed var(--line);
  background: rgb(var(--bg) / .6);
}

/* ---------- PRODOTTO ---------- */
.item { padding: 12px 12px 0; }
.gallery { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.gallery .tag { top: 14px; left: 14px; font-size: 11px; }
.counter { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 5px 8px; background: rgb(var(--bg) / .75); pointer-events: none; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.dot { width: 8px; height: 8px; background: rgb(var(--ink) / .45); box-shadow: 0 0 0 1px rgb(var(--bg) / .55); transition: width .4s var(--ease), background .3s; }
.dot.is-on { width: 24px; background: rgb(var(--ink)); }
.item-info { padding: 20px 4px 10px; }
.item-name { font-size: 70px; --i: 2; }
.item-price { margin-top: 12px; font-size: 22px; color: rgb(var(--acc)); --i: 3; }
.item-desc {
  white-space: pre-line;
  margin: 20px 0 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
  color: rgb(var(--ink) / .88);
  --i: 4;
}
.order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 8px 20px;
  background: rgb(var(--acc));
  color: rgb(var(--acc-ink));
  font-size: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.order .arr { width: 28px; height: 28px; transition: transform .4s var(--ease-back); }
@media (hover: hover) { .order:hover .arr { transform: translateX(5px); } }
.order:active { transform: scale(.98); }
.order.is-off { background: rgb(var(--bg) / .6); color: rgb(var(--mute)); border: 1px solid var(--line); cursor: default; }
.order-note { margin-top: 12px; color: rgb(var(--mute)); font-weight: 400; text-transform: none; letter-spacing: .02em; line-height: 1.5; }

/* ---------- FOOTER ---------- */
.foot {
  margin-top: 72px;
  padding: 0 var(--gut) calc(26px + var(--safe-b));
  background: rgb(var(--bg) / .92);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.foot-links { display: flex; flex-direction: column; }
.foot-link {
  display: grid;
  grid-template-columns: 96px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.foot-link .mono { color: rgb(var(--mute)); }
.foot-link .arr { width: 18px; height: 18px; color: rgb(var(--acc)); transform: rotate(-45deg); }
.foot-big {
  margin: 34px 0 12px;
  font-size: 30vw;
  line-height: .9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--ink) / .28);
}
@media (min-width: 480px) { .foot-big { font-size: 140px; } }
[data-theme="arcade"] .foot-big { font-size: 15vw; }
.foot-row { display: flex; justify-content: space-between; gap: 12px; color: rgb(var(--mute)); }

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--safe-b));
  z-index: 90;
  max-width: min(calc(100vw - 32px), 440px);
  padding: 12px 16px;
  background: rgb(var(--ink));
  color: rgb(var(--bg));
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

body:not(.editing) .ed:empty { display: none; }

/* ============================================================
   NEO MILANO 2077 — synthwave: wireframe neon, sole a righe, griglia che corre
   ============================================================ */
[data-theme="neo"] { --logo-glow: rgb(54 240 255 / .55); }
[data-theme="neo"] .fx {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 40%, transparent 60%, rgb(0 0 0 / .55) 100%);
}
[data-theme="neo"] .floor {
  background: linear-gradient(#2a0640, #0a0220);
  border-top: 2px solid rgb(255 79 216);
  box-shadow: 0 -6px 30px rgb(255 79 216 / .7);
}
}
[data-theme="neo"] .hero-title,
[data-theme="neo"] .page-title,
[data-theme="neo"] .item-name {
  background: linear-gradient(180deg, #ffffff 0%, #b4fbff 42%, #36f0ff 55%, #ff4fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: #fff;
  filter: drop-shadow(0 0 14px rgb(54 240 255 / .45));
}
[data-theme="neo"] .hero-title { font-size: 19vw; margin-top: 2svh; }
@media (min-width: 480px) { [data-theme="neo"] .hero-title { font-size: 92px; } }
[data-theme="neo"] .page-title { font-size: 54px; }
[data-theme="neo"] .item-name { font-size: 46px; }
[data-theme="neo"] .sec-card-title { font-size: 46px; text-shadow: 0 0 18px rgb(54 240 255 / .6); }
[data-theme="neo"] .sub-card-title { font-size: 38px; text-shadow: 0 0 18px rgb(54 240 255 / .6); }
[data-theme="neo"] .prod-name { font-size: 15px; letter-spacing: .06em; }
[data-theme="neo"] .card,
[data-theme="neo"] .prod-pic,
[data-theme="neo"] .gallery,
[data-theme="neo"] .order {
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
[data-theme="neo"] .card::after,
[data-theme="neo"] .prod-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgb(54 240 255) 0 13px, transparent 13px) top left / 26px 26px no-repeat,
    linear-gradient(315deg, rgb(255 79 216) 0 13px, transparent 13px) bottom right / 26px 26px no-repeat;
  box-shadow: inset 0 0 0 1px rgb(54 240 255 / .55), inset 0 0 30px rgb(54 240 255 / .12);
}
[data-theme="neo"] .go { border-radius: 0; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); box-shadow: 0 0 20px rgb(54 240 255 / .8); }
[data-theme="neo"] .order { background: linear-gradient(90deg, rgb(54 240 255), rgb(255 79 216)); font-size: 22px; letter-spacing: .06em; }
[data-theme="neo"] .tag { background: rgb(255 79 216); color: #fff; }
[data-theme="neo"] .prod-price, [data-theme="neo"] .item-price { text-shadow: 0 0 10px rgb(54 240 255 / .7); }
[data-theme="neo"] .label-row .mono:first-child::before { content: "// "; color: rgb(255 79 216); }

/* ============================================================
   MUTANTI — melma tossica, font che cola, card slime
   ============================================================ */
[data-theme="mutant"] { --logo-glow: rgb(182 255 0 / .5); }
[data-theme="mutant"] .fx {
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .7 0 0 0 0 .3 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="mutant"] .floor { background: linear-gradient(#2c6b10, #0b2408); box-shadow: 0 -10px 40px rgb(182 255 0 / .35); }
[data-theme="mutant"] .bubbles { position: absolute; inset: 0; }
[data-theme="mutant"] .bubbles i {
  position: absolute;
  bottom: -20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgb(182 255 0 / .7);
  box-shadow: 0 0 10px rgb(182 255 0 / .6);
  animation: bubble 7s linear infinite;
}
[data-theme="mutant"] .bubbles i:nth-child(1) { left: 8%; animation-delay: 0s; }
[data-theme="mutant"] .bubbles i:nth-child(2) { left: 22%; width: 6px; height: 6px; animation-delay: 1.8s; animation-duration: 9s; }
[data-theme="mutant"] .bubbles i:nth-child(3) { left: 35%; width: 14px; height: 14px; animation-delay: 3.4s; }
[data-theme="mutant"] .bubbles i:nth-child(4) { left: 51%; animation-delay: 5s; animation-duration: 8s; }
[data-theme="mutant"] .bubbles i:nth-child(5) { left: 64%; width: 7px; height: 7px; animation-delay: .9s; }
[data-theme="mutant"] .bubbles i:nth-child(6) { left: 77%; width: 12px; height: 12px; animation-delay: 2.6s; animation-duration: 10s; }
[data-theme="mutant"] .bubbles i:nth-child(7) { left: 90%; animation-delay: 4.2s; }
[data-theme="mutant"] .bubbles i:nth-child(8) { left: 15%; width: 5px; height: 5px; animation-delay: 6s; }
[data-theme="mutant"] .bubbles i:nth-child(9) { left: 44%; width: 8px; height: 8px; animation-delay: 7.2s; animation-duration: 11s; }
[data-theme="mutant"] .bubbles i:nth-child(10) { left: 84%; width: 6px; height: 6px; animation-delay: 8s; }
@keyframes bubble {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(10px, -45vh); }
  100% { transform: translate(-6px, -90vh); opacity: 0; }
}
[data-theme="mutant"] .hero-title,
[data-theme="mutant"] .page-title,
[data-theme="mutant"] .item-name,
[data-theme="mutant"] .sec-card-title,
[data-theme="mutant"] .sub-card-title {
  color: rgb(var(--acc));
  text-shadow: 0 0 22px rgb(182 255 0 / .55), 0 4px 0 rgb(20 60 0);
}
[data-theme="mutant"] .hero-title { font-size: 24vw; }
@media (min-width: 480px) { [data-theme="mutant"] .hero-title { font-size: 116px; } }
[data-theme="mutant"] .card,
[data-theme="mutant"] .prod-pic,
[data-theme="mutant"] .gallery {
  border: 2px solid rgb(182 255 0 / .85);
  box-shadow: 0 0 26px rgb(182 255 0 / .28), inset 0 0 30px rgb(182 255 0 / .1);
}
/* melma che cola dal bordo alto delle card */
[data-theme="mutant"] .card::before,
[data-theme="mutant"] .prod-pic::before,
[data-theme="mutant"] .gallery::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 46px;
  z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath fill='%23b6ff00' d='M0 0h200v8c-6 0-7 4-8 12s-2 14-5 14-4-6-4-12-1-12-6-12-6 6-7 10-1 8-4 8-3-5-3-10-2-8-8-8-8 3-9 7-1 22-5 22-4-14-4-22-3-7-9-7-8 5-9 12-2 9-5 9-3-6-3-12-4-9-10-9-7 4-8 10-1 6-4 6-4-4-5-9-4-7-10-7-7 4-8 9-2 17-6 17-4-10-4-17-3-9-8-9z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgb(182 255 0 / .7));
}
[data-theme="mutant"] .prod-pic::before { height: 26px; }
[data-theme="mutant"] .go, [data-theme="mutant"] .order { box-shadow: 0 0 24px rgb(182 255 0 / .55); }
[data-theme="mutant"] .order { border-radius: 999px; font-family: var(--f-d); font-size: 30px; padding: 8px 24px; }
[data-theme="mutant"] .tag { border-radius: 999px; }
[data-theme="mutant"] .sec-card-num, [data-theme="mutant"] .sec-card-count, [data-theme="mutant"] .counter { border-radius: 999px; top: 30px; }
[data-theme="mutant"] .prod-pic .tag { top: 22px; }
[data-theme="mutant"] .label-row .mono:first-child::before { content: "☣ "; color: rgb(var(--acc)); }

/* ============================================================
   GOTICO — acquaforte sotto la luna, gotico, card ad arco, oro del logo
   ============================================================ */
[data-theme="gotico"] { --logo-glow: rgb(240 190 60 / .4); }
[data-theme="gotico"] .fx {
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="gotico"] .floor { background: linear-gradient(#1c1b22, #08080a); }
[data-theme="gotico"] .scene::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 30%;
  background: linear-gradient(transparent, rgb(30 29 38 / .85) 60%, rgb(9 9 11 / .9));
  animation: fog 9s ease-in-out infinite alternate;
}
@keyframes fog { to { transform: translateX(-4%); opacity: .75; } }
[data-theme="gotico"] .hero-title,
[data-theme="gotico"] .page-title,
[data-theme="gotico"] .item-name {
  background: linear-gradient(180deg, #ffffff 0%, #e8e2d4 38%, #8d8676 52%, #f6f1e7 66%, #b3ab99 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: #fff;
  filter: drop-shadow(0 4px 18px rgb(0 0 0 / .8));
}
[data-theme="gotico"] .hero-title { font-size: 34vw; }
@media (min-width: 480px) { [data-theme="gotico"] .hero-title { font-size: 160px; } }
[data-theme="gotico"] .page-title { font-size: 92px; }
[data-theme="gotico"] .item-name { font-size: 76px; }
[data-theme="gotico"] .sec-card-title { font-size: 76px; }
[data-theme="gotico"] .sub-card-title { font-size: 62px; }
[data-theme="gotico"] .prod-name { font-size: 30px; }
[data-theme="gotico"] .sec-card { border-radius: 50% 50% 0 0 / 26% 26% 0 0; }
[data-theme="gotico"] .sub-card { border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
[data-theme="gotico"] .prod-pic { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
[data-theme="gotico"] .card::after,
[data-theme="gotico"] .prod-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--acc) / .8), inset 0 0 0 6px rgb(var(--bg) / .55), inset 0 0 0 7px rgb(var(--ink) / .35);
}
[data-theme="gotico"] .sec-card-num { display: none; }
[data-theme="gotico"] .sec-card-count { top: 24%; right: 50%; transform: translateX(50%); }
[data-theme="gotico"] .go { background: transparent; color: rgb(var(--acc)); border: 1px solid rgb(var(--acc)); }
[data-theme="gotico"] .order { background: transparent; color: rgb(var(--ink)); border: 1px solid rgb(var(--acc)); box-shadow: inset 0 0 0 4px rgb(var(--bg)), inset 0 0 0 5px rgb(var(--acc) / .5); font-size: 34px; }
[data-theme="gotico"] .order .arr { color: rgb(var(--acc)); }
[data-theme="gotico"] .prod-pic .tag { top: auto; bottom: 8px; }
[data-theme="gotico"] .label-row .mono:first-child::before { content: "✠ "; color: rgb(var(--acc)); }

/* ============================================================
   ARCADE — pixel art, scanline CRT, font 8-bit
   ============================================================ */
[data-theme="arcade"] { --logo-glow: rgb(255 92 214 / .45); }
[data-theme="arcade"] .fx {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px),
    radial-gradient(110% 80% at 50% 45%, transparent 55%, rgb(0 0 0 / .6) 100%);
}
[data-theme="arcade"] .floor {
  background:
    repeating-linear-gradient(90deg, #2d8b3a 0 8px, #24702f 8px 16px) top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, #6b3a1f 0 12px, #5a2f18 12px 24px);
}
[data-theme="arcade"] .hero-title,
[data-theme="arcade"] .page-title,
[data-theme="arcade"] .item-name,
[data-theme="arcade"] .sec-card-title,
[data-theme="arcade"] .sub-card-title {
  color: rgb(var(--ink));
  text-shadow: 3px 3px 0 rgb(var(--acc2)), 6px 6px 0 rgb(54 240 255 / .7);
}
[data-theme="arcade"] .hero-title { font-size: 12vw; margin-top: 3svh; }
@media (min-width: 480px) { [data-theme="arcade"] .hero-title { font-size: 56px; } }
[data-theme="arcade"] .page-title { font-size: 34px; }
[data-theme="arcade"] .item-name { font-size: 28px; }
[data-theme="arcade"] .sec-card-title { font-size: 30px; }
[data-theme="arcade"] .sub-card-title { font-size: 24px; }
[data-theme="arcade"] .prod-name { font-size: 11px; line-height: 1.5; }
[data-theme="arcade"] .prod-price, [data-theme="arcade"] .item-price { font-family: var(--f-d); font-size: 12px; }
[data-theme="arcade"] .item-price { font-size: 16px; }
[data-theme="arcade"] .card,
[data-theme="arcade"] .prod-pic,
[data-theme="arcade"] .gallery,
[data-theme="arcade"] .order {
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
[data-theme="arcade"] .card::after,
[data-theme="arcade"] .prod-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px rgb(var(--ink)), inset 0 0 0 8px rgb(var(--acc2));
}
[data-theme="arcade"] .go { border-radius: 0; animation: blink 1s steps(1) infinite; }
[data-theme="arcade"] .go .arr { display: none; }
[data-theme="arcade"] .go::before { content: "▶"; font-family: var(--f-d); font-size: 16px; }
@keyframes blink { 50% { opacity: .35; } }
[data-theme="arcade"] .order { font-size: 16px; min-height: 70px; box-shadow: inset -6px -6px 0 rgb(0 0 0 / .25); }
[data-theme="arcade"] .sec-card-num, [data-theme="arcade"] .sec-card-count { top: 16px; }
[data-theme="arcade"] .sec-card-num { left: 16px; }
[data-theme="arcade"] .sec-card-count { right: 16px; }
[data-theme="arcade"] .prod-pic .tag { top: 12px; left: 12px; }
[data-theme="arcade"] .label-row .mono:first-child::before { content: "▶ "; color: rgb(var(--acc)); animation: blink 1s steps(1) infinite; }
[data-theme="arcade"] .crumb, [data-theme="arcade"] .mono { line-height: 1.6; }
[data-theme="arcade"] .foot-big { -webkit-text-stroke: 0; color: rgb(var(--ink) / .12); }

@media (prefers-reduced-motion: reduce) {
  .rv, .scene .duomo, .hero-logo-img { animation: none; }
  [data-theme="neo"] .floor::before, [data-theme="mutant"] .bubbles i, [data-theme="gotico"] .scene::after,
  [data-theme="arcade"] .go, [data-theme="arcade"] .label-row .mono:first-child::before { animation: none; }
  .img { transition: opacity .3s; transform: none; }
}

/* ---------- HOME COMPATTA: logo e subito sotto le 2 sezioni affiancate ---------- */
.sec-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.sec-card { aspect-ratio: 3 / 4; }
.sec-card-num, .sec-card-count { top: 10px; padding: 4px 6px; font-size: 9px; }
.sec-card-num { left: 10px; }
.sec-card-count { right: 10px; }
.sec-card-body { left: 12px; right: 12px; bottom: 54px; gap: 6px; }
.sec-card-title { font-size: 34px; }
.sec-card .go { right: 10px; bottom: 10px; width: 36px; height: 36px; }
.sec-card .go .arr { width: 18px; height: 18px; }
.sec-card .sec-card-sub { font-size: 9px; }

/* ============================================================
   FUMETTO — scelto da Alberto. Notte da fumetto coerente con le sue grafiche
   GREENMASK / BLUMASK: retino, raggi, nuvolette di fumo con la china, stelline;
   dentro le sezioni il cielo diventa verde o blu come la grafica della sezione.
   Card "lucide" come le grafiche: bordo nero, gradiente, riflesso, stelline.
   ============================================================ */
[data-theme="fumetto"] {
  --bg: 22 14 54; --bg2: 34 24 78; --ink: 255 255 255; --mute: 205 196 240;
  --acc: 255 210 63; --acc-ink: 17 17 17; --acc2: 232 38 43;
  --c1: 255 226 120; --c2: 255 190 40; --c3: 190 120 0;
  --outer: #07051a;
  /* sfondo a due colori: dallo studio (--bg-top / --bg-bot), altrimenti blu notte */
  --sky: radial-gradient(75% 40% at 50% 58%, color-mix(in srgb, var(--bg-bot, #0a2459), #8fb0ff 18%), transparent 72%),
         linear-gradient(180deg, var(--bg-top, #0d0f33) 0%, color-mix(in srgb, var(--bg-top, #0d0f33), var(--bg-bot, #0a2459)) 55%, var(--bg-bot, #0a2459) 100%);
  --f-d: "Bangers", Impact, sans-serif; --f-b: "Comic Neue", "Comic Sans MS", sans-serif; --f-m: "Bangers", Impact, sans-serif;
  --d-lh: .95; --d-ls: .03em; --b-size: 17px; --m-size: 13px; --floor-h: 0%;
  --line: rgb(17 17 17);
  --stroke: #111;
}
/* cielo e card del colore della sezione */
[data-theme="fumetto"] body[data-sec="0"] {
  --c1: 150 255 110; --c2: 40 190 60; --c3: 6 84 24;
  --sky: radial-gradient(70% 38% at 50% 24%, rgb(60 190 90 / .4), transparent 72%),
         linear-gradient(180deg, #03140a 0%, #082a14 50%, #0f4421 100%);
  --bg-top: #03140a; --bg-bot: #0f4421; --pat-a: #8fe0a3; --pat-b: #bff2c9;
}
[data-theme="fumetto"] body[data-sec="1"] {
  --c1: 130 210 255; --c2: 30 115 230; --c3: 8 40 120;
  --sky: radial-gradient(70% 38% at 50% 24%, rgb(60 120 230 / .4), transparent 72%),
         linear-gradient(180deg, #030a1f 0%, #081a45 50%, #0f2c6b 100%);
  --bg-top: #030a1f; --bg-bot: #0f2c6b; --pat-a: #93b4ff; --pat-b: #c3d4ff;
}
[data-theme="fumetto"] body { font-weight: 700; }
[data-theme="fumetto"] .mono { font-weight: 400; letter-spacing: .08em; }

/* ---- scritte a fumetto: riempimento a gradiente + china + estrusione, come GREENMASK ---- */
[data-theme="fumetto"] .page-title,
[data-theme="fumetto"] .item-name,
[data-theme="fumetto"] .sub-card-title {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, rgb(var(--c1)) 55%, rgb(var(--c2)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2.5px #111;
  caret-color: #fff;
  filter: drop-shadow(0 4px 0 #111) drop-shadow(3px 0 0 #111);
}

/* ---- sfondo: Duomo di Alberto + nuvolette + stelline ---- */
[data-theme="fumetto"] .scene .duomo.duomo-img {
  width: min(100%, calc(94svh * .5287));
  bottom: 0;
}
[data-theme="fumetto"] .duomo-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 30px rgb(0 0 0 / .45)); }
/* Duomo a china disegnato in codice: piccolo, poggiato in basso, con un alone rosa */
[data-theme="fumetto"] .scene .duomo.duomo-comic { width: min(86%, 44svh); bottom: 2.5svh; }
[data-theme="fumetto"] .duomo-comic .duomo-svg { display: block; filter: drop-shadow(0 0 28px rgb(140 175 255 / .3)); }
[data-theme="fumetto"] .duomo-comic .duomo-px { display: block; width: 100%; height: auto; image-rendering: pixelated; }
[data-theme="fumetto"] .spk {
  position: absolute;
  font-style: normal;
  font-size: 13px;
  text-shadow: 0 0 8px currentColor;
  animation: twinkle 3s ease-in-out infinite;
}
[data-theme="fumetto"] .spk-big { font-size: 22px; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
[data-theme="fumetto"] body:not([data-route="home"]) .scene .duomo,
[data-theme="fumetto"] body.scene-dim .scene .duomo { opacity: .18; }

/* ---- barra in alto ---- */
[data-theme="fumetto"] .top-name {
  font-size: 24px;
  letter-spacing: .05em;
  color: #ffd23f;
  -webkit-text-stroke: 1.5px #111;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 #111;
}
[data-theme="fumetto"] .top-back, [data-theme="fumetto"] .top-meta { color: #ffd23f; }
[data-theme="fumetto"] body.is-scrolled .top,
[data-theme="fumetto"] body:not([data-route="home"]) .top { background: rgb(13 9 38 / .94); border-bottom: 3px solid #111; box-shadow: 0 3px 0 rgb(255 210 63 / .9); }
[data-theme="fumetto"] .hero-logo-img { filter: drop-shadow(4px 5px 0 #111) drop-shadow(0 0 22px rgb(255 210 63 / .25)); }

/* ---- HOME: logo in alto, le 2 grafiche più in basso al centro, sopra il Duomo ---- */
[data-theme="fumetto"] body[data-route="home"] #view { display: flex; flex-direction: column; }
[data-theme="fumetto"] .hero { padding-top: 4px; }

/* card-grafica (copertina scontornata): la card è l'immagine stessa — vale per tutti i temi */
.sec-card.is-art { display: block; position: relative; aspect-ratio: 989 / 1333; }
.sec-card.is-art .art-pic { position: absolute; inset: 0; overflow: visible; background: none; }
/* sempre la stessa misura, qualunque risoluzione abbia la grafica caricata */
.sec-card.is-art .art {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / .5));
  animation: art-float 4.6s ease-in-out infinite;
  transition: transform .35s var(--ease-back);
}
.sec-card.is-art:nth-child(2) .art { animation-delay: -2.3s; }
@keyframes art-float { 50% { translate: 0 -7px; rotate: -1.2deg; } }
@media (hover: hover) { .sec-card.is-art:hover .art { transform: scale(1.05) rotate(-2deg); } }
.sec-card.is-art:active .art { transform: scale(.95); }

/* ---- card lucide (sotto-sezioni, prodotti, galleria) come le grafiche ---- */
.gloss, .spark { display: none; }
[data-theme="fumetto"] .sub-card,
[data-theme="fumetto"] .prod-pic,
[data-theme="fumetto"] .gallery {
  border: 4px solid #111;
  border-radius: 18px;
  background:
    radial-gradient(circle, rgb(0 0 0 / .16) 1.3px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(160deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 52%, rgb(var(--c3)) 100%);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 5px 6px 0 #111;
}
[data-theme="fumetto"] .gloss {
  display: block;
  position: absolute;
  z-index: 4;
  left: 7%;
  top: 4%;
  width: 52%;
  height: 24%;
  border-radius: 12px 60px 12px 12px;
  background: linear-gradient(135deg, rgb(255 255 255 / .8), rgb(255 255 255 / 0) 72%);
  pointer-events: none;
}
[data-theme="fumetto"] .spark { display: block; position: absolute; z-index: 4; color: #fff; text-shadow: 0 0 8px #fff; pointer-events: none; animation: twinkle 2.6s ease-in-out infinite; }
[data-theme="fumetto"] .spark-1 { right: 10%; top: 8%; font-size: 15px; }
[data-theme="fumetto"] .spark-2 { left: 12%; bottom: 34%; font-size: 10px; animation-delay: -1.3s; }
/* foto dentro la card, con la sua cornice nera */
[data-theme="fumetto"] .sub-card .pic,
[data-theme="fumetto"] .prod-pic .pic {
  inset: 9px;
  border: 3px solid #111;
  border-radius: 11px;
  background: rgb(0 0 0 / .18);
}
[data-theme="fumetto"] .sub-card .pic { bottom: 30%; }
/* senza foto: passamontagna a fumetto al posto del segnaposto */
[data-theme="fumetto"] .knit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 6C26 6 14 26 14 52v34c0 16 12 28 28 28h16c16 0 28-12 28-28V52C86 26 74 6 50 6z' fill='%23111'/%3E%3Cpath d='M50 12C30 12 20 30 20 52v34c0 13 9 22 22 22h16c13 0 22-9 22-22V52C80 30 70 12 50 12z' fill='%23262626'/%3E%3Cpath d='M30 20l2 80M42 14l1 92M58 14l-1 92M70 20l-2 80' stroke='%23333' stroke-width='3'/%3E%3Crect x='22' y='46' width='56' height='22' rx='11' fill='%23111'/%3E%3Cpath d='M30 52q8-5 16 2q-8 8-16-2zM70 52q-8-5-16 2q8 8 16-2z' fill='%23fff'/%3E%3C/svg%3E") center 42% / 46% auto no-repeat;
}
[data-theme="fumetto"] .knit-label { display: none; }

/* ---- PAGINE INTERNE: sotto-sezioni piccole al centro ---- */
[data-theme="fumetto"] .sub-grid {
  grid-template-columns: repeat(2, minmax(0, 138px));
  justify-content: center;
  gap: 18px;
  padding: 6px 12px 0;
}
[data-theme="fumetto"] .sub-card { aspect-ratio: 3 / 4; }
[data-theme="fumetto"] .sub-card .sec-card-shade,
[data-theme="fumetto"] .sub-card .sec-card-num,
[data-theme="fumetto"] .sub-card .sec-card-sub { display: none; }
[data-theme="fumetto"] .sub-card .sec-card-body { left: 6px; right: 6px; bottom: 10%; align-items: center; text-align: center; gap: 0; }
[data-theme="fumetto"] .sub-card-title { font-size: 30px; transform: rotate(-4deg); }
[data-theme="fumetto"] .sub-card .sec-card-count {
  top: auto;
  bottom: -2px;
  left: 50%;
  right: auto;
  transform: translate(-50%, 50%);
  background: #ffd23f;
  color: #111;
  border: 2px solid #111;
  border-radius: 99px;
  padding: 3px 10px 1px;
  white-space: nowrap;
  z-index: 5;
}
[data-theme="fumetto"] .sub-card .go { display: none; }
[data-theme="fumetto"] .sub-card { overflow: visible; }
[data-theme="fumetto"] .sub-card > .pic { overflow: hidden; }

[data-theme="fumetto"] .page-head { text-align: center; padding-bottom: 18px; }
[data-theme="fumetto"] .crumb { display: inline-block; background: #111; color: #ffd23f; padding: 4px 10px 2px; border-radius: 99px; }
[data-theme="fumetto"] .page-title { font-size: 76px; }
[data-theme="fumetto"] .page-meta { border-top: 0; justify-content: center; gap: 10px; flex-wrap: wrap; }
[data-theme="fumetto"] .page-sub { color: #fff; text-shadow: 0 2px 0 #111; }
[data-theme="fumetto"] .page-count { background: #ffd23f; color: #111; border: 2px solid #111; border-radius: 99px; padding: 2px 10px 0; }

/* ---- prodotti ---- */
[data-theme="fumetto"] .prod-grid { grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: center; gap: 30px 18px; }
[data-theme="fumetto"] .prod-num { display: none; }
[data-theme="fumetto"] .prod-info { align-items: center; text-align: center; padding-top: 12px; }
[data-theme="fumetto"] .prod-name { font-size: 24px; color: #fff; -webkit-text-stroke: 1.6px #111; paint-order: stroke fill; text-shadow: 0 3px 0 #111; }
[data-theme="fumetto"] .prod-price { font-family: var(--f-d); font-size: 18px; letter-spacing: .04em; background: #e8262b; color: #fff; border: 2px solid #111; border-radius: 99px; padding: 2px 12px 0; box-shadow: 2px 2px 0 #111; }
[data-theme="fumetto"] .tag { background: #ffd23f; color: #111; border: 2px solid #111; transform: rotate(-6deg); font-size: 13px; z-index: 5; }
[data-theme="fumetto"] .tag.is-sold { background: #111; color: #ffd23f; }
[data-theme="fumetto"] .empty { background: #fff; border: 3px dashed #111; color: #111; border-radius: 16px; }

/* ---- pagina prodotto ---- */
[data-theme="fumetto"] .item { padding-top: 16px; }
[data-theme="fumetto"] .gallery { padding: 10px; }
[data-theme="fumetto"] .slides { border: 3px solid #111; border-radius: 11px; }
[data-theme="fumetto"] .item-info { text-align: center; }
[data-theme="fumetto"] .item-name { font-size: 60px; }
[data-theme="fumetto"] .item-price {
  display: inline-block;
  margin-top: 14px;
  padding: 18px 22px 12px;
  font-family: var(--f-d);
  font-size: 30px;
  color: #fff;
  background: #e8262b;
  -webkit-text-stroke: 1.5px #111;
  paint-order: stroke fill;
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 84% 52%, 98% 70%, 76% 72%, 78% 96%, 58% 82%, 44% 100%, 36% 80%, 14% 92%, 18% 68%, 0 60%, 16% 44%, 4% 24%, 26% 24%, 26% 2%, 42% 16%);
}
[data-theme="fumetto"] .item-desc {
  position: relative;
  text-align: left;
  background: #fff;
  border: 3px solid #111;
  border-radius: 18px;
  box-shadow: 5px 5px 0 #111;
  padding: 14px 16px;
  color: #111;
}
[data-theme="fumetto"] .item-desc::after {
  content: "";
  position: absolute;
  left: 34px;
  top: -16px;
  width: 22px;
  height: 16px;
  background: #fff;
  border-left: 3px solid #111;
  border-top: 3px solid #111;
  transform: skewX(30deg);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
[data-theme="fumetto"] .counter { background: #ffd23f; color: #111; border: 2px solid #111; border-radius: 99px; }
[data-theme="fumetto"] .dot { background: #fff; box-shadow: 0 0 0 2px #111; }
[data-theme="fumetto"] .dot.is-on { background: #ffd23f; }
[data-theme="fumetto"] .order {
  background: #e8262b;
  color: #fff;
  border: 4px solid #111;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #111;
  font-size: 34px;
  letter-spacing: .05em;
  -webkit-text-stroke: 1px #111;
  paint-order: stroke fill;
}
[data-theme="fumetto"] .order:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #111; }
[data-theme="fumetto"] .order.is-off { background: #fff; color: #111; }
[data-theme="fumetto"] .order-note { color: #fff; opacity: .8; }

/* ---- footer e toast ---- */
[data-theme="fumetto"] .foot { background: rgb(13 9 38 / .96); border-top: 3px solid #111; box-shadow: 0 -3px 0 rgb(255 210 63 / .9); }
[data-theme="fumetto"] .foot-link { border-bottom: 2px solid rgb(255 255 255 / .15); }
[data-theme="fumetto"] .foot-link .mono { color: #ffd23f; }
[data-theme="fumetto"] .foot-big { color: transparent; -webkit-text-stroke: 2px rgb(255 210 63 / .35); }
[data-theme="fumetto"] .toast { background: #ffd23f; color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111; font-family: var(--f-d); font-size: 16px; letter-spacing: .05em; }

/* comparsa "pop" da fumetto */
[data-theme="fumetto"] .rv { animation-name: pop; animation-duration: .7s; animation-timing-function: var(--ease-back); }
@keyframes pop { from { opacity: 0; transform: scale(.82) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .sec-card.is-art .art, [data-theme="fumetto"] .spk, [data-theme="fumetto"] .spark, [data-theme="fumetto"] .clouds { animation: none; }
}

/* home: logo + sezioni + Duomo riempiono il primo schermo, il footer arriva solo scorrendo */
body[data-route="home"] #view { min-height: calc(100svh - var(--top-h) - var(--safe-t)); }
/* nel fumetto lo sfondo si vede sempre tutto: il footer parte sotto la piega anche nelle pagine corte */
[data-theme="fumetto"] #view { min-height: calc(100svh - var(--top-h) - var(--safe-t)); }

/* ============================================================
   v3 (26/10 notte) — home con banner INFO + WhatsApp, sezioni a voci con menu prezzi
   ============================================================ */

/* ---- base per tutti i temi ---- */
.home-menu { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; }
.home-menu .sec-grid { width: 100%; }
.info-banner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 340px;
  height: 68px;
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--bg2));
  border: 1px solid var(--line);
}
.info-half { position: absolute; top: 0; bottom: 0; z-index: -1; }
.info-green { left: 0; right: 50%; background: var(--info-l, #28be3c); }
.info-blu { left: 50%; right: 0; background: var(--info-r, #8b5a2b); }
.info-label { position: relative; z-index: 5; font-size: 34px; color: #fff; }
.wa-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wa-icon { width: 58px; height: 58px; display: block; transition: transform .35s var(--ease-back); }
.wa-btn:active .wa-icon { transform: scale(.9); }
@media (hover: hover) { .wa-btn:hover .wa-icon { transform: scale(1.08) rotate(-6deg); } }
.wa-label { font-size: 15px; letter-spacing: .06em; }

.entries { display: flex; flex-direction: column; gap: 30px; padding: 0 16px; }
.entry { display: flex; flex-direction: column; gap: 14px; }
.entry-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(var(--bg2)); isolation: isolate; }
.entry-title { font-size: 40px; }
.entry-desc { white-space: pre-line; line-height: 1.5; }
.prices { border: 1px solid var(--line); }
.prices-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-size: 22px; }
.prices-sum::-webkit-details-marker { display: none; }
.chev { width: 24px; height: 24px; transition: transform .35s var(--ease-back); }
.prices[open] .chev { transform: rotate(180deg); }
.prices-box { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.price-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.price-row b { white-space: nowrap; }
.prices-ed { white-space: pre-line; }
body:not(.editing) .prices-ed { display: none; }
body.editing .price-rows { display: none; }
.prices .order { margin-top: 10px; min-height: 54px; font-size: 22px; }
.info-body { padding: 0 16px; }
.info-text { white-space: pre-line; line-height: 1.6; }
/* sfondo alto quanto lo schermo "grande": quando la barra del browser si nasconde non salta */
.scene { bottom: auto; height: 100vh; height: 100lvh; }

/* ---- FUMETTO ---- */
[data-theme="fumetto"] { --f-t: "Luckiest Guy", "Bangers", Impact, sans-serif; }
/* niente barra con logo/nome e niente footer: resta solo la freccia indietro */
[data-theme="fumetto"] .top-brand,
[data-theme="fumetto"] .top-meta,
[data-theme="fumetto"] .foot { display: none !important; }
[data-theme="fumetto"] .top,
[data-theme="fumetto"] body.is-scrolled .top,
[data-theme="fumetto"] body:not([data-route="home"]) .top { background: transparent; border-bottom: 0; box-shadow: none; pointer-events: none; }
[data-theme="fumetto"] .top-back {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  margin: 8px 0 0 8px;
  border-radius: 50%;
  background: #ffd23f;
  color: #111;
  border: 3px solid #111;
  box-shadow: 3px 3px 0 #111;
}
/* lo sfondo non cambia mai scorrendo (niente scurimenti né spostamenti) */
[data-theme="fumetto"] .scene .duomo, [data-theme="fumetto"] .scene .sky { transition: none; }
[data-theme="fumetto"] body:not([data-route="home"]) .scene .duomo { opacity: .22; transform: translateX(-50%); }
[data-theme="fumetto"] body:not([data-route="home"]) .scene .sky { opacity: 1; }

/* ---- home: logo, 2 grafiche un po' più grandi e più su, INFO, WhatsApp ---- */
[data-theme="fumetto"] .home-menu { margin: auto 0 5svh; gap: 18px; }
[data-theme="fumetto"] .home-menu .sec-grid { padding: 0; grid-template-columns: repeat(2, minmax(0, calc(158px * var(--cs, 1)))); justify-content: center; gap: calc(18px * var(--cs, 1)); }
[data-theme="fumetto"] .info-banner {
  max-width: 334px;
  height: 66px;
  border: 4px solid #111;
  border-radius: 18px;
  background: none;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 5px 6px 0 #111;
  animation: art-float 4.6s ease-in-out infinite -1.1s;
}
[data-theme="fumetto"] .info-half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgb(0 0 0 / .18) 1.3px, transparent 1.5px) 0 0 / 7px 7px;
}
/* i due colori dello studio (--info-l / --info-r) sfumano uno nell'altro, con luce dall'alto */
[data-theme="fumetto"] .info-green {
  right: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .3) 0%, rgb(255 255 255 / .06) 45%, rgb(0 0 0 / .22) 100%),
    linear-gradient(90deg, var(--info-l, #28be3c) 6%, color-mix(in oklab, var(--info-l, #28be3c), var(--info-r, #3b6fe0)) 50%, var(--info-r, #3b6fe0) 94%);
}
[data-theme="fumetto"] .info-blu { display: none; }
[data-theme="fumetto"] .info-half::after { opacity: .5; }
[data-theme="fumetto"] .info-banner .gloss { height: 34%; width: 92%; left: 4%; top: 8%; border-radius: 10px; background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0)); }
[data-theme="fumetto"] .info-label {
  font-family: var(--f-t);
  font-size: 38px;
  letter-spacing: .06em;
  color: #fff;
  -webkit-text-stroke: 2.5px #111;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #111;
  transform: rotate(-3deg);
}
[data-theme="fumetto"] .wa-icon { width: 60px; height: 60px; filter: drop-shadow(3px 4px 0 #111); }
[data-theme="fumetto"] .wa-label { font-family: var(--f-t); font-size: 16px; color: #fff; -webkit-text-stroke: 1.2px #111; paint-order: stroke fill; text-shadow: 0 2px 0 #111; }

/* ---- dentro la sezione: titolo estetico, voci con foto + titolo + descrizione + prezzi ---- */
[data-theme="fumetto"] .page-head { padding-top: 54px; }
[data-theme="fumetto"] .page-title,
[data-theme="fumetto"] .entry-title {
  font-family: var(--f-t);
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 34%, rgb(var(--c1)) 60%, rgb(var(--c2)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2.5px #111;
  caret-color: #fff;
  filter: drop-shadow(0 5px 0 #111) drop-shadow(3px 0 0 #111);
  line-height: 1.05;
}
[data-theme="fumetto"] .page-title { font-size: 64px; transform: rotate(-3deg); }
[data-theme="fumetto"] .entries { padding: 4px 22px 0; gap: 34px; }
[data-theme="fumetto"] .entry-pic {
  border: 4px solid #111;
  border-radius: 18px;
  padding: 9px;
  background:
    radial-gradient(circle, rgb(0 0 0 / .16) 1.3px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(160deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 52%, rgb(var(--c3)) 100%);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 5px 6px 0 #111;
}
[data-theme="fumetto"] .entry-pic .pic { inset: 9px; border: 3px solid #111; border-radius: 11px; background: rgb(0 0 0 / .2); }
[data-theme="fumetto"] .entry-body { display: flex; flex-direction: column; gap: 10px; text-align: center; }
[data-theme="fumetto"] .entry-title { font-size: 36px; }
[data-theme="fumetto"] .entry-desc { color: #fff; font-size: 17px; text-shadow: 0 2px 0 #111; }
[data-theme="fumetto"] .prices {
  text-align: left;
  border: 3px solid #111;
  border-radius: 16px;
  background: #fff;
  color: #111;
  box-shadow: 4px 5px 0 #111;
  overflow: hidden;
}
[data-theme="fumetto"] .prices-sum {
  font-family: var(--f-t);
  font-size: 22px;
  letter-spacing: .05em;
  background: rgb(var(--c2));
  color: #fff;
  -webkit-text-stroke: 1.2px #111;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #111;
}
[data-theme="fumetto"] .prices[open] .prices-sum { border-bottom: 3px solid #111; }
[data-theme="fumetto"] .chev { color: #fff; filter: drop-shadow(0 2px 0 #111); }
[data-theme="fumetto"] .prices-box { padding: 6px 16px 16px; }
[data-theme="fumetto"] .price-row { border-bottom: 2px dashed rgb(17 17 17 / .2); font-size: 17px; }
[data-theme="fumetto"] .price-row b { font-family: var(--f-d); font-size: 21px; letter-spacing: .04em; color: #e8262b; }
[data-theme="fumetto"] .prices .order { min-height: 54px; font-size: 24px; border-radius: 14px; box-shadow: 4px 4px 0 #111; }
[data-theme="fumetto"] .entries .empty { color: #111; }

/* ---- info ---- */
[data-theme="fumetto"] .info-body { padding: 6px 22px 0; }
/* scheda info: vetro sfumato coi colori del banner, bordo a china */
[data-theme="fumetto"] .info-text {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle, rgb(255 255 255 / .1) 1.2px, transparent 1.4px) 0 0 / 8px 8px,
    linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04) 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--info-l, #28be3c), transparent 35%), color-mix(in srgb, var(--info-r, #3b6fe0), transparent 35%));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 3px solid #111;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3), 5px 6px 0 #111, 0 0 40px color-mix(in srgb, var(--info-r, #3b6fe0), transparent 55%);
  padding: 20px 20px;
  font-size: 18px;
  line-height: 1.65;
  text-shadow: 0 2px 0 rgb(0 0 0 / .55);
}
body:not(.editing) .info-text:empty { display: none; }

/* logo assistenza caricato dallo studio al posto di quello WhatsApp */
.wa-img { object-fit: contain; }
[data-theme="fumetto"] .wa-img { filter: drop-shadow(3px 4px 0 #111); }

/* fumetto, home: il Duomo a china riempie lo spazio tra il logo e le card, sempre intero e visibile */
/* grandezza dal cursore dello studio (--ds): il disegno resta poggiato sulle card e centrato */
[data-theme="fumetto"] .home-duomo { position: relative; flex: 1 1 auto; min-height: calc(110px * var(--ds, 1)); margin: 6px 22px -18px; z-index: 0; }
[data-theme="fumetto"] .home-duomo .duomo-svg,
[data-theme="fumetto"] .home-duomo .duomo-px {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(calc(100% * var(--ds, 1)), calc(100vw - 16px), calc(var(--col, 480px) - 16px));
  height: min(100%, calc(230px * var(--ds, 1)));
  transform: translateX(-50%);
  filter: drop-shadow(0 0 30px rgb(140 175 255 / .3));
}
[data-theme="fumetto"] .home-duomo .duomo-px,
[data-theme="fumetto"] .home-duomo .duomo-own { object-fit: contain; object-position: 50% 100%; }
[data-theme="fumetto"] .home-duomo .duomo-px { image-rendering: pixelated; }
[data-theme="fumetto"] .duomo-comic .duomo-own { display: block; width: 100%; height: auto; }
/* alone morbido dietro le due card: le lega allo sfondo */
[data-theme="fumetto"] .home-menu .sec-grid { position: relative; }
[data-theme="fumetto"] .home-menu .sec-grid::before {
  content: "";
  position: absolute;
  inset: -12% -18% -8%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--bg-bot, #0a2459), #9ab8ff 35%), transparent 72%);
  opacity: .75;
  pointer-events: none;
}
[data-theme="fumetto"] .home-duomo ~ .home-menu { position: relative; z-index: 1; margin-top: 0; }
[data-theme="fumetto"] body[data-route="home"] .scene .duomo-comic { display: none; }

/* ---- sfondo fumetto: monogramma di passamontagna tono su tono (come i monogrammi dei brand),
   che scorre piano in diagonale, + luce dietro al Duomo, grana di carta e vignettatura.
   Trame dallo studio: maschere (monogramma) · maxi (monogramma grande) · retino · liscio ---- */
[data-theme="fumetto"] { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cg id='m' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M20 1.5C9.2 1.5 3.5 10.5 3.5 22.5v11.5c0 7.4 5.2 12.5 12.5 12.5h8c7.3 0 12.5-5.1 12.5-12.5V22.5C36.5 10.5 30.8 1.5 20 1.5z'/%3E%3Cpath d='M12.5 3.8v11M20 1.8v13.5M27.5 3.8v11' stroke-width='1.3' opacity='.75'/%3E%3Crect x='7' y='17' width='26' height='10' rx='5'/%3E%3Cpath d='M10.4 20.4L18.7 23.1Q14.3 26.3 10.4 20.4zM29.6 20.4L21.3 23.1Q25.7 26.3 29.6 20.4z' fill='%23fff' stroke='none'/%3E%3Crect x='15.5' y='33' width='9' height='5' rx='2.5'/%3E%3C/g%3E%3Cpath id='s' d='M0-7l1.7 5.3L7 0l-5.3 1.7L0 7l-1.7-5.3L-7 0l5.3-1.7z' fill='%23fff'/%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(24 20) rotate(-14 20 24)'/%3E%3Cuse href='%23m' transform='translate(112 104) rotate(12 20 24) scale(.82)'/%3E%3Cuse href='%23s' transform='translate(128 34) scale(.9)'/%3E%3Cpath d='M48 114l2.6 7.5v15.5h-5.2v-15.5z' fill='%23fff'/%3E%3Ccircle cx='48' cy='111.6' r='1.7' fill='%23fff'/%3E%3Cpath d='M43.4 137h9.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='76' r='1.8' fill='%23fff'/%3E%3Ccircle cx='160' cy='160' r='1.4' fill='%23fff'/%3E%3Ccircle cx='10' cy='96' r='1.2' fill='%23fff'/%3E%3C/svg%3E"); }
[data-theme="fumetto"] .scene .sky { height: 100%; opacity: 1; overflow: hidden; }
[data-theme="fumetto"] .scene .sky::before,
[data-theme="fumetto"] .scene .sky::after { content: ""; position: absolute; pointer-events: none; }
[data-theme="fumetto"] .scene .sky::before {
  inset: -360px;
  background: linear-gradient(180deg, var(--pat-a, color-mix(in srgb, var(--bg-top, #0d0f33), #9db4ff 55%)), var(--pat-b, color-mix(in srgb, var(--bg-bot, #0a2459), #cfdcff 60%)));
  opacity: .16;
  -webkit-mask: var(--pat) 0 0 / 180px 180px repeat;
  mask: var(--pat) 0 0 / 180px 180px repeat;
  animation: pat-drift 60s linear infinite;
}
[data-theme="fumetto"][data-texture="maxi"] .scene .sky::before {
  -webkit-mask-size: 360px 360px;
  mask-size: 360px 360px;
  opacity: .1;
  animation-duration: 110s;
}
@keyframes pat-drift { to { transform: translate(180px, 180px); } }
[data-theme="fumetto"][data-texture="maxi"] .scene .sky::before { animation-name: pat-drift-maxi; }
@keyframes pat-drift-maxi { to { transform: translate(360px, 360px); } }
[data-theme="fumetto"][data-texture="retino"] .scene .sky::before {
  inset: 0;
  animation: none;
  opacity: 1;
  -webkit-mask: linear-gradient(180deg, transparent 8%, rgb(0 0 0 / .35) 45%, #000 100%);
  mask: linear-gradient(180deg, transparent 8%, rgb(0 0 0 / .35) 45%, #000 100%);
  background:
    radial-gradient(circle, rgb(255 255 255 / .09) 34%, transparent 37%) 0 0 / 13px 13px,
    radial-gradient(circle, rgb(255 255 255 / .07) 22%, transparent 25%) 6.5px 6.5px / 13px 13px;
}
[data-theme="fumetto"][data-texture="liscio"] .scene .sky::before { display: none; }
/* luce morbida in alto + vignettatura ai bordi */
[data-theme="fumetto"] .scene .sky::after {
  inset: 0;
  background:
    radial-gradient(60% 34% at 50% 16%, rgb(255 255 255 / .06), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, transparent 50%, rgb(0 0 0 / .55) 100%);
}
/* grana di carta leggerissima sopra tutto lo sfondo */
[data-theme="fumetto"]:not([data-texture="liscio"]) .scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  mix-blend-mode: overlay;
  opacity: .22;
}
@media (prefers-reduced-motion: reduce) { [data-theme="fumetto"] .scene .sky::before { animation: none; } }

/* ---- home: logo in alto, poi Duomo (alto quanto dice il cursore) poggiato sulle card ---- */
[data-theme="fumetto"] .home-duomo {
  flex: 0 0 auto;
  height: calc(170px * var(--ds, 1));
  min-height: 0;
  margin: auto 16px calc(-16px * var(--ds, 1));
}
[data-theme="fumetto"] .home-duomo .duomo-svg,
[data-theme="fumetto"] .home-duomo .duomo-px { height: 100%; width: min(calc(100vw - 16px), calc(var(--col, 480px) - 16px)); }
/* il logo ha un alone di luce morbido dietro */
[data-theme="fumetto"] .hero-logo { position: relative; }
[data-theme="fumetto"] .hero-logo::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg-bot, #0a2459), #ffd23f 22%), transparent);
  opacity: .55;
  pointer-events: none;
}
/* logo assistenza: contenitore per il bottone "cambia" dello studio */
.wa-ico { position: relative; display: block; }

/* ---- prezzi: sempre aperti, cifre leggibili (Rubik pieno, numeri allineati) in un'etichetta gialla ---- */
.prices-sum { cursor: default; }
[data-theme="fumetto"] .prices-sum { border-bottom: 3px solid #111; padding: 10px 16px 8px; }
[data-theme="fumetto"] .prices-box { padding: 4px 14px 12px; gap: 0; }
[data-theme="fumetto"] .price-row { align-items: center; padding: 9px 2px; font-size: 17px; font-weight: 700; }
[data-theme="fumetto"] .price-row:last-child { border-bottom: 0; }
[data-theme="fumetto"] .price-row b {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  color: #111;
  background: #ffd23f;
  border: 2.5px solid #111;
  border-radius: 10px;
  padding: 6px 10px 5px;
  box-shadow: 2px 2px 0 #111;
}

/* ---- titoli nelle sezioni: targa scura dritta, titolo colorato (colore della sezione,
   oppure quello scelto in MODIFICA: --ttl); le voci hanno una targhetta più piccola ---- */
[data-theme="fumetto"] .page-head { padding: 58px 22px 22px; }
[data-theme="fumetto"] .ttl-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 24px 10px;
  border: 4px solid #111;
  border-radius: 18px;
  background:
    radial-gradient(circle, rgb(255 255 255 / .05) 1.2px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(180deg, #24232f 0%, #121119 100%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .1), inset 0 16px 16px -14px rgb(255 255 255 / .3), 6px 7px 0 #111;
}
[data-theme="fumetto"] .ttl-banner .page-title,
[data-theme="fumetto"] .entry-ttl .entry-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  transform: none;
  background: none;
  -webkit-text-stroke: 2.5px #111;
  paint-order: stroke fill;
  filter: none;
  line-height: 1.05;
}
[data-theme="fumetto"] .ttl-banner .page-title {
  font-size: 52px;
  color: var(--ttl, rgb(var(--c1)));
  caret-color: #fff;
  text-shadow: 0 4px 0 #111, 0 0 22px color-mix(in srgb, var(--ttl, rgb(var(--c1))), transparent 55%);
}
[data-theme="fumetto"] .entry-ttl {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 2px auto 0;
  padding: 6px 18px;
  border: 3px solid #111;
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(var(--c2)) 0%, rgb(var(--c3)) 100%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .22), 4px 5px 0 #111;
}
[data-theme="fumetto"] .entry-ttl .entry-title { font-size: 28px; color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 0 3px 0 #111; }

/* ============================================================
   v8 (27/10) — direzione "LINEE": l'identità visiva della Metropolitana di Milano.
   Ogni sezione è una linea (M2 verde, M4 blu, M5 lilla, M3 giallo…) col suo colore
   preso dalla copertina; titoli come cartelli di stazione, a sinistra, in un grottesco
   largo. Le card a fumetto sono l'unica cosa rumorosa: tutto il resto è quieto.
   Tipo: Archivo (largo e pieno per i titoli, normale per i testi, cifre tabellari).
   Movimento: una sola entrata in home, expo-out senza rimbalzo; niente "pop" ovunque.
   ============================================================ */
html[data-theme="fumetto"] {
  --f-d: "Archivo", system-ui, sans-serif;
  --f-t: "Archivo", system-ui, sans-serif;
  --f-b: "Archivo", system-ui, sans-serif;
  --f-m: "Archivo", system-ui, sans-serif;
  --ink-2: rgb(232 236 248 / .66);
  --hair: rgb(255 255 255 / .1);
  --glass: rgb(255 255 255 / .045);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --m3: #ffc20e;
}
html[data-theme="fumetto"] body { font-family: var(--f-b); font-weight: 400; font-size: 16px; color: #eef1fa; letter-spacing: 0; }
html[data-theme="fumetto"] .display { font-family: var(--f-d); font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; text-transform: none; }
html[data-theme="fumetto"] .mono { font-family: var(--f-b); letter-spacing: 0; }

/* niente riflessi, stelline e "pop" da fumetto sull'interfaccia */
html[data-theme="fumetto"] .gloss,
html[data-theme="fumetto"] .spark { display: none; }
html[data-theme="fumetto"] .rv { animation: none; }
html[data-theme="fumetto"] .sec-card.is-art .art { animation: none; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .45)); transition: transform .5s var(--expo); }
html[data-theme="fumetto"] .info-banner { animation: none; }

/* una sola entrata, in home: logo, Duomo, card, info, assistenza in fila */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="fumetto"] body[data-route="home"] .hero-logo,
  html[data-theme="fumetto"] body[data-route="home"] .home-duomo,
  html[data-theme="fumetto"] body[data-route="home"] .sec-card,
  html[data-theme="fumetto"] body[data-route="home"] .info-banner,
  html[data-theme="fumetto"] body[data-route="home"] .wa-btn { animation: enter .9s var(--expo) both; }
  html[data-theme="fumetto"] body[data-route="home"] .home-duomo { animation-delay: .08s; }
  html[data-theme="fumetto"] body[data-route="home"] .sec-card:nth-child(1) { animation-delay: .16s; }
  html[data-theme="fumetto"] body[data-route="home"] .sec-card:nth-child(2) { animation-delay: .22s; }
  html[data-theme="fumetto"] body[data-route="home"] .info-banner { animation-delay: .3s; }
  html[data-theme="fumetto"] body[data-route="home"] .wa-btn { animation-delay: .36s; }
  body.no-rv .hero-logo, body.no-rv .home-duomo, body.no-rv .sec-card, body.no-rv .info-banner, body.no-rv .wa-btn { animation: none !important; }
}
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }

/* sfondo: retino più fine e discreto */
html[data-theme="fumetto"][data-texture="retino"] .scene .sky::before {
  background: radial-gradient(circle, rgb(255 255 255 / .07) 28%, transparent 31%) 0 0 / 7px 7px;
  -webkit-mask: linear-gradient(180deg, transparent 15%, rgb(0 0 0 / .5) 60%, #000 100%);
  mask: linear-gradient(180deg, transparent 15%, rgb(0 0 0 / .5) 60%, #000 100%);
}

/* freccia indietro: vetro scuro, non più il bottone giallo */
html[data-theme="fumetto"] .top-back {
  width: 42px;
  height: 42px;
  margin: 10px 0 0 12px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgb(8 12 30 / .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: none;
}

/* ---------- home ---------- */
html[data-theme="fumetto"] .hero-logo::before { opacity: .35; }
html[data-theme="fumetto"] .home-menu { gap: 16px; }
html[data-theme="fumetto"] .home-menu .sec-grid::before { opacity: .45; }
/* INFO: una fascia pulita coi due colori dello studio, testo largo bianco */
html[data-theme="fumetto"] .info-banner {
  max-width: calc(316px * var(--cs, 1) + 18px);
  height: 58px;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 14px 30px -12px rgb(0 0 0 / .6);
}
html[data-theme="fumetto"] .info-half::after { display: none; }
html[data-theme="fumetto"] .info-green {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 55%),
    linear-gradient(90deg, var(--info-l, #28be3c), color-mix(in oklab, var(--info-l, #28be3c), var(--info-r, #3b6fe0)) 50%, var(--info-r, #3b6fe0));
}
html[data-theme="fumetto"] .info-label {
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .02em;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 10px rgb(0 0 0 / .25);
  transform: none;
}
html[data-theme="fumetto"] .wa-btn { gap: 6px; }
html[data-theme="fumetto"] .wa-icon { width: 46px; height: 46px; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .4)); }
html[data-theme="fumetto"] .wa-label {
  font-family: var(--f-b);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* ---------- pagine sezione: cartello di stazione ---------- */
html[data-theme="fumetto"] .page-head { padding: 66px 20px 20px; text-align: left; }
html[data-theme="fumetto"] .ttl-banner {
  display: block;
  margin: 0;
  padding: 14px 18px 12px 24px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: rgb(6 10 26 / .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: none;
  overflow: hidden;
}
/* la "linea": la fascia colorata a sinistra, come sui cartelli della metro */
html[data-theme="fumetto"] .ttl-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--ttl, rgb(var(--c2)));
}
html[data-theme="fumetto"] .ttl-banner .page-title {
  display: block;
  text-align: left;
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ttl, rgb(var(--c1)));
  -webkit-text-stroke: 0;
  text-shadow: none;
}

html[data-theme="fumetto"] .entries { padding: 0 20px; gap: 30px; }
html[data-theme="fumetto"] .entry { gap: 14px; }
html[data-theme="fumetto"] .entry-pic {
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: rgb(var(--c3) / .5);
  box-shadow: 0 24px 40px -24px rgb(0 0 0 / .7);
}
html[data-theme="fumetto"] .entry-pic .pic { inset: 0; border: 0; border-radius: 20px; background: none; }
html[data-theme="fumetto"] .entry-body { text-align: left; gap: 8px; }
html[data-theme="fumetto"] .entry-ttl {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html[data-theme="fumetto"] .entry-ttl .entry-title {
  display: block;
  text-align: left;
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
html[data-theme="fumetto"] .entry-desc { color: var(--ink-2); font-size: 15px; line-height: 1.5; text-shadow: none; }

/* prezzi: righe nette, numeri grandi e tabellari, la linea colorata come segno a sinistra */
html[data-theme="fumetto"] .prices {
  margin-top: 4px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--glass);
  color: #eef1fa;
  box-shadow: none;
}
html[data-theme="fumetto"] body:not(.editing) .prices-sum { display: none; }
html[data-theme="fumetto"] .prices-sum {
  font-family: var(--f-b);
  font-size: 13px;
  font-weight: 600;
  background: none;
  color: var(--ink-2);
  -webkit-text-stroke: 0;
  text-shadow: none;
  border-bottom: 1px solid var(--hair);
}
html[data-theme="fumetto"] .prices-box { padding: 2px 16px; }
html[data-theme="fumetto"] .price-row {
  align-items: baseline;
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--hair);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
html[data-theme="fumetto"] .price-row:last-child { border-bottom: 0; }
html[data-theme="fumetto"] .price-row span { display: flex; align-items: center; gap: 10px; }
html[data-theme="fumetto"] .price-row span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c2)); flex: 0 0 auto; }
html[data-theme="fumetto"] .price-row b {
  font-family: var(--f-d);
  font-stretch: 100%;
  font-weight: 800;
  font-size: 22px;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
html[data-theme="fumetto"] .prices-ed { color: #fff; }
html[data-theme="fumetto"] .prices .order {
  margin: 4px 0 14px;
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: rgb(var(--c2));
  color: #fff;
  box-shadow: none;
  font-size: 17px;
  -webkit-text-stroke: 0;
}
html[data-theme="fumetto"] .entries .empty { color: var(--ink-2); background: var(--glass); border: 1px dashed var(--hair); }

/* ---------- info ---------- */
html[data-theme="fumetto"] .info-body { padding: 0 20px; }
html[data-theme="fumetto"] .info-text {
  border: 1px solid var(--hair);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--info-l, #28be3c), transparent 82%), color-mix(in srgb, var(--info-r, #3b6fe0), transparent 82%)),
    rgb(6 10 26 / .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: none;
  padding: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #eef1fa;
  text-shadow: none;
}

/* avvisi in basso */
html[data-theme="fumetto"] .toast {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgb(8 12 30 / .9);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgb(0 0 0 / .6);
  font: 600 14px var(--f-b);
  letter-spacing: 0;
}
/* pagina INFO: stesso cartello, la linea prende la sfumatura dei due colori INFO */
html[data-theme="fumetto"] body[data-route="info"] .ttl-banner .page-title { color: #fff; }

/* ============================================================
   v9 (27/10) — Duomo reale, INFO a più colori, bordi luminosi, titolo in vetro liquido
   ============================================================ */
/* Duomo vero: niente alone blu, solo un'ombra che lo stacca */
html[data-theme="fumetto"] .home-duomo .duomo-real { filter: drop-shadow(0 -6px 30px rgb(255 214 150 / .12)); }
html[data-theme="fumetto"] .duomo-comic .duomo-real { opacity: .5; }

/* INFO: la sfumatura usa tutti i colori scelti nello studio */
html[data-theme="fumetto"] .info-green {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 55%),
    var(--info-grad, linear-gradient(90deg, #28be3c, #3b6fe0));
}
html[data-theme="fumetto"] .info-text {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--info-l, #28be3c), transparent 82%), color-mix(in srgb, var(--info-r, #3b6fe0), transparent 82%)),
    rgb(6 10 26 / .55);
}

/* bordi luminosi sulle forme (foto delle voci e riquadro prezzi): filo di luce nel colore della linea */
html[data-theme="fumetto"] .entry-pic,
html[data-theme="fumetto"] .prices {
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(8 12 28 / .62), rgb(8 12 28 / .62)) padding-box,
    linear-gradient(150deg, rgb(var(--c1) / .9), rgb(255 255 255 / .12) 38%, rgb(255 255 255 / .05) 62%, rgb(var(--c2) / .75)) border-box;
  box-shadow:
    0 0 0 1px rgb(var(--c2) / .08),
    0 0 26px -6px rgb(var(--c2) / .55),
    0 24px 40px -26px rgb(0 0 0 / .8),
    inset 0 1px 0 rgb(255 255 255 / .1);
}
html[data-theme="fumetto"] .entry-pic .pic { inset: 0; border-radius: 19px; }
html[data-theme="fumetto"] .price-row span::before { box-shadow: 0 0 8px rgb(var(--c1) / .9); background: rgb(var(--c1)); }

/* titolo della sezione: pillola in vetro liquido (sfocatura + saturazione, riflesso in alto,
   bordo che prende luce) e una goccia di luce nel colore della linea che entra dal lato sinistro */
html[data-theme="fumetto"] .ttl-banner {
  isolation: isolate;
  padding: 15px 26px 13px 44px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 0% 50%, rgb(var(--c2) / .38), transparent 55%),
    linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .45),
    inset 0 -1px 0 rgb(255 255 255 / .08),
    inset 0 0 22px rgb(255 255 255 / .05),
    0 0 0 1px rgb(0 0 0 / .25),
    0 18px 34px -16px rgb(0 0 0 / .7),
    0 0 40px -12px var(--ttl, rgb(var(--c2)));
}
/* riflesso speculare sulla metà alta */
html[data-theme="fumetto"] .ttl-banner::before {
  left: 14px;
  right: 14px;
  top: 2px;
  bottom: auto;
  width: auto;
  height: 46%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0));
  pointer-events: none;
  z-index: -1;
}
/* la goccia di luce: pallino che brilla, al posto della vecchia fascia */
html[data-theme="fumetto"] .ttl-banner::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #fff, var(--ttl, rgb(var(--c1))) 55%);
  box-shadow: 0 0 10px 2px var(--ttl, rgb(var(--c1))), 0 0 26px 6px color-mix(in srgb, var(--ttl, rgb(var(--c1))), transparent 55%);
}
/* INFO: la goccia di luce prende la sfumatura INFO, la pillola un velo dei suoi colori */
html[data-theme="fumetto"] body[data-route="info"] .ttl-banner::after { background: var(--info-grad-v, linear-gradient(180deg, #28be3c, #3b6fe0)); box-shadow: 0 0 10px 2px var(--info-l, #28be3c), 0 0 26px 6px color-mix(in srgb, var(--info-r, #3b6fe0), transparent 55%); }
html[data-theme="fumetto"] body[data-route="info"] .ttl-banner { background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--info-l, #28be3c), transparent 62%), transparent 55%), linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(0 0 0 / .25), 0 18px 34px -16px rgb(0 0 0 / .7), 0 0 40px -12px var(--info-l, #28be3c); }
html[data-theme="fumetto"] .ttl-banner .page-title {
  font-size: 36px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--ttl, rgb(var(--c1))), transparent 60%);
}
/* freccia indietro nello stesso vetro */
html[data-theme="fumetto"] .top-back {
  border: 1px solid rgb(255 255 255 / .18);
  background: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / .03));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 10px 24px -12px rgb(0 0 0 / .7);
}
/* titolo in vetro liquido senza la goccia di luce: il colore resta nel velo a sinistra e nell'alone */
html[data-theme="fumetto"] .ttl-banner::after,
html[data-theme="fumetto"] body[data-route="info"] .ttl-banner::after { display: none; }
html[data-theme="fumetto"] .ttl-banner { padding-left: 28px; }

/* ============================================================
   v10 (27/10) — sfondo home di partenza: grafite che va verso il nero, luce oro come il logo.
   I colori si cambiano dallo studio (sopra / sotto / luce); le sezioni restano del loro colore.
   ============================================================ */
html[data-theme="fumetto"] {
  --sky:
    radial-gradient(60% 24% at 50% 10%, color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 86%), transparent 72%),
    radial-gradient(70% 26% at 50% 62%, color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 93%), transparent 74%),
    linear-gradient(180deg, var(--bg-top, #1a191d) 0%, color-mix(in srgb, var(--bg-top, #1a191d), var(--bg-bot, #000000) 75%) 38%, var(--bg-bot, #000000) 72%, var(--bg-bot, #000000) 100%);
}
html[data-theme="fumetto"] .home-menu .sec-grid::before { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 70%), transparent 72%); opacity: .5; }
html[data-theme="fumetto"] .hero-logo::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 55%), transparent); opacity: .5; }
html[data-theme="fumetto"] .scene .sky::before { background: linear-gradient(180deg, var(--pat-a, color-mix(in srgb, var(--bg-top, #1a191d), var(--bg-glow, #ffc20e) 45%)), var(--pat-b, color-mix(in srgb, var(--bg-bot, #000000), var(--bg-glow, #ffc20e) 55%))); }
html[data-theme="fumetto"][data-texture="retino"] .scene .sky::before { background: radial-gradient(circle, color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 93%) 28%, transparent 31%) 0 0 / 7px 7px; }
html[data-theme="fumetto"] .home-duomo .duomo-svg:not(.duomo-real) { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 75%)); }
html[data-theme="fumetto"] .home-duomo .duomo-real { filter: drop-shadow(0 -6px 34px color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 82%)); }

/* ============================================================
   v11 (27/10) — logo più grande in home, grandezza dal cursore dello studio (--ls)
   ============================================================ */
html[data-theme="fumetto"] .hero-logo { width: min(calc(250px * var(--ls, 1)), calc(100vw - 40px)); }

/* posizione delle sezioni in home dal cursore dello studio (--cy, px verso l'alto): si sposta tutto il
   blocco card + INFO + assistenza, così niente si accavalla; con translate il Duomo resta dov'è */
html[data-theme="fumetto"] .home-menu { translate: 0 calc(var(--cy, 0) * -1px); margin-bottom: calc(5svh - max(var(--cy, 0), 0) * 1px); }

/* ============================================================
   v12 (27/10) — rifinitura: intro col Duomo che si apre, bordi di luce che girano,
   INFO come una linea della metro, Instagram accanto ai contatti, titoli e voci al centro.
   Movimento: expo-out senza rimbalzi. Le animazioni continue muovono solo transform/opacity
   o l'angolo dei bordi di luce, e quelle sulle voci si fermano quando escono dallo schermo.
   ============================================================ */
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ga-spin { to { --ga: 360deg; } }

/* ---------- intro: solo la prima volta (classe messa da index.html), si salta toccando ---------- */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  touch-action: none;
  /* paracadute: se qualcosa va storto l'intro non resta mai sopra il sito */
  animation: intro-safety 0s linear 7s forwards;
}
@keyframes intro-safety { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.intro-stage { position: absolute; inset: 0; transform-origin: 50% 56%; }
.intro-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 140vmax;
  height: 140vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(255 194 14 / .2), rgb(255 150 40 / .06) 42%, transparent 70%);
  opacity: .35;
}
.intro-duomo {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(94vw, 460px);
  aspect-ratio: 1400 / 940;
  transform: translate(-50%, -50%);
  perspective: 900px;
  opacity: .25;
}
.intro-door { position: absolute; inset: 0; backface-visibility: hidden; }
.intro-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro-door-l { clip-path: inset(0 50% 0 0); transform-origin: 0% 60%; }
.intro-door-r { clip-path: inset(0 0 0 50%); transform-origin: 100% 60%; }
/* la fessura di luce dove il Duomo si apre */
.intro-seam {
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, #ffd98a 28%, #fff 62%, #ffd98a);
  box-shadow: 0 0 12px 3px rgb(255 200 90 / .75), 0 0 44px 12px rgb(255 170 40 / .3);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  opacity: 0;
}
.intro-logo {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(56vw, 250px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -12%) scale(.84);
  filter: drop-shadow(0 22px 40px rgb(0 0 0 / .65));
}
/* la camera spinge in avanti per tutta l'intro senza mai fermarsi, e accelera dentro il portone */
html.intro-on .intro.is-go { animation: intro-safety 0s linear 7s forwards, in-bg .7s ease 2.35s forwards; }
.intro.is-go .intro-stage { animation: in-push 3.4s cubic-bezier(.5, .06, .86, .3) both; }
.intro.is-go .intro-glow { animation: in-glow 1s var(--expo) both, in-fade .7s ease 2.35s forwards; }
.intro.is-go .intro-duomo { animation: in-duomo 1s var(--expo) both; }
.intro.is-go .intro-logo { animation: in-logo .9s var(--expo) .2s both, in-logo-out .75s cubic-bezier(.55, 0, .85, .35) 1.35s forwards; }
.intro.is-go .intro-seam { animation: in-seam .5s var(--expo) 1.65s both, in-seam-out .42s ease-in 2.18s forwards; }
.intro.is-go .intro-door-l { animation: in-door-l 1.05s cubic-bezier(.45, 0, .2, 1) 2.05s forwards; }
.intro.is-go .intro-door-r { animation: in-door-r 1.05s cubic-bezier(.45, 0, .2, 1) 2.05s forwards; }
html.intro-on .intro.is-skip { opacity: 0; transition: opacity .38s ease; pointer-events: none; }
@keyframes in-bg { to { background-color: transparent; } }
@keyframes in-push { to { transform: scale(1.9); } }
@keyframes in-glow { to { opacity: 1; } }
@keyframes in-fade { to { opacity: 0; } }
@keyframes in-duomo { from { opacity: .25; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes in-logo { to { opacity: 1; transform: translate(-50%, -30%) scale(1); } }
@keyframes in-logo-out { from { opacity: 1; transform: translate(-50%, -30%) scale(1); } to { opacity: 0; transform: translate(-50%, -30%) scale(2.8); } }
@keyframes in-seam { to { opacity: 1; transform: scaleY(1); } }
@keyframes in-seam-out { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scale(5, 1.05); } }
/* dal portone che si apre esce un lampo di luce calda */
.intro-duomo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.15);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 236 190 / .95), rgb(255 190 70 / .45) 38%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.intro.is-go .intro-duomo::after { animation: in-burst .9s cubic-bezier(.3, .7, .4, 1) 2.12s both; }
@keyframes in-burst { 25% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@keyframes in-door-l { 65% { opacity: 1; } to { opacity: 0; transform: translateX(-34%) rotateY(70deg); } }
@keyframes in-door-r { 65% { opacity: 1; } to { opacity: 0; transform: translateX(34%) rotateY(-70deg); } }
/* durante l'intro la home aspetta: entra mentre il portone si apre */
html.intro-hold body[data-route="home"] :is(.hero-logo, .home-duomo, .sec-card, .info-banner, .wa-btn) { animation-play-state: paused !important; }

/* ---------- bordi di luce: un filo luminoso che gira lungo il bordo, nel colore della linea ---------- */
html[data-theme="fumetto"] .prices { position: relative; }
html[data-theme="fumetto"] :is(.entry-pic, .prices, .info-banner, .ttl-banner, .info-card)::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  width: auto;
  height: auto;
  padding: 1.5px;
  border-radius: inherit;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  background: conic-gradient(from var(--ga),
    transparent 0deg 190deg,
    color-mix(in srgb, var(--gcol, var(--ttl, rgb(var(--c1)))), transparent 100%) 190deg,
    var(--gcol, var(--ttl, rgb(var(--c1)))) 300deg,
    #fff 322deg,
    var(--gcol, var(--ttl, rgb(var(--c1)))) 336deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ga-spin 7s linear infinite;
}
html[data-theme="fumetto"] .info-banner::after { --gcol: var(--info-l, #28be3c); padding: 2px; animation-duration: 5s; }
html[data-theme="fumetto"] body[data-route="info"] .ttl-banner::after,
html[data-theme="fumetto"] .info-card::after { --gcol: var(--info-l, #28be3c); }
html[data-theme="fumetto"] .prices::after { animation-delay: -3.5s; }
/* fuori schermo i bordi si fermano */
html.js-rv[data-theme="fumetto"] .entry:not(.is-vis) :is(.entry-pic, .prices)::after,
html.js-rv[data-theme="fumetto"] .info-stop:not(.is-vis) .info-card::after,
html.js-rv[data-theme="fumetto"] .info-banner:not(.is-vis)::after,
html.js-rv[data-theme="fumetto"] .page-head:not(.is-vis) .ttl-banner::after { animation-play-state: paused; }

/* ---------- home ---------- */
/* il logo respira: l'alone d'oro dietro si accende e si spegne piano */
html[data-theme="fumetto"] .hero-logo::before { animation: logo-halo 5s ease-in-out infinite alternate; }
@keyframes logo-halo { from { opacity: .32; transform: scale(.94); } to { opacity: .62; transform: scale(1.04); } }
/* le due grafiche: un riflesso di luce le attraversa ogni tanto (solo dentro la forma della grafica) */
html[data-theme="fumetto"] .sec-card.is-art .art-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--art) 0 0 / 100% 100% no-repeat;
  mask: var(--art) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / .45) 48%, rgb(255 255 255 / .1) 54%, transparent 62%) 120% 0 / 300% 100% no-repeat;
  animation: sheen 6.5s var(--expo) infinite 1.4s;
  transition: transform .5s var(--expo);
}
html[data-theme="fumetto"] .sec-card.is-art:nth-child(2) .art-pic::after { animation-delay: 2.3s; }
@keyframes sheen { 0% { background-position: 120% 0; } 24%, 100% { background-position: -20% 0; } }
html[data-theme="fumetto"] .sec-card.is-art:active .art,
html[data-theme="fumetto"] .sec-card.is-art:active .art-pic::after { transform: scale(.965); }
@media (hover: hover) {
  html[data-theme="fumetto"] .sec-card.is-art:hover .art,
  html[data-theme="fumetto"] .sec-card.is-art:hover .art-pic::after { transform: translateY(-4px) scale(1.02); }
}
html[data-theme="fumetto"] .info-banner { transition: transform .45s var(--expo); }
html[data-theme="fumetto"] .info-banner:active { transform: scale(.97); }

/* contatti: assistenza e Instagram affiancati, ognuno con un alone del suo colore che respira */
html[data-theme="fumetto"] .contact-row { display: flex; justify-content: center; align-items: flex-start; gap: 38px; }
html[data-theme="fumetto"] .wa-btn { position: relative; isolation: isolate; min-width: 64px; }
html[data-theme="fumetto"] .wa-ico::before {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo, rgb(255 194 14 / .55)), transparent);
  animation: halo 3.6s ease-in-out infinite alternate;
  pointer-events: none;
}
html[data-theme="fumetto"] .ig-btn .wa-ico::before { --halo: rgb(225 48 108 / .6); animation-delay: -1.8s; }
@keyframes halo { from { opacity: .2; transform: scale(.84); } to { opacity: .55; transform: scale(1.06); } }
html[data-theme="fumetto"] .wa-icon { transition: transform .45s var(--expo); }
html[data-theme="fumetto"] .wa-btn:active .wa-icon { transform: scale(.9); }
@media (hover: hover) { html[data-theme="fumetto"] .wa-btn:hover .wa-icon { transform: translateY(-3px) scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="fumetto"] body[data-route="home"] .ig-btn { animation-delay: .42s; }
}

/* ---------- pagine sezione: titolo al centro, voci al centro (i prezzi restano a righe) ---------- */
html[data-theme="fumetto"] .page-head { text-align: center; }
html[data-theme="fumetto"] .ttl-banner { padding: 15px 28px 13px; text-align: center; }
html[data-theme="fumetto"] .ttl-banner .page-title { text-align: center; }
html[data-theme="fumetto"] .entry-body { text-align: center; }
html[data-theme="fumetto"] .entry-ttl { overflow: hidden; padding-bottom: 2px; }
html[data-theme="fumetto"] .entry-ttl .entry-title { text-align: center; }
html[data-theme="fumetto"] .entry-desc { text-align: center; max-width: 36ch; margin-inline: auto; }
html[data-theme="fumetto"] .prices { text-align: left; }

/* comparse: il titolo si apre dal centro e la scritta sale dentro la targa; le foto si aprono
   a maschera, il nome sale, poi descrizione e prezzi riga per riga */
html.js-rv[data-theme="fumetto"] .ttl-banner { clip-path: inset(0 50% 0 50% round 999px); transition: clip-path .9s var(--expo); }
html.js-rv[data-theme="fumetto"] .page-head.is-in .ttl-banner { clip-path: inset(-60px round 999px); }
html.js-rv[data-theme="fumetto"] .ttl-banner .page-title { transform: translateY(110%); transition: transform .8s var(--expo) .16s; }
html.js-rv[data-theme="fumetto"] .page-head.is-in .ttl-banner .page-title { transform: none; }

html.js-rv[data-theme="fumetto"] .entry .entry-pic { clip-path: inset(9% 7% round 20px); transition: clip-path 1s var(--expo); }
html.js-rv[data-theme="fumetto"] .entry.is-in .entry-pic { clip-path: inset(-60px round 20px); }
html.js-rv[data-theme="fumetto"] .entry .entry-pic .img { transition: opacity .6s ease, transform 1.4s var(--expo); }
html.js-rv[data-theme="fumetto"] .entry:not(.is-in) .entry-pic .img { transform: scale(1.14); }
html.js-rv[data-theme="fumetto"] .entry .entry-title { transform: translateY(110%); transition: transform .8s var(--expo) .12s; }
html.js-rv[data-theme="fumetto"] .entry.is-in .entry-title { transform: none; }
html.js-rv[data-theme="fumetto"] .entry :is(.entry-desc, .prices) { opacity: 0; transform: translateY(12px); transition: opacity .6s ease .22s, transform .9s var(--expo) .22s; }
html.js-rv[data-theme="fumetto"] .entry .prices { transition-delay: .3s; }
html.js-rv[data-theme="fumetto"] .entry.is-in :is(.entry-desc, .prices) { opacity: 1; transform: none; }
html.js-rv[data-theme="fumetto"] .entry .price-row { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .8s var(--expo); transition-delay: .4s; }
html.js-rv[data-theme="fumetto"] .entry .price-row:nth-child(2) { transition-delay: .46s; }
html.js-rv[data-theme="fumetto"] .entry .price-row:nth-child(3) { transition-delay: .52s; }
html.js-rv[data-theme="fumetto"] .entry .price-row:nth-child(4) { transition-delay: .58s; }
html.js-rv[data-theme="fumetto"] .entry .price-row:nth-child(n+5) { transition-delay: .64s; }
html.js-rv[data-theme="fumetto"] .entry.is-in .price-row { opacity: 1; transform: none; }
/* nello studio tutto resta visibile mentre si scrive */
body.editing .entry :is(.entry-pic, .entry-title, .entry-desc, .prices, .price-row),
body.editing .ttl-banner,
body.editing .ttl-banner .page-title { clip-path: none !important; transform: none !important; opacity: 1 !important; }

/* ---------- INFO: la linea della metro, da Milano Duomo a casa tua ---------- */
html[data-theme="fumetto"] .info-body { padding: 4px 20px 48px; }
.info-route { position: relative; max-width: 340px; margin: 0 auto; }
/* il binario */
.info-route::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  bottom: 16px;
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--info-l, #28be3c), color-mix(in oklab, var(--info-r, #3b6fe0), var(--info-l, #28be3c) 40%));
  box-shadow: 0 0 16px color-mix(in srgb, var(--info-l, #28be3c), transparent 45%);
}
/* il treno di luce che lo percorre */
.info-train { position: absolute; left: 50%; top: 16px; bottom: 16px; width: 14px; margin-left: -7px; overflow: hidden; border-radius: 7px; z-index: 1; pointer-events: none; }
.info-train i { position: absolute; left: 0; right: 0; top: 0; height: 100%; animation: train 4.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.info-train i::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: -52px;
  height: 52px;
  border-radius: 6px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--info-l, #28be3c), #fff 40%) 70%, #fff);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--info-l, #28be3c), transparent 25%);
}
@keyframes train { from { transform: translateY(0); } 82%, to { transform: translateY(calc(100% + 52px)); } }
.info-stops { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.info-term { display: flex; justify-content: center; }
.info-sign {
  display: inline-block;
  padding: 9px 16px 8px;
  border-radius: 10px;
  background: #0b0b0d;
  border: 1.5px solid var(--info-l, #28be3c);
  box-shadow: 0 0 22px -6px var(--info-l, #28be3c);
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .03em;
  color: #fff;
}
.info-stop { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.info-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b2b31, #0c0c0e 70%);
  border: 2px solid var(--info-l, #28be3c);
  box-shadow: 0 0 24px -4px var(--info-l, #28be3c), inset 0 1px 0 rgb(255 255 255 / .18);
  color: #fff;
}
.info-node svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* la fermata manda un segnale: un anello che si allarga */
.info-node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--info-l, #28be3c);
  animation: ping 3s var(--expo) infinite;
  animation-delay: calc(var(--k, 1) * .55s);
  pointer-events: none;
}
@keyframes ping { from { opacity: .7; transform: scale(1); } 70%, to { opacity: 0; transform: scale(1.75); } }
.info-card {
  position: relative;
  margin: 0;
  max-width: 300px;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(rgb(11 11 13 / .93), rgb(11 11 13 / .93)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--info-l, #28be3c), transparent 30%), rgb(255 255 255 / .08) 45%, color-mix(in srgb, var(--info-r, #3b6fe0), transparent 50%)) border-box;
  box-shadow: 0 18px 34px -20px #000, 0 0 26px -12px var(--info-l, #28be3c);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #eef1fa;
  text-wrap: balance;
}
.info-card b { font-family: var(--f-d); font-stretch: 112%; font-weight: 800; color: color-mix(in oklab, var(--info-l, #28be3c), #fff 22%); white-space: nowrap; }
/* fermate che si accendono arrivando sullo schermo */
html.js-rv .info-term { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .9s var(--expo); }
html.js-rv .info-term.is-in { opacity: 1; transform: none; }
html.js-rv .info-stop .info-node { opacity: 0; transform: scale(.5); transition: opacity .4s ease, transform .8s var(--expo); }
html.js-rv .info-stop .info-card { clip-path: inset(0 50% 0 50% round 18px); transition: clip-path .9s var(--expo) .12s; }
html.js-rv .info-stop.is-in .info-node { opacity: 1; transform: none; }
html.js-rv .info-stop.is-in .info-card { clip-path: inset(-60px round 18px); }
/* il testo vero si modifica nello studio; sul sito si vede la linea */
body:not(.editing) .info-route ~ .info-text { display: none; }
body.editing .info-route { display: none; }

@media (prefers-reduced-motion: reduce) {
  .info-train, .info-node::after { display: none; }
  html[data-theme="fumetto"] :is(.entry-pic, .prices, .info-banner, .ttl-banner, .info-card)::after,
  html[data-theme="fumetto"] .sec-card.is-art .art-pic::after,
  html[data-theme="fumetto"] .wa-ico::before,
  html[data-theme="fumetto"] .hero-logo::before { animation: none; }
}

/* ============================================================
   v13 (27/10) — "ORO E NERO": i colori del sito sono il giallo del logo e il nero/grafite.
   Sfondo vivo (luci d'oro che si muovono lente, fasci di luce, il nome gigante che scorre),
   dentro le sezioni le stesse luci prendono il colore della sezione. INFO con la sfumatura
   regolabile dallo studio (direzione, morbidezza, punto di mezzo), contatti con glow,
   titolo in home nello stile del logo, card che tremano piano, prezzi col costo al pezzo,
   mascotte della sezione che respira dietro il titolo. Movimento expo-out, mai rimbalzi.
   ============================================================ */
html[data-theme="fumetto"] {
  --gold: #ffc20e;
  --gold-hi: #ffe27a;
  --gold-lo: #b97f06;
  --amb: 255 194 14;
  --amb-hi: 255 226 122;
  --outer: #000;
  background: #000;
  overflow-x: clip;
  scrollbar-width: none;
}
html[data-theme="fumetto"]::-webkit-scrollbar,
html[data-theme="fumetto"] body::-webkit-scrollbar { display: none; }
html[data-theme="fumetto"] body { overflow-x: clip; touch-action: pan-y; background: #000; }
@media (min-width: 520px) { html[data-theme="fumetto"] { background: radial-gradient(70% 90% at 50% 40%, #17150e, #000) fixed; } }
/* dentro le sezioni le luci prendono il colore della sezione */
html[data-theme="fumetto"] body[data-route="section"] { --amb: var(--c2, 255 194 14); --amb-hi: var(--c1, 255 226 122); }

/* ---------- sfondo vivo ---------- */
.amb { display: none; }
html[data-theme="fumetto"] .amb {
  display: block;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 0;
  width: min(100%, var(--col));
  height: 100lvh;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
/* tre luci morbide che girano piano (solo transform: leggere anche sul telefono) */
.amb-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--amb) / .5), rgb(var(--amb) / .14) 45%, transparent 72%);
  mix-blend-mode: screen;
  will-change: transform;
}
.amb-1 { width: 130%; aspect-ratio: 1; left: -55%; top: -22%; opacity: .55; animation: amb-a 22s ease-in-out infinite alternate; }
.amb-2 { width: 110%; aspect-ratio: 1; right: -60%; top: 30%; opacity: .32; animation: amb-b 27s ease-in-out infinite alternate; }
.amb-3 { width: 120%; aspect-ratio: 1; left: -10%; bottom: -55%; opacity: .4; background: radial-gradient(closest-side, rgb(var(--amb-hi) / .32), transparent 70%); animation: amb-c 31s ease-in-out infinite alternate; }
@keyframes amb-a { to { transform: translate(38%, 16%) scale(1.15); } }
@keyframes amb-b { to { transform: translate(-42%, -18%) scale(.88); } }
@keyframes amb-c { to { transform: translate(-18%, -30%) scale(1.2); } }
/* fasci di luce dall'alto, come i fari di un palco, che oscillano lenti */
.amb-beam {
  position: absolute;
  top: -20%;
  width: 34%;
  height: 120%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgb(var(--amb-hi) / .2), rgb(var(--amb) / .06) 48%, transparent 78%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mix-blend-mode: screen;
}
.amb-beam-1 { left: 4%; animation: beam 13s ease-in-out infinite alternate; --r0: -24deg; --r1: -8deg; }
.amb-beam-2 { left: 62%; animation: beam 17s ease-in-out infinite alternate -6s; --r0: 22deg; --r1: 6deg; opacity: .8; }
.amb-beam-3 { left: 33%; width: 22%; animation: beam 21s ease-in-out infinite alternate -11s; --r0: -6deg; --r1: 9deg; opacity: .55; }
@keyframes beam { from { transform: rotate(var(--r0)); } to { transform: rotate(var(--r1)); } }
/* il nome del negozio gigante, solo contorno, che scorre in diagonale */
.amb-words { position: absolute; inset: -10% -40%; display: flex; flex-direction: column; justify-content: space-around; transform: rotate(-12deg); }
.amb-row {
  display: flex;
  width: max-content;
  margin: 0;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: 104px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.4px rgb(var(--amb) / .13);
  animation: words 70s linear infinite;
}
.amb-row span { padding-right: .4em; }
.amb-row-2 { animation-direction: reverse; animation-duration: 86s; -webkit-text-stroke-color: rgb(var(--amb) / .08); }
.amb-row-3 { animation-duration: 98s; }
@keyframes words { to { transform: translateX(-50%); } }
html[data-theme="fumetto"][data-texture="liscio"] .amb-words { display: none; }
/* le trame dello studio restano, ma più leggere sotto le luci */
html[data-theme="fumetto"] .scene .sky::before { opacity: .1; }
html[data-theme="fumetto"][data-texture="retino"] .scene .sky::before { opacity: .8; }
html[data-theme="fumetto"] .scene .sky::after {
  background:
    radial-gradient(130% 80% at 50% 40%, transparent 46%, rgb(0 0 0 / .7) 100%),
    linear-gradient(180deg, transparent 60%, rgb(0 0 0 / .55));
}
/* sfondo di partenza della home: grafite in alto che diventa nero pieno, luce d'oro dietro al logo */
html[data-theme="fumetto"] {
  --sky:
    radial-gradient(80% 32% at 50% 12%, color-mix(in srgb, var(--bg-glow, #ffc20e), transparent 80%), transparent 74%),
    linear-gradient(180deg, var(--bg-top, #1c1a17) 0%, color-mix(in srgb, var(--bg-top, #1c1a17), var(--bg-bot, #000) 70%) 34%, var(--bg-bot, #000) 66%, var(--bg-bot, #000) 100%);
}

/* ---------- titolo in home, nello stile del logo: oro, contorno scuro, un po' storto ---------- */
.home-title-wrap { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; padding: 0 8px; margin: 0 0 -2px; }
.home-title {
  display: inline-block;
  max-width: 100%;
  font-family: "Luckiest Guy", "Bangers", Impact, sans-serif;
  font-size: clamp(30px, 9.4vw, 42px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(180deg, #fff3b8 0%, var(--gold-hi) 30%, var(--gold) 58%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(1.6px 0 0 #2b1b02) drop-shadow(-1.6px 0 0 #2b1b02)
    drop-shadow(0 1.6px 0 #2b1b02) drop-shadow(0 -1.6px 0 #2b1b02)
    drop-shadow(0 4px 0 #160d00)
    drop-shadow(0 0 18px rgb(255 194 14 / .45));
  transform: rotate(-3deg);
}
/* un riflesso di luce passa sulle lettere ogni tanto (primo strato dello sfondo delle lettere) */
.home-title {
  background:
    linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .9) 50%, transparent 58%) 140% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, #fff3b8 0%, var(--gold-hi) 30%, var(--gold) 58%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-sheen 5.5s var(--expo) infinite 2.4s;
}
@keyframes title-sheen { 0% { background-position: 140% 0, 0 0; } 30%, 100% { background-position: -40% 0, 0 0; } }
body.editing .home-title { -webkit-text-fill-color: var(--gold); filter: none; }
body.editing .home-title:empty::before { content: attr(data-ph); opacity: .5; }

/* ---------- le due card: un leggero tremolio ogni tanto, sfasato tra le due ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="fumetto"] .sec-card.is-art .art-pic { transform-origin: 50% 88%; animation: card-shake 5.2s ease-in-out infinite 1.8s; }
  html[data-theme="fumetto"] .sec-card.is-art:nth-child(2) .art-pic { animation-delay: 4.4s; }
}
@keyframes card-shake {
  0%, 70%, 100% { transform: rotate(0); }
  73% { transform: rotate(-2.4deg) translateY(-2px); }
  76% { transform: rotate(2.1deg) translateY(-2px); }
  79% { transform: rotate(-1.6deg) translateY(-1px); }
  82% { transform: rotate(1.1deg); }
  85% { transform: rotate(-.5deg); }
  88% { transform: rotate(0); }
}
html[data-theme="fumetto"] .home-menu .sec-grid::before { opacity: .7; }

/* ---------- INFO in home: sfumatura dallo studio, bordo d'oro, icona ---------- */
html[data-theme="fumetto"] .info-banner {
  height: 62px;
  border-radius: 18px;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgb(255 226 122 / .42),
    inset 0 1px 0 rgb(255 255 255 / .55),
    0 0 26px -6px rgb(255 194 14 / .55),
    0 18px 30px -16px rgb(0 0 0 / .9);
}
html[data-theme="fumetto"] .info-green {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .24) 0%, rgb(255 255 255 / .05) 46%, transparent 52%),
    var(--info-grad, linear-gradient(180deg, #ffc20e 10%, #000 90%));
}
.info-in { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 10px; }
html[data-theme="fumetto"] .info-label {
  font-size: 23px;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 1px 0 rgb(0 0 0 / .55), 0 2px 12px rgb(0 0 0 / .55), 0 0 18px rgb(255 226 122 / .45);
}
.i-badge { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; }
.i-badge svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)) drop-shadow(0 0 6px rgb(255 226 122 / .7)); }
.i-badge .i-dot { fill: #fff; stroke: none; }
html[data-theme="fumetto"] .info-banner:active { transform: scale(.97); }

/* ---------- contatti: loghi e scritte con glow ---------- */
html[data-theme="fumetto"] .wa-btn { --glow: 255 194 14; }
html[data-theme="fumetto"] .ig-btn { --glow: 255 72 150; }
html[data-theme="fumetto"] .wa-icon {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 6px rgb(var(--glow) / .75)) drop-shadow(0 0 18px rgb(var(--glow) / .45)) drop-shadow(0 8px 12px rgb(0 0 0 / .5));
}
html[data-theme="fumetto"] .wa-ico::before { --halo: rgb(255 194 14 / .5); }
html[data-theme="fumetto"] .wa-label {
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 0 8px rgb(var(--glow) / .85), 0 0 22px rgb(var(--glow) / .5);
}

/* ---------- freccia indietro: vetro scuro con anello d'oro (nelle sezioni del loro colore) ---------- */
html[data-theme="fumetto"] .top-back {
  color: rgb(var(--amb-hi));
  border: 1px solid rgb(var(--amb) / .55);
  background: radial-gradient(circle at 50% 30%, rgb(var(--amb) / .22), rgb(0 0 0 / .55) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 0 18px -4px rgb(var(--amb) / .7), 0 10px 22px -12px #000;
  transition: transform .4s var(--expo);
}
html[data-theme="fumetto"] .top-back:active { transform: scale(.9); }

/* ---------- titolo delle sezioni: vetro con bordo del colore della sezione ---------- */
html[data-theme="fumetto"] .page-head { position: relative; }
html[data-theme="fumetto"] .ttl-banner {
  z-index: 2;
  border-color: rgb(var(--amb-hi) / .35);
  background:
    linear-gradient(180deg, rgb(var(--amb) / .26), rgb(var(--amb) / .06) 60%),
    linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .5),
    inset 0 -10px 22px -12px rgb(var(--amb) / .55),
    0 0 0 1px rgb(0 0 0 / .3),
    0 0 46px -10px rgb(var(--amb) / .8),
    0 22px 36px -18px #000;
}
html[data-theme="fumetto"] body[data-route="info"] .ttl-banner { --amb: 255 194 14; --amb-hi: 255 226 122; background: linear-gradient(180deg, rgb(255 194 14 / .26), rgb(255 194 14 / .05) 60%), linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); }
/* INFO: la "i" dentro il titolo, in un cartello rotondo che pulsa piano */
.ttl-info { display: inline-flex !important; align-items: center; justify-content: center; gap: 14px; }
.ttl-info .i-badge { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ffe27a, #ffc20e 45%, #8a5c00); box-shadow: 0 0 0 2px rgb(0 0 0 / .5), 0 0 22px rgb(255 194 14 / .7); animation: badge-pulse 2.8s ease-in-out infinite; }
.ttl-info .i-badge svg { width: 30px; height: 30px; stroke: #1a1100; filter: none; }
.ttl-info .i-badge .i-dot { fill: #1a1100; }
@keyframes badge-pulse { 50% { box-shadow: 0 0 0 2px rgb(0 0 0 / .5), 0 0 34px 4px rgb(255 194 14 / .85); } }

/* ---------- mascotte della sezione: spunta da dietro il titolo e respira ---------- */
html[data-theme="fumetto"] .page-head.has-mascot { padding-top: 132px; }
.sec-mascot {
  position: absolute;
  left: 50%;
  bottom: calc(20px + 34px);
  z-index: 1;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  display: grid;
  align-items: end;
  justify-items: center;
  pointer-events: none;
}
.mascot-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 18px rgb(var(--amb) / .55)) drop-shadow(0 10px 14px rgb(0 0 0 / .5));
  animation: mascot-breathe 3.8s ease-in-out infinite;
}
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(0); }
  30% { transform: translateY(-4px) scale(1.012, 1.035) rotate(-1.4deg); }
  60% { transform: translateY(-2px) scale(1.006, 1.02) rotate(1.1deg); }
}
html.js-rv[data-theme="fumetto"] .page-head .sec-mascot { opacity: 0; transform: translateY(40px); transition: opacity .6s ease .35s, transform 1.1s var(--expo) .35s; }
html.js-rv[data-theme="fumetto"] .page-head.is-in .sec-mascot { opacity: 1; transform: none; }
body.editing .sec-mascot { pointer-events: auto; opacity: 1 !important; transform: none !important; }
body.editing .page-head .sec-mascot:not(:has(img)) { border: 1.5px dashed rgb(255 255 255 / .35); border-radius: 18px; height: 110px; }
body.editing .page-head:not(.has-mascot) { padding-top: 132px; }

/* ---------- prezzi: scheda più curata, numeri a sfumatura, costo al pezzo ---------- */
html[data-theme="fumetto"] .prices {
  border-radius: 22px;
  background:
    radial-gradient(130% 80% at 50% -10%, rgb(var(--amb) / .24), transparent 70%) padding-box,
    linear-gradient(rgb(10 10 12 / .9), rgb(10 10 12 / .9)) padding-box,
    linear-gradient(160deg, rgb(var(--amb-hi) / .85), rgb(255 255 255 / .1) 36%, rgb(255 255 255 / .04) 66%, rgb(var(--amb) / .7)) border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .16),
    0 0 30px -8px rgb(var(--amb) / .5),
    0 26px 44px -28px #000;
  overflow: hidden;
}
html[data-theme="fumetto"] .prices-box { padding: 4px 18px; }
html[data-theme="fumetto"] .price-row {
  position: relative;
  align-items: center;
  padding: 15px 0 14px;
  border-bottom: 0;
  font-size: 15px;
  font-weight: 600;
  color: rgb(255 255 255 / .82);
}
/* divisorio che sfuma ai lati */
html[data-theme="fumetto"] .price-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--amb-hi) / .35) 18%, rgb(255 255 255 / .12) 60%, transparent);
}
html[data-theme="fumetto"] .price-row span::before {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 35%, #fff, rgb(var(--amb-hi)) 45%, rgb(var(--amb)));
  box-shadow: 0 0 10px rgb(var(--amb) / .9);
}
html[data-theme="fumetto"] .price-row b {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #fff 30%, rgb(var(--amb-hi)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgb(var(--amb) / .35));
}
.price-each {
  font-family: var(--f-b);
  font-stretch: 100%;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-text-fill-color: rgb(255 255 255 / .55);
}
/* l'ultima riga (il pacchetto più grande) ha una fascia di luce leggera */
html[data-theme="fumetto"] .price-row:last-child:not(:first-child) {
  margin: 0 -18px;
  padding-inline: 18px;
  background: radial-gradient(75% 50% at 0% 50%, rgb(var(--amb) / .22), transparent);
}

/* ---------- foto delle voci: angoli più morbidi e luce del colore della sezione ---------- */
html[data-theme="fumetto"] .entry-pic { border-radius: 22px; box-shadow: 0 0 34px -10px rgb(var(--amb) / .6), 0 26px 40px -26px #000, inset 0 1px 0 rgb(255 255 255 / .12); }

/* ---------- entrata della home: ogni pezzo ha il suo movimento, tutti expo-out ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="fumetto"] body[data-route="home"] .hero-logo { animation: in-logo-home 1.2s var(--expo) both; }
  html[data-theme="fumetto"] body[data-route="home"] .home-title-wrap { animation: in-title 1s var(--expo) .18s both; }
  html[data-theme="fumetto"] body[data-route="home"] .sec-card { animation: in-card 1.1s var(--expo) both; }
  html[data-theme="fumetto"] body[data-route="home"] .sec-card:nth-child(1) { animation-delay: .3s; --rz: -7deg; }
  html[data-theme="fumetto"] body[data-route="home"] .sec-card:nth-child(2) { animation-delay: .38s; --rz: 7deg; }
  html[data-theme="fumetto"] body[data-route="home"] .info-banner { animation: in-wipe .9s var(--expo) .5s both; }
  html[data-theme="fumetto"] body[data-route="home"] .wa-btn { animation: in-up .8s var(--expo) .62s both; }
  html[data-theme="fumetto"] body[data-route="home"] .ig-btn { animation-delay: .7s; }
  html.intro-hold body[data-route="home"] .home-title-wrap { animation-play-state: paused !important; }
}
@keyframes in-logo-home { from { opacity: 0; transform: scale(.82); filter: blur(10px); } }
@keyframes in-title { from { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(10px); } to { clip-path: inset(-30px -30px -30px -30px); } }
@keyframes in-card { from { opacity: 0; transform: translateY(46px) rotate(var(--rz, 0deg)) scale(.92); } }
@keyframes in-wipe { from { opacity: 0; clip-path: inset(0 50% 0 50% round 18px); } to { opacity: 1; clip-path: inset(-40px round 18px); } }
@keyframes in-up { from { opacity: 0; transform: translateY(16px); } }

/* ---------- intro: tagli sfumati ---------- */
/* il Duomo intero resta sotto finché il portone non si apre: niente riga al centro */
.intro-whole { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro.is-go .intro-whole { animation: in-fade .18s linear 2.06s forwards; }
/* le due ante hanno il bordo centrale sfumato, così l'apertura è morbida come luce nella nebbia */
.intro-door-l { clip-path: none; -webkit-mask: linear-gradient(90deg, #000 0 41%, transparent 55%); mask: linear-gradient(90deg, #000 0 41%, transparent 55%); }
.intro-door-r { clip-path: none; -webkit-mask: linear-gradient(90deg, transparent 45%, #000 59%); mask: linear-gradient(90deg, transparent 45%, #000 59%); }
/* il Duomo sfuma nel buio anche in basso e ai lati */
.intro-duomo { -webkit-mask: radial-gradient(75% 85% at 50% 40%, #000 62%, transparent 100%); mask: radial-gradient(75% 85% at 50% 40%, #000 62%, transparent 100%); }
.intro-seam { width: 3px; margin-left: -1.5px; filter: blur(.6px); box-shadow: 0 0 18px 6px rgb(255 200 90 / .7), 0 0 70px 26px rgb(255 170 40 / .3); }
/* lampo più largo e morbido, e la fine dell'intro si scioglie nel sito invece di tagliare */
.intro-duomo::after { width: 170%; background: radial-gradient(closest-side, rgb(255 240 205 / .95), rgb(255 196 80 / .5) 34%, rgb(255 160 40 / .14) 58%, transparent 76%); }
@keyframes in-logo-out { from { opacity: 1; transform: translate(-50%, -30%) scale(1); filter: blur(0); } to { opacity: 0; transform: translate(-50%, -30%) scale(2.6); filter: blur(14px); } }
html.intro-on .intro.is-go { animation: intro-safety 0s linear 7s forwards, in-bg 1.1s ease 2.25s forwards; }
html.intro-on .intro.is-out { opacity: 0; transition: opacity .5s ease; }
html.intro-on .intro { contain: strict; }

@media (prefers-reduced-motion: reduce) {
  .amb-blob, .amb-beam, .amb-row, .home-title, .mascot-img, .ttl-info .i-badge { animation: none !important; }
}

/* fermate INFO: scheda piena, il binario non si vede attraverso */
.info-card { background: linear-gradient(#0b0b0d, #0b0b0d) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--info-l, #ffc20e), transparent 30%), rgb(255 255 255 / .08) 45%, color-mix(in srgb, var(--info-r, #000), transparent 50%)) border-box; }

/* ============================================================
   v14 (27/10) — 16 sfondi animati a scelta (data-bg sullo strato .amb, scelti nello studio),
   titolo dritto con le lettere che si muovono ognuna per conto suo, card che fluttuano
   sempre, Duomo più su (cursore), mascotte che in modifica non sposta più la pagina.
   Tutti gli sfondi usano --amb / --amb-hi: oro in home, il colore della sezione dentro.
   ============================================================ */

/* ---------- card: fluttuano piano, sempre, da subito, sfasate ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="fumetto"] .sec-card.is-art .art-pic { transform-origin: 50% 60%; animation: card-float 4.4s ease-in-out -1.2s infinite alternate; }
  html[data-theme="fumetto"] .sec-card.is-art:nth-child(2) .art-pic { animation-duration: 5s; animation-delay: -3.4s; }
}
@keyframes card-float { from { transform: translateY(-3px) rotate(-.9deg); } to { transform: translateY(3px) rotate(.9deg); } }

/* ---------- titolo: dritto, ogni lettera si muove un po' (posizione e rotazione a caso) ---------- */
.home-title { transform: none; }
.home-title.is-split { background: none; animation: none; -webkit-text-fill-color: initial; }
.home-title .ch {
  display: inline-block;
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .95) 50%, transparent 62%) 160% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #fff3b8 0%, var(--gold-hi) 30%, var(--gold) 58%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-title .ch-sp { display: inline-block; width: .32em; }
@media (prefers-reduced-motion: no-preference) {
  .home-title .ch {
    animation:
      ch-wob var(--t, 2s) ease-in-out calc(var(--i) * -.41s) infinite alternate,
      ch-sheen 5.5s var(--expo) calc(2.4s + var(--i) * .05s) infinite;
  }
}
@keyframes ch-wob {
  from { transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) rotate(calc(var(--dr) * -1)); }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); }
}
@keyframes ch-sheen { 0% { background-position: 160% 0, 0 0; } 30%, 100% { background-position: -60% 0, 0 0; } }

/* ---------- Duomo in home più su (cursore dello studio, --dy in px), il logo resta davanti ---------- */
html[data-theme="fumetto"] .hero { z-index: 2; }
html[data-theme="fumetto"] .home-duomo { translate: 0 calc(var(--dy, 90) * -1px); }

/* ---------- mascotte in modifica: senza PNG resta solo il bottone, la pagina non si sposta ---------- */
body.editing .page-head:not(.has-mascot) { padding-top: 66px; }
body.editing .page-head .sec-mascot:not(:has(img)) { height: 40px; border: 0; }

/* ============================================================
   SFONDI ANIMATI — ogni stile accende solo i pezzi che gli servono
   ============================================================ */
.amb > .amb-blob, .amb > .amb-beam, .amb > .amb-words, .amb > .amb-fx, .amb > .amb-dots { display: none; }
.amb-fx, .amb-dots { position: absolute; inset: 0; }
.amb-fx::before, .amb-fx::after { content: ""; position: absolute; pointer-events: none; }
.amb-dots i { position: absolute; left: var(--x); top: var(--y); display: block; }

/* 1 · Luci d'oro: luci che girano, fari, il nome che scorre */
.amb[data-bg="luci"] > .amb-blob, .amb[data-bg="luci"] > .amb-beam { display: block; }
.amb[data-bg="luci"] > .amb-words { display: flex; }

/* 2 · Fari: fasci di luce forti che spazzano la scena, come un palco */
.amb[data-bg="fari"] > .amb-beam, .amb[data-bg="fari"] > .amb-3 { display: block; }
.amb[data-bg="fari"] > .amb-beam { width: 46%; opacity: 1; background: linear-gradient(180deg, rgb(var(--amb-hi) / .42), rgb(var(--amb) / .12) 55%, transparent 88%); }
.amb[data-bg="fari"] > .amb-beam-1 { --r0: -40deg; --r1: 14deg; animation-duration: 7s; }
.amb[data-bg="fari"] > .amb-beam-2 { --r0: 38deg; --r1: -12deg; animation-duration: 9s; }
.amb[data-bg="fari"] > .amb-beam-3 { --r0: -18deg; --r1: 22deg; animation-duration: 11s; }

/* 3 · Scritte: il nome gigante, tre file che scorrono in versi opposti */
.amb[data-bg="scritte"] > .amb-words { display: flex; transform: rotate(-12deg) scale(1.25); }
.amb[data-bg="scritte"] .amb-row { -webkit-text-stroke: 1.6px rgb(var(--amb) / .26); animation-duration: 40s; }
.amb[data-bg="scritte"] .amb-row-2 { color: rgb(var(--amb) / .07); -webkit-text-stroke-color: rgb(var(--amb) / .14); animation-duration: 52s; }
.amb[data-bg="scritte"] .amb-row-3 { animation-duration: 60s; }

/* 4 · Aurora: grandi veli di luce che si mescolano */
.amb[data-bg="aurora"] > .amb-blob, .amb[data-bg="aurora"] > .amb-fx { display: block; }
.amb[data-bg="aurora"] > .amb-1 { opacity: .95; animation-duration: 12s; }
.amb[data-bg="aurora"] > .amb-2 { opacity: .7; animation-duration: 15s; }
.amb[data-bg="aurora"] > .amb-3 { opacity: .85; animation-duration: 17s; }
.amb[data-bg="aurora"] .amb-fx::before {
  left: 50%; top: 35%; width: 220%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent, rgb(var(--amb) / .22), transparent 30%, rgb(var(--amb-hi) / .16), transparent 62%, rgb(var(--amb) / .2), transparent);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent);
  mask: radial-gradient(closest-side, #000 20%, transparent);
  animation: amb-spin 40s linear infinite;
  mix-blend-mode: screen;
}

/* 5 · Griglia: pavimento luminoso in prospettiva che viene verso di te */
.amb[data-bg="griglia"] > .amb-fx, .amb[data-bg="griglia"] > .amb-1 { display: block; }
.amb[data-bg="griglia"] > .amb-1 { opacity: .35; }
.amb[data-bg="griglia"] .amb-fx::before {
  left: -60%; right: -60%; bottom: -8%; height: 62%;
  background:
    repeating-linear-gradient(90deg, rgb(var(--amb) / .45) 0 1.5px, transparent 1.5px 56px),
    repeating-linear-gradient(0deg, rgb(var(--amb) / .45) 0 1.5px, transparent 1.5px 56px);
  transform: perspective(320px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(180deg, transparent, #000 45%);
  mask: linear-gradient(180deg, transparent, #000 45%);
  animation: grid-run 1.8s linear infinite;
}
.amb[data-bg="griglia"] .amb-fx::after { left: 0; right: 0; top: 30%; height: 30%; background: radial-gradient(60% 50% at 50% 100%, rgb(var(--amb) / .35), transparent 70%); }
@keyframes grid-run { to { background-position: 0 56px, 0 56px; } }

/* 6 · Pioggia d'oro: righe di luce che cadono */
.amb[data-bg="pioggia"] > .amb-dots, .amb[data-bg="pioggia"] > .amb-1 { display: block; }
.amb[data-bg="pioggia"] > .amb-1 { opacity: .3; }
.amb[data-bg="pioggia"] .amb-dots i {
  top: -16%;
  width: 2px;
  height: calc(70px * var(--s));
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgb(var(--amb-hi) / .85));
  box-shadow: 0 0 8px rgb(var(--amb) / .6);
  animation: rain calc(var(--t) * .55) linear var(--d) infinite;
}
@keyframes rain { from { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(1150px); opacity: .2; } }

/* 7 · Glitter: brillantini che si accendono e spengono */
.amb[data-bg="glitter"] > .amb-dots, .amb[data-bg="glitter"] > .amb-1, .amb[data-bg="glitter"] > .amb-3 { display: block; }
.amb[data-bg="glitter"] > .amb-1 { opacity: .4; }
.amb[data-bg="glitter"] .amb-dots i {
  width: calc(14px * var(--s));
  aspect-ratio: 1;
  background:
    linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%),
    radial-gradient(circle, #fff 0, rgb(var(--amb-hi)) 18%, transparent 46%);
  filter: drop-shadow(0 0 6px rgb(var(--amb) / .9));
  opacity: 0;
  animation: twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* 8 · Raggi: raggi di luce che girano piano dietro al logo */
.amb[data-bg="raggi"] > .amb-fx, .amb[data-bg="raggi"] > .amb-1 { display: block; }
.amb[data-bg="raggi"] > .amb-1 { opacity: .45; }
.amb[data-bg="raggi"] .amb-fx::before {
  left: 50%; top: 24%; width: 300%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg, rgb(var(--amb) / .2) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%);
  mask: radial-gradient(closest-side, #000 10%, transparent 70%);
  animation: amb-spin 70s linear infinite;
}
@keyframes amb-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 9 · Strisce: fasce diagonali che scorrono, tipo nastro di cantiere in oro */
.amb[data-bg="strisce"] > .amb-fx, .amb[data-bg="strisce"] > .amb-1 { display: block; }
.amb[data-bg="strisce"] > .amb-1 { opacity: .3; }
.amb[data-bg="strisce"] .amb-fx::before {
  inset: -30% -60%;
  background: repeating-linear-gradient(-45deg, rgb(var(--amb) / .12) 0 26px, transparent 26px 64px);
  -webkit-mask: radial-gradient(90% 70% at 50% 60%, #000 20%, transparent 80%);
  mask: radial-gradient(90% 70% at 50% 60%, #000 20%, transparent 80%);
  animation: stripes 5s linear infinite;
}
@keyframes stripes { to { transform: translateX(90.5px); } }

/* 10 · Fumo: fumo vero filmato (Pexels 9694807, loop senza stacco), tinto del colore del sito */
.amb-smoke { display: none; }
.amb[data-bg="fumo"] > .amb-smoke { display: block; position: absolute; inset: 0; isolation: isolate; mix-blend-mode: screen; opacity: .9; }
.amb[data-bg="fumo"] > .amb-1 { display: block; opacity: .35; }
.amb-smoke video { width: 100%; height: 100%; object-fit: cover; }
/* il fumo è bianco su nero: moltiplicato per il colore diventa oro (verde/blu nelle sezioni) */
.amb-smoke::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--amb-hi)), rgb(var(--amb))); mix-blend-mode: multiply; }

/* 11 · Onde: linee che ondeggiano e scorrono */
.amb[data-bg="onde"] > .amb-fx, .amb[data-bg="onde"] > .amb-1 { display: block; }
.amb[data-bg="onde"] > .amb-1 { opacity: .35; }
.amb[data-bg="onde"] .amb-fx::before,
.amb[data-bg="onde"] .amb-fx::after {
  top: 0; bottom: 0; left: 0; width: calc(100% + 240px);
  background: rgb(var(--amb) / .3);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='46'%3E%3Cpath d='M0 23 C40 3 80 3 120 23 S200 43 240 23' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 0 / 240px 46px repeat;
  mask: var(--wave) 0 0 / 240px 46px repeat;
  animation: wave 9s linear infinite;
}
.amb[data-bg="onde"] .amb-fx::after { top: 23px; background: rgb(var(--amb-hi) / .14); animation-duration: 14s; animation-direction: reverse; }
@keyframes wave { to { transform: translateX(-240px); } }

/* 12 · Tunnel: anelli di luce che escono dal centro */
@property --ro { syntax: "<length>"; inherits: false; initial-value: 0px; }
.amb[data-bg="tunnel"] > .amb-fx, .amb[data-bg="tunnel"] > .amb-1 { display: block; }
.amb[data-bg="tunnel"] > .amb-1 { opacity: .3; }
.amb[data-bg="tunnel"] .amb-fx::before {
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 38%, rgb(var(--amb) / .26) var(--ro), rgb(var(--amb) / .26) calc(var(--ro) + 2px), transparent calc(var(--ro) + 2px), transparent calc(var(--ro) + 44px));
  -webkit-mask: radial-gradient(circle at 50% 38%, transparent 6%, #000 30%, transparent 85%);
  mask: radial-gradient(circle at 50% 38%, transparent 6%, #000 30%, transparent 85%);
  animation: tunnel 2.4s linear infinite;
}
@keyframes tunnel { to { --ro: 44px; } }

/* 13 · Metro: le linee della metro di Milano con i treni di luce che corrono */
.amb[data-bg="metro"] > .amb-fx, .amb[data-bg="metro"] > .amb-dots, .amb[data-bg="metro"] > .amb-1 { display: block; }
.amb[data-bg="metro"] > .amb-1 { opacity: .3; }
.amb[data-bg="metro"] > .amb-fx, .amb[data-bg="metro"] > .amb-dots { inset: -20% -40%; transform: rotate(-16deg); }
.amb[data-bg="metro"] .amb-fx::before {
  inset: 0;
  background:
    linear-gradient(rgb(228 0 43 / .35), rgb(228 0 43 / .35)) 0 22% / 100% 3px no-repeat,
    linear-gradient(rgb(0 166 80 / .35), rgb(0 166 80 / .35)) 0 42% / 100% 3px no-repeat,
    linear-gradient(rgb(255 205 0 / .4), rgb(255 205 0 / .4)) 0 62% / 100% 3px no-repeat,
    linear-gradient(rgb(158 112 193 / .35), rgb(158 112 193 / .35)) 0 82% / 100% 3px no-repeat;
}
.amb[data-bg="metro"] .amb-dots i { left: 0; width: 46px; height: 5px; border-radius: 4px; margin-top: -1px; --c: 228 0 43; top: 22%; background: rgb(var(--c)); box-shadow: 0 0 12px 2px rgb(var(--c) / .8); animation: train-run calc(var(--t) * 1.2) linear var(--d) infinite; }
.amb[data-bg="metro"] .amb-dots i:nth-child(4n+2) { --c: 0 166 80; top: 42%; }
.amb[data-bg="metro"] .amb-dots i:nth-child(4n+3) { --c: 255 205 0; top: 62%; }
.amb[data-bg="metro"] .amb-dots i:nth-child(4n+4) { --c: 158 112 193; top: 82%; }
.amb[data-bg="metro"] .amb-dots i:nth-child(n+9) { display: none; }
@keyframes train-run { from { transform: translateX(-60px); } to { transform: translateX(900px); } }

/* 14 · Monogramma: il passamontagna tono su tono che scorre in diagonale */
.amb[data-bg="monogramma"] > .amb-fx, .amb[data-bg="monogramma"] > .amb-1 { display: block; }
.amb[data-bg="monogramma"] > .amb-1 { opacity: .4; }
.amb[data-bg="monogramma"] .amb-fx::before {
  inset: -360px;
  background: rgb(var(--amb-hi) / .2);
  -webkit-mask: var(--pat) 0 0 / 180px 180px repeat;
  mask: var(--pat) 0 0 / 180px 180px repeat;
  animation: pat-drift 40s linear infinite;
}

/* 15 · Retino pop: puntini da fumetto che respirano */
.amb[data-bg="retino"] > .amb-fx, .amb[data-bg="retino"] > .amb-1 { display: block; }
.amb[data-bg="retino"] > .amb-1 { opacity: .4; }
.amb[data-bg="retino"] .amb-fx::before {
  inset: -10%;
  background: radial-gradient(circle, rgb(var(--amb) / .5) 30%, transparent 34%) 0 0 / 13px 13px;
  -webkit-mask: radial-gradient(70% 55% at 50% 30%, #000, transparent 75%);
  mask: radial-gradient(70% 55% at 50% 30%, #000, transparent 75%);
  animation: dots-breathe 6s ease-in-out infinite alternate;
}
.amb[data-bg="retino"] .amb-fx::after {
  inset: -10%;
  background: radial-gradient(circle, rgb(var(--amb-hi) / .3) 30%, transparent 34%) 6.5px 6.5px / 13px 13px;
  -webkit-mask: radial-gradient(60% 40% at 50% 92%, #000, transparent 75%);
  mask: radial-gradient(60% 40% at 50% 92%, #000, transparent 75%);
  animation: dots-breathe 7s ease-in-out -3s infinite alternate;
}
@keyframes dots-breathe { from { transform: scale(1); opacity: .7; } to { transform: scale(1.12); opacity: 1; } }

/* 16 · Liscio: solo la sfumatura e una luce morbida */
.amb[data-bg="liscio"] > .amb-1 { display: block; opacity: .35; }

/* anteprime nello studio: lo stesso strato, rimpicciolito dentro la tessera */
html[data-theme="fumetto"] .amb.amb-prev {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 520px;
  transform: scale(.1846);
  transform-origin: 0 0;
  background: var(--sky);
  contain: strict;
}

@media (prefers-reduced-motion: reduce) {
  .amb *, .amb *::before, .amb *::after, .home-title .ch { animation: none !important; }
}

.home-title .ch-w { display: inline-block; white-space: nowrap; }
.home-title .ch-sp { width: .28em; }
/* sfondi più leggibili */
.amb[data-bg="aurora"] > .amb-blob { background: radial-gradient(closest-side, rgb(var(--amb) / .75), rgb(var(--amb) / .2) 45%, transparent 72%); }
.amb[data-bg="fari"] > .amb-beam { background: linear-gradient(180deg, rgb(var(--amb-hi) / .55), rgb(var(--amb) / .16) 55%, transparent 90%); }
.amb[data-bg="griglia"] .amb-fx::before { height: 75%; background: repeating-linear-gradient(90deg, rgb(var(--amb) / .7) 0 2px, transparent 2px 56px), repeating-linear-gradient(0deg, rgb(var(--amb) / .7) 0 2px, transparent 2px 56px); }
.amb[data-bg="onde"] .amb-fx::before { background: rgb(var(--amb) / .5); }
.amb[data-bg="onde"] .amb-fx::after { background: rgb(var(--amb-hi) / .28); }
.amb[data-bg="tunnel"] .amb-fx::before { background: repeating-radial-gradient(circle at 50% 38%, rgb(var(--amb) / .5) var(--ro), rgb(var(--amb) / .5) calc(var(--ro) + 2.5px), transparent calc(var(--ro) + 2.5px), transparent calc(var(--ro) + 44px)); }
.amb[data-bg="strisce"] .amb-fx::before { background: repeating-linear-gradient(-45deg, rgb(var(--amb) / .2) 0 26px, transparent 26px 64px); }
.amb[data-bg="monogramma"] .amb-fx::before { background: rgb(var(--amb-hi) / .32); }
.home-title { font-size: clamp(26px, 8.4vw, 38px); letter-spacing: .02em; }

/* lo sfondo (sfumatura) sta nello strato animato, così le luci e il fumo si fondono davvero con lui;
   la scena sopra tiene solo trama, vignettatura e Duomo */
html[data-theme="fumetto"] .amb { background: var(--sky); contain: layout paint; }
html[data-theme="fumetto"] .scene { z-index: 1; background: transparent; }

/* nebulosa giallo/nera dietro al logo, che gira piano e respira, con un alone */
.logo-neb { position: absolute; inset: -42%; z-index: -2; pointer-events: none; }
.logo-neb::before, .logo-neb::after { content: ""; position: absolute; inset: 0; }
.logo-neb::before { background: url("/assets/nebula.webp?v=2") center / contain no-repeat; animation: neb-spin 120s linear infinite, neb-breathe 7s ease-in-out infinite alternate; }
.logo-neb::after { inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 210 80 / .38), rgb(255 170 20 / .12) 55%, transparent); animation: neb-glow 4.5s ease-in-out infinite alternate; }
@keyframes neb-spin { to { rotate: 360deg; } }
@keyframes neb-breathe { from { scale: .96; opacity: .82; } to { scale: 1.05; opacity: 1; } }
@keyframes neb-glow { from { opacity: .55; scale: .94; } to { opacity: 1; scale: 1.06; } }
html[data-theme="fumetto"] .hero-logo::before { opacity: .25; }
/* logo un filo più piccolo */
html[data-theme="fumetto"] .hero-logo { width: min(calc(240px * var(--ls, 1)), calc(100vw - 56px)); }
@media (prefers-reduced-motion: reduce) { .logo-neb::before, .logo-neb::after { animation: none; } }

/* ============================================================
   v15 (27/10) — fumo lento, nebulosa sfumata, bordo di luce gialla su logo e card,
   disegno nel banner INFO (furgone che porta il pacco), Duomo sempre davanti al fumo
   ============================================================ */
/* nebulosa: bordi molto sfumati, più morbida */
.logo-neb::before { -webkit-mask: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / .5) 62%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / .5) 62%, transparent 100%); filter: blur(1.5px); opacity: .85; }
/* logo: bordo di luce gialla */
html[data-theme="fumetto"] .hero-logo-img {
  filter:
    drop-shadow(0 0 1.5px rgb(255 226 110 / .95))
    drop-shadow(0 0 8px rgb(255 194 14 / .85))
    drop-shadow(0 0 26px rgb(255 194 14 / .5))
    drop-shadow(0 12px 18px rgb(0 0 0 / .55));
}
/* le due card: stesso bordo di luce gialla */
html[data-theme="fumetto"] .sec-card.is-art .art {
  filter:
    drop-shadow(0 0 1.5px rgb(255 226 110 / .95))
    drop-shadow(0 0 9px rgb(255 194 14 / .75))
    drop-shadow(0 0 24px rgb(255 194 14 / .4))
    drop-shadow(0 18px 22px rgb(0 0 0 / .45));
}
/* banner INFO: furgone a sinistra, pacco a destra, la strada che scorre sotto */
.info-ic { flex: 0 0 auto; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .7)) drop-shadow(0 0 6px rgb(255 226 122 / .6)); }
.info-truck { width: 38px; height: 27px; }
.info-box { width: 26px; height: 26px; }
.info-speed { stroke-width: 1.6; opacity: .8; }
.info-road {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  z-index: 4;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 12px, transparent 12px 22px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
html[data-theme="fumetto"] .info-in { gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .info-road { animation: road 1.1s linear infinite; }
  .info-truck { animation: truck-bob .5s ease-in-out infinite alternate; }
  .info-speed { animation: speed .8s ease-in-out infinite alternate; }
  .info-box { animation: box-float 2.6s ease-in-out infinite alternate; }
}
@keyframes road { to { background-position: -22px 0; } }
@keyframes truck-bob { from { transform: translateY(0); } to { transform: translateY(-1.3px); } }
@keyframes speed { from { opacity: .25; transform: translateX(1px); } to { opacity: .9; transform: translateX(-1px); } }
@keyframes box-float { from { transform: translateY(1px) rotate(-4deg); } to { transform: translateY(-2px) rotate(4deg); } }

/* mascotte: piccola, dietro al titolo, spunta solo la parte alta (sotto resta nascosta dalla pillola) */
html[data-theme="fumetto"] .page-head.has-mascot { padding-top: 104px; }
.sec-mascot { width: 112px; height: 112px; margin-left: -56px; bottom: 62px; z-index: 1; }

/* ============================================================
   v16 (27/10) — intro pulita, banner INFO col percorso Duomo -> casa tua, mascotte regolabile
   (grandezza/altezza) che non sposta il titolo, e sito più leggero sul telefono:
   via i bordi che girano (ridisegno a ogni fotogramma), via la sfocatura dietro ai titoli,
   via i riflessi che ridisegnavano le card, filtri pesanti solo su livelli fermi (will-change),
   fumo già colorato nel video (una sola fusione invece di due).
   ============================================================ */

/* ---------- intro: niente ritaglio sul Duomo (era il "rettangolo") ---------- */
.intro-duomo { -webkit-mask: none; mask: none; }

/* ---------- leggerezza ---------- */
html[data-theme="fumetto"] :is(.entry-pic, .prices, .info-banner, .info-card)::after { display: none !important; animation: none !important; }
html[data-theme="fumetto"] .ttl-banner::after { display: none !important; animation: none !important; }
html[data-theme="fumetto"] :is(.ttl-banner, .top-back) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="fumetto"] .ttl-banner {
  background:
    linear-gradient(180deg, rgb(var(--amb) / .3), rgb(var(--amb) / .08) 60%),
    linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)),
    rgb(8 9 12 / .72);
}
html[data-theme="fumetto"] .top-back { background: radial-gradient(circle at 50% 30%, rgb(var(--amb) / .26), rgb(0 0 0 / .78) 70%); }
html[data-theme="fumetto"] .sec-card.is-art .art-pic::after { display: none; animation: none; }
/* livelli che si muovono: il filtro si disegna una volta sola e poi si sposta il livello */
html[data-theme="fumetto"] :is(.hero-logo-img, .sec-card.is-art .art-pic, .home-title .ch, .mascot-img) { will-change: transform; }
.logo-neb::before { filter: none; will-change: transform; }
/* titolo: il contorno sta su ogni lettera (prima il filtro del titolo si ridisegnava a ogni movimento) */
.home-title.is-split { filter: none; }
.home-title .ch {
  filter:
    drop-shadow(1.4px 0 0 #2b1b02) drop-shadow(-1.4px 0 0 #2b1b02)
    drop-shadow(0 1.4px 0 #2b1b02) drop-shadow(0 -1.4px 0 #2b1b02)
    drop-shadow(0 3px 0 #160d00)
    drop-shadow(0 0 12px rgb(255 194 14 / .4));
}
@media (prefers-reduced-motion: no-preference) {
  .home-title .ch { animation: ch-wob var(--t, 2s) ease-in-out calc(var(--i) * -.41s) infinite alternate; }
}
/* fumo: video già dorato, una sola fusione; nelle sezioni gira di tinta verso il loro colore */
.amb-smoke::after { display: none; }
.amb[data-bg="fumo"] > .amb-smoke { isolation: auto; mix-blend-mode: normal; opacity: 1; }
.amb[data-bg="fumo"] > .amb-1 { display: none; }
.amb-smoke video { mix-blend-mode: screen; opacity: .95; }
body[data-route="section"] .amb-smoke video { filter: hue-rotate(var(--hr, 0deg)) saturate(1.2); }
/* luci dello sfondo: niente will-change inutili */
.amb-blob { will-change: auto; }

/* ---------- banner INFO: il percorso da Milano Duomo a casa tua, col furgone che lo fa ---------- */
html[data-theme="fumetto"] .info-banner { height: 78px; }
html[data-theme="fumetto"] .info-in { position: absolute; left: 0; right: 0; top: 9px; justify-content: center; }
html[data-theme="fumetto"] .info-label { font-size: 22px; }
.irm {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.irm-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.irm-stop i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 32%, #ffc20e 36% 100%);
  box-shadow: 0 0 0 2px rgb(0 0 0 / .55), 0 0 10px rgb(255 214 90 / .9);
}
.irm-stop b { font: 800 8px/1 var(--f-d, sans-serif); font-stretch: 125%; letter-spacing: .08em; color: rgb(255 255 255 / .85); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.irm-line { position: relative; flex: 1 1 auto; height: 3px; margin-bottom: 10px; border-radius: 3px; background: rgb(255 255 255 / .22); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .4); }
.irm-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #fff3b8, #ffc20e); box-shadow: 0 0 10px rgb(255 194 14 / .9); transform-origin: 0 50%; transform: scaleX(0); }
.irm-truck { position: absolute; left: 0; top: 50%; width: 100%; height: 0; }
.irm-truck .info-ic { position: absolute; left: 0; top: -21px; width: 30px; height: 21px; margin-left: -15px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .8)) drop-shadow(0 0 6px rgb(255 226 122 / .8)); }
@media (prefers-reduced-motion: no-preference) {
  .irm-fill { animation: irm-fill 3.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .irm-truck { animation: irm-drive 3.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .irm-truck .info-ic { animation: truck-bob .28s ease-in-out infinite alternate; }
  .irm-b i { animation: irm-arrive 3.6s ease-out infinite; }
}
@keyframes irm-fill { 0% { transform: scaleX(0); opacity: 1; } 78% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes irm-drive { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 78% { transform: translateX(100%); opacity: 1; } 90%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes irm-arrive { 0%, 74% { box-shadow: 0 0 0 2px rgb(0 0 0 / .55), 0 0 10px rgb(255 214 90 / .9); } 82% { box-shadow: 0 0 0 2px rgb(0 0 0 / .55), 0 0 0 7px rgb(255 214 90 / .35), 0 0 22px rgb(255 214 90 / 1); } 100% { box-shadow: 0 0 0 2px rgb(0 0 0 / .55), 0 0 10px rgb(255 214 90 / .9); } }
/* il vecchio disegno (strada tratteggiata e icone ai lati) non c'è più */
.info-road, .info-in .info-ic { display: none; }

/* ---------- mascotte: grandezza (--ms) e altezza (--my) dallo studio, la pagina non si sposta ---------- */
html[data-theme="fumetto"] .page-head.has-mascot { padding-top: 66px; }
.sec-mascot {
  width: calc(104px * var(--ms, 1));
  height: calc(104px * var(--ms, 1));
  margin-left: calc(-52px * var(--ms, 1));
  bottom: calc(66px + var(--my, 0px));
}

/* leggerezza 2: titolo con contorno vero del testo (niente filtri), meno animazioni secondarie */
.home-title .ch {
  filter: none;
  background: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  -webkit-text-stroke: 3px #2b1b02;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #160d00, 0 0 14px rgb(255 194 14 / .45);
}
html[data-theme="fumetto"] .hero-logo::before { animation: none; opacity: .35; }
html[data-theme="fumetto"] .wa-ico::before { animation: none; opacity: .4; }
.logo-neb::before { animation: neb-spin 160s linear infinite; }
.logo-neb::after { animation: none; }
/* banner INFO: la linea collega i due pallini, le scritte stanno sotto */
.irm { left: 22px; right: 22px; bottom: 22px; gap: 0; }
.irm-stop { width: 11px; }
.irm-stop b { position: absolute; top: 15px; }
.irm-a b { left: -6px; }
.irm-b b { right: -6px; }
.irm-line { margin: 0 4px; }

/* ============================================================
   v17 (27/10) — banner INFO in vetro liquido con le icone tipiche delle info
   (spedizione, pagamento, tempi, consegna a casa). La sfumatura dello studio resta come tinta del vetro.
   ============================================================ */
html[data-theme="fumetto"] .info-banner {
  height: 66px;
  border-radius: 999px;
  isolation: isolate;
  background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .04) 52%, rgb(255 255 255 / .1));
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / .75),
    inset 0 -1px 0 rgb(255 255 255 / .25),
    inset 0 0 0 1px rgb(255 255 255 / .22),
    inset 0 -14px 24px -14px rgb(255 194 14 / .7),
    inset 0 10px 18px -12px rgb(255 255 255 / .45),
    0 0 30px -8px rgb(255 194 14 / .6),
    0 18px 30px -16px rgb(0 0 0 / .85);
}
/* la sfumatura scelta nello studio tinge il vetro (non lo copre) */
html[data-theme="fumetto"] .info-green { opacity: .5; background: var(--info-grad, linear-gradient(180deg, #ffc20e, #000)); }
/* riflesso curvo in alto, come sul vetro vero */
html[data-theme="fumetto"] .info-banner .gloss {
  display: block;
  position: absolute;
  z-index: 3;
  left: 7%;
  right: 7%;
  top: 3px;
  width: auto;
  height: 46%;
  border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0));
  pointer-events: none;
}
html[data-theme="fumetto"] .info-banner .spark { display: none; }
/* scritta e icone in fila, al centro */
html[data-theme="fumetto"] .info-in { position: relative; inset: auto; top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.info-icons { display: inline-flex; gap: 10px; }
.ig {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(255 255 255 / .32), rgb(255 255 255 / .06));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 0 0 1px rgb(255 255 255 / .25), 0 4px 10px -4px rgb(0 0 0 / .6);
}
.ig svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
@media (prefers-reduced-motion: no-preference) {
  .ig { animation: ig-float 3.2s ease-in-out infinite alternate; }
  .ig:nth-child(2) { animation-delay: -1.6s; }
  .info-icons:last-child .ig { animation-delay: -.8s; }
  .info-icons:last-child .ig:nth-child(2) { animation-delay: -2.4s; }
}
@keyframes ig-float { from { transform: translateY(1.5px); } to { transform: translateY(-1.5px); } }
html[data-theme="fumetto"] .info-label { font-size: 22px; text-shadow: 0 1px 0 rgb(0 0 0 / .5), 0 2px 10px rgb(0 0 0 / .5); }
/* INFO più giallo: la tinta del vetro quasi piena e un velo d'oro in più */
html[data-theme="fumetto"] .info-green { opacity: .9; }
html[data-theme="fumetto"] .info-banner { background: linear-gradient(180deg, rgb(255 226 110 / .45), rgb(255 194 14 / .18) 55%, rgb(255 194 14 / .3)); box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .8), inset 0 -1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 236 160 / .45), inset 0 -14px 24px -14px rgb(255 194 14 / .9), inset 0 10px 18px -12px rgb(255 255 255 / .5), 0 0 34px -6px rgb(255 194 14 / .75), 0 18px 30px -16px rgb(0 0 0 / .85); }
/* la metà bassa non va più nel nero: velo ambra sopra la sfumatura */
html[data-theme="fumetto"] .info-blu { display: block; left: 0; right: 0; z-index: -1; background: linear-gradient(180deg, rgb(255 210 60 / .25) 0%, rgb(255 180 10 / .55) 55%, rgb(214 140 0 / .75) 100%); }

/* copertina caricata con proporzioni diverse (es. PNG quadrato): resta intera e dritta, appoggiata in basso, mai stirata */
.sec-card.is-art .art { object-fit: contain; object-position: 50% 100%; }

/* INFO in home: giallo chiarissimo -> giallo chiaro, scritta e icone nere */
html[data-theme="fumetto"] .info-banner {
  background: linear-gradient(180deg, #fffbe0 0%, #fff3a8 50%, #ffe46b 100%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / .9),
    inset 0 0 0 1px rgb(255 255 255 / .55),
    inset 0 -10px 20px -14px rgb(214 160 0 / .55),
    0 0 30px -8px rgb(255 214 70 / .7),
    0 18px 30px -16px rgb(0 0 0 / .85);
}
html[data-theme="fumetto"] .info-green,
html[data-theme="fumetto"] .info-blu { display: none; }
html[data-theme="fumetto"] .info-banner .gloss { background: linear-gradient(180deg, rgb(255 255 255 / .7), rgb(255 255 255 / 0)); }
html[data-theme="fumetto"] .info-label { color: #000; text-shadow: none; }
html[data-theme="fumetto"] .info-banner .ig {
  background: linear-gradient(180deg, #fffce6 0%, #ffe880 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(0 0 0 / .14), 0 3px 8px -4px rgb(120 80 0 / .55);
}
html[data-theme="fumetto"] .info-banner .ig svg { stroke: #000; filter: none; }

/* grafiche delle sezioni in home: grandezza (--as) e altezza (--ay) dallo studio, crescono dalla base e non spostano la pagina */
.sec-card.is-art .art { transform-origin: 50% 100%; transform: translateY(calc(var(--ay, 0px) * -1)) scale(var(--as, 1)); }
@media (hover: hover) { .sec-card.is-art:hover .art { transform: translateY(calc(var(--ay, 0px) * -1)) scale(calc(var(--as, 1) * 1.05)) rotate(-2deg); } }
.sec-card.is-art:active .art { transform: translateY(calc(var(--ay, 0px) * -1)) scale(calc(var(--as, 1) * .95)); }

/* INFO in home: stesso giallo oro della scritta SKIMASK MILANO (var --gold), non più giallo pallido */
html[data-theme="fumetto"] .info-banner {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, #f0ad00 100%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / .7),
    inset 0 0 0 1px rgb(255 240 170 / .5),
    inset 0 -10px 18px -12px rgb(150 95 0 / .6),
    0 0 30px -8px rgb(255 194 14 / .75),
    0 18px 30px -16px rgb(0 0 0 / .85);
}
html[data-theme="fumetto"] .info-banner .gloss { background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0)); }
html[data-theme="fumetto"] .info-banner .ig {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), inset 0 0 0 1px rgb(0 0 0 / .16), 0 3px 8px -4px rgb(90 55 0 / .6);
}

/* ============================================================
   MODALITÀ LEGGERA (30/10) — telefoni lenti, risparmio dati o fps bassi (classe "lite" su <html>):
   restano le entrate, si fermano le animazioni continue decorative e il vetro sfocato diventa pieno
   ============================================================ */
html.lite .home-title .ch,
html.lite .logo-neb::before,
html.lite .logo-neb::after,
html.lite .scene .sky::before,
html.lite .ig,
html.lite .sec-card,
html.lite .sec-card *,
html.lite .hero-logo,
html.lite .hero-logo img { animation-iteration-count: 1 !important; }
html.lite .home-title .ch,
html.lite .logo-neb::before,
html.lite .logo-neb::after,
html.lite .scene .sky::before,
html.lite .ig { animation: none !important; }
html.lite .info-banner,
html.lite [class*="glass"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .amb-smoke img { width: 100%; height: 100%; object-fit: cover; }