/* ============================================================
   SKYHOOP — Animations & Keyframes
   Only transform and opacity are animated. No transition-all.
   ============================================================ */

/* ── Hero Boot Sequence ─────────────────────────────────── */
/*    Staggered initialization: opacity + 2px translateY lift */
/*    Duration 600ms · cubic-bezier(0.4, 0, 0.2, 1)          */

@keyframes boot-fade-lift {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.boot-1 { opacity: 0; animation: boot-fade-lift 600ms cubic-bezier(0.4, 0, 0.2, 1)   50ms both; }
.boot-2 { opacity: 0; animation: boot-fade-lift 600ms cubic-bezier(0.4, 0, 0.2, 1)  380ms both; }
.boot-3 { opacity: 0; animation: boot-fade-lift 600ms cubic-bezier(0.4, 0, 0.2, 1)  850ms both; }
.boot-4 { opacity: 0; animation: boot-fade-lift 600ms cubic-bezier(0.4, 0, 0.2, 1) 1100ms both; }

/* ── HUD Breathe — powered-on instrument pulse ───────────── */
/*    opacity 0.7→1.0, 4s ease-in-out, not a blink           */

@keyframes hud-breathe {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1.0; }
}

.hud-breathe { animation: hud-breathe 4s ease-in-out infinite; }

/* ── Value Card Scan Line — fires once per hover entry ───── */

@keyframes vc-scan {
  0%   { transform: translateY(0);     opacity: 0; }
  8%   { transform: translateY(2px);   opacity: 1; }
  88%  { opacity: 0.75; }
  100% { transform: translateY(280px); opacity: 0; }
}

.value-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 209, 255, 0.5) 25%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(0, 209, 255, 0.5) 75%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(0, 209, 255, 0.25);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.value-card:hover::after {
  animation: vc-scan 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Entrance animations ────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }
.reveal-d3 { transition-delay: 300ms; }
.reveal-d4 { transition-delay: 400ms; }
.reveal-d5 { transition-delay: 500ms; }

/* Fade in only */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
}
.reveal-fade.visible {
  opacity: 1;
}

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Targeting bracket animation ─────────────────────────── */

.cv-bracket {
  opacity: 0;
  transform: scale(1.35);
  transition: opacity 400ms var(--ease-out-expo),
              transform 400ms var(--ease-out-expo);
}
.cv-bracket.locked {
  opacity: 1;
  transform: scale(1);
}

/* Corner flicker after lock */
.cv-bracket.locked .cv-corner {
  animation: bracket-flicker 3s ease-in-out infinite 600ms;
}

@keyframes bracket-flicker {
  0%, 92%, 100% { opacity: 1; }
  94%           { opacity: 0.3; }
  96%           { opacity: 1; }
  98%           { opacity: 0.5; }
}

/* ── Scan line animation ─────────────────────────────────── */

@keyframes scan-sweep {
  0%   { transform: translateY(0%); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 209, 255, 0.06) 20%,
    rgba(0, 209, 255, 0.35) 50%,
    rgba(0, 209, 255, 0.06) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(0, 209, 255, 0.25);
  pointer-events: none;
  animation: scan-sweep 7s linear infinite;
  z-index: 10;
}

/* ── Pulse ring ──────────────────────────────────────────── */

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pulse-ring {
  position: absolute;
  border: 1px solid var(--maroon);
  border-radius: 50%;
  animation: pulse-ring 2s var(--ease-out-expo) infinite;
}

/* ── Hero headline stagger ───────────────────────────────── */

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(32px);
  animation: word-enter var(--duration-enter) var(--ease-out-expo) forwards;
}

@keyframes word-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Coordinate grid overlay ─────────────────────────────── */

.coord-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  z-index: 0;
}

/* ── Tracking label ──────────────────────────────────────── */

.cv-track-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms var(--ease-out-expo) 500ms,
              transform 300ms var(--ease-out-expo) 500ms;
}
.cv-bracket.locked .cv-track-label {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section scan divider ────────────────────────────────── */

.scan-divider {
  position: relative;
  height: 1px;
  background: var(--border-subtle);
  overflow: hidden;
  margin: var(--space-12) 0;
}

.scan-divider::after {
  content: '';
  position: absolute;
  left: -80px;
  top: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 209, 255, 0.6), transparent);
  box-shadow: 0 0 6px rgba(0, 209, 255, 0.3);
  animation: scan-divider-sweep 5s linear infinite;
}

@keyframes scan-divider-sweep {
  from { left: -80px; }
  to   { left: 100%; }
}

/* ── "LIVE" indicator pulse ──────────────────────────────── */

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 209, 255, 0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(0, 209, 255, 0); }
}

.badge-live {
  animation: live-pulse 2.5s ease-in-out infinite;
}

/* ── Drone drift — slow organic pan + subtle bank ─────────── */

@keyframes drone-drift {
  0%   { transform: translate(0px,    0px)    rotate(0deg)    scale(1); }
  15%  { transform: translate(6px,   -4px)    rotate(1.5deg)  scale(1.01); }
  30%  { transform: translate(10px,  -8px)    rotate(2deg)    scale(1.015); }
  45%  { transform: translate(7px,  -12px)    rotate(0.5deg)  scale(1.01); }
  60%  { transform: translate(-2px,  -9px)    rotate(-1deg)   scale(1); }
  75%  { transform: translate(-9px,  -3px)    rotate(-2.5deg) scale(0.99); }
  88%  { transform: translate(-5px,   2px)    rotate(-1deg)   scale(1); }
  100% { transform: translate(0px,    0px)    rotate(0deg)    scale(1); }
}

.drone-drift {
  animation: drone-drift 13s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-origin: center center;
}

/* ── Bracket lag — same path, 0.55s behind ────────────────── */

@keyframes bracket-lag {
  0%   { transform: translate(0px,    0px)    scale(1); }
  15%  { transform: translate(5px,   -3.5px)  scale(1.01); }
  30%  { transform: translate(9px,   -7.5px)  scale(1.015); }
  45%  { transform: translate(6.5px,-11px)   scale(1.01); }
  60%  { transform: translate(-1.5px, -8.5px) scale(1); }
  75%  { transform: translate(-8px,  -2.5px)  scale(0.99); }
  88%  { transform: translate(-4.5px, 1.5px)  scale(1); }
  100% { transform: translate(0px,    0px)    scale(1); }
}

.bracket-lag {
  animation: bracket-lag 13s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: -12.45s; /* 0.55s behind drone = 13 - 0.55 */
  transform-origin: center center;
}