/* Hero animation: retro console energy without blocking page load. */

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.12) 100%
  );
  pointer-events: none;
  z-index: 1;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Hero wrapper (animated entrance) ── */
@keyframes glitch-skew {
  0%   { transform: skew(0deg); }
  10%  { transform: skew(-3deg); }
  20%  { transform: skew(2deg); }
  30%  { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

@keyframes glitch-shift {
  0%   { clip-path: inset(0 0 100% 0); }
  10%  { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  20%  { clip-path: inset(50% 0 30% 0); transform: translate(4px, 0); }
  30%  { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 0); }
  40%  { clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

.cta-primary, .cta-secondary {
  position: relative;
  overflow: hidden;
}

.cta-primary::before,
.cta-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fg);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  opacity: 0;
  pointer-events: none;
}

.cta-primary:hover {
  animation: glitch-skew 0.4s ease-in-out;
}

.cta-primary:hover::before {
  animation: glitch-shift 0.4s ease-in-out;
  opacity: 1;
  content: 'Get Your AI Strategy';
}

.cta-secondary:hover {
  animation: glitch-skew 0.35s ease-in-out;
}

/* ── Live clock readout ── */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-grid-bg::before,
.hero-grid-bg::after {
  content: '';
  position: absolute;
  inset: -45%;
  background-image:
    linear-gradient(rgba(74, 85, 104, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 85, 104, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(500px) rotateX(30deg);
  transform-origin: bottom center;
  animation: grid-pulse 8s ease-in-out infinite;
}

.hero-grid-bg::after {
  inset: 0;
  background-image: linear-gradient(90deg, transparent, rgba(26, 26, 26, 0.08), transparent);
  background-size: 280px 100%;
  transform: none;
  animation: console-sweep 4.8s linear infinite;
  opacity: 0.45;
}

@keyframes grid-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* ── Stats counter animation ── */
.stat-val {
  display: inline-block;
  transition: transform 0.3s ease;
}

.stat:hover .stat-val {
  transform: scale(1.08);
  color: var(--accent);
}

/* ── Staggered reveal for child elements ── */
.hero-ready .reveal-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-ready .reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Pulse ring on stats ── */
.stat::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent-glow);
  animation: ring-pulse 3s ease-in-out infinite;
  opacity: 0;
  transform: translate(-5px, -8px);
}

.ascii-art {
  animation: none !important;
  text-shadow:
    1px 0 0 rgba(247, 246, 243, 0.95),
    2px 1px 0 rgba(26, 26, 26, 0.32),
    4px 2px 0 rgba(26, 26, 26, 0.14) !important;
}

.ascii-scanline {
  animation: scan-y 2.7s linear infinite;
}

@keyframes ascii-glow {
  0%, 100% { text-shadow: 1px 0 #ff0055, -1px 0 #00e5ff; }
  50% { text-shadow: -1px 0 #ff0055, 1px 0 #00e5ff; }
}

@keyframes scan-y {
  from { transform: translateY(-130%); }
  to { transform: translateY(130%); }
}

@keyframes console-sweep {
  from { background-position: -280px 0; }
  to { background-position: 280px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@keyframes ring-pulse {
  0%   { transform: scale(0.8); opacity: 0.6; }
  50%  { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ── Status badge ping ── */
@keyframes ping-dot {
  0%   { box-shadow: 0 0 0 0 rgba(74, 85, 104, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 85, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 85, 104, 0); }
}

.status-dot-live {
  animation: ping-dot 2s ease-in-out infinite;
}