/**
 * Homepage Creative Animations
 * Adds engaging entrance animations and hover effects to key sections
 */

/* ==========================================
   1. HERO SECTION ANIMATIONS
   ========================================== */

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

/* Hero text animations - trigger on scroll */
.hero-section.scroll-animate .hero-text-box .rlms-title-heading {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}

.hero-section.animate-in .hero-text-box .rlms-title-heading {
    opacity: 1;
    transform: translateY(0);
}

.hero-section.scroll-animate .hero-text-box b {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.hero-section.animate-in .hero-text-box b {
    opacity: 1;
    transform: translateY(0);
}

.hero-section.scroll-animate .hero-text-box p {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.6s, transform 0.8s ease-out 0.6s;
}

.hero-section.animate-in .hero-text-box p {
    opacity: 1;
    transform: translateY(0);
}

.hero-section.scroll-animate .hero-text-box a {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out 0.8s, transform 0.6s ease-out 0.8s;
}

.hero-section.animate-in .hero-text-box a {
    opacity: 1;
    transform: scale(1);
}

.hero-text-box a {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-text-box a:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(247, 46, 57, 0.3);
}

/* Hero video fade in */
.hero-video-box video {
    opacity: 1;
    transition: opacity 1s ease-out;
}

/* ==========================================
   2. AS SEEN ON SECTION
   ========================================== */

.as-seen-on-box-wrapper.scroll-animate {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.as-seen-on-box-wrapper.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.as-seen-on-box img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.as-seen-on-box:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* ==========================================
   3. BOY WITH TEXT SECTION
   ========================================== */

.boy-with-text img {
    transition: transform 0.5s ease;
}

.boy-with-text img:hover {
    transform: scale(1.02) translateY(-5px);
}

.boy-with-text a {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boy-with-text a:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(102, 202, 57, 0.3);
}

.boy-with-text svg {
    animation: float 3s ease-in-out infinite;
}

/* ==========================================
   4. STATISTICS SECTION
   ========================================== */

.statistics > p {
    opacity: 1;
}

.statistics-box:hover {
    transform: translateY(-10px) scale(1.05);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.statistics-box h1::after {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.statistics-box:hover h1::after {
    transform: scale(1.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Pulse animation for statistics numbers */
@keyframes pulse {
    0%, 100% {
        transform: translateX(13px) scale(1);
    }
    50% {
        transform: translateX(13px) scale(1.05);
    }
}

.statistics-box h1 {
    transition: color 0.3s ease;
}

.statistics-box:hover h1 {
    animation: pulse 0.6s ease-in-out;
}

/* ==========================================
   5. HOME PAGE VIDEO SECTION
   ========================================== */

.home-page-video-bg {
    opacity: 1;
}

.home-page-video-overlay {
    opacity: 1;
}

.hpv-item {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.hpv-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
}

/* ==========================================
   6. PLAN BOXES SECTION
   ========================================== */

.plan-box-main .rlms-title-heading,
.plan-box-main b,
.plan-box-main p {
    opacity: 1;
}

.plan-box {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.plan-box:hover {
    transform: translateY(-15px) rotate(-1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.plan-box-head svg {
    transition: transform 0.3s ease;
}

.plan-box:hover .plan-box-head svg {
    transform: translateX(-50%) scale(1.1);
}

.plan-box-body ul li {
    position: relative;
    transition: transform 0.3s ease, color 0.3s ease;
}

.plan-box:hover .plan-box-body ul li {
    transform: translateX(5px);
}

.plan-box-body img {
    transition: transform 0.5s ease, filter 0.3s ease;
}

.plan-box:hover .plan-box-body img {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.1);
}

.plan-box-footer a,
.plan-box-footer button {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.plan-box-footer a:hover,
.plan-box-footer button:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}

/* ==========================================
   7. FLOATING ANIMATION FOR KEY ELEMENTS
   ========================================== */

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

/* Apply floating animation to decorative SVGs */
.boy-with-text svg {
    animation: float 3s ease-in-out infinite;
}

/* ==========================================
   8. SCROLL-TRIGGERED ANIMATIONS
   ========================================== */

/* Base state for elements that animate on scroll */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Specific scroll animations for sections */
.boy-with-text-bg.scroll-animate .boy-with-text img {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.boy-with-text-bg.animate-in .boy-with-text img {
    opacity: 1;
    transform: translateX(0);
}

.boy-with-text-bg.scroll-animate .rlms-title-box > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.boy-with-text-bg.animate-in .rlms-title-box > * {
    opacity: 1;
    transform: translateY(0);
}

/* Statistics section scroll animation */
.statistics.scroll-animate .statistics-box {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.statistics.animate-in .statistics-box {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Plan boxes scroll animation */
.plan-box-main.scroll-animate .plan-box {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.plan-box-main.animate-in .plan-box {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Video panel scroll animation */
.home-page-video.scroll-animate .hpv-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.home-page-video.animate-in .hpv-item {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   9. RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    /* Reduce animation complexity on mobile for performance */
    .statistics-box:hover {
        transform: translateY(-5px) scale(1.02);
    }

    .plan-box:hover {
        transform: translateY(-8px);
    }

    /* Disable some intensive animations on mobile */
    .boy-with-text img:hover,
    .plan-box:hover .plan-box-body img {
        transform: none;
    }
}

/* ==========================================
   10. REDUCED MOTION SUPPORT
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}