/* Animation utilities (AOS-compatible names but works standalone) */

[data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translateY(24px); }
[data-aos="fade-down"]  { transform: translateY(-24px); }
[data-aos="fade-left"]  { transform: translateX(-24px); }
[data-aos="fade-right"] { transform: translateX(24px); }
[data-aos="zoom-in"]    { transform: scale(0.92); }
[data-aos].is-visible   { opacity: 1; transform: translate(0,0) scale(1); }

/* Floating Islamic patterns (hero decorations) */
.floating-shape {
  position: absolute; pointer-events: none;
  opacity: 0.35; color: var(--c-secondary);
  animation: floatY 8s ease-in-out infinite;
}
.floating-shape svg { width: 100%; height: 100%; }
.floating-shape.s1 { top: 12%; left: 6%;  width: 48px; height: 48px; animation-delay: 0s; }
.floating-shape.s2 { top: 60%; left: 12%; width: 36px; height: 36px; animation-delay: 1.5s; color: var(--c-primary); }
.floating-shape.s3 { top: 30%; right: 8%; width: 60px; height: 60px; animation-delay: 3s; }
.floating-shape.s4 { top: 75%; right: 14%;width: 42px; height: 42px; animation-delay: 2s; color: var(--c-primary); }
@keyframes floatY { 50% { transform: translateY(-18px) rotate(8deg); } }

/* Marquee / continuous bands (optional) */
@keyframes scrollX { 100% { transform: translateX(-50%); } }

/* Counter span */
.counter { display: inline-block; min-width: 1ch; }