/* Tokens of handoff 3 (spec §4) and the stage that hosts each scene at its reference size. */
:root {
  --crema: #FAF5EB; --carta: #FFFDF8; --inchiostro: #141210; --grafite: #55504A; --tenue: #6A645C; --spento: #8C857B;
  --notte: #121A2E; --nebbia: #9AA6B8; --arancio: #FF7A45; --terra: #3A2015; --brace: #1A0D09;
  --crema-brace: #F7EDE6; --cenere: #C9AFA3; --albicocca: #FFB38A; --didascalia: #A88F84;
  --turchese: #00B5C9; --turchese-scuro: #00788A; --maschera: #D3EEF1;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-sheet: cubic-bezier(.25,1,.5,1); --ease-rule: cubic-bezier(.65,0,.35,1);
  --font-sans: 'PolySans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* PolySans (Pangram Pangram, licensed to Airbag Studio), subset latin + latin-ext. */
@font-face { font-family: 'PolySans'; src: url('../assets/fonts/PolySans-Slim.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'PolySans'; src: url('../assets/fonts/PolySans-Neutral.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PolySans'; src: url('../assets/fonts/PolySans-Median.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'PolySans'; src: url('../assets/fonts/PolySans-Bulky.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* JetBrains Mono 2.304 and Newsreader Italic (both SIL OFL 1.1), self-hosted. */
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/Newsreader-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

html { background: var(--notte); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); color: var(--inchiostro); overflow-x: clip; }
main { display: block; }

/* A scene is drawn at its reference size (1440 or 390 wide) and scaled to the viewport. */
.sc { position: relative; height: var(--h); background: var(--bg); overflow-x: clip; }
.sc[data-bg="crema"] { --bg: var(--crema); }
.sc[data-bg="notte"] { --bg: var(--notte); }
.sc[data-bg="brace"] { --bg: var(--brace); }
.sc-pin { position: relative; height: var(--sh); overflow: hidden; }
.sc.is-pinned .sc-pin { position: sticky; top: var(--pin-top, 0px); }
.sc-stage { position: absolute; top: 0; left: var(--x); width: var(--w); height: var(--sh0); transform: scale(var(--s)); transform-origin: 0 0; }
/* Scene 2 starts under the bottom edge of scene 1: its top band is the edge of the dark sheet. */
#controllo { z-index: 1; margin-top: calc(var(--ov) * -1); background: transparent; }
.js .sc-stage:empty { visibility: hidden; }
/* The scene roots draw past their reference width; the section clips at the screen edge. */
.sc-stage > div { overflow: visible !important; }
.bleed-notte { box-shadow: 0 0 0 100vmax var(--notte); clip-path: inset(0 -100vmax); }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
#controllo a:focus-visible, #prova a:focus-visible, #prova button:focus-visible, #prova input:focus-visible { outline-color: var(--crema); }
#prova input::placeholder { color: var(--nebbia); }
.form-done { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 10px; border: 1px solid var(--turchese); color: var(--crema); }
.form-done strong { font-weight: 500; font-size: 20px; }
.form-done p { margin: 0; color: var(--nebbia); font-size: 15px; }

/* Scene 1: the product demo sits in the window's slot; the next scene's sheet covers its foot */
.hero-old { display: none !important; }
.hero-slot { position: absolute; }
.hero-slot .bh .ss-stage { overflow: visible; }
.hero-slot--d { left: 600px; top: 372px; }
.hero-slot--m { left: 0; top: 452px; }

/* scene 2: the Stageshow story replaces the old table, gate, model and pill */
.ctl-old{display:none!important}
.ctl-slot{position:absolute;opacity:0;transform:translateY(16px);transition:opacity 700ms ease,transform 900ms cubic-bezier(.25,1,.5,1)}
.ctl-slot.is-on{opacity:1;transform:none}
.ctl-slot--d{left:64px;top:318px;width:1312px}
.ctl-slot--m{left:16px;top:292px;width:358px}

/* scene 3: the Stageshow window replaces the old camera plate and its pop-ups */
.rag-old{display:none!important}
.rag-slot{position:absolute}
.rag-slot--d{left:520px;top:300px}
.rag-slot--m{left:16px;top:276px;width:358px}

/* scene 4: Stageshow stories inside the two sheets */
.s4-old{display:none!important}
.s4-slot{position:absolute}
.s4-slot--ad{left:48px;top:340px;width:624px}
.s4-slot--am{left:22px;top:318px;width:314px}
.s4-slot--bd{left:48px;top:326px;width:588px}
.s4-slot--bm{left:22px;top:250px;width:298px}

/* SEO and no-JS: the scenes' text as plain HTML. Shown only without JavaScript; with JS the scenes draw the same text. */
.seo-static { max-width: 720px; margin: 0 auto; padding: 48px 24px; color: inherit; font-size: 18px; line-height: 1.5; }
.seo-static h1 { font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.04em; margin: 0 0 24px; }
.seo-static h2 { font-weight: 400; font-size: 36px; line-height: 1.05; letter-spacing: -0.03em; margin: 32px 0 16px; }
.seo-static a { color: inherit; }
html:not(.js) .sc { height: auto; }
html:not(.js) .sc-pin { display: none; }
html:not(.js) .sc[data-bg="notte"], html:not(.js) .sc[data-bg="brace"] { color: var(--crema); }
html:not(.js) #controllo { margin-top: 0; }
.js .seo-static { display: none; }