@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.86); opacity: .7; }
}
@keyframes floatPhone {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes imageReveal {
  from { clip-path: inset(0 100% 0 0 round 20px); }
  to { clip-path: inset(0 0 0 0 round 20px); }
}
.floating-phone { animation: floatPhone 5.8s ease-in-out infinite; }
.reveal {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  will-change: opacity, transform;
}
.fade-up { transform: translateY(34px); }
.slide-left { transform: translateX(54px); }
.slide-right { transform: translateX(-54px); }
.zoom { transform: scale(.94); filter: blur(4px); }
.reveal.visible {
  opacity: 1;
  transform: translate(0,0) scale(1);
  filter: blur(0);
}
.feature-panel.visible img { animation: imageReveal .8s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}