/* The projected tooltip: the controls of a slideshow on a dark bar, a tiny projector in every button, and a frosted
   screen that catches the name in the beam. */
:root {
  --page: #000000;          /* the room */
  --bar: #0d2326;           /* the bar, petrol */
  --bar-edge: #23403f;      /* its rim */
  --icon: #8ea4a1;          /* the drawings of the buttons */
  --icon-hi: #d9e3df;       /* under the pointer */
  --icon-on: #f2e6d6;       /* a button left on (pen, laser, black screen) */
  --focus: #f4d3a6;         /* the ring of the keyboard's focus */
  --screen: #1a2a2b;        /* the frosted screen, unlit */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--icon-hi);
  font-family: 'Radio Canada Big Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
  /* a screen thrown past the edge by a very soft spring never widens the page */
  overflow-x: hidden;
}

/* the bar and the dark air above it, where the beams rise and the screen stands */
.booth {
  position: relative;
  max-width: 100%;
  padding-top: 112px;
}

/* ---------------------------------------------------------------- the beams in the air */
.beams {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.beams path {
  mix-blend-mode: plus-lighter;
}

/* ---------------------------------------------------------------- the screen */
/* placed, sized and raised by the script; it slides behind the bar when it goes down */
.screen {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  height: 36px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* frosted acrylic: a little lighter at the top, a cut edge that catches what light there is */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--screen), #ffffff 7%), var(--screen));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 0 0 1px rgb(255 255 255 / 0.05);
}

/* its cut edges, over the light that falls on it; the script lights them */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: var(--rim, none);
  pointer-events: none;
}

/* the pointer can rest on it; a finger goes through it */
@media (hover: hover) {
  .screen.is-open {
    pointer-events: auto;
  }
}

/* what the lamps throw on the screen, added up like light */
.screen__light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}

/* the grain of the frosted surface, seen only where the light falls */
.screen__light::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 96px 96px;
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
}

/* one picture per button: a slide of light with the name and the key as shadows in it */
.slide {
  position: absolute;
  left: 0;
  top: -8px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  /* the picture is a little larger than the screen, and its edges are soft: the light falls off past the name */
  padding: 0 27px 0 28px;
  /* the lamp's light, a little brighter in the middle as projectors are */
  background: radial-gradient(90% 120% at 50% 50%, rgb(var(--lamp)) 0%, rgb(var(--lamp) / 0.9) 60%, rgb(var(--lamp) / 0.76) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 14px, #000000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000000 14px, #000000 calc(100% - 14px), transparent 100%);
  color: #000000;
  font-size: 13.5px;
  font-weight: 560;
  letter-spacing: 0.005em;
  white-space: nowrap;
  mix-blend-mode: plus-lighter;
  transform-origin: 50% 50%;
  visibility: hidden;
  will-change: transform, opacity, filter;
}

.slide__key {
  display: inline-block;
  min-width: 19px;
  padding: 0 5px;
  border: 1.5px solid #000000;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 620;
  line-height: 16px;
  text-align: center;
}

/* the words for the screen readers: the key of the button described */
.screen__text,
.tool__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the bar */
.bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 17px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bar), #ffffff 4%), var(--bar));
  box-shadow: inset 0 0 0 1px var(--bar-edge), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 40px -14px rgb(0 0 0 / 0.9);
  touch-action: none;
}

.tool {
  --lamp: 255 226 192;
  --glow: 0;
  --ink: var(--icon);
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  /* lit from inside while its lamp burns */
  color: color-mix(in srgb, var(--ink), rgb(var(--lamp)) calc(var(--glow) * 60%));
  cursor: pointer;
  transition: background-color 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the lens of its projector, a slit in the rim of the bar */
.tool::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 1px;
  background: color-mix(in srgb, #040b0c, rgb(var(--lamp)) calc(var(--glow) * 100%));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.05), 0 0 calc(var(--glow) * 10px) calc(var(--glow) * 1px) rgb(var(--lamp) / calc(var(--glow) * 0.6));
}

@media (hover: hover) {
  .tool:hover {
    --ink: var(--icon-hi);
    background: rgb(255 255 255 / 0.055);
  }
}

/* the pretend pointer of the library's preview */
.tool.is-hover {
  --ink: var(--icon-hi);
  background: rgb(255 255 255 / 0.055);
}

@media (prefers-reduced-motion: no-preference) {
  .tool:active {
    transform: scale(0.94);
  }
}

.tool[aria-pressed='true'] {
  --ink: var(--icon-on);
  background: rgb(244 211 166 / 0.13);
}

.tool:focus {
  outline: none;
}

.tool:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar__split {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: rgb(255 255 255 / 0.08);
}

@media (max-width: 440px) {
  .tool {
    width: 39px;
    height: 40px;
  }

  .bar__split {
    margin: 0 3px;
  }
}