/* The gelato title: a stage as big as the window, an SVG the script fills. Every colour is a variable here:
   the shop, the awning, the marble, the waffle letters, the flavours, the toppings and the spoon. */
:root {
  --wall: #fff3e4;          /* the background: the wall of the shop */
  --wall-stripe: #fde8d2;   /* its soft vertical stripes */
  --awning: #f28fa8;        /* the stripes of the awning */
  --awning-light: #fffaf2;  /* the other stripes */
  --awning-deep: #c95f7c;   /* the shadow of its edge */
  --marble: #fbf8f4;        /* the top of the marble counter */
  --marble-front: #efe8e0;  /* its front */
  --marble-vein: #d7cdc2;   /* the veins */
  --batter: #f8e3b9;        /* the waffle batter, before it bakes */
  --waffle: #eaa857;        /* the baked waffle */
  --waffle-deep: #bf7430;   /* the grid pressed into it */
  --waffle-dark: #87491b;   /* its edges and thickness */
  --strawberry: #f59fb2;    /* the flavours, in the order they fall */
  --pistachio: #b9cc7c;
  --chocolate: #8c5536;
  --stracciatella: #fbf0d7;
  --mango: #f9b64c;
  --mint: #a3e2cb;
  --blueberry: #a98bd8;
  --chips: #4b2a19;         /* chocolate chips and flecks */
  --cherry: #d81f48;        /* the cherry */
  --wafer: #f4d193;         /* the wafer fan */
  --sprinkle-1: #ff6f91;    /* the sprinkles */
  --sprinkle-2: #57c4a6;
  --sprinkle-3: #ffd23f;
  --sprinkle-4: #6ea8f0;
  --sprinkle-5: #ffffff;
  --spoon: #3fae9e;         /* the little paddle spoon */
  --spoon-deep: #23766a;    /* its edge */
  --ink: #7b3a2c;           /* the shop's name */
  --hint: #a77b63;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background-color: var(--wall);
  background-image: linear-gradient(90deg, transparent 50%, var(--wall-stripe) 50%);
  background-size: 64px 100%;
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
/* with a mouse the spoon is the pointer */
@media (hover: hover) {
  .scena.has-spoon { cursor: none; }
}

.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* the letters: the script reads this face to measure them */
.lettera {
  font-family: 'Titan One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  font-weight: 400;
}
.lettera-spessore { fill: var(--waffle-dark); }
.lettera-pasta { fill: var(--batter); }
.lettera-cialda { fill: url(#waffle); }
.lettera-luce { fill: url(#letter-light); }
.lettera-bordo { fill: none; stroke: var(--waffle-dark); stroke-linejoin: round; }
.cella { fill: var(--waffle); }
.cella-fondo { fill: var(--waffle-deep); }
.cella-luce { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.35; }
.stop-luce-su { stop-color: #fff; stop-opacity: 0.32; }
.stop-luce-mezzo { stop-color: #fff; stop-opacity: 0; }
.stop-luce-giu { stop-color: var(--waffle-dark); stop-opacity: 0.28; }

/* the shop */
.tenda-a { fill: var(--awning); }
.tenda-b { fill: var(--awning-light); }
.tenda-ombra { fill: var(--awning-deep); opacity: 0.18; }
.banco-sopra { fill: var(--marble); }
.banco-fronte { fill: var(--marble-front); }
.banco-filo { fill: none; stroke: #fff; opacity: 0.9; }
.banco-vena { fill: none; stroke: var(--marble-vein); stroke-linecap: round; opacity: 0.7; }
.ombra { fill: var(--waffle-dark); }
.pozza { opacity: 0.95; }

/* the shop's name, set in the SVG on the front of the counter */
.marca-nome {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  fill: var(--ink);
}
.marca-riga {
  font-family: 'Titan One', 'Arial Rounded MT Bold', sans-serif;
  fill: var(--ink);
  opacity: 0.62;
  letter-spacing: 0.22em;
}

/* the gelato */
.luce-pallina { fill: #fff; }
.cresta { fill: none; stroke-linecap: round; }
.morso-luce { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.55; }

/* the toppings */
.ciliegia { fill: var(--cherry); }
.ciliegia-luce { fill: #fff; opacity: 0.7; }
.picciolo { fill: none; stroke: #5d7a2a; stroke-linecap: round; }
.ventaglio { fill: var(--wafer); stroke: var(--waffle-deep); stroke-linejoin: round; }
.ventaglio-riga { fill: none; stroke: var(--waffle-deep); opacity: 0.55; }

/* the spoon */
.cucchiaino { fill: var(--spoon); stroke: var(--spoon-deep); stroke-linejoin: round; }
.cucchiaino-spessore { fill: var(--spoon-deep); }
.cucchiaino-luce { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.6; }

.leggibile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.marca[hidden] { display: none; }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font: 400 13px/1.3 'Titan One', 'Arial Rounded MT Bold', sans-serif;
  letter-spacing: 0.04em;
  color: var(--hint);
  pointer-events: none;
}