/* The theatre-curtain logo: a stage as big as the window, an SVG the script fills with the theatre around the logo.
   Every colour is a variable here: the velvet, the gold, the lights, the roses. */
:root {
  --house: #14090c;          /* the dark hall around the stage */
  --velvet: #a3122a;         /* the velvet of the curtain and the pelmet */
  --velvet-light: #e0485a;   /* the sheen on the crest of each fold */
  --velvet-deep: #4a0612;    /* the shadow inside the folds */
  --velvet-line: #2a0309;    /* the outline of the velvet */
  --gold: #d9a441;           /* the gilded frame, the fringe and the tassels */
  --gold-light: #f7dc8e;     /* the light on the gold */
  --gold-deep: #8a5a17;      /* the shade on the gold, the threads of the fringe */
  --gold-line: #4a2c08;      /* the outline of the gold */
  --backdrop: #1d1426;       /* the back wall of the stage */
  --backdrop-top: #0d0912;   /* the back wall, up in the dark */
  --boards: #6a4426;         /* the floor boards */
  --boards-line: #3a2311;    /* the joints between the boards */
  --apron: #2b1a10;          /* the front of the stage */
  --ink: #f6e9cc;            /* the logo */
  --dark: #07040a;           /* the dark on the stage */
  --light: #fff1c9;          /* the spotlight */
  --footlight: #ffc56b;      /* the light of the footlights */
  --glass: #d8d2c4;          /* the glass of a footlight, off */
  --glass-on: #fff3cf;       /* the glass of a footlight, on */
  --wire: #6b4b2b;           /* the filament, off */
  --wire-on: #ff9f1c;        /* the filament, on */
  --lamp: #2c2a30;           /* the body of the spotlight */
  --lamp-line: #0b0a0d;      /* its outline */
  --glove: #fbf8f1;          /* the glove of the stagehand */
  --glove-line: #3b3442;     /* its outline */
  --rose: #d81d3b;           /* the roses */
  --rose-deep: #7c0a1d;      /* the heart of the roses */
  --leaf: #3f8a3a;           /* their stems and leaves */
  --leaf-line: #173a17;      /* their outline */
  --confetti-a: #f2c14e;     /* the confetti */
  --confetti-b: #f6e9cc;
  --confetti-c: #e8556b;
  --confetti-d: #7fc8c0;
  --dust: #f3dfb8;           /* the dust in the light */
  --hint: #8d7a70;           /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--house);
  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%;
  font-family: 'Bodoni Moda Variable', 'Bodoni 72', 'Didot', Georgia, serif;
  font-weight: 700;
}

.sala { fill: var(--house); }
.lettera { fill: var(--ink); }
.ombra-logo { fill: var(--dark); opacity: 0.55; }
.buio { fill: var(--dark); }
.schermo { mix-blend-mode: screen; pointer-events: none; }
.luce { stop-color: var(--light); }
.ribalta { stop-color: var(--footlight); }
.ombra { stop-color: var(--dark); }
.fondale { stop-color: var(--backdrop); }
.fondale-alto { stop-color: var(--backdrop-top); }
.assi { fill: var(--boards); }
.assi-righe { fill: none; stroke: var(--boards-line); stroke-linecap: round; }
.assi-lucido { fill: var(--gold-light); opacity: 0.08; }
.fondale-pieghe { fill: none; stroke: var(--dark); opacity: 0.35; stroke-linecap: round; }

/* the velvet: flat colours, an outline between the folds, so that every fold reads even over its neighbour */
.velluto-fondo { stop-color: var(--velvet-deep); }
.velluto-pieno { stop-color: var(--velvet); }
.velluto-lume { stop-color: var(--velvet-light); }
.piega { fill: url(#pleat); stroke: var(--velvet-line); stroke-linejoin: round; }
.piega-ombra { fill: url(#pleat-shade); pointer-events: none; }
.festone { fill: url(#swag); stroke: var(--velvet-line); stroke-linejoin: round; }
.festone-pieghe { fill: none; stroke: var(--velvet-deep); stroke-linecap: round; opacity: 0.8; }
.festone-lucido { fill: none; stroke: var(--velvet-light); stroke-linecap: round; opacity: 0.45; }
.gonfio { fill: url(#bulge); pointer-events: none; }

/* the gold: frame, braid, fringe, tassels */
.oro-lume { stop-color: var(--gold-light); }
.oro-pieno { stop-color: var(--gold); }
.oro-fondo { stop-color: var(--gold-deep); }
.cornice { fill: url(#gilt); stroke: var(--gold-line); stroke-linejoin: round; }
.cornice-righe { fill: none; stroke: var(--gold-deep); stroke-linejoin: round; }
.cornice-lume { fill: none; stroke: var(--gold-light); stroke-linejoin: round; opacity: 0.7; }
.conchiglia { fill: url(#gilt-bar); stroke: var(--gold-line); stroke-linejoin: round; }
.conchiglia-righe { fill: none; stroke: var(--gold-deep); stroke-linecap: round; }
.asta { fill: none; stroke: var(--gold-line); stroke-linecap: round; }
.asta-lume { fill: none; stroke: var(--gold); stroke-linecap: round; }
.frangia-bordo { fill: none; stroke: var(--gold-line); stroke-linecap: butt; stroke-linejoin: round; }
.frangia-gallone { fill: none; stroke: var(--gold); stroke-linejoin: round; }
.frangia-fili { fill: none; stroke: var(--gold); stroke-linejoin: round; }
.frangia-ombra { fill: none; stroke: var(--gold-deep); stroke-linejoin: round; }
.nappa,
.nappa-fascia {
  stroke: var(--gold-line);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.nappa { fill: var(--gold); }
.nappa-fascia { fill: var(--gold-deep); }
.nappa-cordone { fill: none; stroke: var(--gold-line); stroke-width: 2.6; stroke-linecap: round; }
.nappa-fili { fill: none; stroke: var(--gold-deep); stroke-width: 1.1; stroke-linecap: round; }
.nappa-lucido { fill: none; stroke: var(--gold-light); stroke-width: 1.6; stroke-linecap: round; }

/* the apron and the footlights */
.proscenio { fill: var(--apron); stroke: var(--gold-line); stroke-linejoin: round; }
.proscenio-righe { fill: none; stroke: var(--boards-line); stroke-linecap: round; }
.cappa { fill: url(#gilt-bar); stroke: var(--gold-line); stroke-linejoin: round; }
.vetro { fill: var(--glass); fill-opacity: 0.38; stroke: var(--gold-line); stroke-width: 1.2; stroke-linejoin: round; }
.vetro-acceso { fill: var(--glass-on); stroke: var(--gold-line); stroke-width: 1.2; stroke-linejoin: round; opacity: 0; }
.supporto { fill: none; stroke: var(--wire); stroke-width: 0.8; }
.filamento { fill: none; stroke: var(--wire); stroke-width: 1; stroke-linejoin: round; }
.filamento-acceso { fill: none; stroke: var(--wire-on); stroke-width: 1.3; stroke-linejoin: round; opacity: 0; }
.riflesso-vetro { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.7; }
.zoccolo { fill: var(--gold); stroke: var(--gold-line); stroke-width: 1.2; stroke-linejoin: round; }
.zoccolo-righe { fill: none; stroke: var(--gold-deep); stroke-width: 1; }

/* the spotlight */
.lampada { fill: var(--lamp); stroke: var(--lamp-line); stroke-width: 2.4; stroke-linejoin: round; }
.alette { fill: none; stroke: var(--lamp-line); stroke-width: 1.6; }
.lampada-lucido { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; opacity: 0.14; }
.ghiera { fill: var(--gold); stroke: var(--gold-line); stroke-width: 2; }
.lente { fill: var(--glass); stroke: var(--gold-line); stroke-width: 1.6; }
.lente-accesa { fill: var(--light); stroke: var(--gold-line); stroke-width: 1.6; opacity: 0; }
.staffa-bordo { fill: none; stroke: var(--lamp-line); stroke-width: 8.4; stroke-linejoin: round; stroke-linecap: round; }
.staffa { fill: none; stroke: var(--lamp); stroke-width: 4.6; stroke-linejoin: round; stroke-linecap: round; }
.pomello { fill: var(--gold); stroke: var(--gold-line); stroke-width: 1.8; }

/* the stagehand's glove */
.guanto { fill: var(--glove); stroke: var(--glove-line); stroke-width: 1.6; stroke-linejoin: round; }
.guanto-piega { fill: none; stroke: var(--glove-line); stroke-width: 1.1; stroke-linecap: round; opacity: 0.55; }

/* the roses */
.stelo-bordo { fill: none; stroke: var(--leaf-line); stroke-width: 5.6; stroke-linecap: round; }
.stelo { fill: none; stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; }
.spina { fill: var(--leaf); stroke: var(--leaf-line); stroke-width: 1; stroke-linejoin: round; }
.foglia { fill: var(--leaf); stroke: var(--leaf-line); stroke-width: 1.6; stroke-linejoin: round; }
.venatura { fill: none; stroke: var(--leaf-line); stroke-width: 1; opacity: 0.6; }
.rosa { fill: var(--rose); stroke: var(--rose-deep); stroke-width: 1.8; stroke-linejoin: round; }
.rosa-cuore,
.rosa-piega { fill: none; stroke: var(--rose-deep); stroke-width: 1.5; stroke-linecap: round; }
.rosa-lucido { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0.4; }

.coriandolo-a { fill: var(--confetti-a); }
.coriandolo-b { fill: var(--confetti-b); }
.coriandolo-c { fill: var(--confetti-c); }
.coriandolo-d { fill: var(--confetti-d); }
.polvere { fill: var(--dust); }
.pulviscolo circle { fill: var(--dust); }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Bodoni Moda Variable', 'Bodoni 72', Georgia, serif;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}