/* 
 * Sequoia Boat Rentals - Animations Stylesheet
 * Contains all custom animations for enhanced user experience
 */

/* ===== BASIC ANIMATIONS ===== */

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade Up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== WATER ANIMATIONS ===== */

/* Water Wave */
@keyframes waterWave {
  0% {
    transform: translateX(0) translateY(0) rotate(0);
  }
  25% {
    transform: translateX(2px) translateY(-2px) rotate(1deg);
  }
  50% {
    transform: translateX(-1px) translateY(1px) rotate(-1deg);
  }
  75% {
    transform: translateX(1px) translateY(1px) rotate(0.5deg);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 120, 168, 0.3);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 120, 168, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 120, 168, 0);
    transform: scale(1);
  }
}

/* Boat Float */
@keyframes boatFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ===== BUTTON ANIMATIONS ===== */

/* Button Pulse */
@keyframes buttonPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
  }
}

/* Button Shine */
@keyframes buttonShine {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 300px;
  }
}

/* ===== MAP & CARD ANIMATIONS ===== */

/* Map Marker Bounce */
@keyframes markerBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Card Hover Animation */
@keyframes cardHover {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-medium);
  }
  100% {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-large);
  }
}

/* ===== FORM ANIMATIONS ===== */

/* Input Focus Animation */
@keyframes inputFocus {
  0% {
    border-color: var(--gray-300);
  }
  100% {
    border-color: var(--primary);
  }
}

/* Submit Button Animation */
@keyframes submitButton {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-3px);
  }
  20% {
    transform: translateX(3px);
  }
  30% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(3px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ===== ANIMATION UTILITY CLASSES ===== */

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Animation Durations */
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }
.duration-1500 { animation-duration: 1500ms; }

/* Direct Animation Classes */
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-fade-up { animation: fadeUp 0.5s ease-out forwards; }
.animate-fade-down { animation: fadeDown 0.5s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.5s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.5s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.5s ease-out forwards; }
.animate-water-wave { animation: waterWave 3s ease-in-out infinite; }
.animate-ripple { animation: ripple 1.5s ease-out infinite; }
.animate-boat-float { animation: boatFloat 3s ease-in-out infinite; }
.animate-button-pulse { animation: buttonPulse 2s infinite; }
.animate-marker-bounce { animation: markerBounce 1s ease-in-out infinite; }
.animate-card-hover { animation: cardHover 0.3s ease-out forwards; }

/* Applying Animations to Elements */

/* Lake Card Animation */
.lake-card {
  transition: all 0.3s ease;
}

.lake-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-large);
}

.lake-card .lake-image img {
  transition: all 0.5s ease;
}

.lake-card:hover .lake-image img {
  transform: scale(1.05);
}

/* Button Animations */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary:after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotateZ(60deg) translate(-5em, 7.5em);
  opacity: 0;
  transition: opacity 0.3s, transform 0.5s;
}

.btn-primary:hover:after {
  opacity: 1;
  transform: rotateZ(60deg) translate(1em, -9em);
}

/* Search and Filter Animation */
.search-group input,
.filter-group select {
  transition: all 0.3s ease;
}

.search-group input:focus,
.filter-group select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(0, 120, 168, 0.1);
}

/* Map Animation */
.map-marker {
  animation: markerBounce 1s ease-in-out infinite;
}

/* Form Animations for Contact & Booking Pages */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  animation: inputFocus 0.3s ease forwards;
}

.btn[type="submit"]:hover {
  animation: buttonPulse 2s infinite;
}

/* Hero Section Animation */
.hero-bg {
  transition: transform 8s ease;
}

.hero-section:hover .hero-bg {
  transform: scale(1.05);
}

/* Floating Icons Animation */
.feature-icon, .service-icon {
  animation: boatFloat 3s ease-in-out infinite;
}