/* M.A.M Smooth UX — global micro-interactions */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Button press effect */
a, button { transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease; }
a:active, button:active, [role="button"]:active { transform: scale(0.96) !important; }

/* Card / box hover lift */
.hover-lift { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }

/* Nav link underline slide */
.nav-slide { position: relative; }
.nav-slide::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: currentColor; transition: width 0.25s ease, left 0.25s ease; }
.nav-slide:hover::after { width: 100%; left: 0; }

/* Ripple on click */
.mam-ripple { position: relative; overflow: hidden; }
.mam-ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.mam-ripple:active::after { opacity: 1; }

/* Smooth focus ring */
:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 4px; transition: outline-offset 0.15s ease; }

/* Image lazy fade-in */
img { transition: opacity 0.4s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded, img[loading="lazy"]:not([src=""]) { opacity: 1; }

/* Stagger children entrance */
.stagger-in > * { opacity: 0; transform: translateY(16px); animation: staggerChild 0.4s ease forwards; }
.stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.4s; }
@keyframes staggerChild { to { opacity: 1; transform: translateY(0); } }

/* Smooth backdrop blur for modals / overlays */
.smooth-backdrop { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: backdrop-filter 0.3s ease; }

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