/* =========================================================
   SmartInvoice AI — Animations & Keyframes
   ========================================================= */

@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 20px) scale(0.96); }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseMark {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes loaderSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

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

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.4s; }

/* ---- Float helper ---- */
.floating { animation: floatY 6s ease-in-out infinite; }
.floating.slow { animation-duration: 9s; }

/* ---- Glow ---- */
.glow {
  position: relative;
}
.glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-brand);
  filter: blur(22px);
  opacity: 0.35;
  z-index: -1;
  transition: opacity 0.4s var(--ease);
}
.glow:hover::after { opacity: 0.6; }

/* ---- Spinner ---- */
.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}
