/* ==========================================================================
   Falcon Eye — cinematic scroll-driven intro
   --------------------------------------------------------------------------
   The ONLY section of the site that uses the radar / surveillance language.

   Thirteen independent layers, each carrying a data-layer name so
   assets/js/intro-hero.js can give it its own tween on one GSAP
   ScrollTrigger timeline (pin + scrub).

   This file defines the FINISHED state of every layer. GSAP sets the start
   states at runtime and interpolates toward what is declared here, so with
   JS off, or under prefers-reduced-motion, the scene is already a composed,
   fully legible frame rather than an empty stage.

   Composition follows the storyboard: copy holds the left half, the guard
   takes post on the right, and the radar drifts left-of-centre as the city
   rises so the two never fight for the same space.
   ========================================================================== */

.hx {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #05090f;
  color: #fff;
}
.hx__scene { position: absolute; inset: 0; }

/* Every layer occupies the full frame and is positioned from within. */
.hx__l {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- 1 · radar background ------------------------------------------------ */
.hx-bg {
  background: radial-gradient(120% 96% at 42% 40%, #17293d 0%, #0b1524 46%, #05090f 100%);
}

/* Photoreal final plane. It is injected by intro-hero.js so the opening
   radar remains lightweight and the large scene is only decoded where the
   scroll story is actually present. */
.hx-photo {
  object-fit: cover;
  object-position: center;
  transform-origin: 58% 60%;   /* push-in centres on the guard, not the frame */
  opacity: 1;
  filter: saturate(.88) contrast(1.04) brightness(.78);
}
.hx-photo--scene {
  --scene-reveal: 114%;
  -webkit-mask-image: linear-gradient(90deg,
    #000 0 calc(var(--scene-reveal) - 14%),
    transparent var(--scene-reveal));
  mask-image: linear-gradient(90deg,
    #000 0 calc(var(--scene-reveal) - 14%),
    transparent var(--scene-reveal));
}

/* The original vector skyline/guard remain as no-JS fallbacks. Once the
   enhanced sequence is active, the photographic planes replace them so no
   placeholder silhouette can overlap the real subject. */
.has-js .hx-city,
.has-js .hx-air,
.has-js .hx-guard { visibility: hidden; }

/* ---- 2,3,4 · rings, beam, core ------------------------------------------- */
.hx-rings, .hx-beam, .hx-core { transform-origin: 800px 450px; }

/* ---- 5 · logo ------------------------------------------------------------ */
/* Left in brand colour: it is the company's identity, not decoration.
   Tinting it to the scene's gold reduced the artwork to mud. */
.hx-logo {
  position: absolute;
  inset: auto;
  top: 50%; left: 50%;
  width: clamp(84px, 12vh, 150px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 32px rgba(240,185,74,.55)) drop-shadow(0 4px 18px rgba(0,0,0,.5));
  pointer-events: none;
}

/* ---- 6 · city ------------------------------------------------------------ */
.hx-win { opacity: .42; }
.has-js .hx-win { animation: hx-flicker 7s steps(1) infinite; }
@keyframes hx-flicker { 0%,46%,54%,100% { opacity:.42 } 50% { opacity:.3 } }

/* ---- 7,8 · helicopter and searchlight ------------------------------------ */
/* The rig carries both so the light stays attached; each child is still an
   independent tween target. */
.hx-air__rig { transform: translate(1150px, 130px) scale(1.5); }
.hx-light { transform-origin: 0 30px; }
.has-js .hx-heli__lamp { animation: hx-blink 1.9s steps(1) infinite; }
@keyframes hx-blink { 0%,60%,100% { opacity:1 } 62%,98% { opacity:.25 } }

/* ---- 9 · guard ----------------------------------------------------------- */
/* Base scale lives here for the no-JS fallback and is mirrored by a
   gsap.set() at runtime, because GSAP writes the whole transform and would
   otherwise clobber a CSS-only scale. */
.hx-guard__rig {
  transform-origin: 1220px 900px;
  transform: scale(1.95);
}
.hx-guard__wordmark {
  fill: #6f9fd8;
  font-family: var(--f, system-ui, sans-serif);
  /* Sized against the scaled rig: at 27px it read as a billboard rather
     than lettering on a uniform. */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  opacity: .7;
}
.hx-guard__wordmark--2 { fill: #5c8ec7; }

/* ---- 10 · fog and particles ---------------------------------------------- */
.hx-fog {
  background:
    radial-gradient(60% 34% at 24% 78%, rgba(150,185,225,.16), transparent 70%),
    radial-gradient(52% 30% at 72% 84%, rgba(120,160,205,.13), transparent 72%);
  filter: blur(22px);
}
.hx-mote { fill: #d8e8fb; opacity: var(--o); }
.has-js .hx-mote { animation: hx-drift 16s ease-in-out infinite alternate; }
.hx-mote:nth-child(even) { animation-delay: -6s; }
.hx-mote:nth-child(3n)   { animation-delay: -11s; }
@keyframes hx-drift {
  from { transform: translate3d(0, 9px, 0) }
  to   { transform: translate3d(7px, -11px, 0) }
}

.hx__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,9,15,.86) 0%, rgba(5,9,15,.55) 38%, transparent 62%),
    linear-gradient(180deg, rgba(5,9,15,.6) 0%, transparent 24%, transparent 58%, rgba(5,9,15,.88) 100%);
}

/* ==========================================================================
   11,12,13 · copy column — held to the left half, per the storyboard
   ========================================================================== */
.hx__copy {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: max(var(--gutter, 24px), calc((100% - var(--shell, 1240px)) / 2));
  width: min(56%, 660px);
  transform: translateY(-50%);
  text-align: left;
  pointer-events: none;
}
.hx__copy a { pointer-events: auto; }

.hx__eyebrow {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  font-size: clamp(10px, 1.3vh, 12px);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-soft, #f0b94a);
}

.hx__headline {
  margin: 0 0 clamp(18px, 3vh, 34px);
  font-family: var(--f-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(38px, 7.6vh, 92px);
  line-height: 1;
  letter-spacing: -.025em;
  color: #fff;
  text-shadow: 0 8px 54px rgba(0,0,0,.6);
}
/* Line masking without a splitting library: the outer span clips, the inner
   span is what travels. */
.hx__line { display: block; overflow: hidden; padding-bottom: .06em; }
.hx__line > span { display: block; }
.hx__line--em { color: var(--gold-soft, #f0b94a); font-style: italic; }

/* --- service badges ------------------------------------------------------- */
.hx__svcs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.2vw, 30px);
  margin: 0 0 clamp(20px, 3.4vh, 38px);
  padding: 0;
  list-style: none;
}
.hx-svc a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: clamp(74px, 8.5vw, 96px);
  text-decoration: none;
  color: rgba(255,255,255,.74);
  transition: color .3s var(--ease, ease);
}
.hx-svc__ico {
  display: grid;
  place-items: center;
  width: clamp(38px, 4.6vh, 48px);
  height: clamp(38px, 4.6vh, 48px);
  border-radius: 50%;
  border: 1px solid rgba(217,146,19,.5);
  background: rgba(217,146,19,.09);
  color: var(--gold-soft, #f0b94a);
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              transform .4s var(--out, ease);
}
.hx-svc__t {
  font-size: clamp(9px, 1.15vh, 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
.hx-svc a:hover, .hx-svc a:focus-visible { color: #fff; }
.hx-svc a:hover .hx-svc__ico,
.hx-svc a:focus-visible .hx-svc__ico {
  background: rgba(217,146,19,.2);
  border-color: var(--gold-soft, #f0b94a);
  transform: translateY(-3px);
}

/* --- calls to action ------------------------------------------------------ */
.hx__acts { display: flex; flex-wrap: wrap; gap: 14px; }
.hx__acts .btn--line {
  --bg: transparent;
  --fg: #fff;
  --bd: rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
}
.hx__acts .btn--line:hover { --bd: var(--gold-soft, #f0b94a); }

/* ==========================================================================
   Chrome
   ========================================================================== */
.hx__hint {
  position: absolute;
  left: 50%; bottom: clamp(16px, 4.5vh, 38px);
  z-index: 5;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: clamp(9px, 1.25vh, 11px);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
  transition: opacity .35s ease;
  pointer-events: none;
}
.hx__hint svg { animation: hx-bounce 1.7s ease-in-out infinite; }
@keyframes hx-bounce {
  0%,100% { transform: translateY(0); opacity:.5 }
  50%     { transform: translateY(5px); opacity:1 }
}

.hx__track {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 2px; background: rgba(255,255,255,.1);
}
.hx__bar {
  height: 100%; width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(217,146,19,.65), rgba(255,217,138,.98));
}

.hx__skip {
  position: absolute;
  left: clamp(12px, 2.5vw, 24px);
  bottom: clamp(16px, 4.5vh, 38px);
  z-index: 6;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill, 999px);
  background: rgba(5,9,15,.5);
  color: rgba(255,255,255,.86);
  font: inherit;
  font-size: clamp(10px, 1.25vh, 12px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.hx__skip:hover, .hx__skip:focus-visible {
  background: rgba(5,9,15,.85);
  border-color: var(--gold-soft, #f0b94a);
  color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .hx__copy { width: min(66%, 560px); }
  .hx-air__rig { transform: translate(1180px, 120px) scale(1.28); }
}

@media (max-width: 760px) {
  /* The guard cannot share the frame with the copy at this width, so the
     copy takes the full column and the guard drops back into the scene. */
  .hx__copy {
    left: var(--gutter, 20px);
    right: var(--gutter, 20px);
    width: auto;
    top: auto; bottom: 16vh;
    transform: none;
  }
  .hx__headline { font-size: clamp(32px, 8.4vw, 52px); }
  .hx-guard__rig { transform: translateX(150px) scale(1.35); }
  .hx-guard__wordmark { opacity: .5; }
  .hx__vignette {
    background: linear-gradient(180deg, rgba(5,9,15,.55) 0%, transparent 26%, rgba(5,9,15,.9) 78%);
  }
  .hx__hint { display: none; }
  .hx__skip { bottom: 92px; }          /* clear the fixed mobile CTA bar */
  .has-js .hx-mote { animation: none; }
  .hx__svcs { gap: 12px 18px; }
  .hx-photo { object-position: 64% center; }
}

@media (max-height: 620px) {
  .hx__headline { font-size: clamp(26px, 7vh, 44px); margin-bottom: 14px; }
  .hx__svcs { margin-bottom: 16px; }
  .hx-svc a { width: clamp(64px, 7vw, 80px); }
}

/* ==========================================================================
   Reduced motion / no JS — the finished frame, no pin, no scrub
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .has-js .hx-mote,
  .has-js .hx-win,
  .has-js .hx-heli__lamp,
  .hx__hint svg { animation: none !important; }
  .hx__hint, .hx__track, .hx__skip { display: none; }
}
html:not(.has-js) .hx__hint,
html:not(.has-js) .hx__track,
html:not(.has-js) .hx__skip { display: none; }

@media print { .hx { display: none !important; } }

/* ==========================================================================
   V2 — modern scroll narrative
   ========================================================================== */
.has-js .hx-radar,.has-js .hx-logo,.has-js .hx-city,.has-js .hx-air,
.has-js .hx-guard,.has-js .hx-fog,.has-js .hx-motes,.has-js .hx__vignette,
.has-js .hx__copy { display:none; }
.hx2 { position:absolute; inset:0; overflow:hidden; background:#030916; }
.hx2__media,.hx2__frame,.hx2__shade,.hx2__sweep,.hx2__grid,.hx2__route {
  position:absolute; inset:0; width:100%; height:100%;
}
.hx2__frame { object-fit:cover; will-change:transform,opacity,filter; }
.hx2__frame--signal { z-index:1; }
.hx2__frame--network { z-index:2; filter:brightness(.72) saturate(.78); }
.hx2__frame--protect { z-index:3; object-position:center; filter:brightness(.73) saturate(.85); }
.hx2__shade { z-index:4; background:linear-gradient(90deg,rgba(3,9,22,.92) 0%,rgba(3,9,22,.62) 38%,rgba(3,9,22,.12) 68%,rgba(3,9,22,.3) 100%),linear-gradient(180deg,rgba(3,9,22,.42),transparent 28%,rgba(3,9,22,.64)); }
.hx2__grid { z-index:5; opacity:.22; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:clamp(64px,8vw,128px) clamp(64px,8vw,128px); mask-image:linear-gradient(90deg,#000,transparent 78%); }
.hx2__sweep { z-index:6; width:32%; left:34%; opacity:.7; background:linear-gradient(90deg,transparent,rgba(233,162,39,.18),transparent); filter:blur(18px); transform:skewX(-12deg); }
.hx2__route { z-index:7; overflow:visible; pointer-events:none; }
.hx2__route path { fill:none; stroke:#f0b94a; stroke-width:2; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 7px rgba(233,162,39,.8)); }
.hx2__brand { position:absolute; z-index:8; left:50%; top:50%; width:clamp(92px,12vw,172px); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; }
.hx2__brand img { width:58%; height:auto; z-index:1; filter:drop-shadow(0 10px 30px rgba(0,0,0,.48)); }
.hx2__brand-ring { position:absolute; inset:0; border:1px solid rgba(233,162,39,.7); border-radius:50%; box-shadow:0 0 0 18px rgba(233,162,39,.045),0 0 70px rgba(233,162,39,.22),inset 0 0 35px rgba(233,162,39,.08); }
.has-js .hx2__brand-ring { animation:hx2-pulse 2.4s ease-in-out infinite; }
@keyframes hx2-pulse { 50% { transform:scale(1.08); opacity:.66; } }
.hx2__chapter { position:absolute; z-index:10; top:calc(var(--nav-h) + 26px); left:max(var(--gutter),calc((100% - var(--shell))/2)); display:flex; align-items:center; gap:13px; color:rgba(255,255,255,.8); font-size:.72rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase; }
.hx2__num { color:#f0b94a; font-variant-numeric:tabular-nums; }
.hx2__rule { width:42px; height:1px; background:rgba(255,255,255,.32); }
.hx2__metric { position:absolute; z-index:10; right:max(var(--gutter),calc((100% - var(--shell))/2)); top:24%; padding:18px 20px; border-left:1px solid #e9a227; background:rgba(3,9,22,.52); backdrop-filter:blur(10px); color:rgba(255,255,255,.66); }
.hx2__metric span { display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.hx2__metric strong { display:block; margin-top:5px; color:#fff; font-size:1.45rem; font-weight:520; letter-spacing:-.04em; }
.hx2__final { position:absolute; z-index:11; left:max(var(--gutter),calc((100% - var(--shell))/2)); top:50%; transform:translateY(-46%); width:min(49vw,650px); color:#fff; }
.hx2__eyebrow { margin:0 0 17px; color:#f0b94a; font-size:.7rem; font-weight:650; letter-spacing:.28em; text-transform:uppercase; }
.hx2__final h1 { margin:0; max-width:10ch; color:#f7f4ec; font-family:var(--f-serif); font-size:clamp(3rem,6.3vw,6.6rem); line-height:.9; font-weight:400; letter-spacing:-.055em; text-wrap:balance; }
.hx2__final h1 span,.hx2__final h1 em { display:block; }
.hx2__final h1 em { color:#f0b94a; font-weight:400; }
.hx2__lede { max-width:47ch; margin:25px 0 0; color:rgba(255,255,255,.72); font-size:clamp(.96rem,1.25vw,1.08rem); line-height:1.65; }
.hx2__proof { display:flex; gap:0; margin:28px 0 0; color:rgba(255,255,255,.58); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.hx2__proof span { padding:0 20px; border-left:1px solid rgba(255,255,255,.2); }
.hx2__proof span:first-child { padding-left:0; border-left:0; }
.hx2__proof b { display:block; margin-bottom:4px; color:#fff; font-size:1.12rem; letter-spacing:-.02em; text-transform:none; }
.hx2__actions { display:flex; align-items:center; gap:24px; margin-top:30px; }
.hx2__link { color:#fff; font-size:.86rem; font-weight:650; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding:10px 0; }
.hx2__link:hover { color:#f0b94a; border-color:#f0b94a; }
.hx2__steps { position:absolute; z-index:12; right:max(var(--gutter),calc((100% - var(--shell))/2)); bottom:32px; display:flex; gap:22px; margin:0; padding:0; list-style:none; }
.hx2__steps li { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.28); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; transition:color .35s ease; }
.hx2__steps i { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 rgba(233,162,39,0); transition:all .35s ease; }
.hx2__steps li.is-on { color:#f0b94a; }
.hx2__steps li.is-on i { box-shadow:0 0 0 5px rgba(233,162,39,.12); }
.hx2.is-static .hx2__frame--signal,.hx2.is-static .hx2__frame--network,.hx2.is-static .hx2__brand,.hx2.is-static .hx2__metric,.hx2.is-static .hx2__route { display:none; }
.hx2.is-static .hx2__final { opacity:1!important; }

@media(max-width:760px){
  .hx2__frame--protect{object-position:68% center}.hx2__shade{background:linear-gradient(180deg,rgba(3,9,22,.3),rgba(3,9,22,.15) 32%,rgba(3,9,22,.92) 76%)}
  .hx2__chapter{top:calc(var(--nav-h) + 18px)}.hx2__metric{display:none}.hx2__final{left:var(--gutter);right:var(--gutter);top:auto;bottom:13vh;transform:none;width:auto}
  .hx2__final h1{font-size:clamp(2.7rem,13vw,4.6rem)}.hx2__lede{max-width:35ch;margin-top:16px}.hx2__proof{margin-top:18px}.hx2__proof span{padding:0 10px;font-size:.58rem}.hx2__proof b{font-size:.9rem}
  .hx2__actions{margin-top:20px}.hx2__steps{left:var(--gutter);right:auto;bottom:82px}.hx2__steps span{display:none}.hx2__steps{gap:15px}.hx2__grid{opacity:.12}
}
@media(max-height:650px){.hx2__final h1{font-size:clamp(2.5rem,8vh,4rem)}.hx2__lede{margin-top:14px}.hx2__proof{margin-top:15px}.hx2__actions{margin-top:18px}}

/* The redesigned scroll hero already provides the primary conversion moment. */
body:has(.hx) main > .cta { display: none; }
@media(prefers-reduced-motion:reduce){.has-js .hx2__brand-ring{animation:none}.hx2__steps{display:none}}