/* OAIQO™ Reality-First Front Door RC4 — first-paint truth hardening.
 * Purpose: prevent legacy cinematic stand-ins and circular utility chrome from
 * ever becoming visible before the governed Reality-First runtime initializes.
 * This file changes presentation only; it does not claim runtime/data PASS.
 */

#stars,
.system-orbit,
.asteroid-field,
.earth-ring,
#satelliteLayer {
  display: none !important;
}

.moon { display: none !important; }

.sun {
  opacity: 0 !important;
  background: none;
  box-shadow: none;
}
.sun::after { display: none !important; }

/* First frame uses the same governed, hash-receipted local Earth asset family
 * as WebGL. Inset 7.44% matches the corrected z=4.15 globe projection radius,
 * preventing a visible size jump when the first rich frame replaces fallback. */
.earth-fallback {
  inset: 7.44% !important;
  background-image:
    linear-gradient(108deg,rgba(0,0,0,.68),transparent 45%,rgba(0,0,0,.62)),
    url('/api/earth-runtime-asset?asset=day') !important;
}

/* Precision HUD: invisible interaction geometry, visible intelligence. */
.utility-rail { gap: clamp(8px, 1.25vw, 15px) !important; }
.utility-button {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: rgba(224,225,226,.80) !important;
  overflow: visible !important;
  transition: transform .22s cubic-bezier(.16,1,.3,1), color .22s ease, filter .22s ease !important;
}
.utility-button::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,196,92,.10), rgba(232,196,92,.022) 42%, transparent 72%);
  filter: blur(8px);
  opacity: .28;
  transform: scale(.72);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.utility-button:hover,
.utility-button:focus-visible {
  transform: translateY(-1px) !important;
  color: #fff3bf !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.62)) drop-shadow(0 0 7px rgba(238,205,103,.16)) !important;
}
.utility-button:hover::before,
.utility-button:focus-visible::before { opacity: .68; transform: scale(1.06); }
.utility-button:focus-visible::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f0d675, transparent);
  box-shadow: 0 0 7px rgba(240,214,117,.38);
}
.utility-button svg {
  position: relative;
  z-index: 2;
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.35 !important;
}
.language b { display: none !important; }

.utility-menu-panel {
  border: 0 !important;
  background: radial-gradient(circle at 74% 8%, rgba(232,196,92,.035), transparent 33%), rgba(3,5,9,.88) !important;
  box-shadow: 0 30px 95px rgba(0,0,0,.68) !important;
}

/* Six canonical capabilities remain part of the public world, but they are
 * spatial labels rather than SaaS cards. */
.capability-constellation {
  position: fixed;
  inset: 0;
  z-index: 53;
  pointer-events: none;
}
.capability-node {
  --cap-opacity: 0;
  --cap-scale: .96;
  position: fixed;
  left: 0;
  top: 0;
  min-width: 96px;
  max-width: 148px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: rgba(245,241,229,.82);
  text-decoration: none;
  text-align: center;
  opacity: var(--cap-opacity);
  transform: translate(-50%,-50%) scale(var(--cap-scale));
  transform-origin: center;
  filter: drop-shadow(0 5px 13px rgba(0,0,0,.76));
  pointer-events: none;
  will-change: left, top, opacity, transform;
  transition: color .2s ease, filter .2s ease;
}
.capability-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 3px;
  height: 3px;
  border: 0;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(238,207,103,.68);
  box-shadow: 0 0 8px rgba(238,207,103,.38), 0 0 22px rgba(238,207,103,.12);
  opacity: .68;
}
.capability-node::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,207,111,.24), transparent);
  transform: scaleX(.52);
  opacity: .35;
  transition: transform .2s ease, opacity .2s ease;
}
.capability-node b,
.capability-node span { display: block; position: relative; z-index: 1; }
.capability-node b {
  font-size: clamp(.62rem,.72vw,.76rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.capability-node span {
  margin-top: 4px;
  color: rgba(185,184,180,.60);
  font-size: clamp(.45rem,.5vw,.52rem);
  line-height: 1;
  font-weight: 560;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.capability-constellation[data-active="true"] .capability-node { pointer-events: auto; }
.capability-node:hover,
.capability-node:focus-visible {
  color: #fff4c4;
  outline: none;
  filter: drop-shadow(0 6px 15px rgba(0,0,0,.78)) drop-shadow(0 0 9px rgba(235,200,88,.16));
}
.capability-node:hover::after,
.capability-node:focus-visible::after { transform: scaleX(1); opacity: .78; }
.capability-node:focus-visible::before {
  background: #fff0a5;
  box-shadow: 0 0 10px rgba(255,240,165,.58), 0 0 28px rgba(238,207,103,.18);
  opacity: 1;
}

@media (max-width:700px) {
  .utility-rail { gap: 5px !important; }
  .utility-button { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  .utility-button svg { width: 19px !important; height: 19px !important; }
  .capability-node { min-width: 78px; max-width: 104px; min-height: 40px; padding: 7px 4px; }
  .capability-node b { font-size: .56rem; letter-spacing: .045em; }
  .capability-node span { margin-top: 3px; font-size: .41rem; letter-spacing: .085em; }
}

@media (max-height:620px) and (orientation:landscape) {
  .capability-node { min-width: 72px; max-width: 96px; min-height: 36px; padding: 5px 3px; }
  .capability-node b { font-size: .51rem; }
  .capability-node span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .utility-button,
  .utility-button::before,
  .capability-node,
  .capability-node::after { transition: none !important; }
}