/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* Continuous Rotation for Mandalas */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slow Floating Effect for Decorative Motifs */
@keyframes floatSlow {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Loader Text Entrance */
@keyframes fadeInUpLoader {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Golden Border Shimmer/Pulse */
@keyframes goldShimmer {
  0% {
    box-shadow: 0 0 5px rgba(200, 155, 60, 0.2), 0 0 0 0px rgba(200, 155, 60, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(200, 155, 60, 0.5), 0 0 0 6px rgba(200, 155, 60, 0.1);
  }
  100% {
    box-shadow: 0 0 5px rgba(200, 155, 60, 0.2), 0 0 0 12px rgba(200, 155, 60, 0);
  }
}

/* Text Reveal (Mask Slide) */
@keyframes maskSlide {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes textRevealOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Smoke Drift Loop */
@keyframes smokeDrift {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-50px) scale(1.1);
    opacity: 0.2;
  }
  100% {
    transform: translateY(-100px) scale(1.2);
    opacity: 0;
  }
}

/* ==========================================================================
   SCROLL REVEAL STYLES (INTEGRATED WITH JS INTERSECTION OBSERVER)
   ========================================================================== */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-active {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* ==========================================================================
   MICRO-INTERACTIONS & HOVER ANIMATIONS
   ========================================================================== */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.75s;
}

.btn-shimmer:hover::after {
  left: 125%;
}

.pulse-gold {
  animation: goldShimmer 3s infinite;
}

/* Custom Cursor Hover States */
.custom-cursor.hovered {
  width: 60px;
  height: 60px;
  background-color: rgba(200, 155, 60, 0.1);
  border-color: var(--light-gold);
}

.custom-cursor-dot.hovered {
  width: 10px;
  height: 10px;
  background-color: var(--light-gold);
}

/* Glow effects on hover */
.glow-on-hover {
  transition: var(--transition-fast);
}

.glow-on-hover:hover {
  text-shadow: 0 0 15px rgba(231, 201, 128, 0.6);
  color: var(--light-gold) !important;
}

/* Interactive Border Animation (for Cards) */
.animated-border-box {
  position: relative;
}

.animated-border-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  transition: border-color 0.4s, width 0.4s, height 0.4s;
  pointer-events: none;
}

.animated-border-box:hover::after {
  border-color: var(--gold);
}

/* ==========================================================================
   ALPONA THEME SPECIAL KEYFRAMES
   ========================================================================== */

@keyframes rotateSlowly {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateSlowlyReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes sparkleFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.1);
  }
}

@keyframes footprintAppear {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: drop-shadow(0 0 0px var(--gold));
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--light-gold));
  }
  100% {
    opacity: 0.22;
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(200,155,60,0.15));
  }
}

.lakkhir-footprint.animated {
  animation: footprintAppear 1.5s forwards ease-out;
}