/* Lo sfondo di francobolli: un tavolo verde petrolio coperto di francobolli illustrati, coi bordi dentellati, che
   si sollevano sotto il puntatore; un tocco li timbra. Sopra, il biglietto color crema col titolo. */
:root {
  --tavolo: #1d5754;                      /* il fondo del tavolo */
  --tavolo-scuro: #12403e;                /* l'ombra del tavolo ai bordi */
  --carta: #f7f0e1;                       /* la carta dei francobolli e del biglietto */
  --inchiostro: #1d2a44;                  /* il blu notte delle scritte e dei timbri */
  --pomodoro: #e8553e;                    /* il rosso dei francobolli */
  --senape: #f2b134;                      /* il giallo dei francobolli e del tasto */
  --cielo: #73b9dc;                       /* l'azzurro dei francobolli */
  --rosa: #ec8fab;                        /* il rosa dei francobolli */
  --foglia: #4f9a5b;                      /* il verde dei francobolli */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--tavolo);
  color: var(--inchiostro);
  font-family: 'Instrument Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.palco {
  --margine: clamp(14px, 3.6vw, 48px);
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 35%, var(--tavolo-scuro) 115%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 7px 7px,
    var(--tavolo);
  touch-action: pan-y;
  cursor: default;
}

.tavolo,
.timbri {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tavolo {
  z-index: 0;
}

.timbri {
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* un francobollo: l'elemento esterno lo muove GSAP (posto, sollevamento), quello interno ondeggia da solo */
.francobollo {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.francobollo__ombra {
  position: absolute;
  inset: 4% 3% -2% 3%;
  background: rgba(6, 24, 23, 0.55);
  border-radius: 3px;
  filter: blur(5px);
  will-change: transform, opacity;
}

.francobollo__carta {
  position: relative;
  width: 100%;
  height: 100%;
}

.francobollo__carta svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* l'angolo che si arriccia: un triangolo di carta col suo rovescio, che appare quando il francobollo si solleva */
.francobollo__angolo {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 26%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, transparent 49%, #d9cfb9 50%, #fffaf0 72%, #e6dcc6 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: 100% 100%;
  opacity: 0;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.st-testo {
  font-family: 'Instrument Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.st-valore {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 700;
}

.timbro-testo {
  font-family: 'Instrument Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-stretch: 85%;
}

.timbro-data {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 700;
}

.testata {
  position: absolute;
  top: var(--margine);
  left: var(--margine);
  right: var(--margine);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 3;
}

.marchio,
.nota {
  margin: 0;
  padding: 0.38em 0.8em 0.42em;
  border-radius: 999px;
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: 0 6px 16px rgba(5, 25, 24, 0.35);
  font-size: clamp(11px, 1.15vw, 14px);
  white-space: nowrap;
}

.marchio {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(12px, 1.3vw, 16px);
}

.nota {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(9px, 0.95vw, 12px);
}

/* il biglietto col titolo, sempre leggibile sopra i francobolli */
.biglietto {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(86vw, 540px);
  padding: clamp(18px, min(3.6vw, 4.6vh), 40px) clamp(18px, 3.6vw, 44px) clamp(18px, min(3.4vw, 4.4vh), 38px);
  background:
    repeating-linear-gradient(0deg, rgba(29, 42, 68, 0.035) 0 1px, transparent 1px 26px),
    var(--carta);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 22px 46px rgba(5, 25, 24, 0.5),
    0 4px 10px rgba(5, 25, 24, 0.3);
  text-align: left;
  transform: translate(-50%, -50%) rotate(-1.4deg);
}

.nastro {
  position: absolute;
  width: clamp(54px, 9vw, 92px);
  height: clamp(16px, 2.4vw, 24px);
  background: rgba(242, 177, 52, 0.62);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0) ;
}

.nastro--a {
  top: -9px;
  left: 18px;
  transform: rotate(-7deg);
}

.nastro--b {
  bottom: -8px;
  right: 22px;
  transform: rotate(5deg);
  background: rgba(115, 185, 220, 0.6);
}

.biglietto__sopra {
  margin: 0 0 0.7em;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pomodoro);
}

.biglietto__titolo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(28px, min(6.2vw, 8.4vh), 66px);
  line-height: 0.98;
  font-weight: 640;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -0.02em;
}

.biglietto__titolo em {
  font-style: italic;
  font-weight: 500;
  color: var(--pomodoro);
}

.biglietto__testo {
  margin: 0.85em 0 1.2em;
  max-width: 34em;
  font-size: clamp(12px, min(1.25vw, 2.1vh), 16px);
  line-height: 1.45;
  color: rgba(29, 42, 68, 0.78);
}

.tasto {
  display: inline-flex;
  align-items: center;
  padding: 0.72em 1.25em 0.78em;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--carta);
  text-decoration: none;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 650;
  font-stretch: 100%;
  transition: font-stretch 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s;
}

.tasto span {
  display: inline-block;
}

@media (hover: hover) {
  .tasto:hover {
    font-stretch: 118%;
    background: #2b3c60;
  }
}

.tasto:focus-visible {
  outline: 2px solid var(--senape);
  outline-offset: 3px;
}

.cenno {
  position: absolute;
  left: 50%;
  bottom: var(--margine);
  margin: 0;
  transform: translateX(-50%);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: rgba(18, 64, 62, 0.82);
  color: rgba(247, 240, 225, 0.9);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 520px) {
  .nota {
    display: none;
  }
}