/* ── Reveal animations ── */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
[data-reveal="fade-up"]    { transform: translateY(32px); }
[data-reveal="fade-down"]  { transform: translateY(-32px); }
[data-reveal="fade-left"]  { transform: translateX(-32px); }
[data-reveal="fade-right"] { transform: translateX(32px); }
[data-reveal="scale"]      { transform: scale(0.94); }
[data-reveal="none"]       { transform: none; }

[data-reveal].revealed { opacity: 1; transform: none; }

[data-delay="100"].revealed { transition-delay: 100ms; }
[data-delay="200"].revealed { transition-delay: 200ms; }
[data-delay="300"].revealed { transition-delay: 300ms; }
[data-delay="400"].revealed { transition-delay: 400ms; }
[data-delay="500"].revealed { transition-delay: 500ms; }
[data-delay="600"].revealed { transition-delay: 600ms; }

/* ── Glitch ── */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: var(--glitch-clip, inset(50% 0 50% 0));
  pointer-events: none;
}
.glitch::before {
  color: var(--glitch-color-a, transparent);
  transform: translateX(var(--glitch-x, 0));
}
.glitch::after {
  color: var(--glitch-color-b, transparent);
  transform: translateX(calc(-1 * var(--glitch-x, 0)));
}

/* ── Keyframes ── */
@keyframes load-bar {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50%       { transform: scale(1.8); opacity: 0; }
}

@keyframes count-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes dot-scale {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Timeline dot ── */
.timeline-dot {
  transform: scale(0);
  transition: transform 400ms var(--ease-snap);
}
.timeline-dot.revealed { transform: scale(1); }

/* ── SVG pulse circles ── */
.map-pulse {
  animation: pulse-ring 2s ease-in-out infinite;
}

/* ── Count-up bar ── */
.stats-bar {
  transform-origin: left;
  animation: none;
}
.stats-bar.counting {
  animation: count-bar 1.5s var(--ease-out) forwards;
}

/* ── Hero clip reveal ── */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
}
.clip-reveal.revealed {
  animation: clip-reveal 900ms var(--ease-out) forwards;
}