/* Musikbox launch link: hidden until the case has opened, then fades in with the words.
   Inherits the page font; colours from two custom properties the page may set. */
.mbx-launch{
  --mbx-launch-fg: var(--mbx-fg, #fff);
  --mbx-launch-bg: var(--mbx-bg, rgba(0,0,0,.55));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;                /* touch target, and the exact height of the reserved slot */
  min-width: 48px;
  padding: 0 22px;
  font: inherit;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--mbx-launch-fg);
  background: var(--mbx-launch-bg);
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.mbx-launch[hidden]{ display: none; }
.mbx-launch.is-revealed{ opacity: 1; transform: none; }
.mbx-launch:focus-visible{ outline: 3px solid currentColor; outline-offset: 4px; }
/* reserved slot: 48px from the start so the reveal never shifts the composition */
[data-mbx-launch-mount]{ height: 48px; display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce){ .mbx-launch{ transition: none; transform: none; } }

/* ---- tool controls: framed targets on the words painted in the open-loop video, each with
   a quiet cue underneath, plus one DOM-set word (MR KLIPZ) that has no painted counterpart.
   The painted word is the name (MIX opens the Needle app; no second name sits under a word).
   Hierarchy: the artwork first, the selectable words second, TRY MUSIKBOX third, status last.
   The stage is a square of min(100vw, 100vh), so 1vmin is exactly 1% of it; positions are
   % of the layer, sizes are vmin, and everything scales with the artwork.
   Word boxes measured from stage03_open_loop.webm (960×960, words static across the loop):
     crate2cloud  x 28.4–70.4%  y  4.1–11.0%   (cap height 7.0%)
     FIX          x  8.0–22.5%  y 60.4–65.9%   (cap height 5.5%, tracked ≈ .2em)
     MIX          x 39.9–56.1%  y 60.4–65.9%
     TRIX         x 69.3–91.5%  y 60.4–65.9%
     about        x 39.3–59.9%  y 89.4–95.0%   (the page's own zone, not a tool)
   Bands the controls keep clear of: the TRY MUSIKBOX slot (81.5–87.5% on a desktop square) and
   the "about" word (89–95%). */
[data-mbx-tools]{ position: absolute; inset: 0; pointer-events: none; z-index: 3; }
[data-mbx-tools][hidden]{ display: none; }
.mbx-tool{
  --mbx-x: 50%; --mbx-y: 50%;            /* centre of the word, % of the square */
  --mbx-w: 20vmin; --mbx-h: 5.5vmin;     /* painted word box */
  --mbx-pad-x: 1.6vmin; --mbx-pad-y: .9vmin;
  --mbx-line: rgba(255,255,255,.22);     /* dormant: a boundary you notice second, not first */
  --mbx-cue: rgba(255,255,255,.5);
  position: absolute;
  left: var(--mbx-x);
  top: calc(var(--mbx-y) - var(--mbx-h) / 2 - var(--mbx-pad-y));
  width: calc(var(--mbx-w) + 2 * var(--mbx-pad-x));
  min-width: 44px;
  min-height: 44px;
  pointer-events: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0; padding: 0;
  background: transparent;
  border: 0;
  color: var(--mbx-fg, #fff);
  font: 500 clamp(9px, 1.25vmin, 11px)/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: clamp(.6px, .16vmin, 1.6px);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translate(-50%, .8vmin);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: calc(var(--mbx-i, 0) * 70ms);
}
[data-mbx-tools].is-revealed .mbx-tool{ opacity: 1; transform: translateX(-50%); }
/* the frame: a hairline around the painted word */
.mbx-tool-frame{
  display: block;
  position: relative;                    /* the water film and its ripples live inside the frame */
  overflow: hidden;
  width: 100%;
  height: calc(var(--mbx-h) + 2 * var(--mbx-pad-y));
  box-sizing: border-box;
  border: 1px solid var(--mbx-line);
  border-radius: max(8px, 1.4vmin);
  transition: border-color 200ms ease, transform 160ms cubic-bezier(.2,.7,.2,1);
}
/* words painted in the video: screen-reader text only, never drawn twice */
.mbx-tool-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a word the video does not paint: the same lettering as the painted row, smaller, so it reads as
   a fourth tool below the row and never as the largest wording on screen */
.mbx-tool-word{
  position: absolute;
  top: var(--mbx-pad-y); left: 0; right: 0;
  height: var(--mbx-h);
  display: flex; align-items: center; justify-content: center;
  font: 700 calc(var(--mbx-h) / .72)/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .2em; text-indent: .2em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
/* the cue under the frame: one quiet line. Open: OPEN →. Dormant: an outlined dot, and the product
   name only where the painted word is not it (none today). No status wording on the artwork;
   the sentence lives in the accessible name and in the live-region caption on hover, focus, activation. */
.mbx-tool-cue{ display: block; margin-top: .6vmin; white-space: nowrap; color: var(--mbx-cue); transition: color 200ms ease; }
.mbx-tool-sub{ color: #fff; font-weight: 700; }
.mbx-tool-status{ display: inline-flex; align-items: center; gap: .5em; min-height: 1.15em; }
.mbx-tool-mark{ display: inline-block; width: max(6px, .9vmin); height: max(6px, .9vmin); box-sizing: border-box; border: 1px solid var(--mbx-cue); border-radius: 50%; transition: border-color 200ms ease; }
.mbx-tool-arrow{ display: inline-block; font-weight: 400; transition: transform 200ms ease; }
/* available: the one door that opens. A firmer line and a white OPEN → cue; still a hairline, not a button */
.mbx-tool[data-state="available"]{ --mbx-line: rgba(255,255,255,.6); --mbx-cue: #fff; font-weight: 700; }
.mbx-tool[data-state="available"]:hover, .mbx-tool[data-state="available"]:focus-visible{ --mbx-line: #fff; }
.mbx-tool[data-state="available"]:hover .mbx-tool-arrow, .mbx-tool[data-state="available"]:focus-visible .mbx-tool-arrow{ transform: translateX(.4em); }
/* preparing: dormant, not broken. The line and the cue come up a little under the pointer, never to full white */
.mbx-tool[data-state="preparing"]{ cursor: default; }
.mbx-tool[data-state="preparing"]:hover, .mbx-tool[data-state="preparing"]:focus-visible{ --mbx-line: rgba(255,255,255,.5); --mbx-cue: rgba(255,255,255,.8); }
.mbx-tool:focus{ outline: none; }
.mbx-tool:focus-visible{ outline: 2px solid var(--mbx-fg, #fff); outline-offset: 3px; border-radius: max(8px, 1.4vmin); }
.mbx-tool.is-pressed .mbx-tool-frame{ animation: mbx-tool-pressed 600ms ease-out; }
@keyframes mbx-tool-pressed{ 0%{ border-color: rgba(255,255,255,.9); } 100%{ border-color: var(--mbx-line); } }
/* geometry, per tool */
.mbx-tool[data-tool="crate"] { --mbx-x: 49.4%; --mbx-y: 7.55%; --mbx-w: 42vmin;   --mbx-h: 7vmin;   --mbx-pad-x: 2.2vmin; --mbx-pad-y: 1.3vmin; }
.mbx-tool[data-tool="fix"]   { --mbx-x: 15.25%; --mbx-y: 63.15%; --mbx-w: 14.5vmin; }
.mbx-tool[data-tool="needle"]{ --mbx-x: 48%;    --mbx-y: 63.15%; --mbx-w: 16.2vmin; }
.mbx-tool[data-tool="trix"]  { --mbx-x: 80.4%;  --mbx-y: 63.15%; --mbx-w: 22.2vmin; }
.mbx-tool[data-tool="mklipz"]{ --mbx-x: 50%;    --mbx-y: 73.6%;  --mbx-w: 29vmin;   --mbx-h: 3.2vmin; }
/* status caption: the fuller sentence when a preparing control is activated, anchored above
   the FIX MIX TRIX row (below crate2cloud for that control) and never on the TRY slot */
[data-mbx-tool-status]{
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  margin: 0; padding: 0 14px; z-index: 3; pointer-events: none;
  font: 600 clamp(11px, 1.7vmin, 15px)/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  width: max-content; max-width: calc(100% - 24px); box-sizing: border-box;   /* one line; wraps only inside a small square */
  color: var(--mbx-fg, #fff); background: var(--mbx-bg, rgba(0,0,0,.55)); border-radius: 999px;
  opacity: 0; transition: opacity 300ms ease;
}
[data-mbx-tool-status][data-for="crate"]{ top: 22%; }
[data-mbx-tool-status].is-shown{ opacity: 1; }

/* ---- water film: each control sits under a very thin layer of clear liquid.
   At rest the surface is almost still: a little optical depth, a soft highlight that drifts across
   the frame over nine seconds, and a meniscus at the edge (one light line at the top, one shadow
   at the bottom). The painted word is in the video underneath and the MR KLIPZ word is a sibling
   drawn above the frame, so the lettering is never under the film and stays crisp. The film is
   gradients only, on five small elements: no blur, no backdrop filter, nothing page-wide. */
.mbx-tool-frame::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(115% 95% at 50% -10%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),   /* the moving highlight */
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.14) 100%);  /* depth */
  background-size: 220% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.04);  /* meniscus */
  opacity: .9;
  transition: opacity 200ms ease, background-color 200ms ease;
  animation: mbx-water-drift 9s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes mbx-water-drift{ from{ background-position: 0% 0, 0 0; } to{ background-position: 100% 0, 0 0; } }
.mbx-tool:hover .mbx-tool-frame::before, .mbx-tool:focus-visible .mbx-tool-frame::before{ opacity: 1; }
/* the press: a brief depression of the surface, transform only, so nothing around it moves */
.mbx-tool.is-dipped .mbx-tool-frame{ transform: scale(.985); }
.mbx-tool.is-dipped .mbx-tool-frame::before{ opacity: 1; background-color: rgba(255,255,255,.035); }
/* the ripple: two restrained rings that leave the exact point of contact (set as --mbx-rx/--mbx-ry
   by tools.js), spread to the frame's far corner (--mbx-rd) and fade. The timing is liquid
   tension, not an ink splash: fast to leave, slow to settle. The element removes itself. */
.mbx-ripple{
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--mbx-rx, 50%); top: var(--mbx-ry, 50%);
  width: var(--mbx-rd, 100%); height: var(--mbx-rd, 100%);
  margin: calc(var(--mbx-rd, 100%) / -2) 0 0 calc(var(--mbx-rd, 100%) / -2);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 14px rgba(255,255,255,.10);
  transform: scale(.04); opacity: 0;
  animation: mbx-ripple 780ms cubic-bezier(.2,.7,.2,1) forwards;
}
.mbx-ripple::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  transform: scale(.55); opacity: 0;
  animation: mbx-ripple 780ms 110ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes mbx-ripple{ 0%{ transform: scale(.04); opacity: .85; } 55%{ opacity: .35; } 100%{ transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .mbx-tool, .mbx-tool-frame, .mbx-tool-cue, .mbx-tool-arrow, [data-mbx-tool-status]{ transition: none; }
  .mbx-tool{ transform: translateX(-50%); }
  .mbx-tool.is-pressed .mbx-tool-frame{ animation: none; border-color: rgba(255,255,255,.9); }
  .mbx-tool[data-state="available"]:hover .mbx-tool-arrow, .mbx-tool[data-state="available"]:focus-visible .mbx-tool-arrow{ transform: none; }
  /* water film under reduced motion: the surface holds still and no ripple travels; the press is a
     quiet change of the film (tools.js creates no ripple element at all in this mode) */
  .mbx-tool-frame::before{ animation: none; background-position: 50% 0, 0 0; }
  .mbx-ripple{ display: none; }
  .mbx-tool.is-dipped .mbx-tool-frame{ transform: none; }
  .mbx-tool.is-dipped .mbx-tool-frame::before{ opacity: 1; background-color: rgba(255,255,255,.07); }
}