/* The pocket knife menu: the actions of a project as the tools of a multitool, on a black page. The handle is red
   enamel on steel liners; the tools turn round its pivot and fan out. The script turns the tools, slides the knife
   so the open fan stays in the middle, and sets --u, the length of one unit of the drawing. */
:root {
  --page: #000000;          /* the page */
  --enamel: #be0f1c;        /* the red enamel of the handle */
  --etch: #262b31;          /* the engraving on the steel */
  --danger: #a8170f;        /* the engraving on the blade */
  --brass: #d9ac4f;         /* the point of the pen */
  --focus: #ffcf70;         /* the ring of the keyboard focus */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: #ffffff;
  font-family: 'Saira Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 48px 16px;
}

/* ---------------------------------------------------------------- the frame */
/* the room the knife needs: the closed handle sits in the middle, the tools sweep up and down through it as they
   open, and the open fan fills it from side to side */
.knife {
  --u: 1px;                 /* set by the script */
  position: relative;
  width: calc(var(--u) * 360);
  height: calc(var(--u) * 372);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* the knife itself: it slides and takes the knocks of the tools, round its pivot */
.knife__body {
  position: absolute;
  inset: 0;
  transform-origin: calc(var(--u) * 108) calc(var(--u) * 186);
  will-change: transform;
}

/* ---------------------------------------------------------------- the handle: the menu button */
.handle {
  position: absolute;
  left: calc(var(--u) * 78);
  top: calc(var(--u) * 156);
  z-index: 2;
  width: calc(var(--u) * 204);
  height: calc(var(--u) * 60);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

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

.handle__press {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

.handle:active .handle__press {
  transform: scale(0.975);
}

.handle__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* the handle's shadow falls on the tools where they come out of it */
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, 0.7));
}

/* the enamel's colours all come from one red */
.en-0 { stop-color: color-mix(in oklab, var(--enamel) 45%, #ffd2c8); }
.en-1 { stop-color: color-mix(in oklab, var(--enamel) 82%, #ff8a7a); }
.en-2 { stop-color: var(--enamel); }
.en-3 { stop-color: color-mix(in oklab, var(--enamel) 62%, #000000); }
.en-4 { stop-color: color-mix(in oklab, var(--enamel) 74%, #000000); }
.en-5 { stop-color: color-mix(in oklab, var(--enamel) 80%, #ffb0a6); }
.en-glow { stop-color: color-mix(in oklab, var(--enamel) 60%, #ff7060); }
.en-well { fill: color-mix(in oklab, var(--enamel) 34%, #000000); }

/* the brass point of the pen */
.br-0 { stop-color: color-mix(in oklab, var(--brass) 35%, #fffbe8); }
.br-1 { stop-color: var(--brass); }
.br-2 { stop-color: color-mix(in oklab, var(--brass) 62%, #000000); }
.br-3 { stop-color: color-mix(in oklab, var(--brass) 88%, #000000); }

/* the backs of the tools between the liners, seen edge-on */
.handle__backs rect {
  fill: #d9dee2;
}

/* the steel plate inlaid in the enamel */
.plate {
  position: absolute;
  left: calc(var(--u) * 48);
  top: calc(var(--u) * 18);
  display: grid;
  width: calc(var(--u) * 108);
  height: calc(var(--u) * 24);
  overflow: hidden;
  border-radius: calc(var(--u) * 5);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(0, 0, 0, 0.035) 1px 3px),
    linear-gradient(180deg, #f3f5f6 0%, #cdd3d7 40%, #e4e7e9 58%, #a3abb2 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 1.1) color-mix(in oklab, var(--enamel) 30%, #000000),
    0 calc(var(--u) * 1) 0 calc(var(--u) * 1.1) rgba(255, 140, 130, 0.22),
    inset 0 calc(var(--u) * 1.2) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.5),
    inset 0 calc(var(--u) * -0.8) 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.plate__face {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  min-width: 0;
  padding: 0 calc(var(--u) * 8);
  color: var(--etch);
  font-size: calc(var(--u) * 10.5);
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.6);
}

.plate__face.is-danger {
  color: var(--danger);
}

/* the tracking leaves room after the last letter: the word gives it back, so it sits in the middle */
.plate__word {
  margin-right: -0.15em;
}

.plate__icon {
  flex: none;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.6));
}

/* the sign of the plate: a little knife, its blade half open */
.plate__icon .solid {
  fill: currentColor;
  stroke: none;
}

/* it opens its blade a little more under the pointer */
.plate__icon .fan {
  transform-origin: 11.6px 17.4px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .handle[aria-expanded='false']:hover .plate__icon .fan {
    transform: rotate(-14deg);
  }
}

.handle[aria-expanded='false']:focus-visible .plate__icon .fan {
  transform: rotate(-14deg);
}

/* ---------------------------------------------------------------- the tools */
.tools {
  position: absolute;
  inset: 0;
  z-index: 1;
  outline: none;
  pointer-events: none;
}

/* each tool has a still layer of its own for its shadow, so the shadow keeps falling the same way while the tool
   turns */
.tool-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 1.5) rgba(0, 0, 0, 0.55)) drop-shadow(0 calc(var(--u) * 5) calc(var(--u) * 8) rgba(0, 0, 0, 0.4));
  transition: filter 0.3s ease;
}

.tool-slot.is-up {
  z-index: 5;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(0, 0, 0, 0.6)) drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 14) rgba(0, 0, 0, 0.55));
}

/* the tool: its box is drawn from the pivot outwards, and the script turns it round the pivot */
.tool {
  position: absolute;
  left: calc(var(--u) * 92);
  top: calc(var(--u) * 162);
  display: block;
  width: calc(var(--u) * 192);
  height: calc(var(--u) * 48);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--etch);
  font: inherit;
  transform-origin: calc(var(--u) * 16) calc(var(--u) * 24);
  outline: none;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  will-change: transform;
}

.tool__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 0.3s ease;
}

/* only the outline of the steel, a little wider, takes the pointer */
.tool__hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 10;
  stroke-linejoin: round;
  pointer-events: all;
  cursor: pointer;
}

.tool__ring {
  fill: none;
  stroke: var(--focus);
  stroke-width: 5;
  stroke-linejoin: round;
  opacity: 0;
}

.tool:focus-visible .tool__ring {
  opacity: 1;
}

.tool__body {
  stroke: rgba(16, 19, 22, 0.6);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

/* the steel is brushed along its length */
.tool__brush {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.2;
  stroke-width: 0.45;
}

.tool__facet {
  fill: #ffffff;
  opacity: 0.32;
}

.tool__hole {
  fill: #121518;
}

.tool__nick {
  fill: none;
  stroke: #3b4249;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.tool__lip {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.6;
  stroke-width: 0.7;
  stroke-linecap: round;
}

.tool__seam {
  fill: none;
  stroke: #3a4148;
  stroke-width: 0.7;
}

.tool__screw {
  fill: url(#kn-screw);
  stroke: #3a4148;
  stroke-width: 0.5;
}

.tool__slot {
  stroke: #2c3238;
  stroke-width: 0.9;
  stroke-linecap: round;
}

.tool__nib {
  fill: url(#kn-brass);
  stroke: rgba(70, 45, 10, 0.7);
  stroke-width: 0.5;
}

.tool__collar {
  fill: #000000;
  opacity: 0.24;
}

.tool__knurl {
  stroke: #2c3238;
  stroke-opacity: 0.5;
  stroke-width: 0.8;
}

.tool__shoulder {
  fill: none;
  stroke: #2c3238;
  stroke-opacity: 0.5;
  stroke-width: 0.6;
}

/* the light on the two long edges: the script makes bright the one that faces the light */
.tool__lit {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0.3;
}

/* the cutting edge of the blade, and the light that runs along it */
.tool__edge {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.8;
  opacity: 0.8;
}

.tool__run {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 14 120;
  stroke-dashoffset: 14;
  opacity: 0;
}

/* the streak of light that runs over the steel */
.tool__glint {
  fill: url(#kn-glint);
  opacity: 0;
}

/* the engraving: the name and its sign, along the tool, read from its point towards the handle */
.tool__etch {
  position: absolute;
  left: calc(var(--u) * (16 + var(--x0)));
  top: calc(var(--u) * (16 + var(--cy)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  width: calc(var(--u) * (var(--x1) - var(--x0)));
  height: calc(var(--u) * 16);
  font-size: calc(var(--u) * 12.5);
  font-weight: 640;
  font-stretch: 86%;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: rotate(180deg);
  pointer-events: none;
}

.tool__label {
  text-shadow: 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.55);
  transition: font-weight 0.3s ease;
}

/* the tool under the pointer: brighter steel, and its engraving cut a little deeper */
.tool-slot.is-up .tool__art {
  filter: brightness(1.07) contrast(1.04);
}

.tool-slot.is-up .tool__label {
  font-weight: 780;
}

.tool__icon {
  flex: none;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.55));
}

/* the blade is etched in red */
.tool--blade {
  color: var(--danger);
}

/* still motion: the tool under the pointer is lit instead of lifted */
@media (prefers-reduced-motion: reduce) {
  .tool-slot.is-up .tool__art {
    filter: brightness(1.12);
  }

  .handle__press,
  .plate__icon .fan,
  .tool-slot {
    transition: none;
  }

  .handle:active .handle__press {
    transform: none;
  }
}