/* ==========================================================================
   ag-animation.css – v5.2
   Motion system: fade/scale, hover glow, drawer slide, image transitions
   ========================================================================== */

/* Smooth scroll للصفحة كلها */
html {
  scroll-behavior: smooth;
}

/* Generic transition helpers for interactive elements */
a,
button,
.ag-btn,
.ag-cart,
.ag-bottom-drawer-toggle {
  transition:
    color var(--ag-anim-normal) ease,
    background-color var(--ag-anim-normal) ease,
    box-shadow var(--ag-anim-normal) ease,
    transform var(--ag-anim-normal) ease,
    border-color var(--ag-anim-normal) ease;
}

/* --------------------------------------------------------------------------
   Fade-in / reveal utilities
   -------------------------------------------------------------------------- */

/* Lazy reveal on scroll (JS adds .ag-reveal-on-scroll--visible) */
.ag-reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--ag-anim-slow) ease,
    transform var(--ag-anim-slow) ease;
}

.ag-reveal-on-scroll.ag-reveal-on-scroll--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Simple fade-in on first load */
.ag-fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: ag-fade-in-up var(--ag-anim-slow) ease-out forwards;
}

@keyframes ag-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Scale-in (cards, modals, drawer content)
   -------------------------------------------------------------------------- */

.ag-scale-in {
  opacity: 0;
  transform: scale(0.96);
  animation: ag-scale-in var(--ag-anim-normal) ease-out forwards;
}

@keyframes ag-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Pulse glow (for CTAs / primary buttons)
   -------------------------------------------------------------------------- */

.ag-pulse-glow {
  position: relative;
  z-index: 1;
}

.ag-pulse-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(96, 165, 250, 0.7);
  opacity: 0;
  pointer-events: none;
  animation: ag-pulse-halo 2.2s ease-out infinite;
}

@keyframes ag-pulse-halo {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   Hover lift (cards, product tiles)
   -------------------------------------------------------------------------- */

.ag-hover-lift {
  transition:
    transform var(--ag-anim-normal) ease,
    box-shadow var(--ag-anim-normal) ease;
}

.ag-hover-lift:hover,
.ag-hover-lift:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

/* --------------------------------------------------------------------------
   Drawer slide (bottom drawer, mobile filters)
   -------------------------------------------------------------------------- */

/* تستخدم مع كلاس إضافي بجانب التحويل الافتراضي في لوحة الدراور */
.ag-drawer-slide-in {
  animation: ag-drawer-slide-in var(--ag-anim-slow) ease-out forwards;
}

@keyframes ag-drawer-slide-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Slide-out helper (اختياري) */
.ag-drawer-slide-out {
  animation: ag-drawer-slide-out var(--ag-anim-slow) ease-in forwards;
}

@keyframes ag-drawer-slide-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* --------------------------------------------------------------------------
   Product image swap transitions
   -------------------------------------------------------------------------- */

/* Smooth opacity swap for product gallery main image */
.ag-product-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition:
    opacity var(--ag-anim-normal) ease,
    transform var(--ag-anim-normal) ease;
}

/* Thumbnails – motion موحّد مع نظام البقية */
.ag-product-gallery__thumbnail {
  transition:
    transform var(--ag-anim-fast) ease,
    box-shadow var(--ag-anim-fast) ease,
    border-color var(--ag-anim-fast) ease,
    filter var(--ag-anim-fast) ease;
}

.ag-product-gallery__thumbnail:hover,
.ag-product-gallery__thumbnail:focus-within {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.9);
}

/* Active thumbnail – نبضة بسيطة */
.ag-product-gallery__thumbnail--active {
  transform: translateY(-1px) scale(1.02);
}

/* --------------------------------------------------------------------------
   Checkout / thank you specific animations
   -------------------------------------------------------------------------- */

.ag-thankyou-card {
  animation: ag-fade-in-up 0.5s ease forwards;
}

.ag-thankyou-card__icon--success,
.ag-thankyou-card__icon--error {
  animation: ag-scale-in var(--ag-anim-normal) ease-out;
}

/* --------------------------------------------------------------------------
   Spinner (used by buttons, AJAX state)
   -------------------------------------------------------------------------- */

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