/* ── ANIMATIONS ──────────────────────────────────── */

/* Fade + slide up (used by hero badge, sub, actions) */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Particle float */
.p {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--violet2);
  border-radius: 50%;
  animation: particleFly var(--d, 8s) ease-in-out infinite;
  opacity: 0;
}
@keyframes particleFly {
  0%   { opacity: 0;  transform: translateY(0) scale(1); }
  20%  { opacity: .7; }
  80%  { opacity: .3; }
  100% { opacity: 0;  transform: translateY(-200px) scale(0); }
}

/* Scroll reveal base states */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.sr.vis { opacity: 1; transform: translateY(0); }

.sr-l {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.sr-l.vis { opacity: 1; transform: translateX(0); }

.sr-r {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.sr-r.vis { opacity: 1; transform: translateX(0); }