/*
 * NEXA POINT GROUP — Animations
 * Keyframes, scroll-reveal, entrance effects, hover transitions
 * All motion respects prefers-reduced-motion
 */

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

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════ */

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

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideDown {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 2000px; opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.03; }
  50%       { opacity: 0.06; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px var(--color-accent-glow); }
  50%       { box-shadow: var(--shadow-glow); }
}

@keyframes borderTrace {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   SCROLL REVEAL (driven by IntersectionObserver in animations.js)
   Elements start invisible; JS adds .is-visible when in view
   ══════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-up    { opacity: 0; transform: translateY(32px); }
.reveal-left  { opacity: 0; transform: translateX(32px); }
.reveal-right { opacity: 0; transform: translateX(-32px); }
.reveal-scale { opacity: 0; transform: scale(0.94); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════════
   FLOATING ELEMENTS
   ══════════════════════════════════════════════════════ */
.float {
  animation: float 5s ease-in-out infinite;
}

.float--slow {
  animation-duration: 7s;
}

.float--fast {
  animation-duration: 3s;
}

.float:nth-child(2) { animation-delay: 0.8s; }
.float:nth-child(3) { animation-delay: 1.6s; }

/* ══════════════════════════════════════════════════════
   HERO ENTRANCE
   ══════════════════════════════════════════════════════ */
.hero-enter {
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-enter--delay-1 { animation-delay: 100ms; }
.hero-enter--delay-2 { animation-delay: 220ms; }
.hero-enter--delay-3 { animation-delay: 360ms; }
.hero-enter--delay-4 { animation-delay: 500ms; }

/* ══════════════════════════════════════════════════════
   SHIMMER LOADING STATE
   ══════════════════════════════════════════════════════ */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-border) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   ANIMATED GRID BACKGROUND
   ══════════════════════════════════════════════════════ */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPulse 4s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* ══════════════════════════════════════════════════════
   GLOW EFFECTS
   ══════════════════════════════════════════════════════ */
.glow {
  animation: glowPulse 3s ease-in-out infinite;
}

.glow-static {
  box-shadow: var(--shadow-glow);
}

/* ══════════════════════════════════════════════════════
   ACTIVE / PAGE TRANSITION
   ══════════════════════════════════════════════════════ */
.page-enter {
  animation: fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ══════════════════════════════════════════════════════
   SPIN (loading indicator)
   ══════════════════════════════════════════════════════ */
.spin {
  animation: spin 0.8s linear infinite;
}

/* ══════════════════════════════════════════════════════
   METRIC COUNT-UP ANIMATION
   ══════════════════════════════════════════════════════ */
.count-up {
  animation: countUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}