/* ===========================================================
   WEATHER PROTOCOL — boot / loading sequence
   Layered background: glyph rain, grid horizon, PPI radar
   sweep, then the wordmark + progress readout on top.
   =========================================================== */

#boot {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
  transition: opacity .55s ease, visibility .55s;
}
#boot.done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- background layers ---- */
#boot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#boot-rain   { opacity: .3; }
#boot-grid   { opacity: .5; }
#boot-radar  { opacity: .85; }

/* radial vignette so the centre stays readable */
#boot::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(5,7,10,.88) 0%, rgba(5,7,10,.5) 45%, transparent 75%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%);
}

/* ---- foreground stack ---- */
.boot-stack {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

/* ---- wordmark ---- */
.boot-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.boot-mark-glyph {
  width: 74px; height: 74px;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 16px var(--a-glow));
  animation: markFloat 5s ease-in-out infinite;
}
@keyframes markFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-5px) }
}

.boot-title {
  position: relative;
  margin: 0;
  font-size: clamp(30px, 7.2vw, 54px);
  font-weight: 700;
  letter-spacing: .28em;
  text-indent: .28em;         /* optical centring against the tracking */
  line-height: 1;
  color: var(--fg-hi);
  text-shadow: 0 0 22px var(--a-glow), 0 0 60px var(--a-glow);
}

/* chromatic-aberration glitch: two offset copies punched by clip-path */
.boot-title::before,
.boot-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-indent: inherit;
  background: var(--bg);
  overflow: hidden;
}
.boot-title::before {
  left: 2px;
  color: var(--a);
  text-shadow: -2px 0 var(--danger);
  animation: glitchA 3.4s steps(2, end) infinite;
}
.boot-title::after {
  left: -2px;
  color: var(--a);
  text-shadow: 2px 0 var(--info);
  animation: glitchB 2.7s steps(2, end) infinite;
}
@keyframes glitchA {
  0%, 92%, 100% { clip-path: inset(100% 0 0 0); }
  93%  { clip-path: inset(14% 0 72% 0); transform: translateX(-3px); }
  95%  { clip-path: inset(56% 0 26% 0); transform: translateX(3px); }
  97%  { clip-path: inset(32% 0 55% 0); transform: translateX(-2px); }
}
@keyframes glitchB {
  0%, 88%, 100% { clip-path: inset(100% 0 0 0); }
  89%  { clip-path: inset(68% 0 12% 0); transform: translateX(3px); }
  92%  { clip-path: inset(22% 0 66% 0); transform: translateX(-3px); }
}

.boot-sub {
  font-size: var(--fs-micro);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--a-dim);
}

/* ---- progress ---- */
.boot-progress { width: 100%; display: flex; flex-direction: column; gap: 9px; }

.boot-bar {
  position: relative;
  height: 6px;
  background: var(--panel-2);
  border: 1px solid var(--a-line);
  border-radius: 2px;
  overflow: hidden;
}
.boot-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--a-deep), var(--a));
  box-shadow: 0 0 14px var(--a-glow);
  transition: width .32s cubic-bezier(.22, .68, .36, 1);
}
/* travelling sheen on the filled portion */
.boot-bar-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheen 1.5s linear infinite;
}
@keyframes sheen { from { transform: translateX(-100%) } to { transform: translateX(200%) } }

/* tick marks behind the bar */
.boot-bar::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent 9px, rgba(0,0,0,.65) 9px, rgba(0,0,0,.65) 10px);
}

.boot-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}
.boot-stage { color: var(--fg-2); text-transform: uppercase; }
.boot-stage::before { content: "> "; color: var(--a); }
.boot-pct { color: var(--a); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- boot log ---- */
.boot-log {
  width: 100%;
  height: 92px;
  overflow: hidden;
  text-align: left;
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--fg-3);
  mask-image: linear-gradient(180deg, transparent, #000 38%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%, #000 82%, transparent);
}
.boot-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-log .ok   { color: var(--a-dim); }
.boot-log .ok::before   { content: "[ OK ] "; color: var(--a); }
.boot-log .wait::before { content: "[ .. ] "; color: var(--fg-3); }
.boot-log .fail { color: var(--danger); }
.boot-log .fail::before { content: "[FAIL] "; color: var(--danger); }

/* ---- skip affordance ---- */
.boot-skip {
  position: absolute;
  bottom: 22px; right: 24px;
  z-index: 3;
  opacity: 0;
  animation: fadeIn .4s ease 2.2s forwards;
}
@keyframes fadeIn { to { opacity: .8 } }

/* ---- fatal error state ---- */
.boot-fatal {
  display: none;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--danger);
  background: rgba(255, 77, 61, .07);
  color: var(--danger);
  font-size: var(--fs-xs);
  text-align: left;
}
#boot.fatal .boot-fatal { display: block; }
#boot.fatal .boot-bar-fill { background: var(--danger); box-shadow: none; }
#boot.fatal .boot-bar-fill::after { display: none; }

/* Short-circuit the whole sequence when motion is off. */
:root[data-motion="off"] #boot canvas { display: none; }