/* ==========================================================================
   Gajanan Resort - Motion & Animation Stylesheet
   Scroll-Driven Animations, 3D Tilt Perspective, Micro-interactions & Keyframes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 245, 160, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 245, 160, 0.7);
  }
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.7);
    border-color: rgba(245, 158, 11, 0.7);
  }
}

@keyframes spinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes thrillFill {
  from { width: 0%; }
  to { width: var(--fill-target, 92%); }
}

/* --------------------------------------------------------------------------
   2. Motion Utilities
   -------------------------------------------------------------------------- */
.animate-float {
  animation: floatSlow 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3s infinite;
}

.animate-spin-slow {
  animation: spinSlow 20s linear infinite;
}

.animate-bounce {
  animation: bounceSubtle 2.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3. 3D Card Tilt Effects
   -------------------------------------------------------------------------- */
.tilt-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.tilt-inner {
  transform: translateZ(20px);
  transform-style: preserve-3d;
}

/* --------------------------------------------------------------------------
   4. Scroll-Driven Animations & Reveal
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes scrollRevealFade {
      from {
        opacity: 0;
        transform: translateY(35px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .scroll-reveal {
      animation: scrollRevealFade auto linear forwards;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }

  /* JavaScript IntersectionObserver Fallback Classes */
  .reveal-init {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal-init.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
}

/* --------------------------------------------------------------------------
   5. Interactive Mouse Hover Glare
   -------------------------------------------------------------------------- */
.interactive-card {
  position: relative;
  overflow: hidden;
}

.interactive-card::after {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 245, 160, 0.18) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.interactive-card:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Reduced Motion Preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}