/* ═══════════════════════════════════════════════════════════════
   QTSI — animations.css
   Keyframes only + animation utility classes
   Buttons/cards live in components.css
═══════════════════════════════════════════════════════════════ */

/* ── 1. Keyframes ─────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ambient blob floats — GPU-only (transform+opacity) */
@keyframes floatA {
  0%, 100% { transform: translate(0,    0)    scale(1);    opacity: 1; }
  33%       { transform: translate(40px,-30px) scale(1.06); opacity: .9; }
  66%       { transform: translate(-20px,20px) scale(0.96); opacity: .95; }
}

@keyframes floatB {
  0%, 100% { transform: translate(0,     0)    scale(1);    opacity: 1; }
  40%       { transform: translate(-48px, 28px) scale(1.07); opacity: .88; }
  70%       { transform: translate(28px, -18px) scale(0.95); opacity: .95; }
}

@keyframes floatC {
  0%, 100% { transform: translate(0,    0)    scale(1); }
  50%       { transform: translate(18px, 38px) scale(1.04); }
}

/* Hero CTA pulse — applied only with .btn--pulse modifier */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,112,243,.30), 0 4px 24px rgba(0,0,0,.5); }
  50%       { box-shadow: 0 0 36px rgba(0,112,243,.55), 0 4px 24px rgba(0,0,0,.5); }
}

/* Marquee — trust bar */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Gradient shift — large backgrounds */
@keyframes gradShift {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}

/* Slow ring rotation */
@keyframes rotateSlow {
  to { transform: rotate(360deg); }
}

/* Copilot FAB gentle bob */
@keyframes copilotBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Typing indicator dots */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0);   opacity: .35; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* Animated gradient border (hue shift) */
@keyframes borderHue {
  0%   { border-color: rgba(0,112,243,.30); }
  50%  { border-color: rgba(93,185,55,.28); }
  100% { border-color: rgba(0,112,243,.30); }
}

/* Subtle scan line for cybersecurity sections */
@keyframes scanLine {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}

/* ── 2. Hero entrance classes ─────────────────────────────── */
.hero-eyebrow  { animation: fadeUp 0.70s var(--ease-expo) 0.20s both; }
.hero-headline { animation: fadeUp 0.80s var(--ease-expo) 0.38s both; }
.hero-sub      { animation: fadeUp 0.80s var(--ease-expo) 0.56s both; }
.hero-ctas     { animation: fadeUp 0.70s var(--ease-expo) 0.74s both; }
.hero-badges   { animation: fadeIn 0.60s var(--ease-expo) 1.00s both; }

/* ── 3. Ambient blobs ─────────────────────────────────────── */
/* will-change applied only on these known animated elements */
.blob-a {
  animation: floatA 18s ease-in-out infinite;
  will-change: transform, opacity;
}
.blob-b {
  animation: floatB 22s ease-in-out infinite;
  will-change: transform, opacity;
}
.blob-c {
  animation: floatC 15s ease-in-out infinite;
  will-change: transform;
}

/* ── 4. Marquee ───────────────────────────────────────────── */
.marquee-track {
  display: flex;
  gap: var(--sp-4);
  animation: marquee 34s linear infinite;
  will-change: transform;
}

/* Pause on hover/focus (desktop) — progressive enhancement */
@media (hover: hover) {
  .marquee-track:hover { animation-play-state: paused; }
}

/* ── 5. CTA pulse — modifier only ────────────────────────── */
/* Applied to ONE hero CTA, not all .btn-primary instances */
.btn--pulse {
  animation: pulseGlow 2.8s ease-in-out infinite;
}
.btn--pulse:hover,
.btn--pulse:focus-visible {
  animation: none;
}

/* ── 6. Copilot ───────────────────────────────────────────── */
.copilot-fab-inner {
  animation: copilotBob 3.2s ease-in-out infinite;
}

.copilot-dot:nth-child(1) { animation: typingDot 1.2s ease-in-out infinite 0.00s; }
.copilot-dot:nth-child(2) { animation: typingDot 1.2s ease-in-out infinite 0.20s; }
.copilot-dot:nth-child(3) { animation: typingDot 1.2s ease-in-out infinite 0.40s; }

/* ── 7. Border hue ────────────────────────────────────────── */
.border-animated { animation: borderHue 4s ease-in-out infinite; }

/* ── 8. Section ambient gradients ────────────────────────── */
.bg-glow-blue {
  background:
    radial-gradient(ellipse 80% 44% at 50% 0%, rgba(0,112,243,.13) 0%, transparent 60%),
    var(--bg-base);
}

.bg-glow-green {
  background:
    radial-gradient(ellipse 80% 44% at 50% 100%, rgba(93,185,55,.11) 0%, transparent 60%),
    var(--bg-raised);
}

.bg-glow-split {
  background:
    radial-gradient(ellipse 56% 56% at 18% 50%, rgba(0,112,243,.10) 0%, transparent 56%),
    radial-gradient(ellipse 56% 56% at 82% 50%, rgba(93,185,55,.09) 0%, transparent 56%),
    var(--bg-elevated);
}

/* ── 9. Decorative ring ───────────────────────────────────── */
.ring-rotate {
  animation: rotateSlow 24s linear infinite;
  will-change: transform;
}

/* ── 10. Scan line (cyber sections) ──────────────────────── */
.scan-line {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,112,243,.4), transparent);
  animation: scanLine 6s linear infinite;
  pointer-events: none;
}

/* ── 11. Nav blur state ───────────────────────────────────── */
/* No !important — applied by JS adding class, specificity is enough */
.nav--scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}