/* ==========================================================================
   WORKSPACE-LOADER.CSS — boot veil (redesigned 2026-08-11)
   --------------------------------------------------------------------------
   Matches the redesigned workspace: near-black field with the same teal/sand
   radial wash as the stage, a horizontal TimrX wordmark that rises letter by
   letter, and a thin teal progress line with percent + status beneath.

   JS contract (js/workspace-loader.js — unchanged):
     .workspace-loader           overlay root, [hidden] once done
     [data-loader-bar]           width driven inline as N%
     --loader-progress           set on the root as N%
     [data-loader-percent]       "07%" text
     [data-loader-status]        status line; .is-swapping during text swap
     .is-exiting                 added ~200ms before the veil opens
     body.has-ws-loader / body.ws-intro-go   chrome gating (rules at bottom)

   Exit budget: JS hides the node 1300ms after .is-exiting (320ms reduced
   motion) — every exit transition here stays comfortably inside that.
   ========================================================================== */

/* body.print3d-page > * demotes positioned direct body children to
   position:relative (variables.css stacking note) — restore explicitly. */
html body.print3d-page > .workspace-loader { position: fixed; z-index: 2147480000; }

.workspace-loader {
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  display: grid;
  place-items: center;
  background-color: #07090a;
  background-image:
    radial-gradient(1100px 640px at 70% -8%, rgba(var(--accent-blue-rgb, 127, 200, 194), 0.10), transparent 62%),
    radial-gradient(820px 560px at 12% 108%, rgba(var(--accent-purple-rgb, 184, 167, 122), 0.07), transparent 60%);
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.workspace-loader.is-exiting { opacity: 0; pointer-events: none; }
.workspace-loader[hidden] { display: none; }

/* legacy atmosphere layers from the previous design — retired, markup kept */
.workspace-loader__void,
.workspace-loader__grain,
.workspace-loader__shadow { display: none; }

/* one soft breathing halo behind the mark, in the brand teal */
.workspace-loader__halo {
  position: absolute;
  width: 90vmin;
  height: 90vmin;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--accent-blue-rgb, 127, 200, 194), 0.07),
    transparent 58%);
  filter: blur(6px);
  animation: wsLoaderBreathe 5.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wsLoaderBreathe {
  0%, 100% { transform: scale(0.96); opacity: 0.75; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.workspace-loader__scene {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(30px, 5vh, 48px);
  padding: 0 24px;
}

.workspace-loader__mark {
  display: grid;
  justify-items: center;
  gap: clamp(30px, 5vh, 48px);
}

/* ---- wordmark: horizontal, rises letter by letter ---------------------- */
.workspace-loader__brand {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.04em;
  font-family: 'Space Grotesk', 'Bebas Neue', 'Inter', system-ui, sans-serif;
  font-size: clamp(56px, 9vw, 108px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text, #f2f5f3);
}
.workspace-loader__brand span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: wsLoaderRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
/* the X carries the brand accent */
.workspace-loader__brand span:last-child {
  color: var(--accent-blue, #7fc8c2);
  text-shadow: 0 0 34px rgba(var(--accent-blue-rgb, 127, 200, 194), 0.35);
}
@keyframes wsLoaderRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- meter -------------------------------------------------------------- */
.workspace-loader__meter {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(340px, 72vw);
  opacity: 0;
  animation: wsLoaderRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 620ms forwards;
}

.workspace-loader__progress {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.workspace-loader__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--accent-blue, #7fc8c2),
    var(--accent-blue-soft, #a5ded9));
  box-shadow: 0 0 14px rgba(var(--accent-blue-rgb, 127, 200, 194), 0.45);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.workspace-loader__readout {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.workspace-loader__percent {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--text-soft, #c8d0d0);
  font-variant-numeric: tabular-nums;
}
.workspace-loader__status {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim, #6d7779);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.workspace-loader__status.is-swapping {
  opacity: 0;
  transform: translateY(3px);
}

/* ==========================================================================
   CHROME GATING — unchanged behavior from the previous loader.
   `has-ws-loader` is set by workspace-loader.js at boot (pages without the
   loader, or with JS disabled, are never gated); `ws-intro-go` at handoff:
   the workspace chrome holds its entrance animations until the veil opens.
   ========================================================================== */

body.print3d-page.has-ws-loader:not(.ws-intro-go) .ws-header-left,
body.print3d-page.has-ws-loader:not(.ws-intro-go) .ws-credits > *,
html body.print3d-page.has-ws-loader:not(.ws-intro-go) > .ws-prompt-guide-launcher {
  animation-play-state: paused;
}

/* the redesigned chrome waits too: dock, filmstrip, hero */
body.print3d-page.has-ws-loader:not(.ws-intro-go) .ws-dock,
body.print3d-page.has-ws-loader:not(.ws-intro-go) .ws-filmstrip,
body.print3d-page.has-ws-loader:not(.ws-intro-go) .ws-hero {
  opacity: 0;
}
body.print3d-page.ws-intro-go .ws-dock,
body.print3d-page.ws-intro-go .ws-filmstrip,
body.print3d-page.ws-intro-go .ws-hero {
  opacity: 1;
  transition: opacity 0.6s ease 0.15s;
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 720px) {
  .workspace-loader__brand { font-size: clamp(44px, 15vw, 72px); }
  .workspace-loader__halo { width: 120vmin; height: 120vmin; }
  .workspace-loader__status { letter-spacing: 0.2em; }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .workspace-loader { transition-duration: 0.2s; }
  .workspace-loader__halo { animation: none; }
  .workspace-loader__brand span,
  .workspace-loader__meter {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }
  .workspace-loader__bar { transition: none; }
}