/* The departure-board logo: a stage as big as the window, a board the script fills with split flaps. Every colour
   is a variable here: the station wall, the board and its frame, the flaps, the letters, the picture cards. */
:root {
  --wall: #1a2026;          /* the background: the station wall */
  --wall-deep: #0d1014;     /* the wall towards the corners */
  --board: #0a0b0d;         /* the inside of the board */
  --frame: #3a3f46;         /* the metal frame round the board */
  --frame-light: #5d646d;   /* its lit edge */
  --flap: #26282c;          /* the upper half of a flap */
  --flap-low: #1c1d20;      /* the lower half of a flap */
  --hinge: #040405;         /* the split between the halves */
  --ink: #efeadf;           /* the letters of the timetable */
  --warn: #ff8f5e;          /* a delayed train */
  --card: #f1ece1;          /* the light cards a picture is printed on */
  --caption: #8a929c;       /* the small painted captions over the columns */
  --rail: #15171a;          /* the rails between the logo and the timetable */
  --hint: #6f7882;          /* 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% 90% at 50% 40%, var(--wall) 45%, var(--wall-deep));
  background-color: var(--wall);
  overflow: hidden;
}

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

.palco {
  position: absolute;
  inset: 0;
  font-family: 'Archivo Variable', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-variation-settings: 'wdth' 78;
}

/* the board: a dark box in a metal frame, with a sheet of glass in front */
.tabellone {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #121417, var(--board) 30%);
  box-shadow:
    0 0 0 3px var(--frame),
    0 0 0 4px var(--frame-light),
    0 0 0 9px var(--frame),
    0 30px 60px -18px rgba(0, 0, 0, 0.8),
    0 12px 24px rgba(0, 0, 0, 0.45),
    inset 0 2px 10px rgba(0, 0, 0, 0.9);
  will-change: transform;
}
.tabellone__vetro,
.tabellone__riflesso {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.tabellone__vetro {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%);
}
.tabellone__riflesso {
  overflow: hidden;
  z-index: 3;
}
.tabellone__riflesso::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.07) 55%, transparent);
  transform: translateX(var(--glare, -120%)) skewX(-14deg);
}

/* the painted head of the board: a title and the captions over the columns */
.tabellone__testa {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.didascalia {
  position: absolute;
  margin: 0;
  color: var(--caption);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.didascalia--titolo {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}
.binario {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: var(--rail);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tabellone__celle {
  position: absolute;
  inset: 0;
}

/* one flap: two halves standing still, a leaf that falls over the hinge, the split and the axle */
.paletta {
  position: absolute;
  color: var(--ink);
  will-change: transform;
}
.paletta--logo { color: var(--logo, #ffc83d); }
.paletta[data-tone='warn'] { color: var(--warn); }
.paletta__corpo {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  box-shadow: 0 var(--d) 0 #000, 0 calc(var(--d) * 2) calc(var(--d) * 3) rgba(0, 0, 0, 0.55);
}
.meta {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.meta--su {
  top: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--flap) 82%, #fff), var(--flap) 18%);
}
.meta--giu {
  bottom: 0;
  border-radius: 0 0 var(--r) var(--r);
  background: linear-gradient(180deg, var(--flap-low) 70%, color-mix(in srgb, var(--flap-low) 70%, #000));
}
/* the letter is as tall as the whole flap: each half shows its own part of it */
.meta b {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  padding-top: var(--lift);
  background-repeat: no-repeat;
}
.meta--su b { top: 0; }
.meta--giu b { top: -100%; }
.meta b.tessera { background-color: var(--card); }
.meta--su b.tessera { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }

.foglia {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  z-index: 1;
}
.foglia .meta {
  height: 100%;
}
.foglia .meta--giu {
  top: 0;
  bottom: auto;
  transform: rotateX(180deg);
}
.foglia .meta--giu b { top: -100%; }

/* the shade on each half: the leaf darkens as it turns away from the light, and throws a shadow on the half below */
.ombra {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.paletta__ombra-giu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  border-radius: 0 0 var(--r) var(--r);
  background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35));
  opacity: 0;
  pointer-events: none;
}
.paletta__cerniera {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: var(--split);
  margin-top: calc(var(--split) / -2);
  background: var(--hinge);
  z-index: 2;
}
.paletta__cerniera::before,
.paletta__cerniera::after {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--pin);
  height: calc(var(--pin) * 1.6);
  margin-top: calc(var(--pin) * -0.8);
  border-radius: 1px;
  background: #4b5058;
}
.paletta__cerniera::before { left: calc(var(--pin) * -0.6); }
.paletta__cerniera::after { right: calc(var(--pin) * -0.6); }

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