/* =============================================================================
   OSTERIA DI SAN PIERO — Fondamenta
   Caratteri, azzeramento, tipografia, pulsanti, impianto della pagina, moto.
   ========================================================================== */

/* --- Caratteri --------------------------------------------------------------
   Serviti da fonts/, non da Google: il browser del visitatore non contatta
   fonts.googleapis.com e il suo indirizzo IP non esce dall'Europa. Sono
   variabili: un solo file copre tutti i pesi che usiamo.                     */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-var-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-var-latin-italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/worksans-var-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --- Azzeramento ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: var(--f-corpo);
  font-weight: 380;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--fondo-2); }

button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

:where(h1, h2, h3, h4) {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: var(--tr-titolo);
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* --- Messa a fuoco ---------------------------------------------------------
   Visibile sempre, su qualunque fondo: due anelli, uno chiaro e uno scuro.  */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.salta {
  position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  z-index: 200; transform: translateY(-160%);
  transition: transform var(--t-1) var(--curva);
}
.salta:focus-visible { transform: none; }

.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* =============================================================================
   IMPIANTO
   ========================================================================== */
.impianto {
  width: min(100% - var(--bordo-pagina) * 2, var(--colonna));
  margin-inline: auto;
}
.impianto--stretto { width: min(100% - var(--bordo-pagina) * 2, 780px); }

.scena { padding-block: var(--scena); position: relative; }
.scena--corta { padding-block: var(--scena-s); }

/* =============================================================================
   TIPOGRAFIA
   ========================================================================== */

/* L'occhiello è la targa di pietra: piccolo, maiuscolo, lettere larghe.     */
.occhiello {
  font-family: var(--sans);
  font-size: var(--f-etichetta);
  font-weight: 500;
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--testo-3);
  display: flex; align-items: center; gap: var(--s-3);
}
.occhiello::before {
  content: ""; inline-size: var(--s-6); block-size: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.occhiello--muto::before { display: none; }

.titolo    { font-size: var(--f-h2); }
.titolo-g  { font-size: var(--f-display); }
.sottotitolo { font-size: var(--f-h3); font-family: var(--serif); font-weight: 500; }

.guida {
  font-size: var(--f-guida);
  line-height: 1.6;
  color: var(--testo-2);
  max-width: var(--misura);
}
.guida strong { color: var(--testo); font-weight: 500; }

/* Il corsivo del Garamond è la voce che racconta: usato solo per le frasi
   che devono restare in testa, mai per interfaccia.                          */
.voce {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--f-display);
  line-height: 1.2;
  color: var(--pietra);
}

.nota { font-size: var(--f-piccolo); color: var(--testo-3); }

/* =============================================================================
   PULSANTI — non grafica: promesse.
   ========================================================================== */
.btn {
  --btn-fondo: transparent;
  --btn-testo: var(--testo);
  --btn-bordo: var(--bordo-azione);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  min-block-size: 50px;
  padding: var(--s-3) var(--s-6);
  background: var(--btn-fondo);
  color: var(--btn-testo);
  border: 1px solid var(--btn-bordo);
  border-radius: var(--r-tonda);
  font-size: var(--f-piccolo);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-1) var(--curva), border-color var(--t-1) var(--curva),
              color var(--t-1) var(--curva), transform var(--t-1) var(--curva),
              box-shadow var(--t-1) var(--curva);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Una sola azione porta il rosso del giglio. Il colore più acceso è il più
   raro: così l'occhio sa sempre dove si prenota.                             */
.btn--giglio {
  --btn-fondo: var(--giglio);
  --btn-testo: #FFF6EE;
  --btn-bordo: var(--giglio);
  box-shadow: 0 10px 30px -14px rgba(193, 39, 45, .9);
}
.btn--giglio:hover {
  --btn-fondo: var(--giglio-vivo);
  --btn-bordo: var(--giglio-vivo);
  box-shadow: 0 14px 36px -14px rgba(217, 59, 55, .95);
}
.btn--fantasma:hover { background: color-mix(in oklab, var(--pietra) 10%, transparent); }
.btn--chiaro { --btn-testo: var(--inchiostro); --btn-bordo: color-mix(in oklab, var(--inchiostro) 26%, transparent); }
.btn--chiaro:hover { background: color-mix(in oklab, var(--inchiostro) 7%, transparent); }
.btn--piccolo { min-block-size: 42px; padding: var(--s-2) var(--s-5); font-size: var(--f-minimo); }

.btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* =============================================================================
   MOTO
   -----------------------------------------------------------------------------
   Un solo modo di entrare in scena, applicato ovunque: si sale di poco e si
   apre. Lo scaglionamento è una conversazione, non una sfilata: 70 ms.
   ========================================================================== */
.js .sale {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--t-3) var(--curva), transform var(--t-3) var(--curva);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.js .sale.dentro { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .js .sale { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =============================================================================
   LA LAMPADA — la firma del sito.
   -----------------------------------------------------------------------------
   Nella cantina la luce non arriva dalle finestre: arriva da otto sospensioni
   smaltate a 2700 K. Qui è un alone caldo che respira piano, sempre nello
   stesso punto. Non si nota. Si percepisce. Anima solo opacity e transform,
   quindi resta sulla GPU e non costa un reflow.
   ========================================================================== */
.lampada {
  position: absolute; z-index: 0;
  inline-size: min(120vw, 1100px); aspect-ratio: 1;
  border-radius: var(--r-tonda);
  background: radial-gradient(circle closest-side,
              rgba(243, 197, 127, .19) 0%,
              rgba(243, 197, 127, .09) 38%,
              rgba(193, 110, 60, .04) 62%,
              transparent 78%);
  pointer-events: none;
  animation: respiro 9s var(--respiro) infinite;
}
@keyframes respiro {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Il buio che si stringe man mano che si scende. Un solo elemento fisso, di
   cui muoviamo unicamente l'opacità: costo praticamente nullo.               */
.buio {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 85% at 50% 42%,
              transparent 42%, rgba(11, 8, 6, .5) 100%);
  opacity: var(--profondita, 0);
  transition: opacity 700ms linear;
}