/* =========================================================
   Splash cube
   The first-paint loading screen: a single spinning 3D cube,
   no wordmark, no progress bar, no panel or backdrop around it
   — just the purple wireframe cube on the loader's plain
   background. The cube's own face treatment (border, gradient
   fill, hairline bevel) is still cloned from the hero cube on
   index.html (.hero-cube .cube-face in global.css), so if that
   treatment changes, mirror the change here too.

   Fades itself out through CSS alone, on a fixed timeline (see
   .cube-loader below). No script decides when it ends; js/cube.js
   only records the session and removes the element afterwards.

   This file is standalone on purpose, same reasoning as
   atmosphere.css: drop the <link> from a page and that page
   loses the splash cube specifically, without touching the
   hero cube, whose own rules stay in global.css since it also
   renders as part of the page itself, not just a pre-paint
   overlay.
   ========================================================= */

.cube-loader {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  background: radial-gradient(60rem 40rem at 50% 40%, #150B26, var(--void) 70%);
  /* The whole splash timeline, CSS only: visible for 1.5s, then a 900ms
     fade. No script decides when it ends, so nothing can hold it up or cut
     it short. Keep the 1.5s in step with --entrance in global.css, which
     starts the page's entrance as this fade begins. */
  animation: loaderOut 900ms var(--ease) 1500ms forwards;
}
/* Set by the inline head script on every page after the first of a session,
   so moving between pages never shows the loader again. */
html.no-loader .cube-loader { display: none; }
@keyframes loaderOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.splash-cube-stage {
  perspective: 900px;
  /* Fixed size, not a percentage: previously this was 55% of the now-removed
     190px panel. With no panel parent it would otherwise resolve against
     .cube-loader's full-viewport width, which is much too large. */
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  position: relative;
}
/* One size variable drives both the face size and the translation distance,
   so every face lands exactly on the cube's surface and the twelve edges meet
   as a closed cube. Never set a face size and a translateZ independently. */
.splash-cube {
  --cube-size: 78px;
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  animation: splashCubeSpin 16s linear infinite;
}
/* Wireframe glass treatment identical to .hero-cube .cube-face: soft
   amethyst border, faint gradient fill, a hairline bevel (no glow).

   Assembly: each face arrives from far out along its own normal, turned a
   quarter and transparent, and locks onto the cube in sequence. The cube
   builds itself in the first 0.8s of the splash, then simply spins.
   --place is each face's resting transform; the keyframes add the burst
   on top of it, so a face can never land anywhere but its own side. */
.splash-cube-face {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: var(--cube-size);
  height: var(--cube-size);
  border: 1.5px solid rgba(173, 79, 255, 0.55);
  background: linear-gradient(140deg, rgba(131, 11, 238, 0.26), rgba(131, 11, 238, 0.04));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.02), inset 0 0 0 5px rgba(214, 188, 255, 0.10);
  transform: var(--place);
  animation: splashAssemble 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) both;
}
.splash-cube-face.f-front  { --place: translateZ(calc(var(--cube-size) / 2)); --d: 0ms; }
.splash-cube-face.f-back   { --place: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); --d: 70ms; }
.splash-cube-face.f-right  { --place: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); --d: 140ms; }
.splash-cube-face.f-left   { --place: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); --d: 210ms; }
.splash-cube-face.f-top    { --place: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); --d: 280ms; }
.splash-cube-face.f-bottom { --place: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); --d: 350ms; }
@keyframes splashAssemble {
  from { opacity: 0; transform: var(--place) translateZ(150px) rotateZ(90deg) scale(0.4); }
  to   { opacity: 1; transform: var(--place); }
}

@keyframes splashCubeSpin {
  from { transform: rotateX(-22deg) rotateY(0deg) rotateZ(4deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg) rotateZ(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cube-loader { display: none; }
  .splash-cube, .splash-cube-face { animation: none; }
}