:root {
  --fondo: #f4f1eb;
  --fondo-chiaro: #faf8f4;
  --inchiostro: #1b1a18;
  --grigio: #8d8880;
  --acciaio-chiaro: #f3f3f1;
  --acciaio: #b9bcbf;
  --acciaio-scuro: #6f7377;
  --bordo: #55595d;
  --accento: #d4491f;
  --ombra: 27, 24, 20;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 300px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 62%, var(--fondo-chiaro) 0%, var(--fondo) 62%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.testa, .piede {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(14px, 3.2vmin, 32px) clamp(16px, 4vmin, 40px);
  font-size: clamp(11px, 1.5vmin, 13px);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.testa { top: 0; }
.piede { bottom: 0; }

.marchio { font-weight: 640; font-stretch: 92%; }
.testa__nota, .nota { color: var(--grigio); }

.misura {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--grigio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.misura__sep {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform: translateY(-3px);
}

[data-stato] { color: var(--inchiostro); transition: color 0.4s ease; }
[data-stato].fermo { color: var(--accento); }

/* la parola: ogni lettera ha un figlio, il padre lo muove la regia, il figlio il tremito */
.parola {
  position: absolute;
  left: 50%;
  top: 31%;
  transform: translate(-50%, -50%);
  font-size: min(15vw, 17vh, 168px);
  font-weight: 560;
  font-stretch: 86%;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  user-select: none;
}

.lettera { display: inline-block; }
.lettera__dentro { display: inline-block; will-change: transform; }

/* la scena: il piano è steso indietro, il disco sta sopra il piano nel suo spazio 3D */
.scena {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.piano {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}

.ombra {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--ombra), 0.34), rgba(var(--ombra), 0.12) 55%, rgba(var(--ombra), 0) 100%);
  will-change: transform, opacity, filter;
}

.contatto {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--ombra), 0.55), rgba(var(--ombra), 0));
  filter: blur(1.5px);
  will-change: transform, opacity;
}

.disco {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.fetta {
  position: absolute;
  border-radius: 50%;
  backface-visibility: visible;
  background: linear-gradient(90deg, var(--acciaio-scuro), var(--acciaio) 45%, var(--acciaio-scuro));
  box-shadow: inset 0 0 0 1px rgba(40, 42, 45, 0.35);
}

/* la faccia di sopra: acciaio spazzolato in cerchi, un'incisione, il riflesso che resta fermo rispetto alla luce */
.faccia {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.0) 0 1.2px, rgba(255, 255, 255, 0.22) 1.2px 1.6px, rgba(0, 0, 0, 0.04) 1.6px 2.4px),
    radial-gradient(circle at 50% 50%, var(--acciaio-chiaro) 0%, var(--acciaio) 70%, var(--acciaio-scuro) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 0 2px rgba(40, 42, 45, 0.3);
}

.faccia__luce {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.95) 22deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, 0.55) 206deg, rgba(255, 255, 255, 0) 240deg);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.faccia__segno {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 1.5px;
  height: 22%;
  margin-left: -0.75px;
  border-radius: 1px;
  background: rgba(40, 42, 45, 0.55);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6);
}

.faccia__perno {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7%;
  height: 7%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #fff, var(--acciaio) 60%, var(--acciaio-scuro));
  box-shadow: 0 0 0 1px rgba(40, 42, 45, 0.25);
}

@media (hover: hover) {
  .pagina:hover .nota { color: var(--inchiostro); transition: color 0.3s ease; }
}

@media (max-width: 560px) {
  .testa__nota { display: none; }
  .parola { top: 30%; }
  .scena { top: 64%; }
}