/* La torta a strati */
:root {
  --fondo: #f6ece1;              /* the page, warm cream */
  --fondo-palco: #f1e1d1;        /* behind the cake */
  --inchiostro: #2c1620;         /* the words */
  --inchiostro-tenue: rgba(44, 22, 32, 0.66);
  --accento: #c8325a;            /* raspberry: the brand and the small details */
  --spugna: #e8b465;             /* the sponge's crust, on the outside */
  --spugna-taglio: #f4d394;      /* the sponge cut open */
  --crema: #fff9f0;              /* the mascarpone cream */
  --glassa: #4a2216;             /* the chocolate glaze */
  --glassa-luce: #8a4a2c;
  --lampone: #d23a55;            /* the berries */
  --mirtillo: #3c3f78;
  --fragola: #e8475b;
  --rosa: #f3a9bb;               /* the buttercream rosettes */
  --rosa-scuro: #d8708c;
  --candela: #fffdf8;            /* the candles */
  --candela-riga: #e9798f;
  --fiamma: #ffad33;
  --fiamma-cuore: #fff0b0;
  --alzata: #a9d4c8;             /* the cake stand */
  --alzata-chiara: #dff2ec;
  --alzata-scura: #73a597;
  --acciaio: #c4c7ca;            /* the spatula, the knife, the server */
  --acciaio-chiaro: #f1f2f3;
  --acciaio-scuro: #7c8084;
  --rame: #c7784a;               /* the little pan of glaze */
  --legno: #8a5a35;
  --ciliegia: #b8233f;           /* the cherries in the opening */
  --alto: 100vh;
  --alto-grande: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}
/* the still stage is as tall as the screen with the Safari bar pulled back */
@supports (height: 100lvh) {
  :root { --alto-grande: 100lvh; }
}

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

/* ---------------------------------------------------------------- the header */
.testata {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 44px);
  pointer-events: none;
}
.testata > * { pointer-events: auto; }
.marchio {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 21px;
  font-weight: 650;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
  letter-spacing: -0.01em;
}
.marchio span {
  font-style: italic;
  font-weight: 400;
  color: var(--accento);
}
.menu {
  display: flex;
  gap: 6px;
}
.menu a {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 560;
  text-decoration: none;
  background: rgba(44, 22, 32, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.8, 0.5, 1);
}
@media (hover: hover) {
  .menu a:hover {
    background: var(--inchiostro);
    color: var(--fondo);
    transform: translateY(-2px) scale(1.06);
  }
}

/* ---------------------------------------------------------------- the opening */
.apertura {
  position: relative;
  min-height: var(--alto-grande);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px clamp(16px, 6vw, 88px) 90px;
  overflow: hidden;
}
.apertura__etichetta {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accento);
}
.apertura__titolo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(52px, 10.5vw, 164px);
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.apertura__titolo em,
.passo__titolo em,
.fine__frase em {
  font-weight: 360;
  color: var(--accento);
}
.riga {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.12em;
  margin-bottom: -0.12em;
}
.riga > span { display: inline-block; }
.apertura__testo {
  max-width: 32ch;
  margin: 26px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--inchiostro-tenue);
}
.apertura__cenno {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 34px 0 0;
  font-size: 14px;
  font-weight: 600;
}
.apertura__cenno svg {
  width: 16px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ciliegie {
  position: absolute;
  right: clamp(16px, 9vw, 150px);
  bottom: clamp(70px, 16vh, 160px);
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1vw, 14px);
}
.ciliegia {
  width: clamp(40px, 5.4vw, 84px);
  height: auto;
  overflow: visible;
  cursor: pointer;
}
.ciliegia:nth-child(2) { width: clamp(50px, 6.8vw, 104px); }
.ciliegia__corpo { fill: var(--ciliegia); }
.ciliegia__gambo {
  fill: none;
  stroke: #5b7a3a;
  stroke-width: 3.5;
  stroke-linecap: round;
}
.ciliegia__foglia { fill: #7fa04c; }
.ciliegia__luce {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- the cake's story */
.storia {
  position: relative;
  height: calc(var(--alto-grande) * 7);
  background: var(--fondo-palco);
}
.palco {
  position: sticky;
  top: 0;
  height: var(--alto-grande);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  padding: 80px clamp(16px, 6vw, 88px) 24px;
  overflow: hidden;
}
.racconto {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.ricetta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ricetta button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--inchiostro-tenue);
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  font-stretch: 100%;
  cursor: pointer;
  transition: color 0.35s ease, background-color 0.35s ease, font-stretch 0.5s cubic-bezier(0.34, 1.8, 0.5, 1), transform 0.5s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.ricetta button.attiva {
  background: var(--inchiostro);
  color: var(--fondo);
  font-stretch: 112%;
}
@media (hover: hover) {
  .ricetta button:hover {
    color: var(--inchiostro);
    font-stretch: 116%;
    transform: translateY(-2px);
  }
  .ricetta button.attiva:hover { color: var(--fondo); }
}
.passi {
  position: relative;
  min-height: 18.5em;
}
.passo {
  position: absolute;
  inset: 0 0 auto;
}
.passo__etichetta {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accento);
}
.passo__titolo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.passo__testo {
  max-width: 34ch;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--inchiostro-tenue);
}
.misura {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}
.misura strong {
  margin-left: 10px;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
}
.misura strong span {
  display: inline-block;
  min-width: 2.2ch;
  text-align: right;
}
.scena {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(var(--alto-grande) - 104px);
  overflow: hidden;
}

/* ---------------------------------------------------------------- the drawing */
.stop-alzata { stop-color: var(--alzata); }
.stop-alzata-chiara { stop-color: var(--alzata-chiara); }
.stop-alzata-scura { stop-color: var(--alzata-scura); }
.stop-acciaio { stop-color: var(--acciaio); }
.stop-acciaio-chiaro { stop-color: var(--acciaio-chiaro); }
.stop-acciaio-scuro { stop-color: var(--acciaio-scuro); }
.stop-rame { stop-color: var(--rame); }
.stop-rame-scuro { stop-color: color-mix(in srgb, var(--rame) 60%, #2a120a); }
.ombra-alzata { fill: rgba(60, 30, 20, 0.12); }
.alzata-sopra { fill: var(--alzata-chiara); }
.alzata-incavo { fill: color-mix(in srgb, var(--alzata-chiara) 82%, var(--alzata)); }
.scanalature {
  fill: none;
  stroke: var(--alzata-scura);
  stroke-width: 2;
  stroke-linecap: round;
}
.ombra-torta { fill: rgba(60, 30, 20, 0.2); }

.spugna-lato { fill: var(--spugna); }
.spugna-taglio { fill: var(--spugna-taglio); }
.spugna-sopra { fill: color-mix(in srgb, var(--spugna) 70%, var(--spugna-taglio)); }
.briciola { fill: color-mix(in srgb, var(--spugna) 65%, #7a4416); }
.buco { fill: color-mix(in srgb, var(--spugna-taglio) 70%, var(--spugna)); }
.crema-lato { fill: color-mix(in srgb, var(--crema) 88%, var(--spugna)); }
.crema-taglio { fill: var(--crema); }
.crema-sopra { fill: var(--crema); }
.crema-segni {
  fill: none;
  stroke: color-mix(in srgb, var(--crema) 80%, var(--spugna));
  stroke-width: 2;
  stroke-linecap: round;
}
.taglio-frutto { fill: var(--lampone); }
.glassa-lato,
.glassa-taglio,
.colata { fill: var(--glassa); }
.glassa-sopra { fill: color-mix(in srgb, var(--glassa) 88%, var(--glassa-luce)); }
.glassa-luce {
  fill: none;
  stroke: var(--glassa-luce);
  stroke-width: 5;
  stroke-linecap: round;
}
.segno-taglio {
  fill: none;
  stroke: rgba(40, 14, 8, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.lampone { fill: var(--lampone); }
.lampone-grani {
  fill: none;
  stroke: color-mix(in srgb, var(--lampone) 60%, #ffffff);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.mirtillo { fill: var(--mirtillo); }
.mirtillo-corona {
  fill: none;
  stroke: color-mix(in srgb, var(--mirtillo) 55%, #000000);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fragola { fill: var(--fragola); }
.fragola-cuore { fill: color-mix(in srgb, var(--fragola) 35%, #ffffff); }
.rosa-base { fill: var(--rosa-scuro); }
.rosa { fill: var(--rosa); }
.rosa-righe {
  fill: none;
  stroke: var(--rosa-scuro);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.candela { fill: var(--candela); }
.candela-riga { fill: var(--candela-riga); }
.stoppino {
  fill: none;
  stroke: #3a2a22;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.fiamma { fill: var(--fiamma); }
.fiamma-cuore { fill: var(--fiamma-cuore); }

.spatola-collo {
  fill: none;
  stroke: var(--acciaio-scuro);
  stroke-width: 7;
  stroke-linecap: round;
}
.spatola-lama { stroke: var(--acciaio-scuro); stroke-width: 1; }
.spatola-manico {
  fill: none;
  stroke: var(--legno);
  stroke-width: 17;
  stroke-linecap: round;
}
.pentola-manico {
  fill: none;
  stroke: #3a2a22;
  stroke-width: 11;
  stroke-linecap: round;
}
.pentola-bordo {
  fill: none;
  stroke: color-mix(in srgb, var(--rame) 50%, #ffffff);
  stroke-width: 3;
  stroke-linecap: round;
}
.filo-glassa { fill: var(--glassa); }
.sac { fill: #fbf6f1; stroke: #e6d9cf; stroke-width: 1.5; }
.sac-nodo { fill: var(--rosa); }
.sac-piega {
  fill: none;
  stroke: #e6d9cf;
  stroke-width: 2;
  stroke-linecap: round;
}
.coltello-lama { stroke: var(--acciaio-scuro); stroke-width: 1; stroke-linejoin: round; }
.coltello-manico { fill: #2f2420; }
.pala { stroke: var(--acciaio-scuro); stroke-width: 1; stroke-linejoin: round; }
.pala-manico {
  fill: none;
  stroke: var(--acciaio-scuro);
  stroke-width: 9;
  stroke-linecap: round;
}
.presa {
  fill: transparent;
  cursor: pointer;
}

/* ---------------------------------------------------------------- the close */
.fine {
  position: relative;
  min-height: calc(var(--alto) * 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 80px 16px;
  text-align: center;
  background: var(--inchiostro);
  color: var(--fondo);
}
.fine__frase {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 540;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.fine__frase em {
  display: block;
  color: color-mix(in srgb, var(--accento) 75%, var(--fondo));
}
.fine__bottone {
  position: relative;
  display: inline-flex;
  padding: 17px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 640;
  font-stretch: 100%;
  color: var(--inchiostro);
  isolation: isolate;
}
.fine__bottone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--fondo);
  transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.fine__bottone span {
  display: inline-block;
  transition: font-stretch 0.5s cubic-bezier(0.34, 1.6, 0.5, 1);
}
@media (hover: hover) {
  .fine__bottone:hover::before { transform: scale(1.08, 1.16); }
  .fine__bottone:hover span { font-stretch: 118%; }
}

/* ---------------------------------------------------------------- the phone */
@media (max-width: 720px) {
  .menu { display: none; }
  .marchio { font-size: 19px; }
  .palco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding: 68px 16px 12px;
  }
  .racconto { gap: 14px; }
  .ricetta button { padding: 4px 8px; font-size: 12px; }
  .passo__etichetta { margin-bottom: 8px; font-size: 12px; }
  .passo__titolo { font-size: clamp(32px, 9.6vw, 44px); }
  .passo__testo { margin-top: 10px; font-size: 15px; }
  .passi { min-height: 10.9em; }
  .misura { font-size: 11px; line-height: 1; }
  .misura strong { margin-left: 8px; font-size: 19px; }
  .scena { max-height: none; min-height: 0; }
}

/* schermi bassi (la casella dell'anteprima sul telefono, 341 per 410): l'apertura sta tutta in uno schermo e le
   ciliegie scendono nell'angolo, accanto al cenno */
@media (max-height: 520px) {
  .testata { padding-top: 12px; padding-bottom: 12px; }
  .apertura { padding-top: 64px; padding-bottom: 24px; }
  .apertura__etichetta { margin-bottom: 10px; font-size: 11px; }
  .apertura__titolo { font-size: clamp(42px, 12vh, 164px); }
  .apertura__testo { margin-top: 14px; font-size: 15px; line-height: 1.4; }
  .apertura__cenno { margin-top: 16px; font-size: 13px; }
  .ciliegie { bottom: 16px; }
  .ciliegia { width: clamp(30px, 4.6vw, 84px); }
  .ciliegia:nth-child(2) { width: clamp(38px, 5.8vw, 104px); }
}
@media (max-width: 720px) and (max-height: 520px) {
  /* il palco sul telefono basso: le tappe su una riga che scorre di lato, testi più piccoli, e la torta prende lo
     spazio che resta */
  .palco {
    gap: 4px;
    padding: 56px 16px 8px;
  }
  .racconto { gap: 8px; }
  .ricetta {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ricetta::-webkit-scrollbar { display: none; }
  .ricetta button { flex: none; padding: 4px 8px; font-size: 11.5px; }
  .passi { min-height: 8.6em; }
  .passo__etichetta { margin-bottom: 4px; font-size: 10.5px; }
  .passo__titolo { font-size: 26px; }
  .passo__testo { margin-top: 6px; font-size: 13px; line-height: 1.38; }
  .misura { font-size: 10px; }
  .misura strong { font-size: 17px; }
}