/* ==========================================================================
   KORTEX BOOT: "Kortex opens by RENDERING"
   Static port of BootSequence (app/kortex/KortexLanding.tsx + kortex-premium.css
   sections 1, 60, 61, 62). The mark, a 9:16 frame being built layer by layer,
   and one progress line walking the real pipeline stage names.

   Include in <head>:  <link rel="stylesheet" href="/boot/kortex-boot.css">
   The overlay itself is injected by /boot/kortex-boot.js, the first element in
   <body>, so it exists before the first paint.
   ========================================================================== */

.kx-boot {
  --kxb-void: #06101c;
  --kxb-line: #1e2733;
  --kxb-line-bright: #2c3a4b;
  --kxb-text: #e8eef6;
  --kxb-faint: #5b6b7e;
  --kxb-signal: #43f5c0;
  --kxb-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--kxb-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  -webkit-tap-highlight-color: transparent;
  /* hard cap: fades on the compositor at 3.9 s even if the 3D compile is
     holding the main thread and the script cannot run */
  animation: kxb-cap 0.55s ease 3.9s forwards;
}
@keyframes kxb-cap { to { opacity: 0; } }
.kx-boot.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.kx-boot *,
.kx-boot *::before,
.kx-boot *::after { box-sizing: border-box; }

/* repeat visit or reduced motion: the script never injects the overlay, and
   these rules are the belt to those braces */
html.kx-boot-off .kx-boot { display: none !important; }
@media (prefers-reduced-motion: reduce) { .kx-boot { display: none !important; } }

/* the page underneath does not scroll while the frame is rendering */
html.kx-boot-on,
html.kx-boot-on body { overflow: hidden !important; }

/* mark -> frame -> one progress line, all on one centre axis */
.kx-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: min(340px, 82vw);
  margin: 0 auto;
  text-align: center;
}
.kx-boot-logo {
  width: clamp(150px, 30vw, 210px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: transparent;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 78%);
}

/* the 9:16 frame being built */
.kx-boot-frame {
  position: relative;
  width: 118px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 9px;
  overflow: hidden;
  background: #05070b;
  border: 1px solid var(--kxb-line-bright);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.95);
}
/* Every layer is switched on by a CSS timeline, not by script. The original
   drove these from a rAF loop; on the new pages the 3D compile can hold the
   main thread for seconds, so the timeline now runs on the compositor and
   cannot jump. Delays are the original thresholds x 3.4 s:
   wave 0.18, footage 0.30, captions 0.52, brand 0.74, render pass 0.84. */
.kx-bf-layer,
.kx-bf-caps,
.kx-bf-logo,
.kx-bf-wave,
.kx-bf-sheen {
  position: absolute;
  opacity: 0;
}
.kx-bf-broll { inset: 0; animation: kxb-on 0.45s ease 1.02s forwards; }
.kx-bf-broll img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  display: block;
}
@keyframes kxb-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes kxb-on-wave { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes kxb-rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kxb-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.kx-bf-caps {
  left: 8px;
  right: 8px;
  bottom: 20px;
  text-align: center;
  font-family: Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.55rem;
  font-weight: 760;
  line-height: 1.25;
  color: #3f4d5e;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  animation: kxb-rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.77s forwards;
}
/* word k is "said" at (k + 6) / 12 of the run */
.kx-bf-caps span { animation: kxb-said 0.2s ease forwards; }
.kx-bf-caps span:nth-child(1) { animation-delay: 1.70s; }
.kx-bf-caps span:nth-child(2) { animation-delay: 1.98s; }
.kx-bf-caps span:nth-child(3) { animation-delay: 2.27s; }
.kx-bf-caps span:nth-child(4) { animation-delay: 2.55s; }
.kx-bf-caps span:nth-child(5) { animation-delay: 2.83s; }
.kx-bf-caps span:nth-child(6) { animation-delay: 3.12s; }
@keyframes kxb-said { to { color: #fff; } }

.kx-bf-logo {
  top: 8px;
  left: 8px;
  font-family: var(--kxb-mono);
  font-size: 0.4rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  animation: kxb-drop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 2.52s forwards;
}

.kx-bf-wave {
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5px;
  animation: kxb-on-wave 0.45s ease 0.61s forwards;
}
/* the original bar height is 3 + |sin(k * 0.8 + t)| * 13 px; |sin| repeats
   every 0.445 s at the original speed, and each bar is phase-shifted by k */
.kx-bf-wave i {
  display: block;
  width: 2px;
  height: 16px;
  background: var(--kxb-signal);
  border-radius: 1px;
  transform-origin: 50% 100%;
  transform: scaleY(0.19);
  animation: kxb-level 0.445s linear infinite;
  animation-delay: calc(var(--k) * -0.1133s);
}
@keyframes kxb-level {
  0%, 100% { transform: scaleY(0.19); animation-timing-function: ease-out; }
  25%, 75% { transform: scaleY(0.76); }
  50%      { transform: scaleY(1); animation-timing-function: ease-in; }
}

/* the render pass */
.kx-bf-sheen {
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(67, 245, 192, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: kxb-sheen 900ms ease-out 2.86s forwards;
}
@keyframes kxb-sheen {
  from { opacity: 1; transform: translateX(-120%); }
  to { opacity: 1; transform: translateX(120%); }
}

/* the progress line and the stage readout under it */
.kx-boot-foot {
  width: 100%;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}
.kx-boot-bar {
  width: 100%;
  height: 2px;
  background: var(--kxb-line-bright);
  position: relative;
  overflow: hidden;
}
.kx-boot-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--kxb-signal);
  box-shadow: 0 0 16px rgba(67, 245, 192, 0.6);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: kxb-fill 3.4s linear forwards;
}
@keyframes kxb-fill { to { transform: scaleX(1); } }
.kx-boot-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 1em;
  font-family: var(--kxb-mono);
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--kxb-faint);
}
/* the eight real stage names, each shown for 1/8 of the run, swapped
   instantly like the original readout */
.kx-boot-stage span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  animation: kxb-slot 0.425s linear var(--d) none;
}
.kx-boot-stage span:last-child { animation-fill-mode: forwards; }
@keyframes kxb-slot { from { opacity: 1; } to { opacity: 1; } }

.kx-boot-skip {
  position: absolute;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid var(--kxb-line-bright);
  border-radius: 0;
  color: var(--kxb-faint);
  font-family: var(--kxb-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  min-height: 36px;
  cursor: pointer;
}
.kx-boot-skip:focus-visible,
.kx-boot-skip:active {
  outline: none;
  color: var(--kxb-signal);
  border-color: var(--kxb-signal);
}

@media (max-width: 520px) {
  .kx-boot-logo { width: clamp(120px, 40vw, 170px); }
  .kx-boot-frame { width: 100px; }
}