/* ============================================================
   chrome.css — boot preloader cosmetics, floating nav pill,
   bottom HUD, viewfinder corners.
   The preloader's critical layout (fixed/inset/z-index/bg/flex)
   is inlined in index.html so it paints before any external CSS;
   everything else lives here.
   ============================================================ */

/* Font tokens (--font-mono etc.) come from css/base.css — do NOT
   redeclare :root here; chrome.css loads after base.css and would
   override its 'Sometype Mono' stack. */

/* ---------- Preloader (boot sequence) ---------- */

.preloader__counter {
  position: absolute;
  top: clamp(1.25rem, 4vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: var(--muted);
}

.preloader__word {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1.1; /* fixed line box: no shift when the word swaps */
  color: var(--ink);
}

.preloader__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(143, 163, 200, 0.15); /* --muted @ 15% */
}

.preloader__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pop);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow:
    0 0 12px rgba(198, 245, 63, 0.55),
    0 0 30px rgba(198, 245, 63, 0.22);
}

/* Exit fallback when gsap is unavailable (js/preloader.js adds .is-done) */
#preloader.is-done {
  transform: translateY(-100%);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Floating pill nav ---------- */

.chrome-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50; /* above #universe + main, below the custom cursor */
  max-width: calc(100vw - 2rem);
}

.chrome-nav__pill {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 2rem);
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  background: rgba(14, 30, 66, 0.42); /* --bg-2 @ 42% */
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(143, 163, 200, 0.16); /* --muted @ 16% */
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.chrome-nav__pill.is-scrolled {
  background: rgba(14, 30, 66, 0.62);
  border-color: rgba(198, 245, 63, 0.30);
  box-shadow:
    0 10px 34px rgba(3, 8, 24, 0.55),
    0 0 18px rgba(198, 245, 63, 0.10);
}

.chrome-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: none;
  border-radius: 0;
  cursor: pointer;
}

.chrome-nav__logo:hover {
  transform: none; /* cancel the base button lift */
  color: var(--ink);
}

.chrome-nav__spark {
  color: var(--pop);
  font-size: 0.8em;
}

.chrome-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

.chrome-nav__link {
  padding: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.25s ease;
}

.chrome-nav__link:hover {
  transform: none;
  color: var(--ink);
}

.chrome-nav__link.is-active {
  color: var(--pop);
}

/* Links collapse below 768px — the logo pill stays */
@media (max-width: 767px) {
  .chrome-nav__links {
    display: none;
  }
}

/* ---------- Bottom HUD bar ---------- */

.chrome-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  border-top: 1px solid rgba(143, 163, 200, 0.14);
  background: linear-gradient(to top, rgba(10, 22, 51, 0.85), rgba(10, 22, 51, 0));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none; /* decorative — never blocks section content */
  white-space: nowrap;
  /* Hidden over the hero fold — the hero's marquee strip owns the bottom
     edge on the first viewport. js/chrome.js adds .is-visible on scroll. */
  opacity: 0;
  transition: opacity 0.45s ease;
}

.chrome-hud.is-visible {
  opacity: 1;
}

.chrome-hud__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pop);
  box-shadow: 0 0 8px rgba(198, 245, 63, 0.7);
  animation: chrome-hud-pulse 2s ease-in-out infinite;
}

@keyframes chrome-hud-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Desktop only — hidden below 900px */
@media (max-width: 899px) {
  .chrome-hud {
    display: none;
  }
}

/* ---------- Viewfinder corners (desktop only) ---------- */

.chrome-corner {
  position: fixed;
  width: 18px;
  height: 18px;
  z-index: 50;
  pointer-events: none;
  opacity: 0.5;
  border: 0 solid rgba(143, 163, 200, 0.8);
}

.chrome-corner--tl { top: 18px; left: 18px; border-top-width: 1px; border-left-width: 1px; }
.chrome-corner--tr { top: 18px; right: 18px; border-top-width: 1px; border-right-width: 1px; }
.chrome-corner--bl { bottom: 18px; left: 18px; border-bottom-width: 1px; border-left-width: 1px; }
.chrome-corner--br { bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }

@media (max-width: 899px) {
  .chrome-corner {
    display: none;
  }
}