/* ========================================================
   Avero - ULTRA-SMOOTH (60fps/120fps) MOTION & TRANSITION SYSTEM
   Custom Physics Curve: cubic-bezier(.2, .7, .2, 1)
   Hardware-accelerated (transform & opacity only)
   Zero Lag • Staggered Reveal • Living Ambiance • Luxury Hover Physics
   ======================================================== */

:root {
  --ez: cubic-bezier(.2, .7, .2, 1);
  --ac: #C7C0A7;
  --ac2: #C7C0A7;
  --brand-pink: #C7C0A7;
  --brand-pink-glow: rgba(235,229,206, 0.45);
}

html {
  scroll-behavior: smooth;
}

/* ========================================================
   1. أنميشن تحويل الصفحات وعند فتح الموقع (Page Veil Transition)
   ======================================================== */
.veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, rgba(74,71,58,0.45), rgba(74,71,58,0.45) 60%, var(--ac, #C7C0A7));
  opacity: 1;
  pointer-events: none;
  transition: opacity .5s var(--ez);
}

.veil.off {
  opacity: 0 !important;
  pointer-events: none !important;
}

.veil.on {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition-duration: .3s !important;
}

/* ========================================================
   2. أنميشن نزول الهيدر العلوي عند فتح الصفحة (Header Entrance)
   ======================================================== */
@keyframes down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

body > header,
.site-header {
  animation: down .7s var(--ez) both;
}

/* ========================================================
   3. أنميشن ظهور العناصر والكروت بالتتابع عند النزول (Staggered Reveal)
   ======================================================== */
/* الحالة المبدئية قبل الظهور */
.rv {
  opacity: 0;
  translate: 0 28px;
  scale: 0.98;
  transition: opacity .7s var(--ez) var(--d, 0s), translate .7s var(--ez) var(--d, 0s), scale .7s var(--ez) var(--d, 0s);
}

.rv.in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* تفعيل حركة الـ Hover الفاخرة للكروت فقط بعد انتهاء أنميشن الدخول لمنع التقطيع والـ Lag */
.card.done,
.bento-card.done,
.template-card.done,
.product-card.done,
.bot-card.done,
.server-card.done,
.bm2-card.done,
.service-card.done,
.renew-card.done,
.review-card.done,
.interactive-card.done,
.glass-card.done,
.stat-box.done,
.faq-item.done,
.ov-metric-card.done,
article.bot.done,
.triptych-card-right.done,
.triptych-card-center.done,
.triptych-card-left.done,
.spotlight-3d-card-tilt-left.done,
.spotlight-3d-card-tilt-right.done,
.step-card.done,
.home-product-card.done,
#services .grid > div.done {
  transition: translate .35s var(--ez), scale .35s var(--ez), box-shadow .35s var(--ez), border-color .35s var(--ez);
}

.card.done:hover,
.bento-card.done:hover,
.template-card.done:hover,
.product-card.done:hover,
.bot-card.done:hover,
.server-card.done:hover,
.bm2-card.done:hover,
.service-card.done:hover,
.renew-card.done:hover,
.review-card.done:hover,
.interactive-card.done:hover,
.glass-card.done:hover,
.stat-box.done:hover,
.faq-item.done:hover,
.ov-metric-card.done:hover,
article.bot.done:hover,
.triptych-card-right.done:hover,
.triptych-card-center.done:hover,
.triptych-card-left.done:hover,
.spotlight-3d-card-tilt-left.done:hover,
.spotlight-3d-card-tilt-right.done:hover,
.step-card.done:hover,
.home-product-card.done:hover,
#services .grid > div.done:hover {
  translate: 0 -6px;
  border-color: rgba(235,229,206, 0.45);
  box-shadow: 0 20px 45px rgba(13, 13, 11, 0.85), 0 0 25px rgba(235,229,206, 0.18);
}

/* ========================================================
   4. حركة عائمة حية للكروت ثلاثية الأبعاد في الهيرو (Living Ambient Float)
   ======================================================== */
@keyframes heroFloat1 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes heroFloat2 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes heroFloat3 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

.card-3d-shield.done {
  animation: heroFloat1 6.5s ease-in-out infinite !important;
}

.card-3d-stats.done {
  animation: heroFloat2 7.2s ease-in-out infinite 0.8s !important;
}

.card-3d-music.done {
  animation: heroFloat3 6s ease-in-out infinite 1.4s !important;
}

/* Equalizer Bars Animated Pulse */
@keyframes eqPulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}
.eq-bar-anim { transform-origin: bottom; height: 100%; }

.eq-bar-anim:nth-child(1) { animation: eqPulse 1.2s ease-in-out infinite; }
.eq-bar-anim:nth-child(2) { animation: eqPulse 0.9s ease-in-out infinite 0.2s; }
.eq-bar-anim:nth-child(3) { animation: eqPulse 1.4s ease-in-out infinite 0.1s; }
.eq-bar-anim:nth-child(4) { animation: eqPulse 1.0s ease-in-out infinite 0.4s; }
.eq-bar-anim:nth-child(5) { animation: eqPulse 1.3s ease-in-out infinite 0.25s; }
.eq-bar-anim:nth-child(6) { animation: eqPulse 0.8s ease-in-out infinite 0.5s; }
.eq-bar-anim:nth-child(7) { animation: eqPulse 1.5s ease-in-out infinite 0.15s; }
.eq-bar-anim:nth-child(8) { animation: eqPulse 1.1s ease-in-out infinite 0.35s; }
.eq-bar-anim:nth-child(9) { animation: eqPulse 1.3s ease-in-out infinite 0.2s; }
.eq-bar-anim:nth-child(10) { animation: eqPulse 0.95s ease-in-out infinite 0.45s; }

/* ========================================================
   5. أنميشن التبديل بين الأقسام أو التبويبات (Smooth Category Swap)
   ======================================================== */
.grid,
#bots-grid,
#servers-grid,
#products-grid,
.products-grid,
.cards-grid,
.swap-grid {
  transition: opacity .18s var(--ez), transform .18s var(--ez);
}

.grid.swap,
#bots-grid.swap,
#servers-grid.swap,
#products-grid.swap,
.products-grid.swap,
.cards-grid.swap,
.swap-grid.swap {
  opacity: 0 !important;
  transform: translateY(10px) !important;
}

/* Tab Panes Transition */
.tab-pane:not(.hidden) {
  animation: tabPaneSmooth .42s var(--ez) both;
}

@keyframes tabPaneSmooth {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================================
   6. سلاسة السلة والقوائم الجانبية والنوافذ المنبثقة
   ======================================================== */
#cart-drawer,
#cartDrawer,
.cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: min(420px, 92vw) !important;
  max-width: 100vw !important;
  z-index: 100050 !important;
  transform: translate3d(104%, 0, 0) !important;
  transition: transform .45s var(--ez) !important;
  pointer-events: none;
}

#cart-drawer.open,
#cartDrawer.open,
.cart-drawer.open,
#cart-drawer.translate-x-0,
#cartDrawer.translate-x-0 {
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

#cart-drawer-backdrop,
.cart-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(13, 13, 11, 0.72) !important;
  z-index: 100040 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ez) !important;
}

#cart-drawer-backdrop.open,
.cart-drawer-backdrop.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ========================================================
   7. تثبيت السلة والـ AI في مكانهم الصحيح دون أي تعارض
   ======================================================== */
#floating-cart-btn,
.floating-cart-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  z-index: 100020 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 12px 35px rgba(13, 13, 11, 0.8), 0 0 25px rgba(235,229,206, 0.25) !important;
  transition: translate 0.25s var(--ez), border-color 0.25s, box-shadow 0.25s !important;
}

#floating-cart-btn:hover,
.floating-cart-btn:hover {
  translate: 0 -3px;
  box-shadow: 0 16px 40px rgba(13, 13, 11, 0.9), 0 0 35px rgba(235,229,206, 0.4) !important;
}
body:not(.store-page) #floating-cart-btn,
body:not(.store-page) .floating-cart-btn,
body:not(.store-page) .cbw,
body:not(.store-page) #cart-drawer,
body:not(.store-page) #cart-drawer-backdrop {
  display: none !important;
}
body.store-page #floating-cart-btn,
body.store-page #floating-cart-btn.has,
body.store-page #floating-cart-btn:hover,
body.store-page #floating-cart-btn.has:hover {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  flex: 0 0 52px !important;
  justify-content: center;
  background: rgba(74,71,58,0.45) !important;
  border: 1px solid rgba(235,229,206, 0.7) !important;
  color: #FFFFFF !important;
  transform: none;
  translate: 0 0;
}
body.store-page #floating-cart-btn:hover {
  box-shadow: 0 18px 36px rgba(13, 13, 11, 0.45), 0 0 26px rgba(235,229,206, 0.4) !important;
}
body.store-page #floating-cart-badge {
  position: absolute !important;
  top: -7px !important;
  left: -7px !important;
  right: auto !important;
  inset-inline-end: auto !important;
  min-width: 18px;
  max-width: 42px;
  height: 18px;
  padding: 0 4px;
  border-radius: 99px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
}
body.store-page #floating-cart-btn .ci {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(235,229,206, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.store-page #floating-cart-btn .ci svg {
  width: 22px;
  height: 22px;
  display: block;
}
body.store-page #floating-cart-btn.has .ci {
  background: rgba(235,229,206, 0.22);
  color: #FFFFFF;
}
body.store-page #floating-cart-btn.has:hover .ci {
  background: rgba(74,71,58,0.45);
  color: #0D0D0B;
}
body.store-page #floating-cart-btn .cl,
body.store-page #floating-cart-btn:hover .cl,
body.store-page #floating-cart-total,
body.store-page #floating-cart-btn:hover #floating-cart-total,
body.store-page #floating-cart-btn.has:hover #floating-cart-total {
  display: none !important;
  max-width: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#Avero-ai-widget-root {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  z-index: 100010 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  pointer-events: none !important;
}

#Avero-ai-widget-root > * {
  pointer-events: auto !important;
}

/* Micro-Interactions */
button:active,
.btn:active,
.btn-pink:active,
.btn-dark:active,
.btn-gold:active,
.bm2-control:active,
.btn-animate:active {
  transform: scale(0.965) !important;
  transition: transform 0.12s var(--ez) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .card-3d-shield.done,
  .card-3d-stats.done,
  .card-3d-music.done,
  .eq-bar-anim {
    animation: none !important;
  }
}