/* =====================================================================
   boot.css — AURA power-on sequence: "light through the blinds"

   The reference is the film on the site itself: a dark room, warm sunlight cut into
   horizontal stripes by venetian blinds, a face half in shade. So the reveal here is
   not "a photo fades in" — it is the blinds opening and the light coming up.

   Beats: black -> a thin warm seam parts (the blinds crack open) -> light floods the
          frame -> the stripes drift -> wordmark -> status -> iris close.

   Why CSS keyframes rather than a rAF timeline: while the page is still fetching images
   and fonts the main thread starves rAF, and a transition that should have finished only
   gets halfway. Keyframes are driven by the compositor, so they land on time no matter
   how busy the main thread is. JS only flips classes, reports a percentage, and
   schedules the exit.

   The cover and the overlay are two separate things:
     html.kb-run::before  = a pure-CSS cover, so frame one is already dark (no flash)
     #kboot               = the overlay JS builds at runtime
   On exit the cover class must come off BEFORE the iris closes — otherwise the iris
   reveals the cover's colour instead of the site.
   ===================================================================== */

html.kb-run::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #0c0908;                 /* must match the animation's first frame or it flashes */
}

html.kb-run, html.kb-lock { overflow: hidden; }

.kboot {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  overflow: hidden;
  background: #0c0908;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  color: #f6ece4;
  /* Iris: shut at the start, parts on kb-open, closes again on kb-up */
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 1000ms cubic-bezier(.22, 1, .36, 1);
}
.kboot.kb-open { clip-path: inset(0 0 0 0); }
.kboot.kb-up   { clip-path: inset(49.9% 0 49.9% 0); transition-duration: 760ms; transition-timing-function: cubic-bezier(.6, 0, .9, .4); }

/* ── The frame: sunlit through blinds, held dark until the light comes up ── */
.kboot .kb-plate {
  position: absolute;
  inset: 0;
  background: #0c0908 url("/assets/img/boot-face-lit.jpg") center 34% / cover no-repeat;
  /* Starts almost black. The reveal is this number climbing — light entering a dark room
     reads as warm even when brightness is the only thing doing the work. */
  filter: brightness(0.05) saturate(0.85) contrast(1.06);
  transform: scale(1.14);
  transition: filter 2600ms cubic-bezier(.3, .7, .3, 1) 180ms,
              transform 5200ms cubic-bezier(.16, .8, .28, 1) 180ms;
  will-change: filter, transform;
}
.kboot.kb-lit .kb-plate { filter: brightness(1) saturate(1) contrast(1); transform: scale(1); }

/* Vignette: keeps the eye centred and hides the plate's edges */
.kboot .kb-vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse 72% 64% at 50% 46%, transparent 38%, rgba(12, 9, 8, .72) 88%, rgba(12, 9, 8, .96) 100%),
    linear-gradient(180deg, rgba(12, 9, 8, .55), transparent 26%, transparent 62%, rgba(12, 9, 8, .8));
}

/* A slow band of extra light drifting across, like the sun moving behind the slats */
.kboot .kb-drift {
  position: absolute;
  top: -40%; bottom: -40%;
  width: 34%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 208, 160, .30), transparent);
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.kboot.kb-lit .kb-drift { animation: kb-drift 4600ms cubic-bezier(.35, 0, .25, 1) 300ms 1 both; }
@keyframes kb-drift {
  0%   { left: -50%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 116%; opacity: 0; }
}

/* The warm seam that shows while the blinds are cracking open */
.kboot .kb-seam {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, #ff6b5b, #ff9a3c, #ff4d8d, transparent);
  box-shadow: 0 0 30px 8px rgba(255, 130, 90, .55);
  opacity: 1;
  transition: opacity 900ms ease 340ms;
  z-index: 6;
}
.kboot.kb-open .kb-seam { opacity: 0; }

/* ── Wordmark ── */
.kboot .kb-word {
  position: absolute;
  left: 50%;
  bottom: clamp(84px, 14vh, 142px);
  transform: translateX(-50%);
  display: flex;
  gap: clamp(3px, .45vw, 7px);
  font-weight: 700;
  font-size: clamp(19px, 2.5vw, 30px);
  letter-spacing: .42em;
  text-indent: .42em;                 /* cancels the trailing letter-space so it centres */
  z-index: 7;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}
.kboot .kb-word i {
  font-style: normal;
  opacity: 0;
  transform: translateY(10px);
  background: linear-gradient(90deg, #ff8a6b, #ffb46b, #ff7ba6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
}
.kboot.kb-go .kb-word i { opacity: 1; transform: none; }

/* ── Status line + progress ── */
.kboot .kb-status {
  position: absolute;
  left: 50%;
  bottom: clamp(44px, 7.5vh, 76px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(246, 236, 228, .55);
  opacity: 0;
  transition: opacity 700ms ease 140ms;
  white-space: nowrap;
  z-index: 7;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .8);
}
.kboot.kb-go .kb-status { opacity: 1; }
.kboot .kb-status .kb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #ff8a6b, #ff7ba6);
  box-shadow: 0 0 10px rgba(255, 130, 90, .8);
  animation: kb-pulse 2.1s ease-in-out infinite;
}
@keyframes kb-pulse { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

.kboot .kb-meter {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4.2vh, 42px);
  transform: translateX(-50%);
  width: clamp(170px, 26vw, 300px);
  height: 2px;
  border-radius: 2px;
  background: rgba(246, 236, 228, .14);
  overflow: hidden;
  opacity: 0;
  transition: opacity 700ms ease 140ms;
  z-index: 7;
}
.kboot.kb-go .kb-meter { opacity: 1; }
.kboot .kb-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a6b, #ffb46b, #ff7ba6);
  box-shadow: 0 0 14px rgba(255, 130, 90, .7);
}

/* Skip hint */
.kboot .kb-skip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(246, 236, 228, .32);
  opacity: 0;
  transition: opacity 900ms ease 1100ms;
  z-index: 7;
}
.kboot.kb-lit .kb-skip { opacity: 1; }
.kboot .kb-skip kbd {
  font: inherit;
  border: 1px solid rgba(246, 236, 228, .22);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Film grain over everything. The reference is filmic; a clean CSS gradient reads digital. */
.kboot .kb-grain {
  position: absolute; inset: -50%;
  pointer-events: none;
  z-index: 8;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  animation: kb-grain 1.1s steps(4) infinite;
}
@keyframes kb-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

@media (max-width: 600px) {
  .kboot .kb-word { letter-spacing: .3em; text-indent: .3em; }
  .kboot .kb-skip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kboot, .kboot .kb-plate, .kboot .kb-word i { transition-duration: 1ms !important; }
  .kboot .kb-drift, .kboot .kb-grain { animation: none !important; }
  .kboot .kb-status .kb-dot { animation: none !important; }
}