/**
 * Hero Animations
 *
 * Comprehensive animations for all hero sections
 * Inspired by fleet and destinations hero animations
 *
 * @package Bali_Private_Jet
 * @version 1.0.0
 */

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

/* Fade in from bottom animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Pulse animation for background blobs */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

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

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

/* Glow animation for decorative lines */
@keyframes glow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Scale up animation */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-pulse {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-scale-up {
    animation: scaleUp 0.6s ease-out forwards;
}

/* Animation delays */
.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-600 {
    animation-delay: 600ms;
}

.animation-delay-800 {
    animation-delay: 800ms;
}

.animation-delay-1000 {
    animation-delay: 1000ms;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* ===================================
   FRONT-PAGE HERO ANIMATIONS
   =================================== */

/* Hero content container */
.min-h-screen .container > div {
    opacity: 1;
}

/* Hero heading animation */
.min-h-screen h1.font-serif {
    opacity: 1;
}

/* Hero subtitle animation */
.min-h-screen .text-lbyellow {
    opacity: 1;
}

/* Hero description animation */
.min-h-screen p.text-gray-300 {
    opacity: 1;
}

/* Hero CTA buttons animation */
.min-h-screen .flex-col,
.min-h-screen .flex-row {
    opacity: 1;
}

/* Hero background image animation */
.min-h-screen .absolute.inset-0 img {
    opacity: 1;
}

/* ===================================
   DESTINATIONS HERO ANIMATIONS
   =================================== */

/* Destinations hero - animations disabled */

.destinations-page .hero h1 {
    opacity: 1;
}

.destinations-page .hero .text-yellow-400 {
    opacity: 1;
}

.destinations-page .hero p.max-w-3xl {
    opacity: 1;
}

.destinations-page .hero .flex-wrap {
    opacity: 1;
}

.destinations-page .hero a.bg-yellow-400 {
    opacity: 1;
}

/* Decorative lines - glow animation disabled */
.destinations-page .hero .bg-gradient-to-r {
    opacity: 1;
}

/* ===================================
   FLEET ARCHIVE HERO ANIMATIONS
   =================================== */

/* Fleet hero - animations disabled */

.fleet-archive .hero h1 {
    opacity: 1;
}

.fleet-archive .hero .text-yellow-400 {
    opacity: 1;
}

.fleet-archive .hero p.max-w-3xl {
    opacity: 1;
}

.fleet-archive .hero a.bg-yellow-400 {
    opacity: 1;
}

/* Decorative lines - glow animation disabled */
.fleet-archive .hero .bg-gradient-to-r {
    opacity: 1;
}

/* ===================================
   CHARTER REQUEST HERO ANIMATIONS
   =================================== */

.charter-request-page h1.font-serif {
    opacity: 1;
}

.charter-request-page .text-lbyellow {
    opacity: 1;
}

.charter-request-page p.text-gray-300 {
    opacity: 1;
}

.charter-request-page .flex-col,
.charter-request-page .flex-row {
    opacity: 1;
}

/* ===================================
   CONTACT PAGE HERO ANIMATIONS
   =================================== */

.page-template-page-contact h1 {
    opacity: 1;
}

.page-template-page-contact .text-lbyellow {
    opacity: 1;
}

.page-template-page-contact p {
    opacity: 1;
}

.page-template-page-contact .flex-col,
.page-template-page-contact .flex-row {
    opacity: 1;
}

/* ===================================
   BLOG/ARCHIVE PAGE HERO ANIMATIONS
   =================================== */

.blog-page h1 {
    opacity: 1;
}

.blog-page .text-lbyellow {
    opacity: 1;
}

.blog-page p {
    opacity: 1;
}

.blog-page .space-y-6,
.blog-page .space-y-8 {
    opacity: 1;
}

/* ===================================
   HOVER ANIMATIONS
   =================================== */

/* CTA button hover effects */
.hero a.bg-yellow-400,
.hero a.bg-lbyellow,
.min-h-screen a.bg-lbyellow {
    transition: all 0.3s ease;
}

.hero a.bg-yellow-400:hover,
.min-h-screen a.bg-lbyellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 203, 48, 0.3);
}

.hero a.border-white:hover,
.min-h-screen a.border-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

/* ===================================
   RESPONSIVE ANIMATION ADJUSTMENTS
   =================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Simplify animations on mobile for performance */
@media (max-width: 767px) {
    /* Faster animations on mobile */
    .animate-fade-in-up,
    .animate-fade-in,
    .animate-slide-in-left,
    .animate-slide-in-right,
    .animate-scale-up {
        animation-duration: 0.5s !important;
    }

    /* Reduce animation delays on mobile */
    .animation-delay-200 {
        animation-delay: 100ms !important;
    }

    .animation-delay-400 {
        animation-delay: 200ms !important;
    }

    .animation-delay-600 {
        animation-delay: 300ms !important;
    }

    .animation-delay-800 {
        animation-delay: 400ms !important;
    }

    .animation-delay-1000 {
        animation-delay: 500ms !important;
    }

    /* Simplify hover effects on mobile */
    .hero a.bg-yellow-400:hover,
    .hero a.bg-lbyellow:hover,
    .hero a.border-white:hover,
    .min-h-screen a.bg-lbyellow:hover,
    .min-h-screen a.border-white:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ===================================
   LOADING STATE ANIMATIONS
   =================================== */

/* Prevent flash of unstyled content */
.hero,
.min-h-screen {
    opacity: 1;
}

/* Initial state for animated elements */
.hero h1,
.hero p,
.hero a,
.min-h-screen h1,
.min-h-screen p,
.min-h-screen .text-lbyellow {
    opacity: 1;
}

/* Show elements when animations are disabled */
.no-animations .hero h1,
.no-animations .hero p,
.no-animations .hero a,
.no-animations .min-h-screen h1,
.no-animations .min-h-screen p,
.no-animations .min-h-screen .text-lbyellow {
    opacity: 1 !important;
    animation: none !important;
}