/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES
   Referenced by JS (earth.js, canvas.js) and inline styles
═══════════════════════════════════════ */
:root {
  --bg:        #020813;
  --bg2:       #040c1a;
  --navy:      #071228;
  --blue:      #1a6aff;
  --cyan:      #00d4ff;
  --pale:      #ffffff;
  --dim:       #8ab0d0;
  --white:     #e8f0ff;
  --gold:      #c8a84b;
  --border:    rgba(0,212,255,0.14);
  --border-hi: rgba(0,212,255,0.4);
  --glow:      0 0 30px rgba(0,212,255,0.18);
}

/* ═══════════════════════════════════════
   PERSISTENT BACKGROUND LAYERS
   Fixed canvas and grid overlay elements
═══════════════════════════════════════ */
#star-canvas {
  position:fixed;inset:0;z-index:0;pointer-events:none;
}
#grid-overlay {
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.6;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size:60px 60px;
}
#orbital-canvas {
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.5;
}
#globe-container {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0.45;overflow:hidden;
}

/* ═══════════════════════════════════════
   PAGE ROUTER  (JS-coupled: router.js)
   .page and .page.active toggled by router
═══════════════════════════════════════ */
.page {
  position:relative;z-index:1;
  min-height:100vh;
  display:none;
  animation:pageIn 0.5s ease forwards;
}
.page.active { display:block }

@keyframes pageIn {
  from { opacity:0; transform:translateY(16px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ═══════════════════════════════════════
   NAV  (JS-coupled: main.js)
   #nav.solid toggled on scroll
═══════════════════════════════════════ */
#nav {
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 3.5rem;
  background:rgba(2,8,19,0);
  border-bottom:1px solid transparent;
  transition:background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
#nav.solid {
  background:rgba(2,8,19,0.96);
  border-bottom-color:var(--border);
  backdrop-filter:blur(16px);
}
@media(max-width:960px){ #nav { padding:1rem 1.5rem } }
@media(max-width:480px){ #nav { padding:0.85rem 1rem } }

/* Nav brand */
.nav-brand { display:flex;flex-direction:row;align-items:center;gap:0.6rem;cursor:pointer }
.nav-brand-logo { height:28px;max-height:28px;width:auto;flex-shrink:0 }
.nav-brand-text { display:flex;flex-direction:column;gap:0 }
.nav-brand-name {
  font-family:'Orbitron',monospace;font-size:1.05rem;font-weight:700;
  letter-spacing:0.1em;color:var(--white);line-height:1;
}
.nav-brand-sub {
  font-family:'Space Mono',monospace;font-size:0.5rem;
  letter-spacing:0.32em;text-transform:uppercase;color:var(--cyan);opacity:0.75;
}
@media(max-width:480px){ .nav-brand-name { font-size:0.9rem } }

/* Nav links — pseudo-element underline animation */
.nav-links { display:flex;gap:2.2rem;list-style:none }
.nav-links a {
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:0.78rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(232,240,255,0.65);transition:color 0.2s;
  position:relative;padding-bottom:2px;
}
.nav-links a.active,
.nav-links a:hover { color:var(--cyan) }
.nav-links a::after {
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform 0.3s;
}
.nav-links a.active::after,
.nav-links a:hover::after { transform:scaleX(1) }

/* CTA button in nav */
.nav-cta {
  padding:0.55rem 1.6rem;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border:none;border-radius:2px;
  font-family:'Orbitron',monospace;font-size:0.62rem;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:#fff;
  box-shadow:0 0 20px rgba(0,212,255,0.25);
  transition:box-shadow 0.2s,transform 0.2s;
}
.nav-cta:hover { box-shadow:0 0 35px rgba(0,212,255,0.45);transform:translateY(-1px) }

/* Mobile contact link (hidden on desktop) */
.nav-mobile-contact { display:none }

/* ── Hamburger (JS-coupled: main.js — .open toggled) ── */
.nav-hamburger {
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
  z-index:10000;flex-shrink:0;
}
.nav-hamburger span {
  display:block;width:22px;height:2px;
  background:var(--cyan);border-radius:1px;
  transition:transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav-hamburger.open span:nth-child(2) { opacity:0 }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ── Mobile overlay (JS-coupled: main.js — .open toggled) ── */
@media(max-width:768px){
  .nav-hamburger { display:flex }
  .nav-links {
    display:none;
    position:fixed;top:0;left:0;right:0;bottom:0;
    flex-direction:column;align-items:center;justify-content:center;
    gap:2.5rem;
    background:rgba(2,8,19,1);
    backdrop-filter:blur(20px);
    z-index:9999;
  }
  .nav-links.open { display:flex }
  .nav-links a { font-size:1.2rem;letter-spacing:0.3em }
  .nav-cta { display:none }
  .nav-mobile-contact { display:block }
  .nav-links { gap:1.4rem }
}

/* ═══════════════════════════════════════
   SCROLL REVEALS  (JS-coupled: reveals.js)
   .vis toggled by IntersectionObserver
═══════════════════════════════════════ */
.rv   { opacity:0;transform:translateY(32px);transition:opacity 0.75s,transform 0.75s }
.rv.vis { opacity:1;transform:none }
.rv-l { opacity:0;transform:translateX(-32px);transition:opacity 0.75s,transform 0.75s }
.rv-l.vis { opacity:1;transform:none }
.rv-r { opacity:0;transform:translateX(32px);transition:opacity 0.75s,transform 0.75s }
.rv-r.vis { opacity:1;transform:none }

/* ═══════════════════════════════════════
   PHOTO HERO
   Used on Leadership, News, Gallery, Contact pages
═══════════════════════════════════════ */
.photo-hero {
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  padding-top:6rem;overflow:hidden;
}
.photo-hero-img {
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  filter:brightness(0.55) saturate(1.15);
  transition:transform 0.1s linear;
  will-change:transform;
}
.photo-hero-fade {
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(2,8,19,0.55) 0%,
    rgba(2,8,19,0.15) 20%,
    rgba(2,8,19,0.0)  40%,
    rgba(2,8,19,0.0)  60%,
    rgba(2,8,19,0.72) 82%,
    var(--bg)         100%
  );
}
.photo-hero-label {
  position:relative;z-index:2;
  text-align:center;padding:0 1rem;
}
.photo-hero-label .page-tag {
  font-family:'Space Mono',monospace;font-size:0.65rem;
  letter-spacing:0.45em;text-transform:uppercase;color:var(--cyan);
  display:block;margin-bottom:1rem;
}
.photo-hero-label h1 {
  font-family:'Orbitron',monospace;
  font-size:clamp(2rem,5vw,4.5rem);font-weight:900;
  letter-spacing:0.06em;text-transform:uppercase;
  text-shadow:0 0 80px rgba(0,212,255,0.45),0 2px 40px rgba(0,0,0,0.9);
}
@media(max-width:768px){ .photo-hero { min-height:80vh } }
@media(max-width:480px){ .photo-hero { min-height:70vh } .photo-hero-label { padding-bottom:2.5rem } }

/* ═══════════════════════════════════════
   HOME PAGE ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0;transform:translateY(26px) }
  to   { opacity:1;transform:translateY(0) }
}
@keyframes spin {
  from { transform:translate(-50%,-50%) rotate(0deg) }
  to   { transform:translate(-50%,-50%) rotate(360deg) }
}
@keyframes pulse {
  0%,100% { transform:translate(-50%,-50%) scale(1);opacity:0.7 }
  50%     { transform:translate(-50%,-50%) scale(1.35);opacity:1 }
}

.hero-rings { position:absolute;inset:0;pointer-events:none;overflow:hidden }
.ring {
  position:absolute;border:1px solid rgba(0,212,255,0.07);
  border-radius:50%;top:50%;left:50%;
  animation:spin linear infinite;
}
.ring-dot {
  position:absolute;width:5px;height:5px;
  background:var(--cyan);border-radius:50%;
  top:-2.5px;left:calc(50% - 2.5px);
  box-shadow:0 0 10px var(--cyan);
}
.hero-glow {
  position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,106,255,0.08) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:pulse 5s ease-in-out infinite;
}

/* Hero text animations */
.hero-eyebrow { animation:fadeUp 0.9s 0.2s both }
.hero-title   { animation:fadeUp 0.9s 0.4s both }
.hero-sub     { animation:fadeUp 0.9s 0.6s both }
.hero-sub2    { animation:fadeUp 0.9s 0.75s both }
.hero-btns    { animation:fadeUp 0.9s 0.9s both }
.hero-icons   { animation:fadeUp 0.9s 1.05s both }

/* ═══════════════════════════════════════
   CAPABILITIES — background image cards
   JS-independent but uses pseudo-elements
═══════════════════════════════════════ */
.cap-row-head::after {
  content:'';position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0.45;z-index:0;
  transition:opacity 0.4s;
}
.cap-row:hover .cap-row-head::after { opacity:0.65 }
.cap-row-head > * { position:relative;z-index:1 }

.cap-manufacturing::after { background-image:url('../../assets/images/cap-manufacturing.jpg') }
.cap-ait::after           { background-image:url('../../assets/images/cap-ait.jpg') }
.cap-components::after    { background-image:url('../../assets/images/cap-components.jpg') }
.cap-harnessing::after    { background-image:url('../../assets/images/cap-harnessing.jpg') }
.cap-cleanroom::after     { background-image:url('../../assets/images/cap-cleanroom.jpg') }
.cap-launch::after        { background-image:url('../../assets/images/cap-launch.jpg') }

/* ═══════════════════════════════════════
   PSEUDO-ELEMENT LISTS
   bullet-list and prog-list arrow markers
═══════════════════════════════════════ */
.bullet-list { list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:0.5rem }
.bullet-list li { font-size:0.9rem;color:var(--dim);padding-left:1rem;position:relative }
.bullet-list li::before {
  content:'';position:absolute;left:0;top:0.55em;
  width:5px;height:5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 6px var(--cyan);
}
.prog-list { list-style:none;display:flex;flex-direction:column;gap:0.4rem;margin-top:0.75rem }
.prog-list li { font-size:0.88rem;color:var(--dim);padding-left:1.2rem;position:relative }
.prog-list li::before { content:'→';position:absolute;left:0;color:var(--cyan) }

/* ═══════════════════════════════════════
   DIVIDER
═══════════════════════════════════════ */
.divider { display:flex;align-items:center;gap:1rem;margin:0 3.5rem }
.divider-line { flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.2),transparent) }
.divider-dot { width:4px;height:4px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);flex-shrink:0 }
@media(max-width:960px){ .divider { margin:0 1.5rem } }
@media(max-width:480px){ .divider { margin:0 1rem } }

/* ═══════════════════════════════════════
   FLOW + DIAGRAM ARROWS  (pseudo-element)
═══════════════════════════════════════ */
.fl-arr {
  width:1px;height:28px;
  background:linear-gradient(180deg,rgba(0,212,255,0.5),rgba(0,212,255,0.1));
  position:relative;margin:2px 0;flex-shrink:0;
}
.fl-arr::after {
  content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  border:3px solid transparent;
  border-top-color:rgba(0,212,255,0.4);
  border-top-width:5px;border-left-width:2.5px;border-right-width:2.5px;
}
.diag-arr {
  width:1px;height:32px;margin:2px 0;
  background:linear-gradient(180deg,rgba(0,212,255,0.55),rgba(0,212,255,0.1));
  position:relative;
}
.diag-arr::after {
  content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:rgba(0,212,255,0.45);
  border-left:none;border-right:none;
  border-top-width:6px;border-left-width:3px;border-right-width:3px;
}

/* ═══════════════════════════════════════
   GALLERY — label slide on hover
═══════════════════════════════════════ */
.gallery-item-label {
  position:absolute;bottom:0;left:0;right:0;
  padding:1.2rem;
  background:linear-gradient(to top, rgba(2,8,19,0.92), transparent);
  transform:translateY(100%);transition:transform 0.3s;
}
.gallery-item:hover .gallery-item-label { transform:translateY(0) }

/* ═══════════════════════════════════════
   NAV LINKS underline — active state
   (also in nav section above, kept here
   for specificity grouping)
═══════════════════════════════════════ */
.sh.center { text-align:center }
.sh.center .sh-body { margin-left:auto;margin-right:auto }