/* ─── Pulse dot (hero badge) ─── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--c-cyan); }
  50%       { opacity: 0.4; box-shadow: 0 0 2px var(--c-cyan); }
}

/* ─── Isometric cube float ─── */
@keyframes float-cube {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* ─── Scan line ─── */
@keyframes scan-line {
  0%   { opacity: 0; transform: translateX(-100%); }
  30%  { opacity: 0.5; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(100%); }
}

/* ─── Data point float ─── */
@keyframes float-data {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─── Scroll pulse ─── */
@keyframes scroll-pulse {
  0%   { opacity: 0.6; transform: scaleY(1);    transform-origin: top; }
  50%  { opacity: 1;   transform: scaleY(1.15); transform-origin: top; }
  100% { opacity: 0.6; transform: scaleY(1);    transform-origin: top; }
}

/* ─── Glitch effect on hero-line-1 ─── */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: transparent;
}
.glitch::before {
  color: var(--c-cyan);
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  animation: glitch-1 4s steps(1) infinite;
  left: 2px;
}
.glitch::after {
  color: var(--c-purple);
  clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
  animation: glitch-2 4s steps(1) infinite 0.1s;
  left: -2px;
}

@keyframes glitch-1 {
  0%,94%,100% { opacity: 0; }
  95%   { opacity: 1; transform: translateX(4px); }
  96%   { opacity: 1; transform: translateX(-2px); }
  97%   { opacity: 0; }
}
@keyframes glitch-2 {
  0%,92%,100% { opacity: 0; }
  93%   { opacity: 1; transform: translateX(-4px); }
  94%   { opacity: 1; transform: translateX(2px); }
  95%   { opacity: 0; }
}

/* ─── Scroll-reveal base state ─── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Fade-scale (cards on hover) ─── */
@keyframes card-appear {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ─── Neon border glow pulse ─── */
@keyframes border-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,200,255,0.2); }
  50%       { box-shadow: 0 0 20px rgba(0,200,255,0.5); }
}

/* ─── Page fade-in ─── */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-in 0.4s ease; }

/* ─── Metric card hover ─── */
.metric-card {
  transition: transform var(--tr-base), box-shadow var(--tr-base);
}
.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-blue);
}

/* ─── Nav link underline slide ─── */
.nav-link::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr-base);
  margin-top: 2px;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}