/* Splash Screen Components Styles */

/* Splash Screen Container */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}

/* Animated Background */
.splash-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* African-inspired gradient overlay */
.splash-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #000000, #111827, #000000);
}

/* Moving background elements with African colors */
.splash-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.splash-element {
    position: absolute;
    border-radius: 9999px;
    filter: blur(48px);
    animation: pulse 2s ease-in-out infinite;
}

.splash-element.yellow {
    top: 25%;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background-color: #facc15;
}

.splash-element.green {
    bottom: 25%;
    right: 25%;
    width: 16rem;
    height: 16rem;
    background-color: #16a34a;
    animation-delay: 1s;
}

.splash-element.red {
    top: 50%;
    right: 33.333333%;
    width: 12rem;
    height: 12rem;
    background-color: #dc2626;
    animation-delay: 0.5s;
}

/* Subtle pattern overlay */
.splash-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: 
        radial-gradient(circle at 25% 25%, #fdd100 2px, transparent 2px), 
        radial-gradient(circle at 75% 75%, #16a34a 2px, transparent 2px);
    background-size: 50px 50px;
}

/* Main Content */
.splash-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

/* Logo Container */
.splash-logo-container {
    margin-bottom: 2rem;
}

.splash-logo-wrapper {
    position: relative;
    display: inline-block;
}

/* Multi-layered glow effect */
.splash-glow {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    filter: blur(48px);
    animation: pulse 2s ease-in-out infinite;
}

.splash-glow.yellow {
    width: 14rem;
    height: 14rem;
    background-color: rgba(253, 209, 0, 0.3);
}

.splash-glow.green {
    width: 13rem;
    height: 13rem;
    background-color: rgba(22, 163, 74, 0.15);
    filter: blur(32px);
    animation-delay: 0.3s;
}

.splash-glow.red {
    width: 12rem;
    height: 12rem;
    background-color: rgba(220, 38, 38, 0.1);
    filter: blur(24px);
    animation-delay: 0.6s;
}

/* Logo Image */
.splash-logo {
    position: relative;
    width: 12rem;
    height: 12rem;
    margin: 0 auto;
    animation: bounce 1s ease-in-out infinite;
    filter: 
        drop-shadow(0 0 80px rgba(253, 209, 0, 0.9)) 
        drop-shadow(0 0 160px rgba(253, 209, 0, 0.5)) 
        drop-shadow(0 0 240px rgba(22, 163, 74, 0.3));
    object-fit: contain;
    width: auto;
    height: auto;
    max-width: 192px;
    max-height: 192px;
}

/* Bottom gradient fade */
.splash-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to top, #000000, transparent);
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}

/* Transition Effects */
.splash-fade-out {
    opacity: 0;
    transform: scale(1.05);
    transition: all 0.8s ease-out;
}

/* Responsive Design */
@media (max-width: 640px) {
    .splash-logo {
        width: 8rem;
        height: 8rem;
        max-width: 128px;
        max-height: 128px;
    }
    
    .splash-glow.yellow {
        width: 10rem;
        height: 10rem;
    }
    
    .splash-glow.green {
        width: 9rem;
        height: 9rem;
    }
    
    .splash-glow.red {
        width: 8rem;
        height: 8rem;
    }
    
    .splash-element.yellow {
        width: 16rem;
        height: 16rem;
    }
    
    .splash-element.green {
        width: 12rem;
        height: 12rem;
    }
    
    .splash-element.red {
        width: 8rem;
        height: 8rem;
    }
}