/* AIR.2026 FX layer: additive only. Keeps the site's own colours and fonts.
   Remove the two lines that include fx.css / fx.js to revert, or restore
   archive/air-live-backup-2026-09-29. */

@property --fx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- scroll progress rail */
.fx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 100000; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--fx-p, 0));
  background: linear-gradient(90deg, var(--primary), var(--secondary), #fff); box-shadow: 0 0 12px rgba(21, 172, 225, .7); }

/* ---- blue bands: live neural mesh + measured grid behind the content */
.fx-band { position: relative; overflow: hidden; isolation: isolate; }
.fx-band > .fx-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fx-band > .fx-mesh.on { opacity: 1; }
.fx-band > .fx-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
  animation: fx-grid 24s linear infinite; }
.fx-band > .fx-sweep { position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(21, 172, 225, .12) 85%, rgba(255, 255, 255, .35) 100%); mix-blend-mode: screen;
  animation: fx-sweep 7s cubic-bezier(.5, 0, .5, 1) infinite; }
.fx-band > .container, .fx-band > .container-fluid, .fx-band > :not(.fx-mesh):not(.fx-grid):not(.fx-sweep) { position: relative; z-index: 1; }
@keyframes fx-grid { to { background-position: 48px 48px, 48px 48px; } }
@keyframes fx-sweep { 0% { translate: 0 -100%; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { translate: 0 360%; opacity: 0; } }

/* ---- boxes: spotlight, travelling gradient border, HUD corners, reveal scan */
.fx-box { position: relative; isolation: isolate; }
.fx-box > .fx-o { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
.fx-spot { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(21, 172, 225, .16), transparent 60%); opacity: 0; transition: opacity .35s ease; }
.fx-box:hover > .fx-spot { opacity: 1; }
.fx-ring { padding: 1.5px; background: conic-gradient(from var(--fx-ang), transparent 0 55%, var(--secondary) 70%, var(--primary) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s ease; animation: fx-spin 3.2s linear infinite; animation-play-state: paused; }
.fx-box:hover > .fx-ring, .fx-box:focus-within > .fx-ring { opacity: 1; animation-play-state: running; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }
.fx-hud { --c: rgba(19, 99, 198, .75); --l: 14px; inset: 6px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) left top / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) right top / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) left bottom / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) right bottom / 1.5px var(--l);
  background-repeat: no-repeat; opacity: 0; scale: 1.06; transition: opacity .5s ease, scale .6s cubic-bezier(.2, .8, .2, 1), inset .4s ease; }
.fx-box.fx-in > .fx-hud { opacity: .55; scale: 1; }
.fx-box:hover > .fx-hud { opacity: 1; inset: 3px; --l: 20px; }
.fx-scan { overflow: hidden; }
.fx-scan::before { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(21, 172, 225, .14) 80%, rgba(21, 172, 225, .55)); }
.fx-box.fx-in > .fx-scan::before { animation: fx-scan 1.3s cubic-bezier(.4, 0, .2, 1) .15s 1 both; }
@keyframes fx-scan { to { top: 100%; } }

/* 3D tilt: JS writes --rx/--ry; combines with the site's own hover lift */
.fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) !important;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease !important; will-change: transform; }
.fx-tilt:hover { --ty: -6px; box-shadow: 0 22px 44px -18px rgba(19, 99, 198, .45) !important; }
.fx-tilt.fx-live { transition: transform .12s linear, box-shadow .4s ease !important; }

/* dark boxes (video, blue bands) use white HUD */
.ratio.fx-box > .fx-hud { --c: rgba(255, 255, 255, .85); opacity: .8; }
.ratio.fx-box > .fx-o { z-index: 3; }

/* telemetry tag on the video */
.fx-tag { position: absolute; top: 12px; left: 16px; z-index: 3; pointer-events: none; font: 600 11px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .14em; color: #fff; background: rgba(20, 24, 62, .55); padding: 5px 8px; border-radius: 3px; }
.fx-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ff3b5c; vertical-align: 0; animation: fx-blink 1.2s steps(2, jump-none) infinite; }
@keyframes fx-blink { 50% { opacity: .15; } }

/* ---- team photos: rotating instrument ring on hover */
.team-item .rounded-circle { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.team-item:hover .rounded-circle { transform: scale(1.04); }
.fx-orbit { position: absolute; left: 50%; top: 0; translate: -50% 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 1.5px dashed rgba(19, 99, 198, .55); opacity: 0; scale: .9; transition: opacity .4s ease, scale .5s ease; animation: fx-rot 14s linear infinite; animation-play-state: paused; }
.fx-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 10px var(--secondary); }
.team-item:hover .fx-orbit { opacity: 1; scale: 1; animation-play-state: running; }
@keyframes fx-rot { to { rotate: 360deg; } }

/* ---- robots and hero logo: slow hover float, pointer parallax */
.fx-float { animation: fx-float 6s ease-in-out infinite; translate: var(--px, 0) var(--py, 0); transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes fx-float { 50% { transform: translateY(-12px); } }

/* ---- pills and primary buttons: light sweep */
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); translate: -120% 0; }
.fx-shine:hover::after, .fx-shine.fx-auto::after { animation: fx-shine 1.1s ease; }
.fx-shine.fx-auto::after { animation: fx-shine 4.5s ease-in-out 1s infinite; }
@keyframes fx-shine { 0% { translate: -120% 0; } 40%, 100% { translate: 120% 0; } }

/* ---- section heading: a signal dot travels the underline */
.fx-sig { position: relative; }
.fx-sig::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent); animation: fx-sig 3.6s ease-in-out infinite; }
.text-center .fx-sig::after, .fx-sig.text-center::after { left: 50%; margin-left: -30px; }
@keyframes fx-sig { 0%, 100% { translate: -40px 0; opacity: 0; } 50% { translate: 40px 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fx-band > .fx-grid, .fx-band > .fx-sweep, .fx-ring, .fx-orbit, .fx-float, .fx-shine::after, .fx-sig::after, .fx-tag::before { animation: none !important; }
  .fx-band > .fx-sweep { display: none; }
  .fx-box.fx-in > .fx-scan::before { animation: none; }
  .fx-tilt { transform: none !important; }
}

/* Bootstrap's .ratio > * forces every child to 100% x 100% at 0,0; undo that for the overlays */
.ratio > .fx-o { width: auto; height: auto; top: 0; left: 0; right: 0; bottom: 0; }
.ratio > .fx-hud { top: 6px; left: 6px; right: 6px; bottom: 6px; }
.ratio.fx-box:hover > .fx-hud { top: 3px; left: 3px; right: 3px; bottom: 3px; }
.ratio > .fx-tag { width: auto; height: auto; top: 12px; left: 50%; translate: -50% 0; }
/* the hero sits under the sticky nav: no sweep there, it read as a glitch behind the bar */
.hero-header > .fx-sweep { display: none; }