html {
    scroll-behavior: smooth;
}

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

.hero .fa-chevron-down {
    animation: custom-bounce 2s infinite;
}

@media (max-width: 640px) {
    .hero-content {
        padding-top: 5rem !important;
    }
}

/* Kid-Friendly Floating Elements */
@keyframes float-1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) rotate(5deg);
    }
    66% {
        transform: translateY(10px) rotate(-3deg);
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(-8deg);
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-15px);
    }
    75% {
        transform: translateY(15px);
    }
}

@keyframes float-4 {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    33% {
        transform: translateY(-10px) translateX(5px);
    }
    66% {
        transform: translateY(5px) translateX(-8px);
    }
}

@keyframes float-5 {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-25px) scale(1.1);
    }
}

.floating-shape {
    pointer-events: none;
    z-index: 1;
}

.shape-1 {
    top: 20%;
    left: 10%;
    animation: float-1 6s ease-in-out infinite;
}

.shape-2 {
    top: 60%;
    right: 15%;
    animation: float-2 8s ease-in-out infinite;
}

.shape-3 {
    top: 35%;
    left: 70%;
    animation: float-3 7s ease-in-out infinite;
}

.shape-4 {
    bottom: 30%;
    left: 20%;
    animation: float-4 9s ease-in-out infinite;
}

.shape-5 {
    top: 80%;
    right: 60%;
    animation: float-5 5s ease-in-out infinite;
}

/* Enhanced Logo Effects */
.logo-container {
    position: relative;
}

.logo-glow {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    transition: all 0.3s ease;
}

.logo-glow:hover {
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    transform: scale(1.05);
}

/* Program Cards Animation */
.program-card {
    perspective: 1000px;
}

.card-container {
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.program-card:hover .card-container {
    transform: translateY(-10px);
}

.program-image {
    transition: all 0.8s ease;
    filter: brightness(1.1);
}

.program-card:hover .program-image {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(1.2) saturate(1.2);
}

/* Icon Float Animation */
@keyframes icon-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(10deg);
    }
}

.icon-float {
    animation: icon-float 3s ease-in-out infinite;
}

/* Feature Cards Enhancement */
.feature-card {
    perspective: 1000px;
}

.feature-card:hover .card {
    transform: rotateY(5deg) rotateX(5deg);
}

/* Enhanced Button Effects */
.cta-container {
    position: relative;
}

.cta-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #dda0dd);
    background-size: 400% 400%;
    border-radius: 50px;
    filter: blur(5px);
    opacity: 0;
    z-index: -1;
    animation: gradient-animation 4s ease infinite;
    transition: opacity 0.3s ease;
}

.cta-container:hover::before {
    opacity: 1;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Text Shadow for Hero */
.text-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Fun Sparkle Effects */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.sparkle {
    animation: sparkle 2s infinite;
}

/* Enhanced Section Backgrounds */
.section-bg-pattern {
    background-image: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 40% 40%, rgba(120, 219, 226, 0.1) 0%, transparent 50%);
}

/* Program Cards Color Shadows */
.program-card:hover .card {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 
                0 0 30px rgba(var(--card-color), 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .floating-shape {
        opacity: 0.3;
        transform: scale(0.7);
    }
    
    .program-card:hover .card-container {
        transform: translateY(-5px);
    }
    
    .shape-1, .shape-2, .shape-3, .shape-4, .shape-5 {
        animation-duration: 4s;
    }
}

/* Enhanced Mission Cards */
.mission-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mission-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Fun Loading Animation for Images */
@keyframes image-load {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.program-image {
    animation: image-load 0.6s ease-out;
}

/* Enhanced Gradient Text */
.gradient-text {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover Effects for Benefits */
.benefit-item {
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

/* Enhanced CTA Section */
.cta-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 400%;
    animation: gradient-bg 8s ease infinite;
}

@keyframes gradient-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Fun shadow effects */
.fun-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
                0 0 20px rgba(255, 0, 150, 0.1),
                0 0 40px rgba(0, 255, 255, 0.05);
}

/* Wiggle animation for fun elements */
@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

.wiggle:hover {
    animation: wiggle 0.8s ease-in-out;
}

/* Pulsing border effect */
@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.pulse-border {
    animation: pulse-border 2s infinite;
}