/* Al Madni Animation Engine */

/* ---------------------------------
   Global Settings
---------------------------------- */
:root {
  --anim-duration-fast: 0.4s;
  --anim-duration-base: 0.8s;
  --anim-duration-slow: 1.2s;
  --anim-easing: cubic-bezier(0.76, 0, 0.24, 1); /* Cinematic ease */
  --anim-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ---------------------------------
   1. Scroll Reveal Animations (data-animate)
---------------------------------- */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition: all var(--anim-duration-slow) var(--anim-easing);
}

/* Fade Up */
[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-up"].is-visible { opacity: 1; transform: translateY(0); }

/* Fade Down */
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-down"].is-visible { opacity: 1; transform: translateY(0); }

/* Fade Left / Right */
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="fade-right"].is-visible { opacity: 1; transform: translateX(0); }
[data-animate="fade-left"] { transform: translateX(40px); }
[data-animate="fade-left"].is-visible { opacity: 1; transform: translateX(0); }

/* Scale Up */
[data-animate="scale-up"] { transform: scale(0.9); }
[data-animate="scale-up"].is-visible { opacity: 1; transform: scale(1); }

/* ---------------------------------
   2. Micro-interactions & Hovers
---------------------------------- */
/* Ripple Effect */
.anim-ripple-container {
  position: relative;
  overflow: hidden;
}
.anim-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: anim-ripple 0.6s linear;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
@keyframes anim-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* 3D Tilt Card */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  will-change: transform;
  transition: transform 0.1s ease-out;
}
[data-tilt] .tilt-inner {
  transform: translateZ(30px);
}

/* Magnetic Element */
[data-magnetic] {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Glitch Effect */
[data-hover="glitch"]:hover {
  animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-10deg); }
  40% { transform: skew(10deg); }
  60% { transform: skew(-5deg); }
  80% { transform: skew(5deg); }
  100% { transform: skew(0deg); }
}

/* Nav Underline Draw */
[data-hover="underline-draw"] {
  position: relative;
}
[data-hover="underline-draw"]::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}
[data-hover="underline-draw"]:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ---------------------------------
   3. Ambient & Utilities
---------------------------------- */
/* Scroll Progress Bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  width: 0%;
  z-index: 10000;
  transition: width 0.1s;
}

/* Shimmer Skeleton */
.anim-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Shake Error */
.anim-shake {
  animation: shake 0.5s var(--anim-easing-spring);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
}

/* Logo Shimmer */
.anim-logo-shimmer {
  position: relative;
  overflow: hidden;
}
.anim-logo-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: logo-shimmer 15s infinite;
}
@keyframes logo-shimmer {
  0%, 90% { left: -100%; }
  100% { left: 200%; }
}

/* 3D Lift */
[data-hover="3d-lift"] {
  transition: transform var(--anim-duration-base) var(--anim-easing), box-shadow var(--anim-duration-base) var(--anim-easing);
}
[data-hover="3d-lift"]:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}