/* ============================================================================
   boot-splash.css — the CANONICAL Agentics in-app boot splash (the "boot-log"
   feel). Scoped entirely under #boot-splash so it can't leak into the app.

   This is the shipped splash (chosen over carve/typewriter/pulse and over the
   Veo video — see docs/adr/0002). Pair it with vanilla/boot-splash.js, which
   fades + removes #boot-splash once fonts + the minimum duration have elapsed.

   USAGE (vanilla host) — put the fragment in index.html so it paints on the
   first frame (no flash), <link> this file, then gate the leave:

     <link rel="stylesheet" href="motion/boot-splash.css">
     <div id="boot-splash" aria-hidden="true">
       <div class="bs-stage">
         <div class="bs-log">
           <div class="bs-line"><span class="bs-mk">&gt; </span>initializing agentics…</div>
           <div class="bs-line"><span class="bs-mk">&gt; </span>loading brand tokens<span class="bs-ok">ok</span></div>
           <div class="bs-line"><span class="bs-mk">&gt; </span>mounting shell</div>
           <div class="bs-line"><span class="bs-mk">&gt; </span>warming cursor<span class="bs-ok">&#10003;</span></div>
           <div class="bs-line"><span class="bs-mk">&gt; </span>ready</div>
         </div>
         <div class="bs-lockup" role="img" aria-label="agentics">
           <span class="bs-prompt">&gt;</span><span class="bs-word">agentics</span><span class="bs-cursor"></span>
         </div>
       </div>
     </div>

     import { mountBootSplash } from './vanilla/boot-splash.js';
     // NOTE: the first log line's animationend bubbles at ~0.3s, so hold the
     // splash through the full ~1.45s sequence with minDurationMs ~1700.
     const splash = mountBootSplash({ fragmentSelector:'#boot-splash', minDurationMs:1700 });
     // …call splash.ready() once the first view is rendered.

   The resting lockup (">"  + "agentics" + amber block) is the frame the static
   OS startup image must freeze to seam-match (assets/veo/f2-lockup.png style).
   ============================================================================ */

/* the full-screen overlay — paints on first frame, fades via .is-leaving */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg, #0a0a0a);
  /* a faint warm glow seeds the dark, matching the brand world */
  background-image: radial-gradient(60vmin 60vmin at 50% 46%, rgba(248,127,46,0.06), transparent 70%);
  transition: opacity .45s ease;
  font-family: var(--mono, "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace);
  -webkit-font-smoothing: antialiased;
}
#boot-splash.is-leaving { opacity: 0; pointer-events: none; }

/* local palette (falls back to literals so the splash works even before
   tokens.css loads — the splash must paint instantly) */
#boot-splash {
  --bs-chevron:   #F4F1EA;
  --bs-amber-top: #FFB070;
  --bs-amber-mid: #F87F2E;          /* brand --brand-orange */
  --bs-amber-bot: #E0651C;
  --bs-success:   #5ED17A;
  --bs-dim:       rgba(244,241,234,0.34);
}

#boot-splash .bs-stage {
  position: relative;
  width: min(92vw, 640px);
  height: 4.6em;
  font-size: clamp(20px, 5.2vw, 40px);
  line-height: 1.05;
}

/* ---------------------------------------------------------------- log -- */
#boot-splash .bs-log {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  text-align: left;
  font-size: 0.42em;                 /* small relative to the lockup */
  line-height: 1.55;
  color: var(--bs-dim);
  letter-spacing: 0.01em;
  will-change: transform, opacity;
  animation: bsLogCollapse 0.42s cubic-bezier(.5,0,.6,1) 0.86s both;
}
#boot-splash .bs-line {
  opacity: 0;
  transform: translateY(6px);
  white-space: nowrap;
  animation: bsLineIn 0.30s cubic-bezier(.2,.7,.3,1) both;
}
#boot-splash .bs-mk { color: rgba(244,241,234,0.22); }
#boot-splash .bs-ok { color: var(--bs-success); opacity: 0.92; margin-left: 0.8ch; }

#boot-splash .bs-line:nth-child(1) { animation-delay: 0.00s; }
#boot-splash .bs-line:nth-child(2) { animation-delay: 0.12s; }
#boot-splash .bs-line:nth-child(3) { animation-delay: 0.24s; }
#boot-splash .bs-line:nth-child(4) { animation-delay: 0.36s; }
#boot-splash .bs-line:nth-child(5) { animation-delay: 0.48s; }

@keyframes bsLineIn { to { opacity: 1; transform: translateY(0); } }
@keyframes bsLogCollapse {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to   { opacity: 0; transform: translate(-50%, calc(-50% - 14px)); }
}

/* ------------------------------------------------------------- lockup -- */
#boot-splash .bs-lockup {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  animation: bsLockupRise 0.45s cubic-bezier(.2,.7,.25,1) 1.00s both;
}
#boot-splash .bs-prompt {
  color: var(--bs-chevron); opacity: 0.92; font-weight: 600;
  letter-spacing: -0.01em; margin-right: 0.6ch;
}
#boot-splash .bs-word {
  color: var(--bs-chevron); opacity: 0.92; font-weight: 600;
  letter-spacing: -0.03em;
}
#boot-splash .bs-cursor {
  display: inline-block;
  width: 0.46em; height: 1.05em;
  margin-left: 0.12ch;
  border-radius: 2px;
  transform: translateY(0.13em);
  background: linear-gradient(to bottom,
    var(--bs-amber-top) 0%, var(--bs-amber-mid) 52%, var(--bs-amber-bot) 100%);
  box-shadow: 0 0 12px 2px rgba(248,127,46,0.28), 0 0 28px 6px rgba(248,127,46,0.10);
  animation: bsBlink 1.1s step-end 1.55s infinite;
}

@keyframes bsLockupRise {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes bsBlink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ----------------------------------------------- reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  #boot-splash .bs-log    { display: none; }
  #boot-splash .bs-lockup { opacity: 1; animation: none; transform: translate(-50%, -50%); }
  #boot-splash .bs-cursor { animation: none; opacity: 1; }
}