/* ==========================================================================
   WIZKET — loader.css
   Intro loader: eight cubes fly in, lock into one cube, the cube drops into
   the floor. Pure CSS 3D (adapted from the reference), recoloured for the
   Wizket palette. Dark: light cubes on --bg. Light: ink cubes on --bg.
   One cube carries the orange; everything else is neutral.

   The overlay only exists when <html class="has-loader"> (set by the inline
   script in index.html: first visit per session, motion allowed).
   ========================================================================== */

.ld { display: none; }

html.has-loader { overflow: hidden; }
html.has-loader .ld {
  position: fixed;
  inset: 0;
  z-index: 9000;                 /* over nav (100/200) + music (900), under the cursor (9999) */
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.1rem, 2.6vw, 2.25rem);
  background: var(--bg);
  color: var(--text);
  clip-path: inset(0 0 0 0);
  overflow: hidden;
  touch-action: none;
}

/* ---------- theme colours for the cubes ---------- */
.ld {
  --ld-front: #aeb2b3;           /* dark theme: front / top / side faces */
  --ld-top: #f2f1ed;
  --ld-side: #6f777b;
  --ld-ground-a: #1b2a2d;        /* petrol */
  --ld-ground-b: #263039;        /* steel  */
  --ld-dur: 1.5s;                /* one full cube cycle — keep short */
}
:root[data-theme="light"] .ld {
  --ld-front: #171a1c;
  --ld-top: #3a4247;
  --ld-side: #565f65;
  --ld-ground-a: #171a1c;
  --ld-ground-b: #343b40;
}

/* ---------- chrome ---------- */
.ld__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ld__logo { display: block; height: clamp(18px, 2vw, 24px); width: auto; }
:root[data-theme="dark"] .ld__logo--light,
:root[data-theme="light"] .ld__logo--dark { display: none; }
/* cubes + words are one group, centred in the stage. The cube box sits 58% (185.6px) below centre and its floor
   ends ~95px x scale below that, so the lift and the words' top are both derived from --ld-scale and the word size */
.ld__stage {
  --ld-scale: 1.25;
  --ld-wh: clamp(1.3rem, min(4.4vw, 6vh), 3.6rem);
  --ld-lift: calc(170px + var(--ld-scale) * 8px + var(--ld-wh) / 2);
  position: relative; display: grid; place-items: center; min-height: 0;
}

/* the three words, centre stage under the cubes: outlined, each one fills in as the counter passes it (loader.js) */
.ld__words {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 185.6px - var(--ld-lift) + var(--ld-scale) * 115px + 8px);   /* just under the floor */
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-display, "Anton", sans-serif);
  font-size: var(--ld-wh);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ld__words span {
  color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  transition: color 0.35s ease-out, -webkit-text-stroke-color 0.35s ease-out;
}
.ld__words span.is-on { color: var(--text); -webkit-text-stroke-color: var(--text); }
.ld__words i { font-style: normal; font-size: 0.6em; color: var(--accent); }

.ld__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: 0.4rem; }
.ld__tag {
  margin: 0;
  font: 500 0.68rem/1.4 var(--font-body, "Inter", sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ld__count {
  margin: 0;                     /* a <p>: its default 1em margin (≈115px at this size) floated the number up the screen */
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--font-display, "Anton", sans-serif);
  font-size: clamp(3.4rem, 9vw, 8rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ld__count i { font-style: normal; font-size: 0.32em; color: var(--muted); letter-spacing: 0.04em; }

/* progress hairline — the only orange on screen apart from one cube */
.ld__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.ld__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   3D cubes (reference animation; prefixed ld3d / ld-)
   ========================================================================== */
.ld3d {
  --duration: var(--ld-dur, 1.5s);
  position: relative;
  width: 200px;
  height: 320px;
  transform-style: preserve-3d;
  scale: var(--ld-scale);
  translate: -2% calc(58% - var(--ld-lift, 0px));   /* optical centre of the cluster, lifted to leave room for the words below */
}
@media (max-width: 900px) { .ld__stage { --ld-scale: 1.05; } }
@media (max-width: 480px) { .ld__stage { --ld-scale: 0.82; } }
@media (max-height: 560px) { .ld__stage { --ld-scale: 0.7; } }

/* masks hide the cube once it sinks below the floor — must equal the overlay background */
.ld3d:before, .ld3d:after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
  background: var(--bg);
  transform: translateZ(200px) rotate(var(--r));
  animation: ld-mask var(--duration) linear forwards infinite;
}
.ld3d:after { --r: -20.5deg; right: auto; left: 32%; }

.ld3d .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}
.ld3d .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, var(--ld-ground-a) 0%, var(--ld-ground-a) 50%, var(--ld-ground-b) 50%, var(--ld-ground-b) 100%);
  transform-style: preserve-3d;
  animation: ld-ground var(--duration) linear forwards infinite;
}
.ld3d .ground div:before, .ld3d .ground div:after {
  --rx: 90deg; --ry: 0deg; --x: 44px; --y: 162px; --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--ld-ground-b), transparent);
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  animation: ld-ground-shine var(--duration) linear forwards infinite;
}
.ld3d .ground div:after { --rx: 90deg; --ry: 90deg; --x: 0; --y: 177px; --z: 150px; }

.ld3d .box {
  --x: 0; --y: 0;
  position: absolute;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}
.ld3d .box div {
  background-color: var(--c-front, var(--ld-front));
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}
.ld3d .box div:before, .ld3d .box div:after {
  --rx: 90deg; --ry: 0deg; --z: 24px; --y: -24px; --x: 0;
  content: "";
  position: absolute;
  background-color: var(--c-top, var(--ld-top));
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
}
.ld3d .box div:after {
  --rx: 0deg; --ry: 90deg; --x: 24px; --y: 0;
  background-color: var(--c-side, var(--ld-side));
}
/* the one orange cube */
.ld3d .box.box7 div { --c-front: #fd5f07; --c-top: #ff8a4d; --c-side: #c94a00; }

.ld3d .box.box0 { --x: -220px; --y: -120px; left: 58px; top: 108px; animation-name: ld-move0; }
.ld3d .box.box0 div { animation-name: ld-scale0; }
.ld3d .box.box1 { --x: -260px; --y: 120px; left: 25px; top: 120px; animation-name: ld-move1; }
.ld3d .box.box1 div { animation-name: ld-scale1; }
.ld3d .box.box2 { --x: 120px; --y: -190px; left: 58px; top: 64px; animation-name: ld-move2; }
.ld3d .box.box2 div { animation-name: ld-scale2; }
.ld3d .box.box3 { --x: 280px; --y: -40px; left: 91px; top: 120px; animation-name: ld-move3; }
.ld3d .box.box3 div { animation-name: ld-scale3; }
.ld3d .box.box4 { --x: 60px; --y: 200px; left: 58px; top: 132px; animation-name: ld-move4; }
.ld3d .box.box4 div { animation-name: ld-scale4; }
.ld3d .box.box5 { --x: -220px; --y: -120px; left: 25px; top: 76px; animation-name: ld-move5; }
.ld3d .box.box5 div { animation-name: ld-scale5; }
.ld3d .box.box6 { --x: -260px; --y: 120px; left: 91px; top: 76px; animation-name: ld-move6; }
.ld3d .box.box6 div { animation-name: ld-scale6; }
.ld3d .box.box7 { --x: -240px; --y: 200px; left: 58px; top: 87px; animation-name: ld-move7; }
.ld3d .box.box7 div { animation-name: ld-scale7; }

@keyframes ld-move0 { 12% { transform: translate(var(--x), var(--y)); } 25%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale0 { 6% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 14%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move1 { 16% { transform: translate(var(--x), var(--y)); } 29%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale1 { 10% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 18%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move2 { 20% { transform: translate(var(--x), var(--y)); } 33%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale2 { 14% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 22%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move3 { 24% { transform: translate(var(--x), var(--y)); } 37%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale3 { 18% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 26%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move4 { 28% { transform: translate(var(--x), var(--y)); } 41%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale4 { 22% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 30%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move5 { 32% { transform: translate(var(--x), var(--y)); } 45%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale5 { 26% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 34%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move6 { 36% { transform: translate(var(--x), var(--y)); } 49%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale6 { 30% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 38%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes ld-move7 { 40% { transform: translate(var(--x), var(--y)); } 52%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); } 90%, 100% { transform: translate(0, 188px); } }
@keyframes ld-scale7 { 34% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 42%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }

@keyframes ld-ground {
  0%, 65% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); }
  75%, 90% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); }
  100% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); }
}
@keyframes ld-ground-shine { 0%, 70% { opacity: 0; } 75%, 87% { opacity: 0.12; } 100% { opacity: 0; } }
@keyframes ld-mask { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { html:not(.wz-full-motion) .ld { display: none !important; } }