/* ============================================
   MEB CREATIV — Animations & Scroll Reveals
   ============================================ */

/* ── Scroll Reveal Base ──────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

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

/* Delay variants */
.reveal[data-delay="100"]  { transition-delay: 100ms; }
.reveal[data-delay="150"]  { transition-delay: 150ms; }
.reveal[data-delay="200"]  { transition-delay: 200ms; }
.reveal[data-delay="300"]  { transition-delay: 300ms; }
.reveal[data-delay="400"]  { transition-delay: 400ms; }
.reveal[data-delay="500"]  { transition-delay: 500ms; }
.reveal[data-delay="600"]  { transition-delay: 600ms; }

/* Slide from left */
.reveal--left {
  transform: translateX(-28px);
}
.reveal--left.reveal--visible {
  transform: translateX(0);
}

/* Slide from right */
.reveal--right {
  transform: translateX(28px);
}
.reveal--right.reveal--visible {
  transform: translateX(0);
}

/* Scale reveal */
.reveal--scale {
  transform: scale(0.94) translateY(16px);
}
.reveal--scale.reveal--visible {
  transform: scale(1) translateY(0);
}

/* ── Hero Dot Grid ───────────────────────────── */

.dot-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(91,110,245,0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* ── Gradient Glow ───────────────────────────── */

.glow-spot {
  position: absolute;
  pointer-events: none;
  border-radius: var(--radius-full);
  filter: blur(80px);
}

.glow-spot--electric {
  background: rgba(91, 110, 245, 0.25);
}

.glow-spot--pulse {
  background: rgba(124, 58, 237, 0.2);
}

/* ── Floating Animation ──────────────────────── */

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

.float {
  animation: float 4s ease-in-out infinite;
}

/* ── Gradient shimmer on badges ──────────────── */

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

/* ── Pulse ring ──────────────────────────────── */

@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.6);  opacity: 0;   }
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--color-electric);
  animation: pulse-ring 2s ease-out infinite;
}

/* ── Counter number style (see counters.js) ── */

.counter-number {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

/* ── Workflow diagram node pulse ─────────────── */

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

.diagram-node--active {
  animation: node-pulse 2.5s ease-in-out infinite;
}

/* ── Flow line dash animation ────────────────── */

@keyframes dash-flow {
  to { stroke-dashoffset: -24; }
}

.flow-line {
  stroke-dasharray: 8 4;
  animation: dash-flow 1.5s linear infinite;
}