/* The ice title that melts: one SVG as big as the window. Every colour is a variable here: the sky by night and in
   the sun, the counter, the sun, the liquid letters, the ice, the frost and the warmth of the pointer. */
:root {
  --sky-cold-top: #071827;     /* the sky at the top while the title freezes */
  --sky-cold-low: #164160;     /* the sky at the horizon while it freezes */
  --sky-warm-top: #2c6a92;     /* the sky at the top when the sun is up */
  --sky-warm-low: #ffbd85;     /* the sky at the horizon when the sun is up */
  --floor-top: #0c2639;        /* the glossy counter under the title, near the horizon */
  --floor-low: #030d17;        /* the counter at the bottom of the screen */
  --sun: #ffc56a;              /* the sun, its rays and its glow */
  --sun-core: #fff3da;         /* the middle of the sun */
  --liquid: #3fc9ff;           /* the liquid letters, the drops and the splashes */
  --liquid-deep: #0b6fd0;      /* the bottom of the liquid letters and the puddles */
  --ice: #effcff;              /* the ice at the top of a letter */
  --ice-deep: #86d3ee;         /* the ice at the bottom of a letter */
  --ice-shade: #2f86b3;        /* the shaded inner edge of the ice */
  --frost: #ffffff;            /* the frost crystals, the bubbles and the reflections */
  --warm: #ff8a3d;             /* the warmth of the pointer on a frozen letter */
  --ink: #bfe0ef;              /* the small texts */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--sky-cold-top);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.palco {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.palco text {
  font-family: 'Familjen Grotesk Variable', 'Arial Black', sans-serif;
  font-weight: 700;
}
.palco .marchio {
  font-weight: 600;
  text-transform: uppercase;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Familjen Grotesk Variable', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink);
  opacity: 0.6;
  pointer-events: none;
}