/* ==========================================================================
   AGGARWAL FABRICS - ANIMATIONS
   Lightweight CSS-only animations & AOS-style fallbacks
   ========================================================================== */

/* ---------- 1. ENTRANCE (used by IntersectionObserver in main.js) ---------- */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--af-ease-out, cubic-bezier(.16,1,.3,1)),
              transform .8s var(--af-ease-out, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
[data-anim].in-view { opacity: 1; transform: translateY(0); }

[data-anim="fade-up"]    { transform: translateY(28px); }
[data-anim="fade-down"]  { transform: translateY(-28px); }
[data-anim="fade-left"]  { transform: translateX(28px); }
[data-anim="fade-right"] { transform: translateX(-28px); }
[data-anim="zoom-in"]    { transform: scale(.94); }
[data-anim="fade"]       { transform: none; }

[data-anim].in-view { transform: none; }

[data-anim-delay="100"] { transition-delay: .1s; }
[data-anim-delay="200"] { transition-delay: .2s; }
[data-anim-delay="300"] { transition-delay: .3s; }
[data-anim-delay="400"] { transition-delay: .4s; }
[data-anim-delay="500"] { transition-delay: .5s; }

/* ---------- 2. FLOAT ---------- */
@keyframes af-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.af-float { animation: af-float 6s ease-in-out infinite; }

/* ---------- 3. SHIMMER (skeleton placeholders) ---------- */
@keyframes af-shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
.af-shimmer {
  background: linear-gradient(90deg, #f0f3f7 0%, #e3e8ee 50%, #f0f3f7 100%);
  background-size: 1000px 100%;
  animation: af-shimmer 1.5s infinite linear;
}

/* ---------- 4. SPIN ---------- */
@keyframes af-spin { to { transform: rotate(360deg); } }
.af-spin { animation: af-spin 1s linear infinite; }

/* ---------- 5. PAGE LOADER ---------- */
.af-preloader {
  position: fixed; inset: 0;
  background: #fff;
  z-index: 9999;
  display: grid; place-items: center;
  transition: opacity .4s ease, visibility .4s ease;
}
.af-preloader.hidden { opacity: 0; visibility: hidden; }
.af-preloader-spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--af-line, #E2E8F0);
  border-top-color: var(--af-secondary, #1976D2);
  border-radius: 50%;
  animation: af-spin .9s linear infinite;
}

/* ---------- 6. HOVER LIFT ---------- */
.hover-lift {
  transition: transform .3s var(--af-ease, cubic-bezier(.4,0,.2,1)),
              box-shadow .3s var(--af-ease, cubic-bezier(.4,0,.2,1));
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--af-shadow-md, 0 10px 30px rgba(15,23,42,.08));
}

/* ---------- 7. UNDERLINE GROW ---------- */
.link-grow { position: relative; }
.link-grow::after {
  content: ""; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--af-ease, cubic-bezier(.4,0,.2,1));
}
.link-grow:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 8. NUMBER COUNT (visual only, JS animates value) ---------- */
.count-up { display: inline-block; transition: transform .3s ease; }

/* ---------- 9. TILT (subtle) ---------- */
.tilt-hover { transition: transform .4s var(--af-ease-out, cubic-bezier(.16,1,.3,1)); }
.tilt-hover:hover { transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px); }

/* ---------- 10. PULSE (used by WhatsApp button, see style.css) ---------- */
@keyframes af-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
}
.af-attention { animation: af-attention 2.2s ease-out infinite; }

/* ---------- 11. SLIDE-IN (mobile menu, alerts) ---------- */
@keyframes af-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.af-slide-down { animation: af-slide-down .35s var(--af-ease-out, cubic-bezier(.16,1,.3,1)) both; }