/* ============================================
   HOMEPAGE VIBRANT COLORS
   Making the homepage more colorful and lively
   Version: 1.0.0
   ============================================ */

/* ============= ENHANCED GRADIENTS ============= */
.text-gradient {
    background: linear-gradient(135deg, #42A5F5 0%, #7E57C2 50%, #EC407A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
    background-size: 200% 200%;
}

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

/* ============= COLORFUL SHADOWS ============= */
.trust-badge--safe {
    box-shadow: 0 4px 15px rgba(102, 187, 106, 0.25);
}

.trust-badge--safe:hover {
    box-shadow: 0 6px 20px rgba(102, 187, 106, 0.35);
}

.trust-badge--quality {
    box-shadow: 0 4px 15px rgba(255, 167, 38, 0.25);
}

.trust-badge--quality:hover {
    box-shadow: 0 6px 20px rgba(255, 167, 38, 0.35);
}

.trust-badge--fun {
    box-shadow: 0 4px 15px rgba(236, 64, 122, 0.25);
}

.trust-badge--fun:hover {
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.35);
}

/* ============= ANIMATED BACKGROUNDS ============= */
.hero-kids {
    position: relative;
    background-size: 300% 300%;
    animation: gradient-flow 20s ease infinite;
}

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

/* ============= GLOW EFFECTS ============= */
.hero-kids__search-btn {
    position: relative;
}

.hero-kids__search-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #42A5F5, #7E57C2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(8px);
}

.hero-kids__search:hover .hero-kids__search-btn::before,
.hero-kids__search:focus-within .hero-kids__search-btn::before {
    opacity: 0.4;
}

/* ============= ICON GLOW ON HOVER ============= */
.stat-kids-card__icon {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(66, 165, 245, 0.25));
    transition: filter 0.3s ease;
}

.stat-kids-card:hover .stat-kids-card__icon {
    filter: drop-shadow(0 4px 15px rgba(66, 165, 245, 0.4));
}

.feature-kids-card__icon {
    position: relative;
    transition: all 0.4s ease;
}

.feature-kids-card:hover .feature-kids-card__icon {
    filter: brightness(1.05) drop-shadow(0 4px 12px rgba(66, 165, 245, 0.3));
}

/* ============= PATH CARDS RAINBOW GLOW ============= */
.path-kids-card--short {
    background: linear-gradient(135deg, #ffffff 0%, #e8f4ff 50%, #e8fff5 100%);
}

.path-kids-card--short:hover {
    box-shadow: var(--kids-shadow-xl), 0 0 50px rgba(94, 168, 255, 0.25);
}

.path-kids-card--long {
    background: linear-gradient(135deg, #ffffff 0%, #ffe8f5 50%, #f5e8ff 100%);
}

.path-kids-card--long:hover {
    box-shadow: var(--kids-shadow-xl), 0 0 50px rgba(255, 131, 192, 0.25);
}

/* ============= BLOG CARDS COLOR ACCENT ============= */
.blog-kids-card__link {
    position: relative;
    overflow: hidden;
}

.blog-kids-card__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5ea8ff 0%, #a883ff 50%, #ff83c0 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.blog-kids-card__link:hover::before {
    transform: scaleX(1);
}

.blog-kids-card__category {
    background: linear-gradient(135deg, #5ea8ff 0%, #3d8fff 100%);
    box-shadow: 0 4px 15px rgba(61, 143, 255, 0.4);
}

/* ============= CONTINUE WATCHING VIBRANCE ============= */
.continue-kids-card__progress-bar {
    background: linear-gradient(90deg, #5ea8ff 0%, #a883ff 50%, #ff83c0 100%);
    box-shadow: 0 0 10px rgba(94, 168, 255, 0.5);
}

.continue-kids-card__play {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 244, 255, 0.95) 100%);
    box-shadow: 0 4px 20px rgba(61, 143, 255, 0.3);
}

.continue-kids-card:hover .continue-kids-card__play {
    box-shadow: 0 6px 30px rgba(61, 143, 255, 0.5);
}

/* ============= SEASON BADGE ENHANCEMENT ============= */
.hero-kids__season-badge {
    background: linear-gradient(135deg, #7E57C2 0%, #EC407A 100%);
    box-shadow: 0 4px 20px rgba(126, 87, 194, 0.35);
}

/* ============= CTA ICON PULSE ============= */
.cta-kids__icon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2);
    animation: bounce 2s ease-in-out infinite, icon-glow 3s ease-in-out infinite;
}

@keyframes icon-glow {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 40px rgba(255, 255, 255, 0.4);
    }
}

/* ============= BUTTON RAINBOW SHIMMER ============= */
.btn-kids--white {
    background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 6px 0 rgba(255, 255, 255, 0.6), 0 8px 25px rgba(94, 168, 255, 0.2);
}

.btn-kids--white:hover {
    box-shadow: 0 9px 0 rgba(255, 255, 255, 0.6), 0 12px 35px rgba(94, 168, 255, 0.3);
}

.btn-kids--glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-kids--glass:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ============= SEARCH BAR GLOW ============= */
.hero-kids__search-icon {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.hero-kids__search:hover .hero-kids__search-icon,
.hero-kids__search:focus-within .hero-kids__search-icon {
    background: linear-gradient(135deg, #BBDEFB 0%, #90CAF9 100%);
}

/* ============= SPARKLE EFFECT ============= */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.feature-kids-card:hover::before {
    content: '✨';
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 1.5rem;
    animation: sparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* ============= RAINBOW UNDERLINE ============= */
.section-title:hover .text-gradient {
    animation: gradient-shift 2s ease infinite;
}

/* ============= COLORFUL FOCUS STATES ============= */
.btn-kids:focus-visible {
    outline: 3px solid #FFA726;
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(255, 167, 38, 0.15);
}

.feature-kids-card:focus-visible,
.path-kids-card:focus-visible,
.step-kids-card:focus-visible {
    outline: 3px solid #42A5F5;
    outline-offset: 4px;
    box-shadow: var(--kids-shadow-xl), 0 0 0 8px rgba(66, 165, 245, 0.12);
}

/* ============= SECTION BACKGROUNDS ============= */
.features-kids {
    background: linear-gradient(135deg, #ffffff 0%, #F5F9FF 50%, #ffffff 100%);
}

.paths-kids {
    background: linear-gradient(135deg, #F5F9FF 0%, #FFF5F9 50%, #F5F9FF 100%);
}

.steps-kids {
    background: linear-gradient(135deg, #F5F9FF 0%, #ffffff 50%, #F5F9FF 100%);
}

/* ============= FLOATING PARTICLES ============= */
.hero-kids::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(66, 165, 245, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(126, 87, 194, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ============= NUMBER ANIMATION ============= */
@keyframes number-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.stat-kids-card:hover .stat-kids-card__number {
    animation: number-pop 0.6s ease-in-out;
}

/* ============= RESPONSIVE ADJUSTMENTS ============= */
@media (max-width: 768px) {
    .hero-kids {
        animation: none; /* Reduce complexity on mobile */
    }
    
    .feature-kids-card:hover::before {
        display: none; /* Remove sparkle on mobile */
    }
}

/* ============= REDUCED MOTION ============= */
@media (prefers-reduced-motion: reduce) {
    .text-gradient,
    .hero-kids,
    .cta-kids__icon {
        animation: none !important;
    }
    
    .stat-kids-card:hover .stat-kids-card__number {
        animation: none !important;
    }
}

/* ============= END OF VIBRANT COLORS ============= */