/* La lente sul nastro */
:root {
  --album: #10231C;
  --striscia: #163027;
  --vetro: #1D3D33;
  --carta: #F4F0E6;
  --ottone: #C9A765;
  --testo: #E9E4D6;
  --tenue: #A3B5AB;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
  /* la misura di un francobollo: tutto il resto ne discende */
  --fb: clamp(128px, 24vh, 232px);
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--album);
  color: var(--testo);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  overflow: hidden;
}
.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.album {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--alto);
  overflow: hidden;
}
.nota {
  position: absolute;
  top: var(--margine);
  left: var(--margine);
  max-width: 32ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 500;
  line-height: 1.38;
}

/* ---- il nastro: una striscia di pergamino con i francobolli in fila ---- */
.nastro {
  position: relative;
  width: 100%;
  height: calc(var(--fb) * 1.5);
  background: var(--striscia);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  cursor: grab;
  outline: none;
  /* il dito in verticale resta alla pagina, in orizzontale trascina il nastro */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.nastro--presa {
  cursor: grabbing;
}
.nastro:focus-visible .lente__riflesso {
  box-shadow: 0 0 0 3px var(--album), 0 0 0 5px var(--ottone);
}
.binario {
  position: absolute;
  top: calc(var(--fb) * 0.25);
  left: 0;
  display: flex;
  gap: calc(var(--fb) * 0.12);
  will-change: transform;
}
/* fuori dalla lente: sfocato, spento, quasi senza colore */
.binario:not(.binario--lente) {
  filter: blur(3px) brightness(0.5) saturate(0.55);
}
.francobollo {
  flex: none;
  width: calc(var(--fb) * 0.8);
  height: var(--fb);
}
.francobollo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.francobollo text {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  fill: #2A2622;
}

/* ---- la lente: un vetro rotondo che mostra il nastro nitido e più grande ---- */
.lente {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--fb) * 1.56);
  height: calc(var(--fb) * 1.56);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lente__vetro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--vetro);
  clip-path: circle(50%);
}
.binario--lente {
  top: 0;
  transform-origin: 0 0;
}
/* il bordo d'ottone, lo spessore del vetro e un riflesso in alto a sinistra */
.lente__riflesso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow:
    0 0 0 2px var(--ottone),
    0 0 0 5px rgba(201, 167, 101, 0.18),
    0 24px 48px rgba(0, 0, 0, 0.45);
  transition: box-shadow 200ms ease;
}

/* ---- sotto la lente: il nome e il valore del francobollo che ci sta sotto ---- */
.didascalia {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--fb) * 0.78 + 22px);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.didascalia__nome {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -0.015em;
}
.didascalia__valore {
  color: var(--ottone);
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.didascalia__nome,
.didascalia__valore {
  display: inline-block;
}

@media (max-width: 640px) {
  :root { --fb: clamp(120px, 24vh, 200px); }
}