/* ============================================================
   FX layer — the website has its own agenda.
   Subtle autonomous motion + mouse-responsive highlight.
   Everything here is decorative and respects prefers-reduced-motion.
   ============================================================ */

/* Airport-signage glow: warm halo around letters */
h1, h2, .hero .eyebrow, .day-heading, .brand {
  text-shadow:
    0 0 18px rgba(212, 163, 115, 0.18),
    0 0 2px  rgba(212, 163, 115, 0.25);
}
.brand .logo { filter: drop-shadow(0 0 14px rgba(212, 163, 115, 0.22)); }
.btn-primary { box-shadow: 0 0 32px -8px rgba(212, 163, 115, 0.55), 0 0 2px rgba(212, 163, 115, 0.4); }

/* Mouse spotlight — follows the cursor with soft amber warmth */
.fx-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 163, 115, 0.10) 0%, rgba(212, 163, 115, 0.04) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0);
  transition: opacity 0.4s ease;
  will-change: transform;
}
body.fx-idle .fx-spotlight,
body.fx-idle .fx-cross-h,
body.fx-idle .fx-cross-v,
body.fx-idle .fx-cross-dot { opacity: 0; }

/* Crosshair — thin amber hairlines intersecting at cursor */
.fx-cross-h, .fx-cross-v {
  position: fixed;
  pointer-events: none;
  z-index: 99;
  background: rgba(212, 163, 115, 0.28);
  box-shadow: 0 0 8px rgba(212, 163, 115, 0.22);
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
}
.fx-cross-h { left: 0; right: 0; height: 1px; top: 0; transform: translateY(var(--cy, 50vh)); }
.fx-cross-v { top: 0; bottom: 0; width: 1px; left: 0; transform: translateX(var(--cx, 50vw)); }
.fx-cross-dot {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid rgba(212, 163, 115, 0.75);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
  transform: translate3d(var(--cx, 50vw), var(--cy, 50vh), 0);
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
}

/* Elements beneath the spotlight subtly brighten */
.fx-hoverable {
  position: relative;
  transition: color 0.25s ease;
}

/* Logo gets a subtle independent breath — pure CSS but we use a random delay
   per instance via style attribute set by JS, so no two loops align. */
.logo { will-change: transform, filter; }

/* Scanline overlay — very faint, to give a display-surface feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.008) 0px,
    rgba(255,255,255,0.008) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* A very slow drift on radial glows — prime-number duration so it never
   lines up neatly with other animations. */
body {
  animation: ambientDrift 47s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0%   { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 6% 4%, -6% -4%; }
}

/* Subtle per-element glitch, strength tuned softer for large type.
   JS sets --gd (delay) and --gs (softness 0..1) per element. */
.fx-loop {
  animation-name: softGlitch;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-delay: var(--gd, 0s);
}
@keyframes softGlitch {
  0%, 97.5%, 100% { text-shadow: none; transform: translate(0,0); filter: none; }
  97.7%           { text-shadow: 1px 0 0 rgba(212,163,115,0.45), -1px 0 0 rgba(95,160,176,0.3); transform: translate(-1px, 0); }
  97.9%           { text-shadow: -1px 0 0 rgba(212,163,115,0.45), 1px 0 0 rgba(95,160,176,0.3); transform: translate(1px, 0); }
  98.1%           { text-shadow: none; transform: translate(0,0); }
}

/* Interactive element highlight — a hairline reveal under spotlight proximity */
[data-fx-highlight] {
  position: relative;
  isolation: isolate;
}
[data-fx-highlight]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  z-index: 1;
}
[data-fx-highlight].fx-near::after {
  border-color: rgba(212, 163, 115, 0.35);
  box-shadow: 0 0 40px -10px rgba(212, 163, 115, 0.25) inset;
}

/* HUD readout — corner status line that the site updates on its own */
.fx-hud {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 98;
  font-family: "Fixedsys", "Fixedsys Excelsior 3.01", "Lucida Console", "Consolas", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgba(212, 163, 115, 0.65);
  text-shadow: 0 0 8px rgba(212, 163, 115, 0.3);
  pointer-events: none;
  line-height: 1.6;
  mix-blend-mode: screen;
}
.fx-hud .hud-row { display: block; }
.fx-hud .hud-dim { color: rgba(230, 223, 211, 0.4); }
@media (max-width: 640px) { .fx-hud { display: none; } }

/* Background terminal columns — streams of cruise-missile bullshit
   behind the content. Visually muted, mix-blend-mode: screen, so they
   integrate with the page without obscuring it. */
.fx-bg-col {
  position: fixed;
  top: 0; bottom: 0;
  width: 260px;
  z-index: -1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  font-family: "Fixedsys", "Fixedsys Excelsior 3.01", "Lucida Console", "Consolas", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(95, 160, 176, 0.42);
  mix-blend-mode: screen;
  white-space: nowrap;
  mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 88%, transparent 100%);
}
.fx-bg-col.warm { color: rgba(212, 163, 115, 0.38); }
.fx-bg-col span {
  display: block;
  opacity: 0;
  animation: termIn 0.3s ease forwards;
  overflow: hidden;
  text-overflow: clip;
}
@media (max-width: 980px) { .fx-bg-col { display: none; } }

/* Callouts — random screen-position flashes */
.fx-callout {
  position: fixed;
  z-index: 97;
  font-family: "Fixedsys", "Fixedsys Excelsior 3.01", "Lucida Console", "Consolas", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: rgba(212, 163, 115, 0.8);
  text-shadow: 0 0 8px rgba(212, 163, 115, 0.45);
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(212, 163, 115, 0.35);
  background: rgba(10, 15, 20, 0.45);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: calloutLife 2.4s ease forwards;
  white-space: nowrap;
}
.fx-callout.cool {
  color: rgba(95, 160, 176, 0.8);
  text-shadow: 0 0 8px rgba(95, 160, 176, 0.4);
  border-color: rgba(95, 160, 176, 0.35);
}
@keyframes calloutLife {
  0%   { opacity: 0; transform: translateY(-6px); }
  12%  { opacity: 1; transform: translateY(0); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(6px); }
}

/* shared keyframe still used by .fx-bg-col span */
@keyframes termIn {
  0%   { opacity: 0; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Ghost cursor — amber ring that glides on its own */
.fx-ghost {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid rgba(212, 163, 115, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.8s ease;
  box-shadow: 0 0 20px rgba(212, 163, 115, 0.35);
}
.fx-ghost.on { opacity: 1; }
.fx-ghost::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(212, 163, 115, 0.25);
  border-radius: 50%;
  animation: ghostPulse 1.6s ease-in-out infinite;
}
@keyframes ghostPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.6); opacity: 0; }
}

/* Rogue-hover class applied briefly by autonomy scheduler */
.fx-rogue {
  transition: background 0.35s ease, color 0.35s ease;
  background: rgba(212, 163, 115, 0.06) !important;
  color: var(--fg) !important;
}

/* Full-screen VHS glitch burst — horizontal teal/red tracking tear.
   Spawned briefly by JS every 15–35s. */
.fx-glitch-burst {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
  animation: glitchBurstLife 0.55s steps(8, end) forwards;
  /* Dense teal line field in the background */
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(60, 200, 185, 0.22) 2px, rgba(60, 200, 185, 0.22) 3px,
    transparent 3px, transparent 6px,
    rgba(60, 200, 185, 0.14) 6px, rgba(60, 200, 185, 0.14) 7px
  );
}
.fx-glitch-burst::before {
  /* Offset red channel — faint vertical pillar of red tear */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 14px,
    rgba(220, 40, 60, 0.18) 14px, rgba(220, 40, 60, 0.18) 16px
  );
  transform: translateX(-3px);
  mix-blend-mode: screen;
}
.fx-glitch-burst .band {
  position: absolute;
  left: -5%;
  right: -5%;
  mix-blend-mode: screen;
}
.fx-glitch-burst .band.teal { background: rgba(80, 220, 200, 0.55); }
.fx-glitch-burst .band.red  { background: rgba(255, 60, 80, 0.55); }
.fx-glitch-burst .band.dark { background: rgba(10, 15, 20, 0.85); mix-blend-mode: normal; }
@keyframes glitchBurstLife {
  0%   { opacity: 0; }
  15%  { opacity: 1; transform: translateY(-2px); }
  40%  { opacity: 1; transform: translateY(1px) skewX(-0.6deg); }
  70%  { opacity: 0.85; transform: translateY(-1px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Chromatic aberration + shake + distortion on main content during a burst */
body.fx-aberr main {
  filter: drop-shadow(2px 0 0 rgba(255,60,80,0.55)) drop-shadow(-2px 0 0 rgba(60,200,185,0.55));
  animation: glitchShake 0.55s steps(11, end) forwards;
  transform-origin: center center;
}
@keyframes glitchShake {
  0%   { transform: translate(0, 0) skew(0deg, 0deg) scale(1); }
  10%  { transform: translate(-6px, 2px)  skewX(-1deg)  scale(1.003); }
  20%  { transform: translate(5px,  -1px) skewX(0.8deg) scaleY(1.01); }
  30%  { transform: translate(-3px, 3px)  skewY(-0.6deg); }
  40%  { transform: translate(8px,  0)    skewX(-1.2deg) scale(0.997); }
  50%  { transform: translate(-7px, -2px) skewX(0.5deg)  scaleX(1.015); }
  60%  { transform: translate(2px,  4px)  skewY(0.4deg); }
  70%  { transform: translate(-4px, 0)    skewX(-0.3deg); }
  80%  { transform: translate(6px,  -3px) skewX(0.9deg) scale(1.002); }
  90%  { transform: translate(-2px, 1px)  skew(0deg, 0deg); }
  100% { transform: translate(0, 0) skew(0deg, 0deg) scale(1); }
}

/* Also jolt the header briefly (different amplitude so it feels independent) */
body.fx-aberr .site-header {
  animation: glitchShakeHeader 0.55s steps(9, end) forwards;
}
@keyframes glitchShakeHeader {
  0%, 100% { transform: translate(0,0); }
  20%  { transform: translate(4px, 0); }
  40%  { transform: translate(-5px, 1px); }
  60%  { transform: translate(3px, -1px); }
  80%  { transform: translate(-2px, 0); }
}

/* Title reveal — clean left-to-right wipe, no character scramble */
.fx-reveal {
  animation: revealLTR 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes revealLTR {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0.5; }
  100% { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* Glitch class can be toggled by JS for stronger one-shot distortion */
.fx-glitch {
  animation: glitchBurst 0.35s steps(3, end) 1;
}
@keyframes glitchBurst {
  0%   { transform: translate(0,0); filter: none; }
  20%  { transform: translate(-2px, 1px); filter: hue-rotate(10deg) contrast(1.05); text-shadow: 2px 0 rgba(212,163,115,0.7), -2px 0 rgba(95,160,176,0.5); }
  40%  { transform: translate(2px, -1px); text-shadow: -2px 0 rgba(212,163,115,0.7), 2px 0 rgba(95,160,176,0.5); }
  70%  { transform: translate(-1px, 0); filter: none; text-shadow: none; }
  100% { transform: translate(0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-canvas, .fx-spotlight, body::after { display: none !important; }
  .logo, h1, h2, body { animation: none !important; }
}