/* SMAU FILE
 * Path: css/smau-boot.css
 * Owns:
 *   - Boot screen visual composition ONLY (sky, brand, wordmark, progress dock)
 *   - Boot entrance choreography + ambient loops
 * Invariants:
 *   - Mechanics truth is not authored here (data-state truth lives elsewhere)
 *   - JS hooks that must keep their names: .boot-progress-fill (width %),
 *     #boot-status-label, #boot-version-label, #boot-progress-pct,
 *     #boot-error-card subtree (styled by css/smau-bootErrorCard.css)
 *   - All motion is transform/opacity only (blurs are static, never animated)
 *   - Everything animated is disabled under prefers-reduced-motion
 * DOM Roots:
 *   - #screen-boot subtree
 * Depends:
 *   - Tokens: --os-accent-rgb (optional), --smau-ease-out (optional)
 */

/* --------------------------------------------------------------------------
   SCREEN CANVAS
-------------------------------------------------------------------------- */

#screen-boot{
  --boot-ink:        rgba(247, 249, 255, 0.98);
  --boot-ink-soft:   rgba(214, 222, 250, 0.72);
  --boot-ink-faint:  rgba(186, 197, 233, 0.52);

  --boot-violet-rgb: 156 118 255;
  --boot-blue-rgb:   96 143 255;
  --boot-cyan-rgb:   120 210 255;

  --boot-ease-out:    cubic-bezier(0.22, 0.9, 0.24, 1);
  --boot-ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);

  --boot-enter-dur: 0.7s;

  background:
    radial-gradient(130% 100% at 50% -12%, rgb(var(--boot-blue-rgb) / 0.16), rgb(var(--boot-blue-rgb) / 0) 50%),
    radial-gradient(90% 70% at 84% 112%, rgb(var(--boot-violet-rgb) / 0.14), rgb(var(--boot-violet-rgb) / 0) 56%),
    linear-gradient(180deg, #0a0e22 0%, #05070f 62%, #030409 100%);
}

/* --------------------------------------------------------------------------
   SKY — aurora blobs, drifting starfield, horizon glow
   (static blurs; only transform/opacity are animated)
-------------------------------------------------------------------------- */

#screen-boot .boot-sky{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

#screen-boot .boot-sky-aurora{
  position: absolute;
  width: 120%;
  aspect-ratio: 1.15;
  border-radius: 50%;
  filter: blur(36px);
  mix-blend-mode: screen;
  opacity: 0.72;
  will-change: transform;
}

#screen-boot .boot-sky-aurora--violet{
  top: -34%;
  left: -38%;
  background: radial-gradient(ellipse at 50% 50%,
    rgb(var(--boot-violet-rgb) / 0.52),
    rgb(var(--boot-violet-rgb) / 0.16) 44%,
    rgb(var(--boot-violet-rgb) / 0) 70%);
}

#screen-boot .boot-sky-aurora--blue{
  bottom: -42%;
  right: -40%;
  background: radial-gradient(ellipse at 50% 50%,
    rgb(var(--boot-blue-rgb) / 0.46),
    rgb(var(--boot-cyan-rgb) / 0.14) 46%,
    rgb(var(--boot-blue-rgb) / 0) 72%);
}

#screen-boot[data-state="open"] .boot-sky-aurora--violet{
  animation: smau-boot-aurora-a 17s ease-in-out infinite;
}
#screen-boot[data-state="open"] .boot-sky-aurora--blue{
  animation: smau-boot-aurora-b 23s ease-in-out infinite;
}

@keyframes smau-boot-aurora-a{
  0%, 100%{ transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  33%     { transform: translate3d(7%, 5%, 0) scale(1.10) rotate(9deg); }
  66%     { transform: translate3d(-4%, 8%, 0) scale(0.94) rotate(-7deg); }
}

@keyframes smau-boot-aurora-b{
  0%, 100%{ transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  40%     { transform: translate3d(-8%, -6%, 0) scale(1.12) rotate(-11deg); }
  75%     { transform: translate3d(5%, -3%, 0) scale(0.96) rotate(8deg); }
}

/* Two star layers tiled from radial-gradient dots; parallax drift + twinkle. */
#screen-boot .boot-sky-stars{
  position: absolute;
  inset: -40% -20%;
  background-repeat: repeat;
  will-change: transform;
}

#screen-boot .boot-sky-stars--far{
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 44% 62%, rgba(214,224,255,0.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 31%, rgba(255,255,255,0.38) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 88% 78%, rgba(190,206,255,0.40) 0 1px, transparent 1.6px),
    radial-gradient(circle at 27% 84%, rgba(255,255,255,0.30) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 60% 9%,  rgba(214,224,255,0.34) 0 0.8px, transparent 1.4px);
  background-size: 210px 210px;
  opacity: 0.55;
}

#screen-boot .boot-sky-stars--near{
  background-image:
    radial-gradient(circle at 22% 42%, rgba(255,255,255,0.85) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 66% 14%, rgb(var(--boot-cyan-rgb) / 0.75) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 84% 56%, rgba(255,255,255,0.70) 0 1.1px, transparent 2px),
    radial-gradient(circle at 38% 88%, rgb(var(--boot-violet-rgb) / 0.65) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 8%  68%, rgba(255,255,255,0.60) 0 1px,   transparent 2px);
  background-size: 290px 290px;
  opacity: 0.7;
}

#screen-boot[data-state="open"] .boot-sky-stars--far{
  animation:
    smau-boot-star-drift 120s linear infinite,
    smau-boot-star-twinkle 7s ease-in-out infinite;
}
#screen-boot[data-state="open"] .boot-sky-stars--near{
  animation:
    smau-boot-star-drift 70s linear infinite reverse,
    smau-boot-star-twinkle 5s 1.4s ease-in-out infinite;
}

@keyframes smau-boot-star-drift{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(-210px, 120px, 0); }
}

@keyframes smau-boot-star-twinkle{
  0%, 100%{ opacity: 0.42; }
  50%     { opacity: 0.75; }
}

/* --------------------------------------------------------------------------
   POINTER PARALLAX
   js/smau.bootFx.js sets --boot-par-x/--boot-par-y (each -1..1) on
   #screen-boot as the pointer roams. The independent `translate` property
   composes with the transform keyframe animations above, so drift/twinkle
   and parallax coexist. Deeper layers move less; the blue aurora moves
   against the pointer for extra depth.
-------------------------------------------------------------------------- */

#screen-boot{
  --boot-par-x: 0;
  --boot-par-y: 0;
}

#screen-boot .boot-sky-stars--far,
#screen-boot .boot-sky-stars--near,
#screen-boot .boot-sky-aurora,
#screen-boot .boot-sky-horizon,
#screen-boot .boot-logo-wrap{
  transition: translate 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

#screen-boot .boot-sky-stars--far{
  translate: calc(var(--boot-par-x) * 7px) calc(var(--boot-par-y) * 5px);
}
#screen-boot .boot-sky-stars--near{
  translate: calc(var(--boot-par-x) * 16px) calc(var(--boot-par-y) * 12px);
}
#screen-boot .boot-sky-aurora--violet{
  translate: calc(var(--boot-par-x) * 24px) calc(var(--boot-par-y) * 18px);
}
#screen-boot .boot-sky-aurora--blue{
  translate: calc(var(--boot-par-x) * -20px) calc(var(--boot-par-y) * -14px);
}
#screen-boot .boot-sky-horizon{
  translate: calc(var(--boot-par-x) * 10px) calc(var(--boot-par-y) * 6px);
}
#screen-boot .boot-logo-wrap{
  translate: calc(var(--boot-par-x) * 5px) calc(var(--boot-par-y) * 4px);
}

/* Soft glow line low in the frame — gives the sky a floor. */
#screen-boot .boot-sky-horizon{
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 16%;
  height: 30%;
  background:
    radial-gradient(60% 100% at 50% 100%,
      rgb(var(--boot-blue-rgb) / 0.16),
      rgb(var(--boot-blue-rgb) / 0.05) 46%,
      rgb(var(--boot-blue-rgb) / 0) 74%);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   LAYOUT
-------------------------------------------------------------------------- */

#screen-boot .boot-layer{
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;

  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;

  padding:
    clamp(26px, 4.6vw, 34px)
    clamp(18px, 5vw, 28px)
    clamp(18px, 4vw, 26px);

  gap: clamp(16px, 3vw, 24px);
}

#screen-boot .boot-brand{
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 30px);
  text-align: center;
}

/* --------------------------------------------------------------------------
   LOGO — orb + spinning conic ring + orbiting satellite + breathing glow
-------------------------------------------------------------------------- */

#screen-boot .boot-logo-wrap{
  position: relative;
  width: clamp(112px, 30vw, 148px);
  height: clamp(112px, 30vw, 148px);
  /* never flex-squash into an ellipse when the status dock grows
     (e.g. the boot error card opening steals vertical space) */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

#screen-boot .boot-logo-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Conic arc ring, hollowed with a mask so only a thin band paints. */
#screen-boot .boot-logo-ring--spin{
  background: conic-gradient(
    from 0deg,
    rgb(var(--boot-blue-rgb) / 0) 0deg,
    rgb(var(--boot-blue-rgb) / 0.95) 80deg,
    rgb(var(--boot-cyan-rgb) / 1) 120deg,
    rgb(var(--boot-violet-rgb) / 0.7) 200deg,
    rgb(var(--boot-violet-rgb) / 0) 300deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 6px rgb(var(--boot-cyan-rgb) / 0.55));
}

#screen-boot[data-state="open"] .boot-logo-ring--spin{
  animation: smau-boot-ring-spin 7s linear infinite;
}

/* Counter-rotating carrier for the satellite dot. */
#screen-boot .boot-logo-ring--orbit{
  inset: -12%;
}

#screen-boot[data-state="open"] .boot-logo-ring--orbit{
  animation: smau-boot-ring-spin 11s linear infinite reverse;
}

#screen-boot .boot-logo-satellite{
  position: absolute;
  top: -2.5px;
  left: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--boot-cyan-rgb) / 0.95);
  box-shadow:
    0 0 8px rgb(var(--boot-cyan-rgb) / 0.85),
    0 0 18px rgb(var(--boot-blue-rgb) / 0.5);
}

@keyframes smau-boot-ring-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* The planet: a glowing purple sphere. Its surface texture is a horizontally
   repeating background whose position-x is driven by --boot-spin (set from
   js/smau.bootFx.js) — it always rolls slowly, and dragging/flicking it spins
   it with momentum. Tapping it pulses the whole logo. */
#screen-boot .boot-logo-orb{
  position: relative;
  z-index: 2;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  overflow: hidden;

  cursor: grab;
  touch-action: none;
  pointer-events: auto;

  background: radial-gradient(circle at 32% 28%,
    #8b66ff 0%,
    #6540e0 34%,
    #341a80 68%,
    #1b0c4c 100%);

  border: 1px solid rgb(var(--boot-violet-rgb) / 0.4);
  box-shadow:
    0 0 24px rgb(var(--boot-violet-rgb) / 0.5),
    0 0 64px rgb(var(--boot-violet-rgb) / 0.28),
    0 22px 50px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255,255,255,0.20);

  will-change: transform;
}

#screen-boot .boot-logo-orb:active{
  cursor: grabbing;
}

#screen-boot[data-state="open"] .boot-logo-orb{
  animation: smau-boot-orb-breathe 3.4s ease-in-out infinite;
}

@keyframes smau-boot-orb-breathe{
  0%, 100%{ transform: translateZ(0) scale(1); }
  50%     { transform: translateZ(0) scale(1.03); }
}

/* Rolling surface: layered "continent" blobs + faint bands. The tiles repeat
   on BOTH axes so the terrain can roll in any direction the finger drags,
   driven by --boot-spin (x) and --boot-spin-y (y) from js/smau.bootFx.js.
   Different tile sizes keep the terrain from reading as one obvious loop. */
#screen-boot .boot-planet-surface{
  position: absolute;
  inset: -2%;
  pointer-events: none;

  /* A marbled gas-giant surface built ONLY from soft, wide radial washes —
     no repeating-linear-gradients. Those tiled into hard diagonal "barcode"
     stripes at the sphere's scale (owner: "jagged lines like a barcode").
     Every layer here is a smooth fade to transparent, oversized past 100% so
     nothing repeats visibly, and they all share one background-position so the
     whole cloudscape rolls together under the drag. */
  background-image:
    radial-gradient(42% 34% at 24% 30%, rgba(216, 194, 255, 0.45), transparent 72%),
    radial-gradient(32% 30% at 62% 58%, rgba(150, 108, 240, 0.42), transparent 74%),
    radial-gradient(36% 26% at 82% 30%, rgba(234, 220, 255, 0.30), transparent 76%),
    radial-gradient(30% 32% at 40% 82%, rgba(112, 72, 216, 0.44), transparent 74%),
    radial-gradient(48% 36% at 74% 86%, rgba(92, 58, 194, 0.34), transparent 78%),
    radial-gradient(54% 44% at 10% 72%, rgba(178, 142, 250, 0.24), transparent 80%),
    linear-gradient(122deg, rgba(150, 110, 240, 0.16), rgba(216, 194, 255, 0.05) 42%, transparent 72%);
  background-repeat: repeat;
  background-size: 205% 175%, 185% 165%, 225% 155%, 195% 180%, 245% 165%, 265% 205%, 210% 210%;
  background-position:
    calc(var(--boot-spin, 0) * 1px) calc(var(--boot-spin-y, 0) * 1px);

  opacity: 0.95;
  will-change: background-position;
}

/* Fixed lighting: specular highlight top-left, shadowed limb bottom-right —
   this staying still while the surface rolls is what sells the sphere. */
#screen-boot .boot-planet-shade{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;

  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.30), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgb(12 5 34 / 0.55) 84%, rgb(6 2 20 / 0.85) 100%),
    linear-gradient(250deg, rgb(8 3 24 / 0.5), transparent 55%);
}

/* Tap feedback (the pulse) is driven by the Web Animations API in
   js/smau.bootFx.js (pulsePlanet), not a CSS class — a single self-completing
   animation that rapid taps never restart, so the planet can't blink. Only the
   held/launch states below remain CSS.
   NOTE for those two: the `[data-state="open"]` qualifier is REQUIRED, not
   decoration. The entrance rule `#screen-boot[data-state="open"] .boot-logo-wrap`
   (below) sets animation:smau-boot-logo-pop at specificity (1,2,0); a bare
   `.boot-logo-wrap.boot-held` matches at the same (1,2,0) but loses on source
   order, so its animation-name never takes. Qualifying here lifts these to
   (1,3,0) so held/launch actually win. */

/* Press-and-hold "pick up": the planet swells and brightens while held, as if
   lifted off its resting spot (js/smau.bootFx.js toggles .boot-held). */
#screen-boot[data-state="open"] .boot-logo-wrap.boot-held{
  animation: smau-boot-planet-lift 0.28s var(--boot-ease-spring) forwards;
}

@keyframes smau-boot-planet-lift{
  0%  { transform: scale(1); }
  100%{ transform: scale(1.16); filter: brightness(1.18); }
}

/* Release after a hold — or a hard fling (T3.6): the planet takes off on a
   smooth, physics-driven orbital flight whose shape follows the toss and
   springs back to its resting place. The MOTION is integrated per-frame in
   js/smau.bootFx.js and written to inline `transform`, so this class must NOT
   declare a transform animation (a CSS animation would override the inline
   transform and freeze the flight). It is a compositing hint + state marker
   only; the JS clears both the class and the inline transform when the planet
   lands. Under reduced motion the whole bootFx module is disabled, so this
   class is never added there. */
#screen-boot[data-state="open"] .boot-logo-wrap.boot-launch{
  will-change: transform;
}

/* Asteroid belt: small rocks spawned by tapping the planet (js/smau.bootFx.js).
   They orbit an inclined ring; back-of-orbit rocks get z-index 1 (behind the
   opaque orb) and front rocks z-index 3. Position/scale/opacity are set per
   frame via transform + opacity only — no layout, GPU-composited. */
#screen-boot .boot-asteroid{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 34% 30%,
    #e4d6ff 0%,
    #a48be6 46%,
    #5b41a4 78%,
    #341f70 100%);
  box-shadow:
    0 0 4px rgb(var(--boot-violet-rgb) / 0.55),
    inset 0 0 2px rgba(255, 255, 255, 0.35);
  will-change: transform, opacity;
}

/* "Drag me" hint: a soft ring that pulses a few times then fades for good.
   Created and removed from JS, so it never appears under reduced motion. */
#screen-boot .boot-drag-hint{
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgb(var(--boot-cyan-rgb) / 0.6);
  box-shadow:
    0 0 14px rgb(var(--boot-cyan-rgb) / 0.4),
    inset 0 0 10px rgb(var(--boot-cyan-rgb) / 0.18);
  opacity: 0;
  animation: smau-boot-drag-hint 1.75s ease-out 3;
}

@keyframes smau-boot-drag-hint{
  0%  { transform: scale(0.92); opacity: 0; }
  22% { opacity: 0.6; }
  100%{ transform: scale(1.34); opacity: 0; }
}

#screen-boot .boot-logo-glow{
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgb(var(--boot-violet-rgb) / 0.42),
    rgb(var(--boot-blue-rgb) / 0.14) 46%,
    rgb(var(--boot-violet-rgb) / 0) 72%);
  filter: blur(16px);
  opacity: 0.8;
  will-change: transform, opacity;
}

#screen-boot[data-state="open"] .boot-logo-glow{
  animation: smau-boot-glow-pulse 3.4s ease-in-out infinite;
}

@keyframes smau-boot-glow-pulse{
  0%, 100%{ opacity: 0.62; transform: scale(1); }
  50%     { opacity: 0.95; transform: scale(1.07); }
}

/* --------------------------------------------------------------------------
   WORDMARK — the SMAU moment
-------------------------------------------------------------------------- */

#screen-boot .boot-text-block{
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 320px);
}

#screen-boot .boot-studio-name{
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 650;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* re-centers tracked uppercase */
  text-transform: uppercase;
  color: var(--boot-ink-faint);
}

#screen-boot .boot-wordmark{
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  padding: 0.05em 0.1em;

  font-size: clamp(42px, 13vw, 58px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* The light sweep lives INSIDE the clipped text background (top layer of a
   two-layer gradient, background-position animated), so it only ever lights
   the glyphs — never a band crossing the box around them. */
#screen-boot .boot-wordmark-smau{
  background:
    linear-gradient(105deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0) 60%),
    linear-gradient(115deg,
      #ffffff 8%,
      #ccd8ff 38%,
      rgb(var(--boot-blue-rgb)) 66%,
      rgb(var(--boot-violet-rgb)) 96%);
  background-size: 240% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

#screen-boot[data-state="open"] .boot-wordmark-smau{
  animation: smau-boot-wordmark-sheen 4.2s var(--boot-ease-out) 0.9s infinite;
}

/* p 160% -> -40% slides the wide highlight layer so the band crosses the
   glyphs left-to-right; the base gradient layer stays parked at 0 0. */
@keyframes smau-boot-wordmark-sheen{
  0%       { background-position: 160% 0, 0 0; }
  34%, 100%{ background-position: -40% 0, 0 0; }
}

#screen-boot .boot-wordmark-os{
  font-size: 0.52em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--boot-ink-soft);
}

#screen-boot .boot-tagline{
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.32;
  letter-spacing: 0.06em;
  color: var(--boot-ink-soft);
}

/* --------------------------------------------------------------------------
   STATUS DOCK — progress bar, live percentage, status line
-------------------------------------------------------------------------- */

#screen-boot .boot-status{
  width: 100%;
  align-self: end;

  display: grid;
  gap: 11px;

  padding: 16px 16px 14px;
  border-radius: 22px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    rgba(8, 11, 26, 0.52);

  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 40px rgba(0,0,0,0.34);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#screen-boot .boot-progress-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

#screen-boot .boot-progress-bar{
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.32);
  overflow: visible; /* let the head glow breathe past the track */
}

#screen-boot .boot-progress-fill{
  position: relative;
  width: 0%;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;

  background: linear-gradient(90deg,
    rgb(var(--boot-violet-rgb)),
    rgb(var(--boot-blue-rgb)) 55%,
    rgb(var(--boot-cyan-rgb)));
  box-shadow:
    0 0 12px rgb(var(--boot-blue-rgb) / 0.65),
    0 0 26px rgb(var(--boot-blue-rgb) / 0.3);

  transition: width 140ms linear;
  will-change: width;
}

#screen-boot .boot-progress-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: translateX(-120%);
}

#screen-boot[data-state="open"] .boot-progress-fill::after{
  animation: smau-boot-progress-sheen 2s linear infinite;
}

@keyframes smau-boot-progress-sheen{
  0%  { transform: translateX(-120%); opacity: 0; }
  18% { opacity: 0.6; }
  100%{ transform: translateX(220%); opacity: 0; }
}

/* Glowing comet head riding the leading edge of the fill. */
#screen-boot .boot-progress-head{
  position: absolute;
  top: 50%;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(0, -50%);

  background: radial-gradient(circle at 42% 40%, #ffffff, rgb(var(--boot-cyan-rgb) / 0.95) 55%, rgb(var(--boot-cyan-rgb) / 0) 78%);
  box-shadow:
    0 0 10px rgb(var(--boot-cyan-rgb) / 0.9),
    0 0 24px rgb(var(--boot-blue-rgb) / 0.55);
  will-change: opacity;
}

#screen-boot[data-state="open"] .boot-progress-head{
  animation: smau-boot-head-pulse 1.1s ease-in-out infinite;
}

@keyframes smau-boot-head-pulse{
  0%, 100%{ opacity: 0.8; }
  50%     { opacity: 1; }
}

#screen-boot .boot-progress-pct{
  flex: 0 0 auto;
  min-width: 42px;
  text-align: right;

  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--boot-ink);
  text-shadow: 0 0 16px rgb(var(--boot-blue-rgb) / 0.4);
}

#screen-boot .boot-status-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#screen-boot .boot-status-label{
  position: relative;
  padding-left: 14px;
  font-size: 13.5px;
  line-height: 1.28;
  font-weight: 560;
  color: rgba(238, 242, 252, 0.88);
}

/* Live activity dot in front of the status text. */
#screen-boot .boot-status-label::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgb(var(--boot-cyan-rgb));
  box-shadow: 0 0 8px rgb(var(--boot-cyan-rgb) / 0.8);
}

#screen-boot[data-state="open"] .boot-status-label::before{
  animation: smau-boot-head-pulse 1.4s ease-in-out infinite;
}

#screen-boot .boot-version-label{
  font-size: 10.5px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--boot-ink-faint);
}

#screen-boot .boot-footnote{
  font-size: 11.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--boot-ink-faint);
}

#screen-boot #boot-error-card{
  margin-top: 2px;
}

/* The error card hides via visibility (css/smau-bootErrorCard.css) which
   still reserves its full height inside this grid — collapse it while
   closed so the status dock hugs its content. */
#screen-boot #boot-error-card:not([data-state="open"]){
  display: none;
}

/* --------------------------------------------------------------------------
   ENTRANCE CHOREOGRAPHY — plays once when the screen opens
-------------------------------------------------------------------------- */

@keyframes smau-boot-rise{
  from{ opacity: 0; transform: translate3d(0, 16px, 0); }
  to  { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes smau-boot-logo-pop{
  0%  { opacity: 0; transform: scale(0.72); }
  62% { opacity: 1; transform: scale(1.045); }
  100%{ opacity: 1; transform: scale(1); }
}

@keyframes smau-boot-fade{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

#screen-boot[data-state="open"] .boot-sky{
  animation: smau-boot-fade 1.1s ease-out both;
}

#screen-boot[data-state="open"] .boot-logo-wrap{
  animation: smau-boot-logo-pop 0.75s var(--boot-ease-spring) 0.05s both;
}

#screen-boot[data-state="open"] .boot-studio-name{
  animation: smau-boot-rise var(--boot-enter-dur) var(--boot-ease-out) 0.22s both;
}

#screen-boot[data-state="open"] .boot-wordmark{
  animation: smau-boot-rise var(--boot-enter-dur) var(--boot-ease-out) 0.32s both;
}

#screen-boot[data-state="open"] .boot-tagline{
  animation: smau-boot-rise var(--boot-enter-dur) var(--boot-ease-out) 0.45s both;
}

#screen-boot[data-state="open"] .boot-status{
  animation: smau-boot-rise var(--boot-enter-dur) var(--boot-ease-out) 0.58s both;
}

/* --------------------------------------------------------------------------
   SHORT / NARROW SCREENS
-------------------------------------------------------------------------- */

@media (max-width: 420px){
  #screen-boot .boot-layer{
    padding: 22px 14px 16px;
    gap: 14px;
  }
  #screen-boot .boot-status{
    padding: 14px 13px 12px;
    gap: 9px;
  }
}

@media (max-height: 640px){
  #screen-boot .boot-brand{ gap: 14px; }
  #screen-boot .boot-logo-wrap{
    width: clamp(88px, 22vw, 110px);
    height: clamp(88px, 22vw, 110px);
  }
  #screen-boot .boot-wordmark{ font-size: clamp(36px, 11vw, 46px); }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — everything lands instantly, nothing loops
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  #screen-boot .boot-sky-aurora,
  #screen-boot .boot-sky-stars,
  #screen-boot .boot-sky-horizon,
  #screen-boot .boot-logo-ring,
  #screen-boot .boot-logo-orb,
  #screen-boot .boot-logo-glow,
  #screen-boot .boot-planet-surface,
  #screen-boot .boot-asteroid,
  #screen-boot .boot-drag-hint,
  #screen-boot .boot-wordmark-smau,
  #screen-boot .boot-progress-fill::after,
  #screen-boot .boot-progress-head,
  #screen-boot .boot-status-label::before,
  #screen-boot[data-state="open"] :is(
    .boot-sky,
    .boot-logo-wrap,
    .boot-studio-name,
    .boot-wordmark,
    .boot-tagline,
    .boot-status
  ){
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }

  #screen-boot .boot-progress-fill{
    transition: none !important;
  }
}