/**
 * Al Madni Mobile Animation Engine (201 Full Scale)
 * Hardware-accelerated CSS for massive scale animation without UI blocking.
 */

/* ==========================================================================
   GLOBAL CONSTRAINTS
   ========================================================================== */
@media (max-width: 768px) {
  html.pull-to-refresh-active, body.pull-to-refresh-active {
    overscroll-behavior-y: none; /* Block native bounce for custom pull-to-refresh */
  }
}

/* ==========================================================================
   1. NAVIGATION & MENUS (1-30)
   ========================================================================== */
.anim-drawer-elastic {
  will-change: transform;
}
.anim-drawer-elastic.is-dragging { transition: none !important; }
.anim-drawer-elastic.snap-back { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.anim-nav-hide {
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.anim-nav-show {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.anim-header-shrink {
  transition: padding 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}
.anim-header-shrink.scrolled {
  height: 60px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Hamburger morph */
.anim-menu-morph .line { transition: transform 0.3s, opacity 0.3s; }
.anim-menu-morph.is-open .line-1 { transform: translateY(8px) rotate(45deg); }
.anim-menu-morph.is-open .line-2 { opacity: 0; }
.anim-menu-morph.is-open .line-3 { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   2. GESTURES & SWIPES (31-60)
   ========================================================================== */
[data-mobile-anim="swipe-delete"] {
  touch-action: pan-y;
  will-change: transform;
}
[data-mobile-anim="swipe-delete"].is-dragging { transition: none; }
[data-mobile-anim="swipe-delete"].snap-back { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateX(0); }
[data-mobile-anim="swipe-delete"].deleted { transition: transform 0.3s ease, opacity 0.3s ease; transform: translateX(-100%); opacity: 0; }

.pull-to-refresh-indicator {
  position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--primary);
  border-top-color: transparent; opacity: 0; transition: opacity 0.2s;
}
.pull-to-refresh-indicator.is-pulling { opacity: 1; transform: translateX(-50%) rotate(var(--rot, 0deg)); }
.pull-to-refresh-indicator.is-loading { animation: spin 1s linear infinite; }

/* ==========================================================================
   3. SCROLL-BOUND (61-90)
   ========================================================================== */
[data-mobile-anim="scroll-fade-up"] { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity; }
[data-mobile-anim="scroll-fade-up"].is-visible { opacity: 1; transform: translateY(0); }

[data-mobile-anim="scroll-scale-in"] { opacity: 0; transform: scale(0.85); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity; }
[data-mobile-anim="scroll-scale-in"].is-visible { opacity: 1; transform: scale(1); }

[data-mobile-anim="parallax-mask"] { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1); }
[data-mobile-anim="parallax-mask"].is-visible { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   4. E-COMMERCE & CARDS (91-120)
   ========================================================================== */
[data-mobile-anim="heart-burst"] { position: relative; overflow: visible; }
.m-heart-particle {
  position: absolute; width: 10px; height: 10px; background-color: #ba1a1a; border-radius: 50%;
  pointer-events: none; animation: m-explode 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes m-explode {
  0% { transform: scale(0) translate(0,0); opacity: 1; }
  100% { transform: scale(1.5) translate(var(--tx), var(--ty)); opacity: 0; }
}

[data-mobile-anim="cart-drop"] { animation: m-drop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes m-drop-in { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ==========================================================================
   5. CART, CHECKOUT, FORMS (121-160)
   ========================================================================== */
[data-mobile-anim="input-float"] { position: relative; }
[data-mobile-anim="input-float"] label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); transition: 0.2s ease;
  pointer-events: none; color: #666; font-size: 14px;
}
[data-mobile-anim="input-float"] input:focus ~ label,
[data-mobile-anim="input-float"] input:not(:placeholder-shown) ~ label {
  top: 8px; font-size: 10px; color: var(--primary);
}

[data-mobile-anim="success-draw"] path {
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.6s ease-in-out;
}
[data-mobile-anim="success-draw"].is-drawn path { stroke-dashoffset: 0; }

/* ==========================================================================
   6. LOADING & AMBIENT (161-190)
   ========================================================================== */
[data-mobile-anim="skeleton-wave"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%; animation: m-shimmer 1.5s infinite linear;
}
@keyframes m-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

[data-mobile-anim="ambient-shift"] {
  background-size: 200% 200%; animation: m-bg-shift 15s ease infinite;
}
@keyframes m-bg-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ==========================================================================
   7. BUSINESS HOOKS (191-201)
   ========================================================================== */
[data-mobile-anim="flight-route"] path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease-in-out; }
[data-mobile-anim="flight-route"].is-visible path { stroke-dashoffset: 0; }

[data-mobile-anim="bottle-squeeze"]:active { transform: scale(0.95, 1.05); transition: transform 0.1s; }

[data-mobile-anim="glitch-text"]:hover { animation: m-glitch 0.2s linear infinite; }
@keyframes m-glitch { 
  0% { transform: translate(0) } 
  20% { transform: translate(-2px, 1px) }
  40% { transform: translate(2px, -1px) }
  60% { transform: translate(-1px, -2px) }
  80% { transform: translate(1px, 2px) }
  100% { transform: translate(0) }
}