/* The soap-bubble logo: a stage as big as the window, an SVG the script fills with the wand, the bubble and the
   logo. Every colour is a variable here: the night sky, the logo, the five colours of the film, the wand, the drops. */
:root {
  --night: #141a35;         /* the background */
  --night-glow: #26305e;    /* the background, lighter in the middle */
  --night-deep: #0b0f22;    /* the background in the corners */
  --logo: #fff2df;          /* the logo */
  --film-a: #ff5fc4;        /* the colours of the soap film: magenta */
  --film-b: #46dcff;        /* cyan */
  --film-c: #ffe066;        /* gold */
  --film-d: #7dffb2;        /* mint */
  --film-e: #9c7bff;        /* violet */
  --film-base: #bfe6ff;     /* the faint tint of the whole film */
  --rim: #e6f6ff;           /* the edge of the bubble and its reflections */
  --wand: #ff9f43;          /* the plastic wand */
  --wand-deep: #c4621d;     /* its shaded side, the back of the ring */
  --drop: #d9f1ff;          /* the drops of soap */
  --drop-edge: #7fa9cf;     /* the dark edge of a drop on the letters */
  --hint: #7f88b4;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: radial-gradient(120% 95% at 50% 42%, var(--night-glow), var(--night) 52%, var(--night-deep));
  background-color: var(--night);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the logo is written in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Nunito Variable', 'Arial Rounded MT Bold', sans-serif;
  font-weight: 850;
}

.logo { fill: var(--logo); }

/* the film */
.film-stop { stop-opacity: 0.85; }
.film-stop--via { stop-opacity: 0; }
.film-stop--a { stop-color: var(--film-a); }
.film-stop--b { stop-color: var(--film-b); }
.film-stop--c { stop-color: var(--film-c); }
.film-stop--d { stop-color: var(--film-d); }
.film-stop--e { stop-color: var(--film-e); }
.film-fondo { fill: var(--film-base); opacity: 0.07; }
.film-colori { mix-blend-mode: screen; }
.film-vortici { mix-blend-mode: screen; }
.vortice { fill: none; stroke-linecap: round; }
.banda--a { stop-color: var(--film-a); }
.banda--b { stop-color: var(--film-b); }
.banda--c { stop-color: var(--film-c); }
.banda--d { stop-color: var(--film-d); }
.pesante { stop-color: var(--rim); stop-opacity: 0.5; }
.pesante--via { stop-opacity: 0; }
.orlo-morbido { fill: none; stroke: var(--rim); opacity: 0.2; }
.orlo-pesante { fill: none; }
.orlo-banda { fill: none; opacity: 0.75; }
.orlo { fill: none; stroke: var(--rim); opacity: 0.6; }
.riflesso { fill: var(--rim); }
.riflesso-croce { fill: none; stroke: var(--night); stroke-linecap: round; opacity: 0.4; }
.riflesso-arco { fill: none; stroke: var(--rim); stroke-linecap: round; }
.strappo { fill: none; stroke: var(--rim); opacity: 0.9; }

/* the wand */
.bacchetta { fill: none; stroke: var(--wand); stroke-linecap: round; }
.bacchetta-scura { fill: none; stroke: var(--wand-deep); stroke-linecap: round; }
.bacchetta-luce { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.45; }
.pellicola-anello { fill: url(#ring-film); opacity: 0.55; }
.lampo-anello { fill: #fff; }
.aria { fill: none; stroke: var(--rim); stroke-linecap: round; }

/* the drops */
.goccia { fill: var(--drop); }
.goccia-luce { fill: #fff; }
.goccia-lettera { fill: var(--drop); fill-opacity: 0.55; stroke: var(--drop-edge); }
.goccia-ombra { fill: var(--drop-edge); opacity: 0.45; }
.goccia-scia { fill: none; stroke: var(--drop-edge); stroke-linecap: round; }
.bollicina { fill: var(--film-base); fill-opacity: 0.08; stroke: var(--rim); }
.anello-lampo { fill: none; stroke: var(--rim); }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Nunito Variable', 'Arial Rounded MT Bold', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}