/* ============================================
   SHAOUB - Animation Library
   ============================================ */

/* ===== Keyframes ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(-25px) rotate(-1deg);
  }
  75% {
    transform: translateY(-10px) rotate(1deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

@keyframes pulseScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes heroGlow {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes scrollDown {
  0% { top: -30%; }
  100% { top: 100%; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

body[dir="rtl"] .marquee {
  animation-direction: reverse;
}

@keyframes loaderPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 20px rgba(201, 169, 97, 0);
  }
}

@keyframes loaderBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes wave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes tilt {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

/* ===== Scroll Reveal Classes ===== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease-elegant), transform 0.8s var(--ease-elegant);
}

[data-reveal="up"] {
  transform: translateY(40px);
}

[data-reveal="down"] {
  transform: translateY(-40px);
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-reveal-delay="600"] { transition-delay: 0.6s; }

/* ===== Animated Underline ===== */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: width 0.4s var(--ease-elegant);
}

.animated-underline:hover::after {
  width: 100%;
}

/* ===== Ripple Effect ===== */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.5);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===== Tilt Card ===== */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-smooth);
}

.tilt-card-inner {
  transform-style: preserve-3d;
}

.tilt-card-inner > * {
  transform: translateZ(20px);
}

/* ===== Custom Cursor ===== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transition: width 0.2s, height 0.2s, background 0.2s;
}

.cursor-ring {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--color-gold);
  transition: transform 0.2s, width 0.2s, height 0.2s;
}

.cursor-dot.hover {
  width: 12px;
  height: 12px;
}

.cursor-ring.hover {
  width: 50px;
  height: 50px;
}

@media (max-width: 1024px) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ===== Scroll Progress Bar ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-gold);
  z-index: 1001;
  transition: width 0.05s linear;
  box-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
}