html.oa-boot-lock,
body.oa-boot-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.oa-nav-pending body > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.oa-nav-pending body > [data-oa-boot] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.oa-nav-fade-out body {
  opacity: 0;
  transition: opacity 180ms ease;
}

html.oa-nav-fade-in body {
  opacity: 1;
  transition: opacity 280ms ease;
}

.oaBoot {
  --oa-cyan: #2BC4E3;
  --oa-bg0: #020B14;
  --oa-bg1: #03121F;
  --oa-bg2: #0A2436;
  --oa-alpha: 1;
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: auto;
  isolation: isolate;
  opacity: 0;
  background:
    radial-gradient(980px 420px at 50% 112%, rgba(43, 196, 227, 0.18), transparent 70%),
    radial-gradient(780px 360px at 50% 12%, rgba(22, 99, 140, 0.2), transparent 74%),
    linear-gradient(180deg, rgba(2, 11, 20, var(--oa-alpha)) 0%, rgba(3, 18, 31, var(--oa-alpha)) 45%, rgba(8, 36, 54, var(--oa-alpha)) 100%);
  backdrop-filter: blur(10px) saturate(118%);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  animation: oaBootFadeIn 260ms ease forwards;
}

.oaBoot--mini {
  --oa-alpha: 0.74;
}

.oaBoot--phase-reveal {
  animation: oaBootFadeOut 420ms cubic-bezier(0.22, 0.86, 0.17, 1) forwards;
}

.oaBoot--paused,
.oaBoot--paused * {
  animation-play-state: paused !important;
}

.oaBoot__stars,
.oaBoot__fog,
.oaBoot__noise,
.oaBoot__vignette,
.oaBoot__horizon,
.oaBoot__floor,
.oaBoot__sonar,
.oaBoot__markWrap {
  position: absolute;
}

.oaBoot__stars,
.oaBoot__fog,
.oaBoot__noise,
.oaBoot__vignette {
  inset: 0;
  pointer-events: none;
}

.oaBoot__stars {
  z-index: 0;
  width: 100%;
  height: 100%;
}

.oaBoot__fog {
  z-index: 1;
  background:
    radial-gradient(950px 420px at 62% 66%, rgba(43, 196, 227, 0.15), transparent 74%),
    radial-gradient(640px 280px at 34% 20%, rgba(43, 196, 227, 0.08), transparent 72%);
  animation: oaFogDrift 18s ease-in-out infinite;
}

.oaBoot__noise {
  z-index: 1;
  opacity: 0.07;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.34) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.oaBoot__vignette {
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(1, 9, 18, 0.7) 100%);
}

.oaBoot__horizon {
  z-index: 3;
  top: 68%;
  left: 8%;
  right: 8%;
  height: 1px;
  opacity: 0.62;
  background: linear-gradient(90deg, transparent, rgba(221, 245, 255, 0.72), rgba(43, 196, 227, 0.52), transparent);
  box-shadow:
    0 0 12px rgba(43, 196, 227, 0.32),
    0 0 4px rgba(255, 255, 255, 0.18);
}

.oaBoot__floor {
  z-index: 2;
  left: -14%;
  right: -14%;
  bottom: -35%;
  height: 56%;
  opacity: 0;
  transform-origin: center top;
  transform: perspective(1200px) rotateX(74deg) translateY(24px);
  transition: opacity 760ms ease, transform 760ms ease;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(43, 196, 227, 0.24),
      rgba(43, 196, 227, 0.24) 1px,
      transparent 1px,
      transparent clamp(26px, 2.8vw, 44px)
    ),
    repeating-linear-gradient(
      to top,
      rgba(43, 196, 227, 0.2),
      rgba(43, 196, 227, 0.2) 1px,
      transparent 1px,
      transparent clamp(30px, 3.4vw, 52px)
    );
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 22%, rgba(0, 0, 0, 0.45) 64%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 22%, rgba(0, 0, 0, 0.45) 64%, transparent 100%);
}

.oaBoot--phase-logo .oaBoot__floor {
  opacity: 0.38;
  transform: perspective(1200px) rotateX(72deg) translateY(0);
}

.oaBoot__sonar {
  z-index: 5;
  left: 50%;
  top: 52%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.oaBoot__pingDot,
.oaBoot__ring,
.oaBoot__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}

.oaBoot__pingDot {
  width: 8px;
  height: 8px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9), rgba(43, 196, 227, 0.7));
  box-shadow: 0 0 10px rgba(43, 196, 227, 0.48);
}

.oaBoot__ring {
  border: 1px solid rgba(43, 196, 227, 0.62);
}

.oaBoot__ripple {
  inset: -42px;
  background: radial-gradient(circle, rgba(43, 196, 227, 0.22) 0%, rgba(43, 196, 227, 0.08) 26%, transparent 70%);
}

.oaBoot--phase-sonar .oaBoot__pingDot {
  animation: oaPingDot 480ms ease-out forwards;
}

.oaBoot--phase-sonar .oaBoot__ring {
  animation: oaRing 680ms cubic-bezier(0.13, 0.72, 0.12, 1) forwards;
}

.oaBoot--phase-sonar .oaBoot__ripple {
  animation: oaRipple 620ms ease-out forwards;
}

.oaBoot__markWrap {
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(88vw, 760px);
  height: min(50vh, 320px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.oaBoot__word {
  transform: translateX(78px);
  transform-origin: center;
}

.oaBoot__mark {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.oaBoot__wordPath,
.oaBoot__logoPath {
  fill: transparent;
  stroke: rgba(43, 196, 227, 0.94);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(43, 196, 227, 0.34));
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
  transition:
    stroke-dashoffset var(--pDur, 700ms) cubic-bezier(0.2, 0.75, 0.16, 1) var(--pDelay, 0ms),
    fill 440ms ease 140ms,
    stroke 440ms ease 120ms,
    filter 440ms ease 120ms;
}

.oaBoot__logoPath {
  stroke-width: 3.8;
}

.oaBoot__navLogo {
  --oa-logo-scale: 1;
  --oa-logo-shift: 0px;
  opacity: 0;
  clip-path: inset(-26px -26px -26px -26px);
  filter:
    drop-shadow(0 0 12px rgba(43, 196, 227, 0.42))
    drop-shadow(0 0 28px rgba(43, 196, 227, 0.2));
  transform-origin: center;
  transform-box: fill-box;
}

.oaBoot--phase-text .oaBoot__wordPath {
  stroke-dashoffset: 0;
}

.oaBoot--phase-logo .oaBoot__logoPath {
  stroke-dashoffset: 0;
}

.oaBoot--phase-logo .oaBoot__navLogo,
.oaBoot--phase-ready .oaBoot__navLogo {
  opacity: 1;
  animation: oaNavLogoReveal 760ms cubic-bezier(0.2, 0.78, 0.18, 1) forwards;
}

.oaBoot--phase-ready .oaBoot__wordPath {
  fill: rgba(11, 34, 48, 0.74);
  stroke: rgba(182, 240, 255, 0.88);
}

.oaBoot--phase-ready .oaBoot__logoPath {
  fill: rgba(12, 34, 48, 0.9);
  stroke: rgba(138, 229, 255, 0.92);
}

.oaBoot__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.8rem, 5vw, 3.8rem);
  letter-spacing: 0.16em;
  color: rgba(199, 239, 255, 0.88);
  text-shadow: 0 0 18px rgba(43, 196, 227, 0.28);
  opacity: 0;
  transition: opacity 320ms ease;
}

.oaBoot--weak-path.oaBoot--phase-text .oaBoot__fallback,
.oaBoot--weak-path.oaBoot--phase-logo .oaBoot__fallback,
.oaBoot--weak-path.oaBoot--phase-ready .oaBoot__fallback {
  opacity: 0.82;
  animation: oaFallbackGlow 520ms ease-out forwards;
}

.oaBoot--no-path .oaBoot__mark {
  opacity: 0;
}

.oaBoot--no-path .oaBoot__fallback {
  opacity: 1;
  animation: oaFallbackGlow 660ms ease-out forwards;
}

.oaBoot__cursor {
  position: absolute;
  width: 9px;
  height: 9px;
  top: 88px;
  left: calc(50% - 254px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.92), rgba(43, 196, 227, 0.76));
  box-shadow:
    0 0 12px rgba(43, 196, 227, 0.6),
    0 0 22px rgba(43, 196, 227, 0.24);
  opacity: 0;
}

.oaBoot--phase-text .oaBoot__cursor {
  animation: oaCursorTrack 1800ms linear forwards;
}

.oaBoot--mini.oaBoot--phase-text .oaBoot__cursor {
  animation-duration: 320ms;
}

.oaBoot__spec {
  position: absolute;
  top: 34px;
  left: 50%;
  width: clamp(120px, 22vw, 180px);
  height: 110px;
  transform: translateX(-420px);
  opacity: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(239, 251, 255, 0.7) 50%, transparent 100%);
  mix-blend-mode: screen;
}

.oaBoot--phase-logo .oaBoot__spec {
  animation: oaSpecSweep 860ms ease-out forwards;
}

.oaBoot__logoSweep {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 180px;
  height: 54px;
  transform: translate(-50%, -50%) skewX(-26deg);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(215, 248, 255, 0.48), transparent);
  mix-blend-mode: screen;
}

.oaBoot--phase-logo .oaBoot__logoSweep {
  animation: oaLogoSweep 720ms ease-out forwards;
}

.oaBoot__blink {
  position: absolute;
  left: calc(50% + 110px);
  top: 67%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 45, 85, 0.94);
  box-shadow: 0 0 8px rgba(255, 45, 85, 0.6);
  opacity: 0;
}

.oaBoot--phase-logo .oaBoot__blink {
  animation: oaBlink 780ms steps(1, end) forwards;
}

.oaBoot__status {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%) translateY(8px);
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 243, 255, 0.7);
  opacity: 0;
}

.oaBoot--phase-ready .oaBoot__status {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 300ms ease, transform 300ms ease;
}

.oaBoot--mini .oaBoot__markWrap {
  transform: translate(-50%, -50%) scale(0.74);
}

.oaBoot--mini .oaBoot__horizon {
  top: 72%;
}

.oaBoot--mini .oaBoot__wordPath {
  --pDelay: 0ms !important;
  --pDur: 280ms !important;
}

.oaBoot--mini .oaBoot__logoPath {
  --pDelay: 30ms !important;
  --pDur: 240ms !important;
}

.oaBoot--mini.oaBoot--phase-logo .oaBoot__navLogo,
.oaBoot--mini.oaBoot--phase-ready .oaBoot__navLogo {
  animation: oaNavLogoReveal 340ms cubic-bezier(0.2, 0.78, 0.18, 1) forwards;
}

.oaBoot--mini .oaBoot__status {
  display: none;
}

.oaBoot--reduced .oaBoot__fog,
.oaBoot--reduced .oaBoot__spec,
.oaBoot--reduced .oaBoot__logoSweep,
.oaBoot--reduced .oaBoot__ring,
.oaBoot--reduced .oaBoot__ripple,
.oaBoot--reduced .oaBoot__cursor,
.oaBoot--reduced .oaBoot__blink {
  display: none;
}

.oaBoot--reduced .oaBoot__wordPath,
.oaBoot--reduced .oaBoot__logoPath {
  stroke-dashoffset: 0 !important;
  fill: rgba(11, 34, 48, 0.86) !important;
  stroke: rgba(182, 240, 255, 0.9) !important;
}

@keyframes oaBootFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes oaBootFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes oaFogDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); }
  50% { transform: translate3d(-1.8%, 2.2%, 0) scale(1.04); }
}

@keyframes oaPingDot {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
}

@keyframes oaRing {
  0% { opacity: 0.72; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(7.8); }
}

@keyframes oaRipple {
  0% { opacity: 0.26; transform: scale(0.46); }
  100% { opacity: 0; transform: scale(2.4); }
}

@keyframes oaCursorTrack {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  5% {
    opacity: 1;
  }
  86% {
    opacity: 1;
    transform: translate3d(620px, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(640px, 0, 0);
  }
}

@keyframes oaSpecSweep {
  0% {
    opacity: 0;
    transform: translateX(-420px);
  }
  25% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(350px);
  }
}

@keyframes oaLogoSweep {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) skewX(-26deg) translateX(-120px);
  }
  28% {
    opacity: 0.66;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) skewX(-26deg) translateX(120px);
  }
}

@keyframes oaBlink {
  0%, 54% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

@keyframes oaFallbackGlow {
  0% { opacity: 0; filter: blur(6px); }
  100% { opacity: 1; filter: blur(0); }
}

@keyframes oaNavLogoReveal {
  0% {
    opacity: 0;
    clip-path: inset(-26px 100% -26px -26px);
    transform: translateY(calc(var(--oa-logo-shift, 0px) + 10px)) scale(calc(var(--oa-logo-scale, 1) * 0.88));
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(-26px -26px -26px -26px);
    transform: translateY(var(--oa-logo-shift, 0px)) scale(var(--oa-logo-scale, 1));
  }
}

@media (max-width: 760px) {
  .oaBoot__markWrap {
    width: min(90vw, 500px);
    aspect-ratio: 760 / 312;
    height: auto;
    top: 52%;
  }

  .oaBoot__word {
    transform: translate(78px, -10px);
  }

  .oaBoot__navLogo {
    --oa-logo-scale: 2;
    --oa-logo-shift: 34px;
  }

  .oaBoot__horizon {
    top: 84%;
  }

  .oaBoot__status {
    bottom: -58px;
    letter-spacing: 0.14em;
  }

  .oaBoot__spec {
    top: 14px;
    width: clamp(92px, 30vw, 132px);
    height: 82px;
  }

  .oaBoot__cursor {
    top: 26px;
    left: calc(50% - 136px);
  }

  @keyframes oaCursorTrack {
    0% { opacity: 0; transform: translate3d(0, 0, 0); }
    6% { opacity: 1; }
    86% { opacity: 1; transform: translate3d(266px, 0, 0); }
    100% { opacity: 0; transform: translate3d(282px, 0, 0); }
  }
}
