/* =====================================================================
   OrbitalX — Enhancement Layer (additive)
   ---------------------------------------------------------------------
   This file LAYERS on top of your existing orbitalx.css.
   It does not replace or override your core layout — it only adds
   atmosphere, depth and interactivity. Tune everything from the
   variables below. To remove all enhancements, just delete the two
   orbitalx-enhance link and script lines from your pages.
   ===================================================================== */

:root {
  /* ---- The one knob that matters: your accent colour ---- */
  --ox-accent: #5ec8ff;          /* electric cyan — change to your brand */
  --ox-accent-soft: rgba(94, 200, 255, 0.16);
  --ox-accent-line: rgba(94, 200, 255, 0.45);
  --ox-ink: #e8f4ff;
  --ox-bg-deep: #03060d;

  --ox-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ox-dur: 0.7s;
}

/* =====================================================================
   1. ATMOSPHERE — animated star/particle field behind everything
   ===================================================================== */
#ox-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;               /* sits behind page content, above page bg */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#ox-starfield.is-ready { opacity: 1; }

/* Soft radial vignette + accent aurora for cinematic depth */
#ox-aurora {
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 8%,  var(--ox-accent-soft), transparent 60%),
    radial-gradient(50% 45% at 12% 88%, rgba(120,90,255,0.10), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2s ease;
  animation: ox-aurora-drift 24s ease-in-out infinite alternate;
}
#ox-aurora.is-ready { opacity: 0.9; }
@keyframes ox-aurora-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-2%,0) scale(1.06); }
}

/* Keep the real content above the atmosphere */
.page_main,
.nav_component,
.footer_component { position: relative; z-index: 1; }

/* =====================================================================
   2. SCROLL PROGRESS BAR
   ===================================================================== */
#ox-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, transparent, var(--ox-accent));
  box-shadow: 0 0 12px var(--ox-accent), 0 0 4px var(--ox-accent);
  pointer-events: none;
  transition: width 0.1s linear;
}

/* =====================================================================
   3. NAV — scrolled state: blur, condense, accent border
   ===================================================================== */
.nav_component {
  transition: backdrop-filter 0.5s var(--ox-ease),
              background-color 0.5s var(--ox-ease),
              box-shadow 0.5s var(--ox-ease);
}
.nav_component.ox-scrolled {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background-color: rgba(3, 6, 13, 0.55);
  box-shadow: 0 1px 0 var(--ox-accent-line), 0 18px 50px -30px var(--ox-accent);
}

/* Logo subtle entrance + hover lift */
.nav_brand img,
.footer_logo img { transition: transform 0.5s var(--ox-ease), filter 0.5s var(--ox-ease); }
.nav_brand:hover img { transform: translateY(-1px) scale(1.04); filter: drop-shadow(0 4px 14px var(--ox-accent-soft)); }

/* =====================================================================
   4. CUSTOM CURSOR (desktop / fine-pointer only)
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  .ox-cursor-on, .ox-cursor-on * { cursor: none !important; }

  #ox-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--ox-accent);
    box-shadow: 0 0 10px var(--ox-accent);
    z-index: 2147483600;   /* above the menu overlay so it never hides */
    pointer-events: none;
    transition: transform 0.18s var(--ox-ease), opacity 0.3s ease;
  }
  #ox-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border: 1px solid var(--ox-accent-line);
    border-radius: 50%;
    z-index: 2147483600;   /* above the menu overlay so it never hides */
    pointer-events: none;
    transition: width 0.25s var(--ox-ease), height 0.25s var(--ox-ease),
                margin 0.25s var(--ox-ease), border-color 0.25s var(--ox-ease),
                opacity 0.3s ease, background-color 0.25s var(--ox-ease);
  }
  /* grow + glow when hovering interactive elements */
  #ox-cursor-ring.is-hot {
    width: 64px; height: 64px; margin: -32px 0 0 -32px;
    border-color: var(--ox-accent);
    background: var(--ox-accent-soft);
  }
  #ox-cursor.is-hot { transform: scale(0.4); }
}

/* =====================================================================
   5. REVEAL ON SCROLL (only for elements we tag — never [data-scroll],
      which your GSAP already controls)
   ===================================================================== */
.ox-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--ox-dur) var(--ox-ease),
              transform var(--ox-dur) var(--ox-ease);
  will-change: opacity, transform;
}
.ox-reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   6. HERO PARALLAX + scanline shimmer on background image
   ===================================================================== */
.section_video { overflow: hidden; position: relative; }
.section_video .wistia_placeholder {
  will-change: transform;
  transition: transform 0.2s linear;
}
/* drifting scan line over the hero for a "sensor sweep" feel */
.section_video::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  background: linear-gradient(180deg, var(--ox-accent-soft), transparent);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: ox-sweep 7s ease-in-out infinite;
}
@keyframes ox-sweep {
  0%, 100% { transform: translateY(-160px); opacity: 0; }
  50%      { transform: translateY(60vh);  opacity: 0.6; }
}

/* =====================================================================
   7. PRODUCT / FULLSCREEN IMAGES — interactive tilt + glow
   ===================================================================== */
.fullscreen-image { perspective: 1200px; }
.fullscreen-image img {
  transition: transform 0.4s var(--ox-ease), filter 0.4s var(--ox-ease);
  will-change: transform;
}
.fullscreen-image:hover img {
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55)) saturate(115%);
}

/* =====================================================================
   8. IMAGE GRID — reveal + hover zoom/glow
   ===================================================================== */
.image-grid_item {
  overflow: hidden;
  transition: box-shadow 0.5s var(--ox-ease), transform 0.5s var(--ox-ease);
}
.image-grid_item:hover {
  box-shadow: 0 30px 80px -40px var(--ox-accent), inset 0 0 0 1px var(--ox-accent-line);
}
.image-grid_image { transition: transform 0.9s var(--ox-ease); will-change: transform; }
.image-grid_item:hover .image-grid_image { transform: scale(1.06); }

/* =====================================================================
   9. BUTTONS — magnetic + light sweep
   ===================================================================== */
.btn_primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ox-ease), box-shadow 0.4s var(--ox-ease);
  will-change: transform;
}
.btn_primary:hover {
  box-shadow: 0 18px 50px -20px var(--ox-accent), 0 0 0 1px var(--ox-accent-line);
}
.btn_primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn_primary:hover::after { animation: ox-shine 0.9s var(--ox-ease) forwards; }
@keyframes ox-shine { to { left: 130%; } }

/* =====================================================================
   10. FOOTER LINKS — animated underline draw
   ===================================================================== */
.footer-link_wrap { position: relative; }
.footer-link_text {
  background-image: linear-gradient(var(--ox-accent), var(--ox-accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ox-ease), color 0.3s ease;
}
.footer-link_wrap:hover .footer-link_text {
  background-size: 100% 1px;
  color: var(--ox-ink);
}

/* =====================================================================
   11. SOCIAL ICONS — glow pop
   ===================================================================== */
.social_wrap { transition: transform 0.3s var(--ox-ease); }
.social_wrap:hover { transform: translateY(-3px); }
.social_wrap:hover .social_icon { filter: drop-shadow(0 0 8px var(--ox-accent)); }

/* =====================================================================
   12. EYEBROW — subtle blinking status dot, like a live telemetry tag
   ===================================================================== */
.eyebrow_wrap { position: relative; padding-left: 16px; }
.eyebrow_wrap::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ox-accent);
  box-shadow: 0 0 0 0 var(--ox-accent);
  animation: ox-pulse 2.4s ease-out infinite;
}
@keyframes ox-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ox-accent-line); }
  70%  { box-shadow: 0 0 0 10px rgba(94,200,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(94,200,255,0); }
}

/* =====================================================================
   13. CINEMATIC PAGE LOADER (auto-dismisses; never blocks content)
   ===================================================================== */
#ox-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: var(--ox-bg-deep);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#ox-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.ox-loader-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: var(--ox-accent);
  animation: ox-spin 0.9s linear infinite;
  box-shadow: 0 0 24px -6px var(--ox-accent);
}
.ox-loader-label {
  position: absolute;
  margin-top: 120px;
  font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ox-accent);
  opacity: 0.8;
}
@keyframes ox-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   14. ACCESSIBILITY — honour reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  #ox-starfield, #ox-aurora, .section_video::after,
  .eyebrow_wrap::before { animation: none !important; }
  .ox-reveal { opacity: 1 !important; transform: none !important; }
  #ox-loader { display: none !important; }
}

/* =====================================================================
   15. NAVIGATION MENU  (self-contained overlay — fixes the hamburger)
   ---------------------------------------------------------------------
   Rebuilt to be bulletproof: the JS builds its OWN overlay (.ox-nav-*)
   and binds the hamburger in the CAPTURE phase, so it fires before any
   of your existing Webflow scripts can swallow the click. None of these
   rules depend on or fight your orbitalx.css.
   ===================================================================== */
.nav_hamburger { position: relative; z-index: 10002; cursor: pointer; }
.nav_hamburger-line {
  transition: transform 0.4s var(--ox-ease), opacity 0.3s ease, background-color 0.3s ease;
}
/* hamburger → X morph while the overlay is open */
body.ox-nav-open .nav_hamburger-line.is-top {
  transform: translateY(4px) rotate(45deg) !important;
  background-color: var(--ox-accent) !important;
}
body.ox-nav-open .nav_hamburger-line.is-bottom {
  transform: translateY(-4px) rotate(-45deg) !important;
  background-color: var(--ox-accent) !important;
}
body.ox-nav-open { overflow: hidden; }   /* lock scroll while open */

/* the overlay (created by JS, appended to <body>) */
.ox-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;             /* above everything */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 13, 0.92);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ox-ease), visibility 0.5s var(--ox-ease);
}
.ox-nav-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* faint starfield-style accent rings for depth */
.ox-nav-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 40% at 80% 15%, var(--ox-accent-soft), transparent 70%),
    radial-gradient(45% 45% at 12% 88%, rgba(120,90,255,0.10), transparent 70%);
  pointer-events: none;
}

.ox-nav-list {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.ox-nav-link {
  display: inline-block;
  font-family: "Chakra Petch", var(--ox-display, inherit), sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 7vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s var(--ox-ease), transform 0.5s var(--ox-ease),
              color 0.3s ease, letter-spacing 0.3s ease;
}
.ox-nav-overlay.is-open .ox-nav-link { opacity: 1; transform: none; }
.ox-nav-overlay.is-open .ox-nav-link:nth-child(1) { transition-delay: 0.10s; }
.ox-nav-overlay.is-open .ox-nav-link:nth-child(2) { transition-delay: 0.17s; }
.ox-nav-overlay.is-open .ox-nav-link:nth-child(3) { transition-delay: 0.24s; }
.ox-nav-overlay.is-open .ox-nav-link:nth-child(4) { transition-delay: 0.31s; }
.ox-nav-overlay.is-open .ox-nav-link:nth-child(5) { transition-delay: 0.38s; }
.ox-nav-link:hover { color: var(--ox-accent); letter-spacing: 0.02em; }

/* close button (top-right) */
.ox-nav-close {
  position: absolute;
  top: 22px; right: 26px;
  width: 48px; height: 48px;
  border: 1px solid var(--ox-accent-line);
  border-radius: 50%;
  background: rgba(94,200,255,0.06);
  color: var(--ox-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ox-ease), background-color 0.3s ease;
}
.ox-nav-close:hover { transform: rotate(90deg); background: var(--ox-accent-soft); }
.ox-nav-close::before, .ox-nav-close::after {
  content: ""; position: absolute; width: 19px; height: 1.6px; background: currentColor;
}
.ox-nav-close::before { transform: rotate(45deg); }
.ox-nav-close::after  { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .ox-nav-overlay, .ox-nav-link { transition: none !important; }
  .ox-nav-link { opacity: 1 !important; transform: none !important; }
}


/* =====================================================================
   16. CONTACT FORM
   ===================================================================== */
.ox-contact-section { position: relative; padding: 20px 0 40px; }
.ox-form-shell {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(94,200,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.ox-form-shell::before {     /* corner accent glow */
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, var(--ox-accent-soft), transparent 70%);
  pointer-events: none;
}
.ox-form-title {
  font-size: clamp(30px, 4vw, 52px);
  color: #fff; margin: 18px 0 14px; line-height: 1.05;
}
.ox-form-lead { color: #9fb2c8; max-width: 38ch; }
.ox-form-direct {
  display: inline-block; margin-top: 22px;
  font: 600 15px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.04em;
  color: var(--ox-accent); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.3s ease;
}
.ox-form-direct:hover { border-color: var(--ox-accent); }

.ox-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
.ox-field-full { grid-column: 1 / -1; }
.ox-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ox-field { position: relative; }
.ox-field input,
.ox-field select,
.ox-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: #eaf4ff;
  font-family: inherit;
  font-size: 16px;
  padding: 22px 0 10px;
  outline: none;
  border-radius: 0;
}
.ox-field textarea { resize: vertical; min-height: 120px; }
.ox-field select { cursor: pointer; padding-top: 24px; }
.ox-field select option { background: #06101f; color: #eaf4ff; }

/* floating labels */
.ox-field label {
  position: absolute; left: 0; top: 22px;
  color: #7e93ab;
  font-size: 16px; pointer-events: none;
  transition: transform 0.3s var(--ox-ease), color 0.3s ease, font-size 0.3s ease;
}
.ox-field input:focus + label,
.ox-field input:not(:placeholder-shown) + label,
.ox-field textarea:focus + label,
.ox-field textarea:not(:placeholder-shown) + label,
.ox-field .ox-label-static {
  transform: translateY(-20px);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ox-accent);
}
.ox-field .ox-label-static { position: absolute; top: 22px; }
.ox-opt { text-transform: none; letter-spacing: 0; color: #5d7080; }

/* animated focus underline */
.ox-field-line {
  position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--ox-accent); box-shadow: 0 0 8px var(--ox-accent);
  transition: width 0.4s var(--ox-ease);
}
.ox-field input:focus ~ .ox-field-line,
.ox-field select:focus ~ .ox-field-line,
.ox-field textarea:focus ~ .ox-field-line { width: 100%; }

/* invalid state */
.ox-field.ox-invalid input,
.ox-field.ox-invalid textarea { border-bottom-color: #ff6b6b; }
.ox-field.ox-invalid label { color: #ff6b6b; }

.ox-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ox-submit {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 34px; border: none; border-radius: 100px; cursor: pointer;
  background: var(--ox-accent); color: #03060d;
  font: 700 14px/1 "Chakra Petch", ui-monospace, sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ox-ease), box-shadow 0.4s var(--ox-ease), opacity 0.3s ease;
  overflow: hidden;
}
.ox-submit:hover { box-shadow: 0 18px 50px -18px var(--ox-accent); }
.ox-submit-icon { width: 13px; height: 13px; }
.ox-submit-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(3,6,13,0.3); border-top-color: #03060d;
  display: none; animation: ox-spin 0.7s linear infinite;
}
.ox-submit.is-loading .ox-submit-spinner { display: inline-block; }
.ox-submit.is-loading .ox-submit-icon { display: none; }
.ox-submit.is-loading { opacity: 0.85; pointer-events: none; }
.ox-submit.is-sent { background: #3ddc8a; }

.ox-form-status { margin: 0; font-size: 14px; }
.ox-form-status.is-ok    { color: #3ddc8a; }
.ox-form-status.is-error { color: #ff6b6b; }

@media (max-width: 860px) {
  .ox-form-shell { grid-template-columns: 1fr; }
  .ox-form { grid-template-columns: 1fr; }
}