/* OMAI Photobooth — base comune: font, token, forme, movimento. Vedi BRAND.md. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/photobooth/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/photobooth/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --buio: #0b0a10; --superficie: #15131d; --carta: #f3efe7; --carta-2: #a7a2b3;
  --viola: #4a0af0; --viola-luce: #9a82ff; --lampo: #ffd9a0;
  --banco: #f3efe7; --foglio: #ffffff; --inchiostro: #15131d; --inchiostro-2: #5d586b;
  --ok: #1f8a5b; --errore: #c8321f; --avviso: #a86a00;

  --f-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --f-testo: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --t-mega: clamp(3.2rem, 10.5vw, 9rem);
  --t-display: clamp(2.4rem, 6.4vw, 5.4rem);
  --t-h2: clamp(1.8rem, 3.8vw, 3.2rem);
  --t-h3: clamp(1.25rem, 2vw, 1.6rem);
  --t-body: 1.0625rem;
  --t-small: 0.78rem;

  --pillola: 999px;
  --ombra-stampa: 0 1px 0 rgba(0,0,0,.25), 0 14px 22px -12px rgba(0,0,0,.55);
  --esce: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-testo); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--viola-luce); outline-offset: 3px; }

.etichetta { font-size: var(--t-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* bottoni: pillola */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 1.4em; border: 1px solid transparent; border-radius: var(--pillola); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .16s ease-out, background-color .16s ease-out, border-color .16s ease-out, opacity .16s ease-out; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--viola); color: #fff; }
.btn-primario:hover:not([disabled]) { background: #3a07c4; }
.btn-linea { background: transparent; border-color: currentColor; }
.btn-piccolo { min-height: 36px; padding: 0 1em; font-size: .9rem; }

/* stampa: angoli vivi, bordo di carta, ombra corta */
.stampa { background: #fff; padding: 8px; box-shadow: var(--ombra-stampa); }
.stampa img { width: 100%; height: auto; }

/* movimento: esce dalla fessura */
@keyframes esce { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.esce { animation: esce .42s var(--esce) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  @keyframes esce { from { opacity: 0; } to { opacity: 1; } }
  * { scroll-behavior: auto !important; }
}