/* ── Fade-in on scroll ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-delay="5"] { transition-delay: 400ms; }

/* ── Page load fade ── */
.page-enter {
  animation: pageEnter 0.4s var(--ease) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.7s linear infinite; }

/* ── Pulse ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse { animation: pulse 1.8s ease-in-out infinite; }

/* ── Live dot ── */
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.4; }
}
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  animation: livePulse 1.4s ease-in-out infinite;
}

/* ── Shimmer skeleton ── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r);
}

/* ── Hover lift ── */
.hover-lift {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── Number count-up (class toggled by JS) ── */
.count-up {
  transition: color 0.3s var(--ease);
}