/* ==== Keyframes ==== */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes highlight-grow {
  to { transform: scaleX(1); }
}

@keyframes grid-drift {
  from { background-position: 0 0; }
  to { background-position: 80px 80px; }
}

@keyframes pulse-line {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes count-up-glow {
  0% { letter-spacing: -0.01em; }
  100% { letter-spacing: -0.04em; }
}

/* ==== Hero background ==== */
.hero__grid-bg {
  background-image:
    linear-gradient(to right, var(--color-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: 0 0;
  opacity: 0.7;
  mask-image: radial-gradient(circle at 70% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, black 30%, transparent 75%);
  animation: grid-drift 28s linear infinite;
}

.hero__pattern {
  background:
    radial-gradient(circle at 80% 20%, rgba(0,0,0,0.05), transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(0,0,0,0.04), transparent 35%);
}

.hero__pattern::before,
.hero__pattern::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-line);
}

.hero__pattern::before {
  width: 480px;
  height: 480px;
  right: -160px;
  top: -120px;
  animation: pulse-line 6s var(--ease-in-out) infinite;
}

.hero__pattern::after {
  width: 320px;
  height: 320px;
  right: -40px;
  top: -40px;
  animation: pulse-line 6s var(--ease-in-out) infinite 1.5s;
  border-style: dashed;
  opacity: 0.7;
}

/* ==== Reveal on scroll (IntersectionObserver hook) ==== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay='1'] { transition-delay: 0.08s; }
.reveal[data-delay='2'] { transition-delay: 0.16s; }
.reveal[data-delay='3'] { transition-delay: 0.24s; }
.reveal[data-delay='4'] { transition-delay: 0.32s; }
.reveal[data-delay='5'] { transition-delay: 0.40s; }

/* ==== Number counter glow ==== */
.stat__value {
  animation: count-up-glow 1.4s var(--ease-out) both;
  animation-play-state: paused;
}

.stat.is-visible .stat__value {
  animation-play-state: running;
}

/* ==== Cursor-following accent (optional, lightweight) ==== */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-fg);
  pointer-events: none;
  z-index: var(--z-overlay);
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: transform 0.12s var(--ease-out), width 0.2s var(--ease-out),
    height 0.2s var(--ease-out);
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-dot { display: block; }
}

.cursor-dot.is-active {
  width: 36px;
  height: 36px;
  background: var(--color-fg-inv);
}

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

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}