/* ─────────────────────────────────────────
   ANIMATIONS — Keyframes & Reveal Classes
───────────────────────────────────────── */

/* ── Reveal on scroll ── */
.rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: translateY(0);
}

.rs {
  opacity: 0;
  transform: scale(0.93) translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rs.in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Keyframes ── */
@keyframes rpl-anim {
  to { transform: scale(4); opacity: 0; }
}

@keyframes badge-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.65); }
  100% { transform: scale(1); }
}

@keyframes sd-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.6); }
}

@keyframes orb-breathe {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}

@keyframes orb-spin {
  to { transform: rotate(360deg); }
}

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

@keyframes pt-rise {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  8%   { opacity: 0.8; }
  85%  { opacity: 0.15; }
  100% { opacity: 0; transform: translateY(-88vh) scale(0.3); }
}

@keyframes sc-float {
  0%,100% { opacity: 0.18; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.4;  transform: translateX(-50%) translateY(7px); }
}

@keyframes steam-anim {
  0%   { opacity: 0; transform: translateY(0); }
  50%  { opacity: 1; transform: translateY(-13px) scaleX(1.4); }
  100% { opacity: 0; transform: translateY(-27px) scaleX(0.7); }
}

/* ── Counter animation ── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-num.counting {
  animation: count-up 0.4s var(--ease) forwards;
}

/* ── Skeleton loading ── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}