/* The cut-out title: a photocopied fanzine cover, the title pasted on in cuttings. Every colour is a variable here:
   the sheet, the toner, the papers the letters are cut from, the inks, the tape and the shadows. */
:root {
  --sheet: #efe8da;         /* the photocopied sheet behind */
  --sheet-deep: #ddd2bc;    /* the sheet towards the corners */
  --toner: #2a2520;         /* the specks of toner on the sheet */
  --ink: #1c1a17;           /* black ink */
  --cream: #f6efdf;         /* cream paper and cream ink */
  --newsprint: #e8e0cb;     /* newspaper */
  --lines: #6f685a;         /* the small print on the cuttings */
  --red: #d93a2b;           /* magazine red */
  --yellow: #f4c430;        /* yellow */
  --blue: #2546c8;          /* glossy blue */
  --blue-light: #5577f2;    /* the shine on the blue */
  --pink: #f3a5bf;          /* pink */
  --green: #1f7356;         /* green */
  --orange: #f07a2a;        /* orange */
  --violet: #6a4cc4;        /* violet */
  --white: #fbfaf5;         /* glossy white */
  --black: #1b1a18;         /* black paper */
  --tape: #f4edd2;          /* the sticky tape */
  --shade: #2b2014;         /* the shadows of the cuttings */
  --hint: #7c7262;          /* the small text at the bottom */
  --l: 120px;               /* the height of a letter: the script sets it to fit the window */
  --velo: 0.55;             /* how see-through the tape is: the script sets it from TAPE */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: var(--sheet);
  background-image:
    radial-gradient(130% 100% at 50% 40%, transparent 50%, color-mix(in srgb, var(--sheet-deep) 90%, transparent)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  overflow: hidden;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.scena {
  position: relative;
  height: var(--screen);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--l) * 0.16);
  padding: 24px 16px 56px;
  cursor: pointer;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}
.scena:has(.sr:focus-visible) .titolo {
  outline: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  outline-offset: 14px;
}

/* ---------------------------------------------------------------- the title */
.titolo {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(var(--l) * 0.38);
  row-gap: calc(var(--l) * 0.06);
  font-size: 0;
  line-height: 0;
  max-width: min(1180px, 100%);
}
.parola {
  display: flex;
  gap: calc(var(--l) * 0.035);
  white-space: nowrap;
}

/* a letter's place in the title; the cutting inside moves */
.lettera {
  position: relative;
  height: calc(var(--l) * 1.16);
  flex: none;
}
.ritaglio {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* the soft shadow on the sheet: the same shape, blurred */
.ombra {
  position: absolute;
  filter: blur(calc(var(--l) * 0.022));
  opacity: 0.36;
}
.ombra__forma {
  position: absolute;
  inset: 0;
  background: var(--shade);
}

/* the cutting itself: a paper clipped by a crooked scissor cut */
.carta {
  position: absolute;
  overflow: hidden;
}
.carta svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.carta text {
  font-kerning: none;
}

/* the papers */
.carta--newsprint { background: var(--newsprint); color: var(--ink); }
.carta--red { background: var(--red); color: var(--cream); }
.carta--yellow {
  background-color: var(--yellow);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 17%, transparent) 30%, transparent 34%);
  background-size: calc(var(--l) * 0.055) calc(var(--l) * 0.055);
  color: var(--ink);
}
.carta--black { background: var(--black); color: var(--pink); }
.carta--blue { background: linear-gradient(150deg, var(--blue-light), var(--blue) 52%); color: var(--yellow); }
.carta--pink { background: var(--pink); color: var(--ink); }
.carta--white { background: linear-gradient(165deg, var(--white), color-mix(in srgb, var(--white) 88%, var(--sheet-deep))); color: var(--red); }
.carta--green { background: var(--green); color: var(--cream); }
.carta--orange {
  background-color: var(--orange);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--red) 55%, transparent) 26%, transparent 31%);
  background-size: calc(var(--l) * 0.07) calc(var(--l) * 0.07);
  background-position: calc(var(--l) * 0.02) 0;
  color: var(--ink);
}
.carta--ruled {
  background-color: var(--cream);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--l) * 0.105), color-mix(in srgb, var(--blue) 30%, transparent) calc(var(--l) * 0.105) calc(var(--l) * 0.112));
  color: var(--ink);
}
.carta--violet { background: var(--violet); color: var(--white); }
.carta--newsprint-red { background: var(--newsprint); color: var(--red); }

/* a glossy magazine page catches the light */
.carta--gloss::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 28%, color-mix(in srgb, #fff 30%, transparent) 40%, transparent 54%);
  pointer-events: none;
}

/* a strip of small print left over at the edge of the cutting: lines of text broken into words */
.brano {
  position: absolute;
  left: 7%;
  right: 7%;
  opacity: 0.5;
  background-image: repeating-linear-gradient(to bottom, currentColor 0 calc(var(--l) * 0.017), transparent calc(var(--l) * 0.017) calc(var(--l) * 0.043));
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--l) * 0.11), transparent calc(var(--l) * 0.11) calc(var(--l) * 0.135), #000 calc(var(--l) * 0.135) calc(var(--l) * 0.2), transparent calc(var(--l) * 0.2) calc(var(--l) * 0.222));
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--l) * 0.11), transparent calc(var(--l) * 0.11) calc(var(--l) * 0.135), #000 calc(var(--l) * 0.135) calc(var(--l) * 0.2), transparent calc(var(--l) * 0.2) calc(var(--l) * 0.222));
}
.carta--newsprint .brano,
.carta--newsprint-red .brano,
.carta--white .brano { color: var(--lines); }

/* ---------------------------------------------------------------- the tape */
.nastro {
  position: absolute;
  display: block;
  pointer-events: none;
}
.nastro__velo {
  position: absolute;
  inset: 0;
  opacity: var(--velo);
  background:
    linear-gradient(100deg, color-mix(in srgb, #fff 45%, transparent), transparent 35%, color-mix(in srgb, #fff 25%, transparent) 68%, transparent 82%),
    var(--tape);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shade) 8%, transparent);
}

/* ---------------------------------------------------------------- the typed strips */
.striscia {
  position: relative;
  margin: 0;
  z-index: 0;
  filter: drop-shadow(1px 2px 1.5px color-mix(in srgb, var(--shade) 32%, transparent));
}
.striscia__carta {
  display: block;
  padding: 0.5em 1.1em 0.55em;
  background: var(--white);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: clamp(12px, calc(var(--l) * 0.13), 19px);
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.01em;
  text-wrap: balance;
  max-width: min(720px, calc(100vw - 48px));
}
.striscia--sopra .striscia__carta {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.nastro--striscia {
  width: 3.4em;
  height: 1.25em;
  font-size: clamp(12px, calc(var(--l) * 0.13), 19px);
  top: -0.55em;
  left: -1.4em;
}
.striscia--sopra .nastro--striscia { left: auto; right: -1.3em; top: -0.5em; }
.striscia--sotto .nastro--striscia + .nastro--striscia { left: auto; right: -1.4em; top: auto; bottom: -0.5em; }

.nota {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 13px;
  color: var(--hint);
}

/* the measuring stick, out of sight */
.misura {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* nothing is seen before the script has cut the letters out */
.titolo:empty,
.js-attesa .striscia,
.js-attesa .nota { visibility: hidden; }