/* ==========================================================================
   animations.css — motion, keyframes, scroll reveals, hover micro-interactions
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Page-load intro ---------- */
.hero__title, .hero__sub, .hero__cta, .hero__trust { animation: fadeUp .7s var(--ease-out) both; }
.hero__sub { animation-delay: .08s; }
.hero__cta { animation-delay: .16s; }
.hero__trust { animation-delay: .24s; }
.hero__art img { animation: fadeIn 1s var(--ease-out) both, floaty 7s ease-in-out 1s infinite; }
.searchbar { animation: fadeUp .7s var(--ease-out) .3s both; }

/* ---------- Scroll reveal (JS toggles .is-visible) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

/* Confirmation success pop */
.confirm-hero img { animation: pop .6s var(--ease-out) both; }

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

/* Skeleton shimmer (loading placeholders) */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, #EDF1F6 37%, var(--surface-3) 63%);
  background-size: 840px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

/* Inline spinner */
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }

/* Accordion / drawer transitions live in components + style */

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