/* Zanchetta Salone Uomo — "Verde e ottone"
   Verde bottiglia scuro delle barberie classiche, ottone delle targhe e del Figaro,
   cartoncini avorio per listini e testi lunghi. Titoli in Gloock, testo in Plus Jakarta Sans. */

@font-face { font-family: "Gloock"; src: url("assets/fonts/gloock.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/jakarta.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: dark;
  --green: #163029;
  --green-2: #1c3a32;
  --green-3: #0f241f;
  --green-line: rgba(196, 160, 98, .28);
  --brass: #c4a062;
  --brass-2: #e2c48c;
  --brass-ink: #6b4f22;
  --cream: #f1e8d6;
  --cream-2: #e8dcc2;
  --cream-text: rgba(241, 232, 214, .8);
  --paper: #f3ebdb;
  --ink: #2a221a;
  --ink-2: #4a3d30;
  --leather: #7a4a2a;
  --ok: #6fe39a;
  --display: "Gloock", "Libre Caslon Display", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 1160px;
  --radius: 6px;
  --shadow: 0 20px 40px -24px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--green); color: var(--cream); font: 400 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--brass-2); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--brass); color: var(--ink); padding: 10px 16px; border-radius: 6px; }
.skip:focus { left: 12px; }
.ico { flex: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; margin-inline: auto; }
.band { padding-block: clamp(64px, 9vw, 112px); background: var(--green); color: var(--cream); }
.band-alt { background: var(--green-2); }
.paper { background: var(--paper); color: var(--ink-2); }
.paper h2, .paper h3 { color: var(--ink); }

/* filetto con data: "— GOLOSINE · VERONA · 1959 —" */
.rule { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--brass); font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; margin: 0; }
.rule::before, .rule::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass)); }
.rule::after { transform: scaleX(-1); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); }
.section-head h2 { position: relative; padding-bottom: 22px; }
.section-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 80px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.section-head h2::before { content: "◆"; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 9px; color: var(--brass); line-height: 1; }
.lead { font-size: 1.15rem; color: var(--cream-text); margin: 20px 0 0; }
.paper .lead { color: var(--ink-2); }
.fine { font-size: .875rem; color: var(--cream-text); margin: 14px 0 0; }
.paper .fine, .price-card .fine, .booking-card .fine, .hours .fine, .appypro .fine { color: var(--ink-2); }

/* ---------- bottoni ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 24px; border-radius: 999px; border: 1px solid transparent; font: 700 .95rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(180deg, var(--brass-2), var(--brass)); color: #1c160c; box-shadow: 0 10px 24px -12px rgba(226, 196, 140, .7); }
.btn-primary:hover { background: linear-gradient(180deg, #ecd3a2, #cfad72); }
.btn-glass, .btn-outline { border-color: rgba(241, 232, 214, .45); color: var(--cream); background: transparent; }
.btn-glass:hover, .btn-outline:hover { border-color: var(--brass-2); color: var(--brass-2); }
.paper .btn-outline, .booking-card .btn-outline, .price-card .btn-outline { border-color: var(--leather); color: var(--leather); }
.paper .btn-outline:hover, .booking-card .btn-outline:hover { background: rgba(122, 74, 42, .08); }
.btn-soft { background: rgba(196, 160, 98, .14); color: var(--brass-2); border-color: var(--green-line); }
.btn-soft:hover { background: rgba(196, 160, 98, .24); }
.paper .btn-soft, .card .btn-soft, .booking-card .btn-soft, .appypro .btn-soft { background: rgba(122, 74, 42, .1); color: var(--leather); border-color: rgba(122, 74, 42, .25); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.btn-lg { min-height: 54px; padding: 14px 30px; font-size: 1.02rem; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; padding: 0; color: var(--brass-2); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- progresso e schiuma ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--brass), var(--brass-2)); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(22, 48, 41, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--green-line); padding-top: env(safe-area-inset-top, 0px); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-logo { position: relative; height: 42px; aspect-ratio: 900 / 557; display: block; }
.brand-logo img { position: absolute; inset: 0; height: 100%; width: auto; }
.brand-dark { display: none; }
.plain-brand > img { height: 42px; width: auto; }
.nav { display: none; gap: 26px; margin-left: auto; }
.nav a { color: var(--cream); text-decoration: none; font-size: .93rem; letter-spacing: .03em; padding: 8px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brass-2); }
.nav-lang { border: 1px solid var(--green-line); border-radius: 999px; padding: 4px 10px !important; font-size: .78rem !important; }
.nav-lang::after { display: none; }
.header-row .btn { margin-left: auto; }
@media (min-width: 1080px) { .nav { display: flex; } .header-row .btn { margin-left: 0; } }
.notice { background: var(--brass); color: #1c160c; text-align: center; font-weight: 700; font-size: .92rem; padding: 8px 20px; }

/* ---------- medaglione del Figaro ---------- */
.medal { position: relative; display: grid; place-items: center; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #24493f, #122823); box-shadow: 0 0 0 1.5px var(--brass), 0 0 0 6px var(--green), 0 0 0 7px rgba(196, 160, 98, .55), 0 24px 50px -20px #000; }
.medal img { position: absolute; inset: 9% 0; margin: auto; height: 82%; width: auto; max-width: none; }
.medal .fig-anim { position: absolute; inset: 9% 0; margin: auto; height: 82%; aspect-ratio: 598 / 1406; }
.fig-anim { display: block; position: relative; }
.fig-anim img, .medal .fig-anim img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none; }
.fig-hand { transform-origin: 66% 45.9%; }
.medal-sm { width: 48px; height: 48px; box-shadow: 0 0 0 1px var(--brass); }
.medal-hero { width: clamp(180px, 24vh, 240px); height: clamp(180px, 24vh, 240px); position: relative; z-index: 1; }
.medal-wrap { position: relative; display: inline-block; margin-bottom: 30px; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.rays { position: absolute; left: 50%; top: 50%; width: min(820px, 190vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(226, 196, 140, .13) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
.medal-page { width: 92px; height: 92px; margin-bottom: 18px; box-shadow: 0 0 0 1px var(--brass), 0 0 0 4px var(--green), 0 0 0 5px rgba(196, 160, 98, .5); }
.medal-foot { width: 86px; height: 86px; box-shadow: 0 0 0 1px var(--brass), 0 0 0 4px var(--green-3), 0 0 0 5px rgba(196, 160, 98, .5); }

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 28%, #25493f, transparent 70%), var(--green); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.hero-inner { position: relative; padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(64px, 8vw, 96px); display: flex; flex-direction: column; align-items: center; }
.hero-title { font-size: clamp(2.8rem, 7.6vw, 6.4rem); line-height: 1.02; margin: 20px 0 6px; color: var(--cream); max-width: 15ch; }
.hero-title .word { white-space: nowrap; }
.hero-title .ch { display: inline-block; }
.hero-tagline { font: 400 clamp(1.3rem, 2.6vw, 1.9rem)/1.3 var(--display); color: var(--brass-2); margin: 8px 0 8px; }
.hero-sub { font-size: 1.08rem; color: var(--cream-text); margin: 0 0 30px; max-width: 56ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; font-size: .9rem; }
.chip-live, .chip-plain { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--green-line); color: var(--brass-2); background: rgba(15, 36, 31, .45); }
.chip-plain { color: var(--cream-text); }
.chip-plain .ico { width: 16px; height: 16px; color: var(--brass); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0a092; flex: none; }
[data-state="open"] .live-dot { background: var(--ok); animation: ping 2s infinite; }
[data-state="pause"] .live-dot { background: var(--brass-2); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(111, 227, 154, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(111, 227, 154, 0); } }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0; font-size: .88rem; color: var(--cream-text); }
.hero-badge img { width: 30px; height: 30px; opacity: .85; }

/* pagine interne */
.page-hero { position: relative; background: radial-gradient(ellipse 60% 80% at 50% 0%, #25493f, transparent 70%), var(--green); text-align: center; border-bottom: 1px solid var(--green-line); }
.page-hero-inner { padding-top: 48px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); max-width: 20ch; color: var(--cream); }
.page-hero .hero-sub { margin: 16px auto 0; }
.page-hero .hero-chips { margin-top: 20px; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; }
.crumbs a { color: var(--brass-2); text-decoration: none; }

/* ---------- caratteristiche ---------- */
.features { background: var(--green-2); border-bottom: 1px solid var(--green-line); padding-block: 52px; }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
.feature { text-align: center; text-decoration: none; color: inherit; padding: 10px; border-radius: var(--radius); transition: background .2s; }
a.feature:hover { background: rgba(196, 160, 98, .08); }
.icon-circle { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-2); }
.feature h2 { font-size: 1.3rem; margin-bottom: 4px; color: var(--cream); }
.feature p { font-size: .9rem; color: var(--cream-text); margin: 0; }
@media (min-width: 900px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- cartoncini (listino, card) ---------- */
.price-card, .card, .booking-card, .appypro, .faq details, .hours, .remind, .extras { background: linear-gradient(160deg, #f6eedd, var(--cream-2)); color: var(--ink-2); border-radius: var(--radius); position: relative; box-shadow: var(--shadow); }
.price-card::before, .card::before, .booking-card::before, .hours::before, .remind::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(122, 74, 42, .3); border-radius: 3px; pointer-events: none; z-index: 1; }
.price-card h2, .price-card h3, .card h3, .card h2, .booking-card h2, .appypro h3, .hours th, .remind h2 { color: var(--ink); }
.price-cards { display: grid; gap: 22px; }
@media (min-width: 820px) { .price-cards { grid-template-columns: 1fr 1fr; } }
.price-card { padding: 30px 30px 22px; }
.price-card h2 { font-size: 2rem; }
.price-card h3 { font-size: 1.8rem; }
.card-sub { color: var(--leather); font-weight: 600; font-size: .9rem; margin: 4px 0 12px; }
.price-intro { font-size: .96rem; }
.svc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.svc { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 11px 0; border-top: 1px dotted rgba(42, 34, 26, .3); position: relative; z-index: 2; }
.svc-name { color: var(--ink); }
.svc-name small { display: block; color: var(--ink-2); font-size: .82rem; opacity: .8; }
.price-pill { font: 400 1.2rem var(--display); color: var(--leather); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-book { grid-column: 1 / -1; justify-self: start; font-size: .82rem; font-weight: 700; color: var(--leather); text-underline-offset: 3px; letter-spacing: .02em; }
@media (min-width: 640px) { .svc { grid-template-columns: 1fr auto auto; } .svc-book { grid-column: auto; padding-left: 10px; } }
.svc-en { grid-template-columns: 1fr auto !important; }
.extras { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; padding: 22px 28px; }
.extras-title { font: 400 1.4rem var(--display); color: var(--ink); margin-bottom: 8px; }
.extras ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.extras li { border: 1px solid rgba(122, 74, 42, .3); border-radius: 999px; padding: 4px 14px; font-size: .88rem; }
.extras .link { color: var(--leather); }
.more { text-align: center; margin: 34px 0 0; }

/* ---------- card con foto ---------- */
.card { overflow: hidden; }
.card::before { z-index: 3; }
.card-media { display: block; width: 100%; position: relative; overflow: hidden; border: 0; padding: 0; background: var(--green-3); cursor: zoom-in; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card-media img { transform: scale(1.04); }
.sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .25) 48%, transparent 66%); transform: translateX(-120%); transition: transform .9s; }
.card:hover .sheen { transform: translateX(120%); }
.card-body { padding: 24px 26px 28px; position: relative; z-index: 2; }
.card-title { font-size: 1.55rem; margin-bottom: 8px; color: var(--ink); }
.ticks { list-style: none; margin: 12px 0 18px; padding: 0; }
.ticks li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: .94rem; }
.ticks li::before { content: "◆"; position: absolute; left: 2px; top: .1em; font-size: .65rem; color: var(--brass-ink); }
.cards { display: grid; gap: 24px; }
@media (min-width: 760px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }
.cards-2 .card-media img { aspect-ratio: 3 / 2; }
.cards-4 .card-media img { aspect-ratio: 4 / 5; }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
details { border-top: 1px dotted rgba(42, 34, 26, .3); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 10px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.4rem/1 var(--display); color: var(--leather); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { font-size: .93rem; margin: 8px 0 0; }
.pdfs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.pdfs a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 4px; border: 1px solid rgba(122, 74, 42, .3); text-decoration: none; color: var(--ink); font-size: .9rem; font-weight: 500; transition: background .2s; }
.pdfs a:hover { background: rgba(122, 74, 42, .08); }
.pdfs .ico { width: 18px; height: 18px; color: var(--leather); }
.pdfs small { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--leather); letter-spacing: .06em; }
.pdfs li:first-child a { background: var(--green); border-color: var(--green); color: var(--cream); }
.pdfs li:first-child .ico, .pdfs li:first-child small { color: var(--brass-2); }

/* ---------- storia ---------- */
.signature { display: grid; gap: 44px; align-items: start; }
.sig-media { margin: 0; position: relative; }
.zoomable { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
/* ritratto di Angelo: sempre intero, in cornice d'ottone con passe-partout (mai ritagliato) */
.sig-media .zoomable, .portrait-frame { display: block; width: calc(100% - 26px); max-width: 420px; margin: 13px auto 0; padding: 22px; border-radius: 4px; background: #f8f2e6; box-shadow: 0 0 0 10px #a07c44, 0 0 0 11px #6b5030, 0 0 0 12px var(--brass-2), inset 0 0 0 1px rgba(122, 74, 42, .25), 0 30px 50px -24px rgba(0, 0, 0, .45); }
.sig-media .portrait { width: 100%; height: auto; display: block; box-shadow: 0 0 0 1px rgba(42, 34, 26, .35); }
.sig-media .sig-caption { margin-top: 30px; }
.sig-caption .cav { display: block; font: 600 .72rem var(--sans); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--leather); margin-bottom: 6px; }
.sig-caption .cav::before, .sig-caption .cav::after { content: "◆"; font-size: .6em; color: var(--brass); margin: 0 10px; vertical-align: .2em; }
.sig-caption { margin-top: 18px; font-size: .9rem; color: var(--ink-2); font-style: italic; text-align: center; }
.tag { display: inline-block; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--leather); margin-bottom: 14px; }
.sig-text h2 { margin-bottom: 20px; }
.badge-60 { float: right; width: 96px; margin: 0 0 12px 18px; }
@media (min-width: 640px) { .badge-60 { width: 128px; } }
.seal { display: flex; align-items: center; gap: 20px; margin: 28px 0 0; padding: 20px 22px; border: 1px solid rgba(122, 74, 42, .3); border-radius: var(--radius); background: rgba(255, 255, 255, .45); }
.seal .fig-anim { height: 180px; aspect-ratio: 598 / 1406; flex: none; }
.seal figcaption { font-size: .95rem; }
.seal b { display: block; font: 400 1.5rem var(--display); color: var(--ink); margin-bottom: 4px; }
.years { list-style: none; padding: 0; margin: 28px 0 0; border-left: 1px solid var(--leather); position: relative; }
.years li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 0 0 18px 20px; position: relative; }
.years li::before { content: "◆"; position: absolute; left: -6px; top: 3px; font-size: 11px; color: var(--leather); background: var(--paper); line-height: 1.2; }
.years b { font: 400 1.25rem var(--display); color: var(--leather); }
.years strong { color: var(--ink); font-weight: 700; }
.years span { font-size: .95rem; }
@media (min-width: 960px) { .signature { grid-template-columns: 5fr 6fr; gap: 72px; } .sig-media { position: sticky; top: 110px; } }
.paper .btn-outline { margin-top: 8px; }

/* ---------- riconoscimenti ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; max-width: 760px; margin: 0 auto 40px; }
.stats b { display: block; font: 400 clamp(2.6rem, 6vw, 4rem)/1 var(--display); color: var(--brass-2); font-variant-numeric: tabular-nums; }
.stats span { font-size: .9rem; color: var(--cream-text); }
.marquee { overflow: hidden; padding: 12px 0 24px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; width: max-content; animation: slide 50s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.tile { width: 220px; border-radius: 4px; overflow: hidden; padding: 8px; position: relative; background: linear-gradient(135deg, #8a6a3a, #5a4428 60%, #8a6a3a); box-shadow: var(--shadow); transition: transform .3s; }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tile-contain { background: var(--paper); }
.tile-contain img { object-fit: contain; padding: 14px; }
.tile:hover, .tile:focus-visible { transform: translateY(-6px); }
@keyframes slide { to { transform: translateX(calc(-50% - 10px)); } }
@media (min-width: 900px) { .tile { width: 250px; } }

/* ---------- prenota ---------- */
.booking-card { max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 50px); }
.booking-form { position: relative; z-index: 2; }
.booking-form h2 { text-align: center; }
.booking-form .lead { text-align: center; color: var(--ink-2); margin-bottom: 28px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > label, .label { font-weight: 700; color: var(--ink); font-size: .92rem; }
select { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid rgba(122, 74, 42, .4); border-radius: 4px; background: #fffaf0; font-size: 16px; color: var(--ink); color-scheme: light; }
select:focus { border-color: var(--leather); outline: none; box-shadow: 0 0 0 3px rgba(122, 74, 42, .2); }
.form-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1.4fr 1fr; } }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; flex: 1 1 100px; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 4px; border: 1px solid rgba(122, 74, 42, .4); background: #fffaf0; color: var(--ink); font-weight: 600; transition: all .2s; }
.seg input:checked + span { background: var(--green); border-color: var(--green); color: var(--brass-2); }
.seg input:focus-visible + span { outline: 3px solid var(--leather); outline-offset: 2px; }
.summary { border: 1px solid rgba(122, 74, 42, .3); border-radius: 4px; padding: 18px 20px; margin: 8px 0 22px; background: rgba(255, 255, 255, .5); }
.summary p { margin: 0; color: var(--ink); }
.sum-price { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dotted rgba(42, 34, 26, .3); margin-top: 12px !important; padding-top: 12px; }
.sum-price b { font: 400 2.1rem var(--display); color: var(--leather); font-variant-numeric: tabular-nums; }
.booking-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.booking-card .btn-primary { background: var(--green); color: var(--brass-2); box-shadow: none; }
.booking-card .btn-primary:hover { background: var(--green-2); }
.booking-form .fine { text-align: center; }
.appypro { max-width: 820px; margin: 26px auto 0; display: grid; gap: 22px; align-items: center; padding: 26px; }
.appypro-qr { display: none; }
.appypro-qr img { width: 150px; border-radius: 4px; border: 1px solid rgba(122, 74, 42, .3); }
.appypro-text p { margin: 8px 0 16px; }
.appypro-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.appypro .btn-primary { background: var(--green); color: var(--brass-2); box-shadow: none; }
@media (min-width: 760px) { .appypro { grid-template-columns: auto 1fr; padding: 30px 34px; } .appypro-qr { display: block; } }
.cta-band { text-align: center; }
.cta-band .booking-ctas { margin-top: 22px; }

/* ---------- orari e mappa ---------- */
.visit { display: grid; gap: 24px; }
@media (min-width: 960px) { .visit { grid-template-columns: 1fr 1fr; align-items: start; } }
.hours { padding: 18px 26px 24px; }
.hours table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; position: relative; z-index: 2; }
.hours th, .hours td { text-align: left; padding: 13px 8px; border-bottom: 1px dotted rgba(42, 34, 26, .3); vertical-align: top; color: var(--ink); }
.hours thead th { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--leather); font-weight: 700; }
.hours tbody th { font: 400 1.15rem var(--display); }
.hours td.off { color: var(--ink-2); font-style: italic; opacity: .75; }
.hours tr.today { background: rgba(122, 74, 42, .08); }
.hours tr.today th::after { content: "oggi"; margin-left: 8px; font: 700 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-2); background: var(--green); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.hours .fine { position: relative; z-index: 2; }
.where { display: grid; gap: 18px; }
.map { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--green-line); background: var(--green-3); }
.map iframe { width: 100%; height: 100%; border: 0; }
.map-load { width: 100%; height: 100%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; color: var(--cream);
  background: radial-gradient(circle at 50% 45%, rgba(196, 160, 98, .14), transparent 65%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(196, 160, 98, .12) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(196, 160, 98, .12) 31px 32px), var(--green-3); }
.map-load .ico { width: 34px; height: 34px; color: var(--brass); }
.map-load span { font: 400 1.5rem var(--display); }
.map-load small { color: var(--cream-text); }
address { font-style: normal; display: flex; gap: 12px; align-items: flex-start; }
address .ico { color: var(--brass); margin-top: 4px; }
address b { color: var(--cream); font: 400 1.35rem var(--display); }
.where-links { display: flex; flex-wrap: wrap; gap: 10px; }
/* pagamenti: carta e Satispay in evidenza */
.paybox { margin-top: 26px; padding: 24px 26px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(196, 160, 98, .16), rgba(15, 36, 31, .55)); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .55); }
.visit > .paybox { grid-column: 1 / -1; margin-top: 0; }
.paybox-title { margin: 0 0 16px; font: 400 clamp(1.5rem, 3.2vw, 2rem)/1.15 var(--display); color: var(--brass-2); }
.pay-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pay-logo { width: 104px; height: 64px; display: grid; place-items: center; padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6); }
.pay-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pay-mastercard img, .pay-maestro img { max-height: 46px; }
.pay-satispay { width: 136px; }
.pay-satispay img { width: 108px; }
.pay-more { margin: 14px 0 0; color: var(--cream-text); font-size: .95rem; }

/* recensioni Google */
.rating-big { font: 400 2.2rem/1 var(--display); color: var(--brass-2); vertical-align: -4px; margin-right: 4px; }
.stars { color: var(--brass-2); letter-spacing: .12em; }
.reviews { display: grid; gap: 20px; }
@media (min-width: 760px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { margin: 0; position: relative; padding: 28px 26px 22px; border-radius: var(--radius); background: linear-gradient(160deg, #f6eedd, var(--cream-2)); color: var(--ink-2); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.review::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(160, 120, 60, .45); border-radius: 3px; pointer-events: none; }
.review .stars { color: #a87a33; font-size: 1rem; }
.review-q { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; color: rgba(122, 74, 42, .18); }
.review blockquote { margin: 10px 0 14px; flex: 1; }
.review blockquote p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.review figcaption { font-size: .88rem; font-weight: 700; color: var(--leather); }
.reviews-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.reviews-note { text-align: center; margin-top: 16px; color: var(--cream-text); }
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--brass); }
.chip-star { color: var(--brass-2); }
.remind { margin-top: 24px; padding: 26px 30px; display: grid; gap: 14px; align-items: center; }
.remind > * { position: relative; z-index: 2; }
.remind h2 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; }
.remind h2 .ico { color: var(--leather); }
.remind p { margin: 4px 0 0; }
.remind-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.remind-row label { color: var(--ink); font-weight: 700; }
.remind-row select { width: auto; flex: 1 1 160px; }
.remind .btn-primary { background: var(--green); color: var(--brass-2); box-shadow: none; }
.remind .fine { color: #2f6b4a; margin: 0; min-height: 1.2em; }
@media (min-width: 900px) { .remind { grid-template-columns: 1fr auto; } .remind .fine { grid-column: 1 / -1; } }

/* ---------- domande ---------- */
.faq details { padding: 6px 22px; margin-bottom: 10px; border: 0; box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .5); background: #fffaf0; }
.faq summary { min-height: 52px; font-size: 1.02rem; }
.faq p { margin: 0 0 14px; }

/* ---------- footer ---------- */
.footer { background: var(--green-3); color: var(--cream-text); padding: 56px 0 28px; border-top: 1px solid var(--green-line); }
.footer-grid { display: grid; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.footer-logo { width: 160px; }
.footer a { color: var(--cream); }
.footer-title { font: 400 1.25rem var(--display); color: var(--brass-2); margin-bottom: 8px; }
.footer b { color: var(--cream); font-weight: 700; margin-right: 6px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { display: inline-flex; gap: 10px; align-items: center; min-height: 38px; text-decoration: none; }
.footer-links a:hover span, .footer-links a:hover { color: var(--brass-2); }
.footer-links .ico { width: 16px; height: 16px; color: var(--brass); }
.footer-cookie { font-size: .85rem; color: var(--cream-text); margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--green-line); }
.footer-cookie::before { content: "◆"; color: var(--brass); font-size: .6em; vertical-align: .25em; margin-right: 8px; }
.footer-cookie a { color: var(--brass-2); text-underline-offset: 3px; }
.footer-legal { font-size: .82rem; color: rgba(241, 232, 214, .55); margin-top: 10px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.1fr 1.3fr .7fr; } }

/* ---------- bottone flottante ---------- */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 95; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--brass-2), var(--brass)); color: #1c160c; box-shadow: 0 0 0 4px var(--green), 0 12px 28px -8px #000; transition: opacity .3s, transform .3s; }
.fab .ico { width: 24px; height: 24px; }
.fab.away { opacity: 0; transform: scale(.7); pointer-events: none; }
@media (min-width: 1024px) { .fab { display: none; } }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; color: var(--cream); }
.lightbox::backdrop { background: rgba(10, 22, 19, .88); backdrop-filter: blur(6px); }
.lightbox img { max-width: 94vw; max-height: 82vh; width: auto; border-radius: 4px; margin: 0 auto; box-shadow: 0 0 0 1px var(--brass); }
.lightbox p { text-align: center; margin: 12px 0 0; }
.lb-close { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--brass); background: var(--green); color: var(--brass-2); display: grid; place-items: center; cursor: pointer; }

/* testo delle pagine servizio */
.prose-band { color: var(--ink-2); }
.prose-band h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--ink); margin-bottom: 18px; }
.prose-band p { font-size: 1.05rem; max-width: 62ch; }
.prose-band a { color: var(--leather); font-weight: 700; text-underline-offset: 3px; }
.price-cards:has(> .price-card:only-child) { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* pagine semplici */
.plain-main { min-height: 70vh; padding-top: 70px; background: var(--paper); color: var(--ink-2); }
.prose { max-width: 70ch; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 22px; color: var(--ink); }
.prose a { color: var(--leather); }
.prose h2 { font-size: 1.45rem; color: var(--ink); margin: 34px 0 8px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }

/* ---------- movimento (solo con .fx: JS la aggiunge se il movimento è consentito) ---------- */
.fx .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.fx .reveal.in { opacity: 1; transform: none; }
.fx .tilt.reveal.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.fx .section-head h2::after { width: 0; transition: width 1.1s .3s cubic-bezier(.2, .8, .2, 1); }
.fx .section-head.in h2::after { width: 80px; }
.fx .hero-title .ch { opacity: .25; filter: blur(8px); transform: translateY(12px); animation: letter .9s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 40ms + .5s); }
.fx .hero .rule, .fx .hero-tagline, .fx .hero-sub, .fx .hero-ctas, .fx .hero-chips, .fx .hero-badge { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.fx .hero .rule { animation-delay: .35s; } .fx .hero-tagline { animation-delay: 1.1s; } .fx .hero-sub { animation-delay: 1.25s; } .fx .hero-ctas { animation-delay: 1.4s; } .fx .hero-chips, .fx .hero-badge { animation-delay: 1.55s; }
.fx .medal-hero { animation: medal-in 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.fx .medal-hero img { animation: draw 1.6s .4s cubic-bezier(.45, .05, .3, 1) both; }
.fx .fig-hand { animation: snip 3.6s 1s ease-in-out infinite; }
.fx .medal-hero .fig-hand { animation: draw 1.6s .4s cubic-bezier(.45, .05, .3, 1) both, snip 3.6s 2.4s ease-in-out infinite; }
.fx .medal:hover .fig-hand, .fx .seal:hover .fig-hand { animation: snip 1.2s ease-in-out infinite; }
@keyframes snip { 0%, 52%, 100% { transform: rotate(0); } 58% { transform: rotate(-9deg); } 64% { transform: rotate(1deg); } 70% { transform: rotate(-9deg); } 77% { transform: rotate(0); } }
@keyframes medal-in { from { opacity: 0; transform: scale(.85); box-shadow: 0 0 0 0 var(--brass), 0 0 0 0 var(--green), 0 0 0 0 transparent; } }
@keyframes draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes swing { 20% { transform: rotate(-6deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes letter { to { opacity: 1; filter: none; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* filetti d'ottone che si disegnano */
.price-card::before, .card::before, .booking-card::before, .hours::before, .remind::before { border-color: rgba(160, 120, 60, .55); }
.fx .reveal.price-card::before, .fx .reveal.card::before, .fx .reveal.booking-card::before, .fx .reveal.hours::before, .fx .reveal.remind::before,
.fx .reveal .price-card::before, .fx .reveal .booking-card::before, .fx .reveal .hours::before, .fx .reveal .remind::before { clip-path: inset(0 100% 100% 0); transition: clip-path 1.5s calc(var(--d, 0s) + .35s) cubic-bezier(.65, 0, .35, 1); }
.fx .reveal.in.price-card::before, .fx .reveal.in.card::before, .fx .reveal.in.booking-card::before, .fx .reveal.in.hours::before, .fx .reveal.in.remind::before,
.fx .reveal.in .price-card::before, .fx .reveal.in .booking-card::before, .fx .reveal.in .hours::before, .fx .reveal.in .remind::before { clip-path: inset(0 0 0 0); }

/* riflesso di luce sull'anello del medaglione */
.fx .medal-hero::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -60deg, transparent 0deg, rgba(255, 240, 205, .95) 10deg, transparent 22deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px), #000 calc(100% - 1px), transparent 100%);
          mask: radial-gradient(circle closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px), #000 calc(100% - 1px), transparent 100%);
  animation: glint 9s 3s ease-in-out infinite; opacity: 0; }
@keyframes glint { 0% { transform: rotate(0); opacity: 0; } 2% { opacity: 1; } 14% { transform: rotate(360deg); opacity: 1; } 16%, 100% { transform: rotate(360deg); opacity: 0; } }

/* linea del tempo che si colora d'ottone */
.fx .years::after { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: calc(var(--prog, 0) * 100%); background: linear-gradient(var(--brass-2), var(--brass)); box-shadow: 0 0 8px rgba(196, 160, 98, .6); }
.fx .years li::before { transition: color .5s, text-shadow .5s, transform .5s; z-index: 1; }
.fx .years b { transition: color .5s; }
.fx .years li.lit::before { color: #b0843c; text-shadow: 0 0 8px rgba(226, 196, 140, .9); transform: scale(1.25); }
.fx .years li.lit b { color: #96682c; }

/* listino che si "scrive" riga per riga */
.fx .price-card.reveal .svc { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .5s, clip-path .9s cubic-bezier(.6, 0, .3, 1); transition-delay: calc(var(--d, 0s) + .45s + var(--i, 0) * 110ms); }
.fx .price-card.reveal.in .svc { opacity: 1; clip-path: inset(0 -20px 0 0); }

/* diplomi: cornice che si inclina e vetro che riflette */
.tile { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; }
.tile:hover, .tile:focus-visible { transform: perspective(700px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tile::after { content: ""; position: absolute; inset: 8px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 250, 235, .45), transparent 45%), linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%); }
@media (hover: hover) and (pointer: fine) { .fx .tile:hover::after { opacity: 1; } }

/* insegna luminosa "Aperto ora" */
.fx .chip-live[data-state="open"] { color: #ffe3a6; border-color: rgba(226, 196, 140, .75); text-shadow: 0 0 6px rgba(255, 200, 110, .85), 0 0 16px rgba(255, 170, 70, .45); box-shadow: 0 0 12px rgba(226, 180, 100, .35), inset 0 0 10px rgba(226, 180, 100, .18); animation: neon-on 1.4s 1.8s both; }
@keyframes neon-on { 0% { opacity: .35; text-shadow: none; box-shadow: none; } 8% { opacity: 1; } 12% { opacity: .4; text-shadow: none; } 20% { opacity: 1; } 24% { opacity: .55; } 34%, 100% { opacity: 1; } }

/* palo da barbiere in ottone sul bordo */
.pole { display: none; }
@media (min-width: 1100px) {
  .fx .pole { display: flex; flex-direction: column; align-items: center; position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; pointer-events: none; opacity: .9; }
  .pole-cap { width: 18px; height: 12px; border-radius: 9px 9px 3px 3px; background: linear-gradient(90deg, #8a6a3a, var(--brass-2), #8a6a3a); }
  .pole-cap:last-child { border-radius: 3px 3px 9px 9px; }
  .pole-glass { width: 10px; height: 150px; overflow: hidden; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .6), inset -3px 0 4px rgba(0, 0, 0, .25); background: var(--cream); }
  .pole-stripes { display: block; width: 100%; height: 300%; background: repeating-linear-gradient(-35deg, var(--brass) 0 7px, var(--cream) 7px 14px, var(--green-2) 14px 21px, var(--cream) 21px 28px); transform: translateY(calc(var(--pole, 0px) - 34.18px)); }
}

/* ---------- effetti scenografici (3 nov 2026) ---------- */
/* sipario d'apertura in home: solo CSS, solo se il movimento è consentito */
.intro { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; animation: intro-end 1.6s linear forwards; }
  .intro-l, .intro-r { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50.5%; background: radial-gradient(ellipse at 100% 50%, #24493f, var(--green-3) 70%); animation: intro-open .75s .85s cubic-bezier(.77, 0, .18, 1) forwards; }
  .intro-l { left: 0; box-shadow: inset -2px 0 0 var(--brass); }
  .intro-r { right: 0; transform-origin: right; background: radial-gradient(ellipse at 0% 50%, #24493f, var(--green-3) 70%); box-shadow: inset 2px 0 0 var(--brass); animation-name: intro-open-r; }
  .intro-mark { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; justify-items: center; gap: 14px; transform: translate(-50%, -50%); animation: intro-mark 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
  .medal-intro { width: 132px; height: 132px; }
  .intro-year { font: 400 1.5rem var(--display); color: var(--brass-2); letter-spacing: .08em; padding: 2px 16px; border-radius: 999px; background: #1a3d34; box-shadow: 0 0 0 1px rgba(196, 160, 98, .5); }
}
@keyframes intro-open { to { transform: translateX(-101%); } }
@keyframes intro-open-r { to { transform: translateX(101%); } }
@keyframes intro-mark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); } 35%, 62% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes intro-end { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }

/* raggi di luce dietro il medaglione */
.fx .rays { animation: rays 90s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* luce d'ottone che segue il mouse */
.spot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fx .spot { display: block; position: fixed; left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 30; opacity: 0; transition: opacity .6s; background: radial-gradient(circle, rgba(226, 196, 140, .14), rgba(226, 196, 140, .05) 35%, transparent 62%); will-change: transform; }
  .fx .spot.on { opacity: 1; }
}

/* le forbici tagliano la linea tratteggiata */
.cutline { position: relative; height: 30px; margin: -12px 0 30px; container-type: inline-size; }
.cut-dash { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(196, 160, 98, .5); }
.cutline::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--brass-2)); transform: scaleX(0); transform-origin: left; }
.cut-sc { position: absolute; left: 0; top: 50%; transform: translate(-30%, -50%); color: var(--brass-2); background: inherit; }
.cut-sc .ico { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.paper .cut-dash { border-top-color: rgba(122, 74, 42, .4); }
.paper .cut-sc { color: var(--leather); }
.fx .cutline.reveal { transform: none; }
.fx .cutline .cut-sc { transition: transform 1.8s calc(var(--d, 0s) + .2s) cubic-bezier(.55, 0, .45, 1); }
.fx .cutline.in .cut-sc { transform: translate(calc(100cqw - 70%), -50%); }
.fx .cutline::after { transition: transform 1.8s calc(var(--d, 0s) + .2s) cubic-bezier(.55, 0, .45, 1); }
.fx .cutline.in::after { transform: scaleX(1); }
.fx .cutline.in .cut-sc .ico { animation: cutsnip .18s calc(var(--d, 0s) + .2s) 10 alternate ease-in-out; }
@keyframes cutsnip { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }

/* foto che si scoprono dietro un sipario d'ottone */
.sig-media .zoomable { position: relative; overflow: hidden; }
.fx .card.reveal .card-media::after, .fx .sig-media.reveal .zoomable::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, #8a6a3a, var(--brass) 45%, var(--brass-2)); transform-origin: right; transition: transform 1.1s calc(var(--d, 0s) + .25s) cubic-bezier(.77, 0, .18, 1); }
.fx .card.reveal.in .card-media::after, .fx .sig-media.reveal.in .zoomable::after { transform: scaleX(0); }
.fx .card.reveal .card-media img, .fx .sig-media.reveal .portrait { transform: scale(1.18); transition: transform 1.8s calc(var(--d, 0s) + .35s) cubic-bezier(.2, .8, .2, 1); }
.fx .card.reveal.in .card-media img, .fx .sig-media.reveal.in .portrait { transform: none; }
.fx .card.reveal.in:hover .card-media img { transform: scale(1.04); transition-delay: 0s; transition-duration: .6s; }

/* anno 1959 gigante che scorre dietro la storia */
#storia { position: relative; overflow: hidden; }
#storia > .wrap { position: relative; z-index: 1; }
.bigyear { position: absolute; right: -1vw; top: 40px; z-index: 0; pointer-events: none; font: 400 clamp(9rem, 26vw, 24rem)/.8 var(--display); color: rgba(122, 74, 42, .045); -webkit-text-stroke: 1.5px rgba(122, 74, 42, .2); letter-spacing: -.02em; transform: translateY(var(--drift, 0px)); user-select: none; }

/* recensioni: le carte si alzano e le stelle si accendono una alla volta */
.fx .review.reveal { transform: perspective(900px) rotateX(16deg) translateY(44px); transform-origin: 50% 100%; transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.fx .review.reveal.in { transform: none; }
.stars span { display: inline-block; }
.fx .review.reveal .stars span { opacity: .15; transform: scale(.4) rotate(-40deg); transition: opacity .35s, transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.fx .review.reveal.in .stars span { opacity: 1; transform: none; }
.fx .review .stars span:nth-child(1) { transition-delay: calc(var(--d, 0s) + .55s); }
.fx .review .stars span:nth-child(2) { transition-delay: calc(var(--d, 0s) + .67s); }
.fx .review .stars span:nth-child(3) { transition-delay: calc(var(--d, 0s) + .79s); }
.fx .review .stars span:nth-child(4) { transition-delay: calc(var(--d, 0s) + .91s); }
.fx .review .stars span:nth-child(5) { transition-delay: calc(var(--d, 0s) + 1.03s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track li[aria-hidden] { display: none; }
  [data-state="open"] .live-dot { animation: none; }
  .tilt, .card-media img, .sheen, .tile { transition: none; }
  .tile, .tile:hover { transform: none; }
  .medal-wrap { transform: none; transition: none; }
  .pole { display: none !important; }
}
@media (max-width: 520px) { .rule { letter-spacing: .18em; gap: 10px; font-size: .74rem; } .rule::before, .rule::after { width: 26px; } }