/* Custom CSS Variables and Keyframes */
:root {
    /* Base Palette */
    --edu-blue: #1A73E8;
    --edu-green: #34A853;
    --edu-yellow: #FBBC04;
    --edu-red: #EA4335;
    --text-dark: #202124;
    --text-light: #5f6368;
    --text-lighter: #70757a;
    --bg-white: #ffffff;
    --bg-light-gray: #f8f9fa;
    --bg-soft-blue: #e8f0fe;
    --border-color: #dadce0;
    --border-color-light: #e8eaed;

    /* Shadows */
    --shadow-color-light: rgba(60, 64, 67, 0.1);
    --shadow-color-medium: rgba(60, 64, 67, 0.15);
    --shadow-color-hover: rgba(60, 64, 67, 0.25);

    /* Transitions & Animations */
    --transition-speed-fast: 0.2s;
    --transition-speed-medium: 0.35s;
    --transition-speed-slow: 0.6s;
    --easing-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-curve-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    scroll-behavior: smooth;
}

/* Animation Keyframes */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtlePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}



/* Base styles */


/* Apply Google Sans to specific elements for branding consistency */
.font-google-sans {
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
}

/* Custom styles for pseudo-elements and complex animations/gradients */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 5px;
    background: linear-gradient(90deg, var(--edu-blue), var(--edu-green), var(--edu-yellow), var(--edu-red));
    border-radius: 3px;
    transition: width var(--transition-speed-medium) var(--easing-curve);
}

.section-title:hover::after {
    width: 130px;
}

.learn-more-button {
    background-image: linear-gradient(to right, var(--bg-white) 50%, var(--edu-blue) 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: var(--edu-blue);
    transition: color var(--transition-speed-medium) var(--easing-curve),
        background-position var(--transition-speed-medium) var(--easing-curve),
        transform var(--transition-speed-fast) var(--easing-curve),
        box-shadow var(--transition-speed-medium) var(--easing-curve);
}

.learn-more-button:hover {
    background-position: right bottom;
    color: var(--bg-white);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.learn-more-button.primary {
    background-image: linear-gradient(to right, var(--edu-blue) 50%, var(--edu-green) 50%);
    background-position: left bottom;
    color: var(--bg-white);
    border-color: var(--edu-blue);
}

.learn-more-button.primary:hover {
    background-position: right bottom;
    color: var(--bg-white);
    border-color: var(--edu-green);
    box-shadow: 0 4px 15px rgba(52, 168, 83, 0.35);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 100%;
    height: 180%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(30deg);
    z-index: 0;
    opacity: 0.7;
    filter: blur(15px);
    transition: transform var(--transition-speed-slow) ease-out;
}

.cta-section:hover::before {
    transform: rotate(40deg) scale(1.1);
}

/* Animation delays for staggered effects */
.animate-delay-1 {
    animation-delay: 0.1s;
}

.animate-delay-2 {
    animation-delay: 0.2s;
}

.animate-delay-3 {
    animation-delay: 0.3s;
}

.animate-delay-4 {
    animation-delay: 0.4s;
}

.animate-delay-5 {
    animation-delay: 0.5s;
}

.animate-delay-6 {
    animation-delay: 0.6s;
}

.animate-delay-7 {
    animation-delay: 0.7s;
}

.animate-delay-8 {
    animation-delay: 0.8s;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }

    .animate-fade-in-slide-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-logo-image,
    .benefit-item,
    .edition-card,
    .learn-more-button,
    .cta-button,
    .feature-icon,
    .benefit-icon,
    .section-title::after,
    .cta-section::before {
        transition: none !important;
        animation: none !important;
    }

    .hero-logo-image:hover,
    .benefit-item:hover,
    .benefit-icon:hover,
    .edition-card:hover,
    .feature-icon:hover,
    .learn-more-button:hover,
    .cta-button:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: var(--border-color-light) !important;
    }

    .learn-more-button {
        background-position: left bottom !important;
    }

    .learn-more-button:hover {
        color: var(--edu-blue) !important;
    }

    .learn-more-button.primary {
        color: var(--bg-white) !important;
    }

    .learn-more-button.primary:hover {
        color: var(--bg-white) !important;
    }

    .cta-section:hover::before {
        transform: rotate(30deg) scale(1) !important;
    }
}

/* Mobile responsive improvements */
@media (max-width: 640px) {
    .mobile-menu {
        max-width: 100%;
    }
}

/* Ensure header is always on top */
header {
    z-index: 30;
}