/* ==========================================================================
   Rida Official — shared animation layer
   Respects the admin "Animations" toggle (site_settings.animations) via the
   --anim-play / --anim-duration CSS vars set in render_theme_head(), and
   respects prefers-reduced-motion unconditionally.
   ========================================================================== */

@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;
  }
}

html { scroll-behavior: smooth; }

/* Scroll-reveal: elements start hidden/offset, .in-view is added by
   site.js via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity calc(0.6s * var(--anim-duration, 1)) cubic-bezier(.21,.9,.32,1),
              transform calc(0.6s * var(--anim-duration, 1)) cubic-bezier(.21,.9,.32,1);
  animation-play-state: var(--anim-play, running);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* Fade/scale-in used for grid items */
.reveal-scale {
  opacity: 0; transform: scale(.94);
  transition: opacity calc(0.5s * var(--anim-duration,1)) ease, transform calc(0.5s * var(--anim-duration,1)) ease;
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* Hover micro-interactions */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,23,42,.14); }

.btn-anim { position: relative; overflow: hidden; }
.btn-anim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn-anim:hover::after { transform: translateX(120%); }

/* Hero slider crossfade */
.hero-slide { opacity: 0; visibility: hidden; transition: opacity calc(0.8s * var(--anim-duration,1)) ease; position: absolute; inset: 0; }
.hero-slide.active { opacity: 1; visibility: visible; position: relative; }

@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float-y 4.5s ease-in-out infinite; animation-play-state: var(--anim-play, running); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fade-in-up calc(0.7s * var(--anim-duration,1)) ease both; animation-play-state: var(--anim-play, running); }

/* Skeleton shimmer for async-loaded product cards */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton { background: linear-gradient(90deg, #eef1f5 25%, #e4e8ee 37%, #eef1f5 63%); background-size: 400px 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius, 12px); }

/* Page loader bar shown briefly on navigation-free interactions (AJAX add-to-cart, etc.) */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff; padding: 12px 20px; border-radius: 999px;
  font: 600 14px/1 var(--font-body); opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }