/* Il quaderno ad anelli */
:root {
  --tavolo: #22433b;          /* il tappetino da taglio sul tavolo */
  --tavolo-riga: rgba(226, 240, 228, 0.09);
  --cartone: #b98d5c;         /* il cartone delle copertine */
  --cartone-scuro: #8f6a42;
  --carta: #f7f2e7;           /* la carta delle pagine */
  --carta-retro: #efe8d9;
  --riga: rgba(92, 128, 170, 0.32);
  --margine-rosso: rgba(214, 104, 92, 0.5);
  --matita-rossa: #d0483b;
  --giallo: #f6d455;
  --rosa: #f4a3b4;
  --stoffa: #b5552f;
  --metallo: #c3c9d1;
  --metallo-scuro: #3a3f47;
  --testo: #eef1e8;
  --testo-tenue: rgba(238, 241, 232, 0.6);
  --alto: 100vh;
  --alto-grande: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}
/* il palco fermo è alto quanto lo schermo con la barra di Safari ritirata */
@supports (height: 100lvh) {
  :root { --alto-grande: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  background: var(--tavolo);
}
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  color: var(--testo);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- la scena */
.scena {
  position: relative;
  height: calc(var(--alto) * 5);
}
.palco {
  position: sticky;
  top: 0;
  height: var(--alto-grande);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, 0.06), transparent 60%),
    var(--tavolo);
}

.testata {
  position: absolute;
  z-index: 3;
  top: clamp(16px, 3.4vh, 34px);
  left: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
  pointer-events: none;
}
.testata__marchio {
  margin: 0;
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.02em;
}
.testata__marchio span {
  font-weight: 450;
  color: var(--testo-tenue);
  margin-left: 0.4em;
}
.testata__titolo {
  margin: 4px 0 0;
  font-family: 'Caveat Variable', cursive;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 560;
  line-height: 1.1;
  min-height: 1.1em;
  white-space: nowrap;
}
.testata__titolo .lettera { display: inline-block; white-space: pre; }

.cenno {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(14px, 3.4vh, 30px);
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 520;
  color: var(--testo-tenue);
  pointer-events: none;
}

/* ---------------------------------------------------------------- la vista in prospettiva */
.vista {
  position: absolute;
  inset: 0;
  perspective: var(--prospettiva, 1700px);
  perspective-origin: 50% 40%;
}
.piano {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--PW, 2000px);
  height: var(--PH, 2000px);
  margin-left: calc(var(--PW, 2000px) / -2);
  margin-top: calc(var(--PH, 2000px) / -2);
  transform-style: preserve-3d;
  transform: translateY(var(--sposta, 0px)) rotateX(var(--inclina, 30deg)) rotateZ(var(--gira, -3deg));
}
.piano--anelli { pointer-events: none; }

/* il tappetino: righe sottili che si perdono verso i bordi */
.tappetino {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--tavolo-riga) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, var(--tavolo-riga) 0 1px, transparent 1px 48px);
  background-position: calc(50% + 24px) calc(50% + 24px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}

/* ---------------------------------------------------------------- la matita e la gomma */
.matita {
  position: absolute;
  width: var(--mat-l, 300px);
  height: calc(var(--mat-l, 300px) * 26 / 300);
  left: var(--mat-x, 0px);
  top: var(--mat-y, 0px);
  overflow: visible;
  transform-origin: 50% 50%;
}
.matita__ombra { fill: rgba(0, 0, 0, 0.32); transform: translate(6px, 8px); filter: blur(3px); }
.matita__gomma { fill: #e98f93; }
.matita__ghiera { fill: #c7ccd2; }
.matita__riga { stroke: #8f969f; stroke-width: 1.2; fill: none; }
.matita__corpo { fill: #2f6d8f; }
.matita__lato { fill: #3f87ad; }
.matita__legno { fill: #e9c99a; }
.matita__mina { fill: #2a2a2e; }

.gomma {
  position: absolute;
  left: var(--gom-x, 0px);
  top: var(--gom-y, 0px);
  width: var(--gom-l, 90px);
  height: calc(var(--gom-l, 90px) * 0.42);
  border-radius: 6px;
  background: linear-gradient(90deg, #f3eee6 0 26%, var(--matita-rossa) 26% 100%);
  box-shadow: 4px 7px 10px rgba(0, 0, 0, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  padding-left: calc(var(--gom-l, 90px) * 0.22);
  font-size: calc(var(--gom-l, 90px) * 0.15);
  font-weight: 760;
  letter-spacing: 0.14em;
  color: #fff4ec;
}

/* ---------------------------------------------------------------- il quaderno */
.cartone {
  position: absolute;
  left: calc(var(--cx) - var(--W) / 2 - var(--bordo));
  width: calc(var(--W) + var(--bordo) * 2);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 40%),
    var(--cartone);
  border-radius: 4px;
}
.cartone--giu {
  top: calc(var(--hy) + var(--g));
  height: calc(var(--H) + var(--bordo));
  border-radius: 2px 2px 5px 5px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32), 0 3px 6px rgba(0, 0, 0, 0.25);
}
.cartone--su {
  top: calc(var(--hy) - var(--g) - var(--H) - var(--bordo));
  height: calc(var(--H) + var(--bordo));
  border-radius: 5px 5px 2px 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26), 0 2px 5px rgba(0, 0, 0, 0.2);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.08), transparent 30%),
    var(--cartone);
}
.cartone__dentro {
  position: absolute;
  left: 12%;
  right: 10%;
  top: 22%;
  color: #3b2a18;
  font-family: 'Caveat Variable', cursive;
  line-height: 1.15;
}
.cartone__nome { margin: 0 0 0.2em; font-size: calc(var(--H) * 0.13); font-weight: 680; }
.cartone__riga { margin: 0; font-size: calc(var(--H) * 0.072); font-weight: 480; opacity: 0.85; }
.cartone__fori {
  position: absolute;
  left: calc(var(--bordo) + var(--m0) - var(--passo) / 2 + var(--s2));
  width: calc(var(--passo) * var(--n));
  bottom: calc(var(--fy) - var(--foro-a));
  height: calc(var(--foro-a) * 2);
  background: radial-gradient(var(--foro-l) var(--foro-a) at 50% 50%, #2a2219 88%, transparent 100%) 0 0 / var(--passo) 100% repeat-x;
}
/* lo spessore delle pagine ancora da voltare, sul bordo vicino */
.spessore {
  position: absolute;
  left: var(--bordo);
  right: var(--bordo);
  bottom: calc(var(--bordo) - var(--spesso, 4px));
  height: var(--spesso, 4px);
  background: repeating-linear-gradient(0deg, #e4dccb 0 1px, #f6f0e3 1px 2px);
  border-radius: 0 0 2px 2px;
}

.fili {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(0.5px);
  pointer-events: none;
}
.pagine {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.anelli {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.anelli--su,
.anelli--giu { transform: translateZ(var(--zr, 8px)); }

/* ---------------------------------------------------------------- una pagina: tre strisce una dentro l'altra */
.striscia {
  position: absolute;
  left: 0;
  width: var(--W);
  transform-style: preserve-3d;
  transform-origin: 50% 0;
}
.pagina {
  left: calc(var(--cx) - var(--W) / 2);
  top: calc(var(--hy) + var(--g));
  transform-origin: 50% calc(var(--g) * -1);
}
.striscia .striscia { top: 100%; }
.faccia {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 1px);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
}
.faccia--retro { transform: rotateX(180deg); }
.faccia::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1d150c;
  opacity: var(--l, 0);
  pointer-events: none;
}
.faccia--retro::after { background: #2a1e10; }

/* il foglio intero dentro ogni striscia: si sposta in su per mostrare il suo pezzo */
.foglio {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W);
  height: var(--H);
  background-color: var(--carta);
}
.faccia--retro .foglio { background-color: var(--carta-retro); }
.carta-lines .foglio {
  background-image:
    linear-gradient(90deg, transparent calc(var(--W) * 0.075), var(--margine-rosso) calc(var(--W) * 0.075) calc(var(--W) * 0.075 + 1.5px), transparent calc(var(--W) * 0.075 + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--H) / 15 - 1px), var(--riga) calc(var(--H) / 15 - 1px) calc(var(--H) / 15));
  background-position: 0 0, 0 calc(var(--H) / 15 * 1.2);
  background-repeat: no-repeat, repeat-y;
  background-size: 100% 100%, 100% calc(var(--H) / 15);
}
.carta-lines .faccia--retro .foglio {
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--H) / 15 - 1px), var(--riga) calc(var(--H) / 15 - 1px) calc(var(--H) / 15));
  background-position: 0 calc(var(--H) / 15 * -0.2);
  background-size: 100% calc(var(--H) / 15);
  background-repeat: repeat-y;
}
.carta-grid .foglio {
  background-image:
    repeating-linear-gradient(90deg, var(--riga) 0 1px, transparent 1px calc(var(--W) / 28)),
    repeating-linear-gradient(180deg, var(--riga) 0 1px, transparent 1px calc(var(--W) / 28));
  background-position: calc(var(--W) / 56) calc(var(--W) / 56);
}
.carta-blank .foglio {
  background-image: radial-gradient(140% 120% at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%);
}
/* i fori della spirale: in cima sul davanti, in fondo sul retro (spostati come il filo) */
.foglio__fori {
  position: absolute;
  left: calc(var(--m0) - var(--passo) / 2);
  width: calc(var(--passo) * var(--n));
  top: calc(var(--fy) - var(--foro-a));
  height: calc(var(--foro-a) * 2);
  background: radial-gradient(var(--foro-l) var(--foro-a) at 50% 50%, #2b261f 88%, transparent 100%) 0 0 / var(--passo) 100% repeat-x;
}
.faccia--retro .foglio__fori {
  top: auto;
  bottom: calc(var(--fy) - var(--foro-a));
  left: calc(var(--m0) - var(--passo) / 2 + var(--s2));
}

/* l'ombra della pagina che si alza, sulla pagina sotto */
.ombra {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--H);
  pointer-events: none;
  opacity: var(--oa, 0);
  background: linear-gradient(180deg, rgba(24, 16, 6, 0.55) 0, rgba(24, 16, 6, 0.32) calc(var(--oh, 0px) * 0.7), transparent var(--oh, 0px));
}
.faccia--retro .ombra,
.cartone--su .ombra {
  top: auto;
  bottom: 0;
  opacity: var(--ob, 0);
  background: linear-gradient(0deg, rgba(24, 16, 6, 0.55) 0, rgba(24, 16, 6, 0.32) calc(var(--obh, 0px) * 0.7), transparent var(--obh, 0px));
}

/* ---------------------------------------------------------------- lo schizzo */
.schizzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.schizzo .t {
  fill: none;
  stroke: var(--inchiostro, #22305c);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.schizzo .t.r { stroke: var(--matita-rossa); stroke-width: 1.8; opacity: 0.9; }
.schizzo .bis { opacity: 0.35; stroke-width: 1.2; }
.nota {
  fill: var(--inchiostro, #22305c);
  font-family: 'Caveat Variable', cursive;
  font-size: 23px;
  font-weight: 520;
  white-space: pre;
}
.nota--grande { font-size: 38px; font-weight: 640; }
.nota--piccola { font-size: 18px; }
.fantasma { opacity: 0.075; transform: scaleY(-1); filter: blur(0.6px); }
.fantasma .postit,
.fantasma .graffetta,
.fantasma .ritaglio,
.fantasma .biglietto { display: none; }

.postit__ombra,
.ritaglio__ombra,
.biglietto__ombra { fill: rgba(40, 28, 10, 0.2); }
.postit__carta { fill: var(--giallo); }
.postit--rosa .postit__carta { fill: var(--rosa); }
.postit__colla { fill: rgba(0, 0, 0, 0.05); }
.postit__testo {
  fill: #3a2c14;
  font-family: 'Caveat Variable', cursive;
  font-size: 22px;
  font-weight: 600;
}
.ritaglio__stoffa { fill: var(--stoffa); }
.ritaglio__trama { stroke: rgba(255, 230, 210, 0.22); stroke-width: 2; fill: none; }
.biglietto__carta { fill: #fbf7ee; stroke: rgba(60, 50, 30, 0.25); stroke-width: 1; }
.biglietto__strappo { stroke: rgba(60, 50, 30, 0.4); stroke-width: 1.4; stroke-dasharray: 3 4; fill: none; }
.biglietto__testo {
  fill: #33302a;
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: 0.06em;
}
.biglietto__testo--piccolo { font-size: 11px; font-weight: 560; letter-spacing: 0.12em; }
.graffetta__filo {
  fill: none;
  stroke: #9aa1aa;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* il ritocco col mouse: i post-it si sollevano un poco */
@media (hover: hover) {
  .postit,
  .ritaglio,
  .biglietto { cursor: grab; }
}

@media (max-width: 640px) {
  .testata__marchio { font-size: 12px; }
}