/* css/loader.css — the loading screen: the bouncing cube out of
   loader_animations.html, the founder's pick (12 Oct 2026) at the settings
   in cube-loader-settings.png: 80px, 1.8s, cube = the page's text colour on
   the page's background, the stock #ff8484 edge. Nothing here is a token of
   its own: --ink / --paper come from whichever theme the page is wearing
   (dashboard light/dark, the form's dark/paper/warm looks), so the cube is
   always the ink of that page on its paper.

   One overlay, written into the page by hand so it is on screen before any
   script has run, and taken down by the page's own script the moment it has
   something to show: dashboard.js replaces #db wholesale (the loader sits
   inside it); client.js removes #lt-loader once booking/{handle} has
   answered. Prefixed ltl- so nothing in the pages' own CSS can touch it. */
.lt-loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ink,#efe9dd);color:var(--paper,#141210);
  --cube-size:80px;--cube-dur:1.8s;--cube-color:var(--paper,#000);--cube-border:#ff8484}
/* the cube and, under it, the wordmark: one column, so the overlay (and the
   box face it becomes on the way out) centres a single thing */
.ltl-stack{display:grid;justify-items:center;gap:0}
.ltl-mark{font-size:30px;margin-top:-14px}
/* the words are for a screen reader; the cube is the whole picture */
.lt-loader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ltl-scene{position:relative;z-index:2;height:calc(var(--cube-size) * 2.75);width:calc(var(--cube-size) * 2.75);display:grid;place-items:center}
.ltl-wrap{transform-style:preserve-3d;animation:ltl-bouncing var(--cube-dur) infinite}
.ltl-cube{transform-style:preserve-3d;transform:rotateX(45deg) rotateZ(45deg);animation:ltl-rotation var(--cube-dur) infinite}
.ltl-faces{transform-style:preserve-3d;height:var(--cube-size);width:var(--cube-size);position:relative;transform-origin:0 0;
  transform:translateX(0) translateY(0) translateZ(calc(var(--cube-size) / -2))}
.ltl-face{position:absolute;inset:0;background:var(--cube-color);border:solid 1px var(--cube-border)}
.ltl-face.shadow{transform:translateZ(calc(var(--cube-size) * -1));animation:ltl-bouncing-shadow var(--cube-dur) infinite}
.ltl-face.top{transform:translateZ(var(--cube-size))}
.ltl-face.front{transform-origin:0 50%;transform:rotateY(-90deg)}
.ltl-face.back{transform-origin:0 50%;transform:rotateY(-90deg) translateZ(calc(var(--cube-size) * -1))}
.ltl-face.right{transform-origin:50% 0;transform:rotateX(-90deg) translateY(calc(var(--cube-size) * -1))}
.ltl-face.left{transform-origin:50% 0;transform:rotateX(-90deg) translateY(calc(var(--cube-size) * -1)) translateZ(var(--cube-size))}

@keyframes ltl-rotation{
  0%{transform:rotateX(45deg) rotateY(0) rotateZ(45deg);animation-timing-function:cubic-bezier(.17,.84,.44,1)}
  50%{transform:rotateX(45deg) rotateY(0) rotateZ(225deg);animation-timing-function:cubic-bezier(.76,.05,.86,.06)}
  100%{transform:rotateX(45deg) rotateY(0) rotateZ(405deg);animation-timing-function:cubic-bezier(.17,.84,.44,1)}
}
@keyframes ltl-bouncing{
  0%,100%{transform:translateY(calc(var(--cube-size) * -0.5));animation-timing-function:cubic-bezier(.76,.05,.86,.06)}
  45%{transform:translateY(calc(var(--cube-size) * 0.5));animation-timing-function:cubic-bezier(.23,1,.32,1)}
}
@keyframes ltl-bouncing-shadow{
  0%,100%{transform:translateZ(calc(var(--cube-size) * -1)) scale(1.3);animation-timing-function:cubic-bezier(.76,.05,.86,.06);opacity:.05}
  45%{transform:translateZ(0);animation-timing-function:cubic-bezier(.23,1,.32,1);opacity:.3}
}
/* no bounce for anyone who asked their device for less motion: a still cube */
@media(prefers-reduced-motion:reduce){.ltl-wrap,.ltl-cube,.ltl-face.shadow{animation:none}}