/* Global UI tweaks for modern micro-interactions */
:root{
  --accent:#1E3A8A;
  --wa:#25D366;
  --muted:#6B7280;
  --glass: rgba(255,255,255,0.6);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important}
}

/* Base enhancements */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
header.sticky{ backdrop-filter: blur(6px); }

/* Cards & buttons */
.card{ background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(15,23,42,0.06); transition: transform .28s ease, box-shadow .28s ease; }
.card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(15,23,42,0.08); }
.btn{ border-radius: 10px; padding: .6rem .9rem; transition: transform .12s ease, box-shadow .12s ease; }
.btn:active{ transform: translateY(1px) scale(.995); }

/* Entrance animations */
[data-animate]{ opacity: 0; transform: translateY(12px) scale(.995); transition: opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; }
[data-animate].is-visible{ opacity: 1; transform: translateY(0) scale(1); }
[data-animate="fade"]{ transform: none; }
[data-animate="slide-up"]{ transform: translateY(12px); }
[data-animate="slide-left"]{ transform: translateX(10px); }

/* Stagger helper — small delay can be applied inline using style="--delay:.15s" */
[data-animate]{ transition-delay: var(--delay, 0s); }

/* Lightbox and modals */
.modal-backdrop{ transition: opacity .2s ease; }
.modal-panel{ transform: translateY(6px); transition: transform .22s ease, opacity .22s ease; }
.modal-open .modal-panel{ transform: translateY(0); }

/* Floating bar tweaks */
#floating-bar a, #floating-bar button{ transition: transform .18s ease, box-shadow .18s ease; }
#floating-bar a:hover, #floating-bar button:hover{ transform: translateX(-3px) scale(1.02); box-shadow: 0 8px 20px rgba(15,23,42,0.12); }

/* Toast */
.ui-toast{ animation: ui-toast-in .26s ease; }
@keyframes ui-toast-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

/* Utility */
.ripple{ position: relative; overflow: hidden; }
.ripple .r-pulse{ position: absolute; border-radius: 9999px; background: rgba(255,255,255,0.28); transform: scale(0); animation: ripple .6s ease; pointer-events: none; }
@keyframes ripple{ to{ transform: scale(8); opacity:0;} }

/* Accessibility focus */
:focus{ outline: 3px solid rgba(59,130,246,0.12); outline-offset: 3px; }

/* Type scale small tweaks */
h1,h2,h3{ letter-spacing: -0.02em; }

/* Small helper for reduced motion fallback */
.no-motion [data-animate]{ opacity:1; transform:none !important; transition:none !important; }

/* Navbar / header modern styles */
.site-header{ position: sticky; top:0; z-index:60; background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.64)); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(15,23,42,0.06); }
.site-header .nav-link{ color:var(--muted); padding: .35rem .5rem; border-radius:8px; transition: color .18s ease, transform .12s ease; position:relative; text-decoration:none; }
.site-header .nav-link:hover{ color:var(--accent); transform: translateY(-2px); }
.site-header .nav-link::after{ content:''; position:absolute; left:12px; right:12px; bottom:-6px; height:2px; background:var(--accent); transform: scaleX(0); transform-origin:left center; transition: transform .18s ease; }
.site-header .nav-link:hover::after{ transform: scaleX(1); }

/* CTA */
.cta-btn{ background: var(--accent); color:white; padding:.55rem .9rem; border-radius:10px; box-shadow: 0 8px 20px rgba(30,58,138,0.12); font-weight:600; }
.cta-btn:hover{ transform: translateY(-2px) scale(1.02); }

/* Mobile nav */
#mobile-nav{ background: rgba(255,255,255,0.98); border-top: 1px solid rgba(15,23,42,0.04); box-shadow: 0 10px 30px rgba(15,23,42,0.06); }
#mobile-nav a{ display:block; padding:.75rem 1rem; border-radius:8px; color:var(--muted); }
#mobile-nav a:hover{ background: rgba(14,165,233,0.04); color:var(--accent); }

/* Slightly larger touch targets */
.site-header .h-16 { min-height:64px; }

/* Ensure header respects reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header .nav-link, .cta-btn{ transition:none !important; }
}

/* Shimmer loader for images and cards */
.shimmer {
  position: relative;
  overflow: hidden;
  background: #f3f3f3;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, #f3f3f3 0%, #ecebeb 50%, #f3f3f3 100%);
  animation: shimmer 1.2s infinite;
  z-index: 1;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.shimmer img, .shimmer > * { opacity: 0; }
.shimmer.loaded img, .shimmer.loaded > * { opacity: 1; }
.shimmer.loaded::after { display: none; }