/* The photo printed by the sun: a made-up cyanotype print room, Ferro, in the minimal style. The stage sticks while you
   scroll; the sheet is a canvas drawn by the script, its colours come from the variables below. */
:root {
  --carta: #f3f0e8;          /* the page */
  --foglio: #f7f4ec;         /* the cotton paper of the print */
  --inchiostro: #141414;     /* the text */
  --tenue: #8d877b;          /* the small text, the arc and the steps still to come */
  --sali: #d9d6a0;           /* the iron salts on the paper, before the rinse */
  --esposto: #56697a;        /* the salts once the light has turned them, still wet */
  --accento: #163f8c;        /* Prussian blue: the print, the sun and the step you are on */
  --pellicola: #2a2119;      /* the dark of the negative */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------- the stage */
.corsa {
  position: relative;
  height: 520lvh; /* the script sets the real height from RIDE */
}

.palco {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  background: var(--carta);
}

/* ---------------------------------------------------------------- the small text */
.testa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(14px, 3vw, 32px) clamp(16px, 4.4vw, 60px);
}

.marchio {
  color: var(--inchiostro);
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: 21px;
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.testa__nota {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 420;
  font-stretch: 96%;
}

/* ---------------------------------------------------------------- the sun on its arc (placed by the script) */
.cielo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}

.arco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.arco__guida,
.arco__corsa {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.arco__guida {
  stroke: var(--tenue);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  opacity: 0.7;
}

.arco__corsa {
  stroke: var(--accento);
  stroke-width: 1.25;
}

/* one element for the script (place), the child for the CSS (the disc) */
.sole {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.sole__disco {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.25px solid var(--accento);
  background: var(--carta);
}

.sole__disco::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--accento);
  transform: scale(var(--pieno, 0));
  transition: transform 0.2s;
}

.tempo {
  position: absolute;
  left: 50%;
  top: 34%;
  color: var(--tenue);
  font-size: 12px;
  font-weight: 460;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------- the sheet (placed by the script) */
.foglio {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 240px;
  z-index: 3;
  will-change: transform;
}

.foglio__tela {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the steps under the sheet */
.passi {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  position: relative;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 380;
  font-stretch: 112%;
  letter-spacing: 0.01em;
  will-change: transform;
}

/* a thin Prussian rule grows under the step you are on */
.passo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--accento);
  transform: scaleX(var(--riga, 0));
  transform-origin: left center;
}

/* ---------------------------------------------------------------- the end */
.finale {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  text-align: center;
  padding: 0 16px;
  pointer-events: none;
}

.finale__titolo {
  margin: 0;
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: clamp(22px, min(4.4vw, 5.4vh), 46px);
  font-weight: 300;
  font-variation-settings: 'opsz' 72;
  line-height: 1.05;
  letter-spacing: -0.015em;
  opacity: 0;
}

.finale__nota {
  margin: 8px 0 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 420;
  opacity: 0;
}

.cenno {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 3vh, 28px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--tenue);
  font-size: 12px;
  font-weight: 440;
  transform: translateX(-50%);
}

.cenno svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- after the stage */
.piede {
  display: flex;
  justify-content: center;
  padding: 18vh clamp(16px, 6vw, 80px) 22vh;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}

.piede p {
  max-width: 34em;
  margin: 0;
  color: var(--tenue);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}