/* CraftByMarco — home.
   Due presentazioni dello stesso HTML:
   · html[data-mode=static]  → versione semplice, impaginata come una pagina editoriale;
   · html[data-mode=scene]   → versione animata: lo studio in 3D, percorso guidato dallo scroll.
   "scene-pending" = animata scelta ma non ancora pronta: si mostra la semplice finche' la scena non carica. */

@font-face { font-family: Fraunces; src: url('../fonts/fraunces-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Pinyon; src: url('../fonts/pinyon-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root { --stage-h: calc(100svh - var(--nav)); }

/* ================================================================ VERSIONE SEMPLICE (base) */
.stage { display: none; }
.chapters { display: none; }

/* hero: la foto dello studio e la promessa. Il primo schermo tiene solo titolo e una riga, con aria intorno
   (Marco, 24/09 sera: via etichetta, WhatsApp, pulsante 3D, tempi e nota; WhatsApp resta in testata, i tempi
   sono nel foglio del metodo). Stesso HTML della 3D: nella versione semplice il pannello si scioglie
   (display: contents) e il titolo va nella griglia dell'hero. */
.hero { position: relative; display: grid; grid-template-rows: minmax(calc(100svh - var(--nav)), auto) auto; }
.hero-photo { grid-area: 1 / 1; position: relative; overflow: hidden; background: #2a2521; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
html:not([data-mode="scene"]) .hero-photo img { position: absolute; inset: 0; }   /* la foto fa da sfondo: l'altezza la decide lo schermo */
html:not([data-mode="scene"]) .hero-panel { display: contents; }
.hero-first { grid-area: 1 / 1; position: relative; z-index: 1; }
.hero-panel h1 { margin-bottom: 26px; }
.hero-text { font-size: 18px; line-height: 1.6; max-width: 36ch; }

/* il pulsante della 3D, con la sua anteprima: un video di pochi KB (fermo con "riduci movimento") */

/* sotto il primo schermo: la seconda riga, i tre tempi e la nota */

/* muro caldo: fondo grafite con la luce della stanza, circoscritta */
.wall { position: relative; padding-block: 90px; background:
  radial-gradient(90% 70% at 18% 30%, rgba(237, 181, 103, .10), transparent 60%),
  radial-gradient(60% 60% at 90% 80%, rgba(69, 51, 33, .55), transparent 70%), var(--bg); overflow: hidden; }
.wall-inner { display: grid; gap: 44px; align-items: center; }
.method-aside .lead { color: var(--muted); }

/* foglio del metodo */
.method-sheet { max-width: 470px; padding: 38px 32px 32px; margin-inline: auto; transform: rotate(-.8deg); }
.method-sheet .clip-l { left: 18%; } .method-sheet .clip-r { right: 18%; }
.method-sheet .sheet-title { margin: 14px 0 24px; }
.sheet-steps { list-style: none; padding: 0; margin: 0 0 22px; }
.sheet-steps li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--ink-line); }
.sheet-steps li:first-child { border-top: 0; }
.sheet-steps .n { position: absolute; left: 0; top: 16px; font: 600 13px/1 var(--font); color: #9C6A2E; letter-spacing: .06em; }
.sheet-steps h3 { font: 600 24px/1.1 var(--display); color: var(--ink); }
.sheet-steps p { font-size: 16px; line-height: 1.42; color: var(--ink-soft); margin-top: 4px; }
.sheet-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--ink); text-underline-offset: 5px; }

/* polaroid (versione semplice): sul telefono si scorrono di lato */
.wall--works { padding-top: 70px; }
.works-head { margin-bottom: 44px; }
.works-head .lead a { color: var(--text); }
.prints { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px var(--gutter) 34px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
.prints::-webkit-scrollbar { display: none; }
.prints .print { flex: 0 0 78%; max-width: 330px; scroll-snap-align: center; }
.prints .print--big { flex-basis: 86%; max-width: 380px; }
.prints .print:nth-child(odd) { transform: rotate(-1.2deg); }
.prints .print:nth-child(even) { transform: rotate(1deg) translateY(10px); }
.prints .print[data-video] { cursor: pointer; }
.print-badge { position: absolute; z-index: 2; top: 24px; left: 24px; transform: rotate(-3deg); pointer-events: none; }
.print-badge span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px 7px 9px; background: var(--amber); color: var(--price); font: 600 11px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.print-badge span::before { content: ''; width: 6px; height: 6px; background: var(--price); }
.print-action .mark-hl { font-weight: 600; }
.surface.print .print-badge { top: 30px; left: 30px; }
.surface.print .print-badge span { font-size: 15px; padding: 9px 13px 9px 11px; }
.print:hover .print-action, .print:focus-visible .print-action { color: #8A5B25; }

/* mini pannello dimostrativo dentro la polaroid */
/* la foto del pannello nella polaroid: stessi colori chiari del pannello da provare nei Lavori */
.dash-mini { display: flex; flex-direction: column; gap: 7px; padding: 14px 14px 12px; background: #EDE7DC; color: #231D16; font-size: 11px; }
.dash-mini .dm-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #D9CFC0; padding-bottom: 8px; }
.dash-mini .dm-top b { font-size: 12.5px; font-weight: 600; }
.dash-mini .dm-top i { font-style: normal; color: #5F564B; font-size: 11px; }
.dash-mini .dm-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 6px; }
.dash-mini .dm-kpi span { display: grid; color: #5F564B; font-size: 11px; background: #F9F6F0; border: 1px solid #D9CFC0; border-radius: 7px; padding: 6px 7px; }
.dash-mini .dm-kpi b { font: 600 20px/1.05 var(--display); color: #8E5A0A; }
.dash-mini .dm-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #D9CFC0; }
.dash-mini .dm-row em { font-style: normal; font-weight: 600; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; }
.dash-mini .dm-row em.soon { background: #F7EBCB; color: #7E5207; } .dash-mini .dm-row em.ok { background: #E2F1E6; color: #276640; }
.dash-mini .dm-bar { margin-top: auto; height: 4px; background: #D9CFC0; border-radius: 4px; }
.dash-mini .dm-bar span { display: block; height: 100%; background: #EDB567; border-radius: 4px; }

/* ================================================================ MONDO DIGITALE (uguale nelle due versioni) */
.digital { position: relative; z-index: 3; background: var(--bg); }
.cover { position: relative; display: grid; place-items: center; text-align: center; padding-block: 110px 70px; overflow: hidden; }
.cover-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(243, 240, 232, .13) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); }
.cover-inner { position: relative; display: grid; justify-items: center; }
html[data-mode="scene"] .cover-inner { height: 100%; grid-template-rows: 1fr auto 1fr; align-items: center; }
html[data-mode="scene"] .cover-top { align-self: end; margin-bottom: 26px; }
html[data-mode="scene"] .cover-bottom { align-self: start; }
.cover .eyebrow { justify-content: center; }
.cover h2 { font-size: clamp(46px, 7.2vw, 108px); line-height: .95; }
.cover .lead { margin: 22px auto 0; text-align: center; }
.offers-wrap { padding-bottom: 100px; }
.offers-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--weak); font-size: 14px; color: var(--muted); }

.ownership { padding-block: 100px; border-top: 1px solid var(--weak); background:
  linear-gradient(var(--bg), var(--bg)) padding-box; }
.section-head { margin-bottom: 44px; }
.section-head .lead { margin-top: 18px; }
.password-line { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; color: var(--muted); max-width: none; }
.password-line .lock { width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDB567' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5M12 14.5v2.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------------------------------------------------------------- la demo */
.demo { padding-block: 100px 110px; border-top: 1px solid var(--weak); }
.demo-grid { display: grid; gap: 26px; grid-template-areas: "side" "stage" "talk"; }
.demo-side { grid-area: side; }
.demo-side .lead { margin-top: 18px; }
.demo-stage { grid-area: stage; }
.demo-talk { grid-area: talk; }
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; background: #202223; border: 1px solid var(--weak); border-bottom: 0; font-size: 12px; color: var(--muted); }
.demo-url { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-url .dot { width: 7px; height: 7px; background: #62a86f; flex: none; }
.demo-version { color: var(--amber); font-weight: 600; white-space: nowrap; }
.demo-frame { position: relative; height: clamp(360px, 62svh, 560px); overflow: hidden; border: 1px solid var(--weak); background: #F8F3EF; isolation: isolate; }
.demo-wipe { position: absolute; inset: -40% -60%; pointer-events: none; opacity: 0; z-index: 5; }
.talk-chips { display: grid; gap: 10px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 54px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line); text-align: left; font-size: 15px; transition: border-color .2s, background .2s, transform .15s; }
.chip::after { content: ''; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDB567' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip:hover { border-color: var(--amber); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { border-color: var(--amber); background: #221f18; color: var(--amber); }
.chip[aria-pressed="true"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDB567' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.chip:disabled { cursor: progress; }
/* la richiesta toccata si accende per 400 ms, poi passa la linea */
.chip.is-lit { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 3px rgba(237, 181, 103, .2), 0 0 22px rgba(237, 181, 103, .3); }
.talk-reset { margin-top: 14px; min-height: 44px; background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; font-size: 13.5px; }
.talk-reset:hover { color: var(--text); }
.demo-disclosure { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 54ch; }

/* copia di Spazio Agora': quattro pelli, stessa altezza (il riquadro la fissa) */
.agora { --ag-bg: #F8F3EF; --ag-ink: #482B1A; --ag-accent: #B85E43; --ag-soft: #735849; position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--ag-bg); color: var(--ag-ink); font-family: Manrope, Arial, sans-serif; transition: none; }
.ag-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; font-size: 12px; border-bottom: 1px solid rgba(72, 43, 26, .12); }
.ag-logo { font-family: Fraunces, Georgia, serif; font-size: 14px; letter-spacing: .02em; }
.ag-logo b { font-weight: 600; }
.ag-links { display: flex; gap: 12px; color: var(--ag-soft); }
.ag-hero { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.ag-copy { padding: 18px 18px 14px; position: relative; z-index: 2; }
.ag-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ag-soft); }
.ag-title { font-family: Fraunces, Georgia, serif; font-size: 30px; line-height: 1.02; margin-top: 8px; letter-spacing: -.01em; max-width: none; }
.ag-title span { display: block; font-family: Pinyon, cursive; font-size: 1.22em; color: var(--ag-accent); line-height: 1.05; }
.ag-text { font-size: 12px; line-height: 1.5; margin-top: 8px; max-width: 32ch; color: var(--ag-ink); }
.ag-cta { display: inline-block; margin-top: 12px; font-size: 12px; padding: 8px 12px; border: 1px solid var(--ag-ink); }
.ag-photo { position: relative; min-height: 0; overflow: hidden; }
.ag-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-strip { display: flex; gap: 16px; justify-content: space-between; padding: 10px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-soft); border-top: 1px solid rgba(72, 43, 26, .12); overflow: hidden; white-space: nowrap; }
/* pelle "editoriale": caratteri, colonne, palette scura */
.agora[data-variant="editorial"] { --ag-bg: #1d1b19; --ag-ink: #efe9df; --ag-accent: #d9b27c; --ag-soft: #a49c90; }
.agora[data-variant="editorial"] .ag-nav { border-color: rgba(239, 233, 223, .14); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.agora[data-variant="editorial"] .ag-logo { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 15px; }
.agora[data-variant="editorial"] .ag-hero { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
.agora[data-variant="editorial"] .ag-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; border-right: 1px solid rgba(239, 233, 223, .14); }
.agora[data-variant="editorial"] .ag-title { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 34px; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; }
.agora[data-variant="editorial"] .ag-title span { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 1em; color: var(--ag-accent); }
.agora[data-variant="editorial"] .ag-cta { border-color: var(--ag-accent); color: var(--ag-accent); }
.agora[data-variant="editorial"] .ag-photo img { filter: grayscale(.35) contrast(1.05); }
.agora[data-variant="editorial"] .ag-strip { border-color: rgba(239, 233, 223, .14); }
/* pelle "foto in primo piano": immagine a tutto campo, titolo sopra */
.agora[data-variant="photo"] .ag-hero { grid-template-rows: none; }
.agora[data-variant="photo"] .ag-photo { position: absolute; inset: 0; }
.agora[data-variant="photo"] .ag-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(20, 12, 6, .72)); }
.agora[data-variant="photo"] .ag-copy { align-self: end; color: #fff7ee; padding: 22px 18px; }
.agora[data-variant="photo"] .ag-kicker, .agora[data-variant="photo"] .ag-text { color: #f3e7da; }
.agora[data-variant="photo"] .ag-title { color: #fff7ee; font-size: 36px; }
.agora[data-variant="photo"] .ag-title span { color: #f2b79f; }
.agora[data-variant="photo"] .ag-cta { background: #fff7ee; color: #482B1A; border-color: #fff7ee; }
/* pelle "calda e accogliente": sabbia, forme morbide, piu' aria */
.agora[data-variant="warm"] { --ag-bg: #E9DDCF; --ag-ink: #4f2d1d; --ag-accent: #9D4F3B; --ag-soft: #6f4f3d; }
.agora[data-variant="warm"] .ag-copy { padding: 22px 22px 18px; text-align: center; display: grid; justify-items: center; }
.agora[data-variant="warm"] .ag-text { margin-inline: auto; }
.agora[data-variant="warm"] .ag-photo { margin: 0 16px 14px; border-radius: 120px 120px 14px 14px; }
.agora[data-variant="warm"] .ag-cta { border-radius: 30px; background: var(--ag-accent); border-color: var(--ag-accent); color: #fff4ea; padding: 8px 16px; }

/* ---------------------------------------------------------------- uscita (solo animata) */
.outro { display: none; }
.outro-claim { font: 600 clamp(42px, 6.4vw, 96px)/.98 var(--display); letter-spacing: -.02em; text-align: center; max-width: none; }
.outro-claim em { font-style: normal; color: var(--amber); }

/* ---------------------------------------------------------------- contatti */
.journey-b { position: relative; }
.contact { position: relative; z-index: 3; }
.contact-photo { display: none; }
.contact-card { padding: 90px var(--gutter) 90px; width: min(var(--max), 100%); margin-inline: auto; }
.contact-card h2 { margin-bottom: 18px; }
.contact-who { color: var(--muted); margin-bottom: 30px; max-width: 52ch; }
.contact-who b { color: var(--text); font-weight: 600; }
.contact-card .btn--wide { max-width: 460px; min-height: 62px; font-size: 16px; }


/* ================================================================ VERSIONE SEMPLICE · schermi larghi */
@media (min-width: 760px) {
  .hero { grid-template-rows: minmax(clamp(560px, calc(100svh - var(--nav)), 1000px), auto) auto; }
  .hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 23, 24, .97) 0%, rgba(22, 23, 24, .9) 28%, rgba(22, 23, 24, .35) 50%, transparent 66%); }
  html:not([data-mode="scene"]) .hero-first { align-self: center; box-sizing: content-box; width: min(600px, 48vw); padding: 40px 0 40px max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  html:not([data-mode="scene"]) .hero-first h1 { font-size: clamp(44px, 5.3vw, 84px); }
  .wall-inner { grid-template-columns: .8fr 1.2fr; }
  .method-sheet { margin-inline: 0 auto; }
  .prints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; overflow: visible; padding: 40px 0 10px; margin: 0; position: relative; }
  .prints::before { content: ''; position: absolute; left: -2%; right: -2%; top: 18px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 4C120 20 200 22 250 20s120-2 250 0 130 3 250 0 180-10 250-16' fill='none' stroke='%23927353' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .prints .print { max-width: none; }
  .prints { grid-template-columns: 1.22fr repeat(3, minmax(0, 1fr)); align-items: start; }
  .demo-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "side stage" "talk stage"; gap: 30px 56px; align-items: start; }
  .demo-stage { position: sticky; top: calc(var(--nav) + 24px); }
  .demo-frame { height: clamp(420px, 66svh, 600px); }
  .ag-title { font-size: 40px; } .ag-copy { padding: 26px 26px 18px; } .ag-text { font-size: 13px; }
  .agora[data-variant="editorial"] .ag-title { font-size: 46px; }
  .agora[data-variant="photo"] .ag-title { font-size: 50px; }
  .contact { background: var(--bg); }
  .contact .contact-card { display: grid; }
}
@media (max-width: 759px) {
  .hero { grid-template-rows: minmax(max(520px, calc(100svh - var(--nav))), auto) auto; }
  .hero-photo img { object-position: 50% 30%; }
  .hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 23, 24, 0) 22%, rgba(22, 23, 24, .72) 46%, rgba(22, 23, 24, .96) 62%, var(--bg) 100%); }
  html:not([data-mode="scene"]) .hero-first { align-self: end; padding: 0 var(--gutter) 64px; }
  .hero-panel h1 { font-size: clamp(42px, 12.4vw, 56px); }
  .hero-text { font-size: 16px; }
  .wall { padding-block: 72px; }
  .demo { padding-block: 80px; }
  .ownership { padding-block: 80px; }
  .offers .is-featured { order: -1; }
  .cover { padding-block: 90px 50px; }
  .contact-card { padding-block: 70px; }
}

/* ================================================================ VERSIONE ANIMATA */
html[data-mode="scene"] .header { position: fixed; left: 0; right: 0; top: 0; }
html[data-mode="scene"] body { padding-top: 0; }
html[data-mode="scene"] .stage { display: block; position: fixed; left: 0; right: 0; top: var(--nav); height: var(--stage-h); z-index: 1; overflow: hidden; background: #b19b80 url("../img/scena-desktop.webp") center / cover no-repeat; visibility: hidden; }
@media (max-width: 759px) { html[data-mode="scene"] .stage { background-image: url("../img/scena-mobile.webp"); } }
html[data-mode="scene"] .stage[data-ready="true"] { background-image: none; }
html[data-mode="scene"] .stage[data-visible="true"] { visibility: visible; }
html[data-mode="scene"] .stage-surfaces, html[data-mode="scene"] .stage-render { position: absolute; inset: 0; }
html[data-mode="scene"] .stage-surfaces { z-index: 1; overflow: hidden; pointer-events: none; }
html[data-mode="scene"] .stage-render { z-index: 2; pointer-events: none; }
html[data-mode="scene"] .stage-render canvas { display: block; width: 100%; height: 100%; }
html[data-mode="scene"] .stage-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--shade, 1); --edge: calc(max(var(--gutter), (100vw - var(--max)) / 2) + min(580px, 44vw)); background: linear-gradient(90deg, rgba(22, 23, 24, .96) 0, rgba(22, 23, 24, .93) calc(var(--edge) * .8), rgba(22, 23, 24, .78) var(--edge), rgba(22, 23, 24, .25) calc(var(--edge) + 9vw), transparent calc(var(--edge) + 20vw)); }
html[data-mode="scene"] .hero-photo { display: none; }
html[data-mode="scene"] .journey-a { position: relative; height: var(--journey-a, 1000svh); }
html[data-mode="scene"] .hero-panel { position: fixed; z-index: 4; top: calc(var(--nav) + var(--stage-h) / 2); left: max(var(--gutter), calc((100vw - var(--max)) / 2)); transform: translateY(-50%); width: min(580px, 44vw); padding: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); will-change: opacity; }
html[data-mode="scene"] .hero-panel[data-gone] { visibility: hidden; }
html[data-mode="scene"] .hero-panel h1 { font-size: clamp(46px, 4.6vw, 72px); margin-bottom: 20px; }
html[data-mode="scene"] .method, html[data-mode="scene"] .works { position: absolute; left: 0; width: 1px; height: 1px; overflow: visible; }
html[data-mode="scene"] .method { top: var(--at-metodo, 300svh); }
html[data-mode="scene"] .works { top: var(--at-lavori, 520svh); }
html[data-mode="scene"] .method .wall, html[data-mode="scene"] .works .wall { display: none; }

/* superfici HTML proiettate nello spazio (coordinate logiche, poi matrix3d) */
.surface { position: absolute !important; left: 0; top: 0; margin: 0 !important; transform-origin: 0 0; pointer-events: auto; backface-visibility: hidden; box-shadow: none !important; max-width: none !important; rotate: none !important; }
.surface.method-sheet { width: 440px; height: 680px; padding: 30px 30px 26px; transform: none; }
.surface.method-sheet .clip { display: none; }
.surface.method-sheet .sheet-kicker { font-size: 12px; }
.surface.method-sheet .sheet-title { font-size: 50px; margin: 12px 0 18px; }
.surface.method-sheet .sheet-steps { margin-bottom: 12px; }
.surface.method-sheet .sheet-steps li { padding: 11px 0 11px 42px; }
.surface.method-sheet .sheet-steps h3 { font-size: 27px; }
.surface.method-sheet .sheet-steps p { font-size: 19.5px; line-height: 1.3; letter-spacing: -.01em; }
.surface.method-sheet .sheet-steps .n { font-size: 14px; top: 17px; }
.surface.method-sheet .sheet-link { font-size: 20px; min-height: 52px; }
.surface.print { width: 400px; height: 535px; padding: 20px 20px 22px; transform: none; }
.surface.print .peg { display: none; }
.surface.print .print-pic { height: 300px; aspect-ratio: auto; }
.surface.print .print-caption { padding-top: 16px; }
.surface.print .tag { font-size: 12.5px; margin-bottom: 8px; }
.surface.print h3 { font-size: 32px; }
.surface.print p { font-size: 18px; margin-top: 6px; }
.surface.print .print-action { font-size: 19px; margin-top: 14px; }
.surface.print .print-action .icon { width: 24px; height: 24px; }
.surface.print .dash-mini { font-size: 13.5px; padding: 18px; gap: 9px; }
.surface.print .dash-mini .dm-top b { font-size: 16px; } .surface.print .dash-mini .dm-top i { font-size: 12px; }
.surface.print .dash-mini .dm-kpi b { font-size: 30px; } .surface.print .dash-mini .dm-kpi span { font-size: 12px; }
/* la luce della stanza sulla carta: finestra a sinistra, lampada a destra */
.surface.sheet::after, .surface.print::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 244, 224, .16), rgba(0, 0, 0, 0) 38%, rgba(60, 38, 16, .12) 100%); mix-blend-mode: multiply; }

/* il monitor dello studio: sito vero, poi la stessa copertina della pagina (in scala), poi la versione della demo */
html[data-mode="scene"] .stage-screen { position: absolute; left: 0; top: 0; width: var(--screen-w, 1280px); height: var(--screen-h, 640px); transform-origin: 0 0; z-index: 1; overflow: hidden; background: #F8F3EF; pointer-events: none; }
.stage-screen > div { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.stage-screen > .screen-agora { opacity: 1; }
.stage-screen .screen-agora img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage-screen[data-show="cover"] .screen-cover, .stage-screen[data-show="claim"] .screen-claim, .stage-screen[data-show="demo"] .screen-demo { opacity: 1; }
.stage-screen[data-show]:not([data-show="agora"]) .screen-agora { opacity: 0; }
.screen-cover, .screen-claim { background: var(--bg); }
.screen-cover .cover, .portal-overlay .cover { height: 100%; padding: 0; }
.screen-cover .cover-bottom { visibility: hidden; }
.screen-claim, .portal-overlay[data-overlay="out"] { display: grid; place-items: center; background: var(--bg); padding-inline: var(--gutter); }
.screen-demo .agora { transform-origin: 0 0; }
/* sovrapposizioni del passaggio: la pagina vera, gia' al suo posto, vista attraverso lo schermo che si allarga */
html[data-mode="scene"] .portal-overlay { position: absolute; inset: 0; z-index: 6; background: var(--bg); visibility: hidden; pointer-events: none; }
html[data-mode="scene"] .portal-overlay.on { visibility: visible; }
html[data-mode="scene"] [data-portal].portal-wait { visibility: hidden; }

/* didascalia dei lavori e invito a scorrere */
html[data-mode="scene"] .works-head.in-stage { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px max(var(--gutter), calc((100vw - var(--max)) / 2)) 84px; background: linear-gradient(transparent, rgba(22, 23, 24, .9) 42%); pointer-events: none; opacity: 0; }
html[data-mode="scene"] .works-head.in-stage h2 { font-size: clamp(32px, 3.6vw, 48px); }
html[data-mode="scene"] .works-head.in-stage .lead { font-size: 14.5px; margin-top: 8px; }
html[data-mode="scene"] .works-head.in-stage .eyebrow { display: none; }
html[data-mode="scene"] .works-head.in-stage a { pointer-events: auto; }
.works-caption { display: none; }
html[data-mode="scene"] .scroll-hint { position: absolute; z-index: 5; left: 50%; bottom: 92px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; padding: 14px 18px 12px; background: rgba(22, 23, 24, .78); border: 1px solid var(--weak); text-align: center; animation: hint-in .6s var(--ease); }
html[data-mode="scene"] .scroll-hint[hidden] { display: none; }
.scroll-hint p { font-size: 14px; }
.scroll-hint button { background: none; border: 0; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
/* avviso quando parte la 3D: sparisce da solo */
html[data-mode="scene"] .scene-tip { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 16px; width: max-content; max-width: min(420px, calc(100vw - 32px)); padding: 16px 20px 16px 16px; background: rgba(22, 23, 24, .86); border: 1px solid var(--weak); border-left: 2px solid var(--amber); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: tip-in .5s var(--ease); }
html[data-mode="scene"] .scene-tip[hidden] { display: none; }
html[data-mode="scene"] .scene-tip.is-leaving { opacity: 0; transition: opacity .35s var(--ease); }
.scene-tip p { font-size: 15px; line-height: 1.45; margin: 0; }
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } }
@keyframes tip-in-top { from { opacity: 0; transform: translateY(-8px); } }

/* dietro al titolo il foglio e' fuori fuoco: le sue scritte non si leggono sotto la promessa */
.surface.method-sheet { transition: filter .7s var(--ease), opacity .7s var(--ease); }
.surface.method-sheet.is-far { filter: blur(7px); opacity: .72; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* mondo digitale dentro il monitor: portali */
html[data-mode="scene"] .prices { margin-top: calc(-1 * var(--stage-h)); }
html[data-mode="scene"] .prices .cover { height: var(--stage-h); min-height: 0; padding-block: 0; }

html[data-mode="scene"] .outro { display: grid; place-items: center; height: var(--stage-h); padding-inline: var(--gutter); }
html[data-mode="scene"] .journey-b { margin-top: calc(-1 * var(--stage-h)); z-index: 2; }
html[data-mode="scene"] .journey-spacer { height: var(--journey-b, 190svh); }
html[data-mode="scene"] .contact { background: none; }
html[data-mode="scene"] .contact-card { width: min(600px, 100%); margin: 0; padding: 60px 40px 64px max(var(--gutter), calc((100vw - var(--max)) / 2)); background: linear-gradient(90deg, rgba(22, 23, 24, .96) 70%, rgba(22, 23, 24, .88)); }

/* barra dei capitoli: linguette numerate da toccare; sopra, la Traccia che si riempie col percorso */
html[data-mode="scene"] .chapters { display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; align-items: flex-end; gap: 16px; padding: 22px max(var(--gutter), calc((100vw - var(--max)) / 2)) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(22, 23, 24, .94) 40%); pointer-events: none; }
html[data-mode="scene"] .chapters[hidden] { display: none; }
html[data-mode="scene"] .chapters { transition: transform .45s var(--ease), opacity .45s var(--ease); }
html[data-mode="scene"] .chapters.is-waiting { transform: translateY(110%); opacity: 0; }
/* nel 3D i pulsanti in basso a destra stanno sopra la barra dei capitoli */
html[data-mode="scene"] .fab { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* guida al 3D: alla prima apertura della home si oscura la pagina e si illumina l'icona; sparisce al primo tocco */
.guide-3d { position: fixed; inset: 0; z-index: 80; background: rgba(8, 9, 10, .76); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .3s var(--ease); }
.guide-3d.is-on { opacity: 1; }
/* uscita: lo sfondo da sfocato e scuro torna nitido, la scritta si sfoca e svanisce, l'icona perde l'alone */
.guide-3d.is-leaving { pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease); }
.fab.is-guiding { z-index: 90; }
.fab.is-guiding .fab-wa { opacity: .22; filter: grayscale(1); pointer-events: none; }
.fab.is-guiding .fab-3d { border-color: var(--amber); animation: guide-pulse 1.6s ease-in-out infinite; }
@keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(237, 181, 103, .28), 0 0 26px rgba(237, 181, 103, .5); } 50% { box-shadow: 0 0 0 10px rgba(237, 181, 103, .12), 0 0 40px rgba(237, 181, 103, .72); } }
.guide-3d-tip { position: fixed; z-index: 91; max-width: min(270px, calc(100vw - 32px)); margin: 0; padding: 12px 14px; background: #1f1c16; border-left: 2px solid var(--amber); color: var(--text); font-size: 15px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.guide-3d-tip.is-on { opacity: 1; transform: none; filter: blur(0); }
.guide-3d-tip.is-leaving { pointer-events: none; opacity: 0; transform: translateY(-8px) scale(.97); filter: blur(7px); transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); }
.fab.is-guiding.is-leaving { z-index: 90; }
.fab.is-guiding.is-leaving .fab-wa { opacity: 1; filter: none; transition: opacity .9s var(--ease), filter .9s var(--ease); }
.fab.is-guiding.is-leaving .fab-3d { animation: none; box-shadow: 0 0 0 0 rgba(237, 181, 103, 0); border-color: var(--weak); transition: box-shadow .9s var(--ease), border-color .9s var(--ease); }
.guide-3d-tip strong { display: block; margin-bottom: 3px; font-weight: 600; color: var(--amber); }
.guide-3d-tip::after { content: ''; position: absolute; right: 14px; top: 100%; border: 6px solid transparent; border-top-color: #1f1c16; }
html[data-mode="scene"] .chapters.is-waiting * { pointer-events: none; }
.chapters-track { position: relative; flex: 1; min-width: 0; padding-top: 10px; }
.chapters-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(103, 107, 104, .5); }
.chapters-line span { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--amber); }
.chapters-line::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; background: var(--amber); }
.chapters ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chapters a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px 0 11px; border: 1px solid rgba(103, 107, 104, .95); background: rgba(22, 23, 24, .9); color: var(--text); font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; pointer-events: auto; transition: background .2s, border-color .2s, color .2s; }
.chapters a .num { font: 600 11px/1 var(--font); color: var(--amber); letter-spacing: .05em; }
.chapters a:hover { border-color: var(--amber); background: #1f1c16; }
.chapters a.is-past { border-color: rgba(237, 181, 103, .5); }
.chapters a[aria-current] { background: var(--amber); border-color: var(--amber); color: var(--price); font-weight: 600; }
.chapters a[aria-current] .num { color: var(--price); }
/* l'invito, una volta sola: una freccia disegnata a mano che indica le linguette */
.chapters-invite { position: absolute; left: 0; bottom: calc(100% + 4px); display: flex; align-items: flex-end; gap: 4px; margin: 0; max-width: none; font-size: 14px; font-weight: 500; color: var(--text); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.chapters-invite span { background: rgba(22, 23, 24, .78); padding: 6px 10px; border-left: 2px solid var(--amber); }
.chapters-invite svg { width: 46px; height: 34px; flex: none; margin-bottom: -18px; }
.chapters-invite .ink { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.chapters.is-inviting .chapters-invite { opacity: 1; transform: none; }
.chapters.is-inviting .chapters-invite .ink { animation: ink-draw .9s .25s var(--ease) forwards; }
.chapters.is-inviting ol a:not([aria-current]) { animation: tab-call 1.6s .9s var(--ease) 2; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes tab-call { 0%, 100% { border-color: rgba(103, 107, 104, .95); } 45% { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(237, 181, 103, .18); } }

@media (max-width: 759px) {
  html[data-mode="scene"] .stage-shade { background: linear-gradient(0deg, rgba(22, 23, 24, .98) 0%, rgba(22, 23, 24, .95) 44%, rgba(22, 23, 24, .62) 60%, transparent 77%); }
  html[data-mode="scene"] .hero-panel { top: auto; bottom: 64px; left: 0; transform: none; width: auto; right: 0; padding: 0 var(--gutter); }
  html[data-mode="scene"] .hero-panel h1 { font-size: clamp(42px, 12.4vw, 54px); margin-bottom: 18px; }
  html[data-mode="scene"] .hero-text { font-size: 16px; }
  /* l'avviso sta in alto: sotto c'e' la promessa */
  html[data-mode="scene"] .scene-tip { top: 16px; left: var(--gutter); right: var(--gutter); transform: none; width: auto; max-width: none; animation-name: tip-in-top; }
  html[data-mode="scene"] .works-head.in-stage { padding: 46px var(--gutter) 96px; background: linear-gradient(rgba(22, 23, 24, 0), rgba(22, 23, 24, .93) 30%, rgba(22, 23, 24, .97)); }
  html[data-mode="scene"] .works-head.in-stage h2 { font-size: 27px; }
  html[data-mode="scene"] .works-head.in-stage .works-list { display: none; }
  html[data-mode="scene"] .works-head.in-stage .lead { margin-top: 4px; }
  html[data-mode="scene"] .contact-card { width: 100%; padding: 50px var(--gutter) 90px; background: rgba(22, 23, 24, .96); }
  html[data-mode="scene"] .chapters { gap: 8px; padding-top: 34px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .chapters ol { gap: 4px; }
  .chapters-track { padding-top: 8px; }
  /* sul telefono solo i numeri, piu' piccoli; il nome del capitolo corrente sta sopra, a sinistra */
  .chapters a { min-width: 34px; min-height: 36px; justify-content: center; padding: 0; font-size: 12px; }
  .chapters a .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chapters a[aria-current] .label { width: auto; height: auto; clip: auto; overflow: visible; left: 0; bottom: calc(100% + 16px); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: .02em; }
  .chapters.is-inviting a[aria-current] .label { visibility: hidden; }
  .chapters-invite { font-size: 13px; }
  .chapters a[aria-current] .label { bottom: calc(100% + 12px); }
  .scroll-hint { bottom: 116px !important; width: max-content; max-width: calc(100vw - 32px); }
}
@media (min-width: 760px) and (max-height: 760px) {
}

/* demo: la linea che rinnova */
.wipe-line { position: absolute; width: 2px; border-radius: 2px; background: #FFE2B3; box-shadow: 0 0 4px 1px rgba(237, 181, 103, .95), 0 0 16px 3px rgba(237, 181, 103, .45); }

/* nella sovrapposizione d'ingresso il sottotitolo arriva con l'apertura dello schermo */
.portal-overlay[data-overlay="in"] .cover-bottom { opacity: var(--k, 1); }

/* telefoni bassi, versione semplice: titolo, riga, WhatsApp e 3D devono stare tutti nel primo schermo */
@media (max-width: 759px) and (max-height: 700px) {
  html:not([data-mode="scene"]) .hero-first h1 { font-size: clamp(34px, 10.4vw, 42px); margin-bottom: 12px; }
  html:not([data-mode="scene"]) .hero-first .hero-text { font-size: 14.5px; line-height: 1.5; }
  html:not([data-mode="scene"]) .hero-first { padding-bottom: 36px; }
  html:not([data-mode="scene"]) .hero { grid-template-rows: minmax(calc(100svh - var(--nav)), auto) auto; }
}
/* telefoni bassi: l'apertura tiene solo promessa, testo e azioni */
@media (max-width: 759px) and (max-height: 720px) {
  html[data-mode="scene"] .hero-panel h1 { font-size: clamp(36px, 11vw, 46px); }
}
@media (max-width: 360px) {
  .chapters a { min-width: 31px; }
  .chapters ol { gap: 4px; }
  html[data-mode="scene"] .chapters { gap: 8px; }
}
@media (max-width: 480px) { .ag-strip span:nth-child(4) { display: none; } }

/* il volo dei capitoli: breve dissolvenza per i salti lunghi dentro la pagina (sotto testata e barra) */
.flight-veil { position: fixed; inset: 0; z-index: 45; background: var(--bg); opacity: 0; pointer-events: none; }