.splash-screen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
min-height: 100vh;
min-height: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 1;
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: linear-gradient(135deg, #0a0f1e 0%, #1a1f2e 50%, #0a0f1e 100%) !important;
overflow: hidden;
}

@supports (padding: max(0px)) {
    .splash-screen {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

.splash-screen::-webkit-scrollbar {
display: none;
}

.splash-screen {
-ms-overflow-style: none;
scrollbar-width: none;
}

body.splash-active {
overflow: hidden;
}

body.splash-active::-webkit-scrollbar {
display: none;
}

body.splash-active {
-ms-overflow-style: none;
scrollbar-width: none;
}

.splash-background {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background: linear-gradient(135deg, #0a0f1e 0%, #1a1f2e 25%, #2d3748 50%, #1a1f2e 75%, #0a0f1e 100);
filter: blur(0.5px);
transform: scale(1.01);
animation: backgroundPulse 3s ease-in-out infinite;
}

.splash-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: 
radial-gradient(circle at 50% 50%, rgba(74, 158, 255, 0.15) 0%, rgba(74, 158, 255, 0.05) 50%, transparent 70%),
radial-gradient(circle at 20% 80%, rgba(74, 158, 255, 0.08) 0%, transparent 40%),
radial-gradient(circle at 80% 20%, rgba(74, 158, 255, 0.08) 0%, transparent 40%);
animation: coldAura 4s ease-in-out infinite;
}

.particles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}


.splash-screen.fade-out {
opacity: 0;
pointer-events: none;
}

.splash-content {
text-align: center;
position: relative;
z-index: 2;
}

.splash-logo {
margin-bottom: 8px;
animation: logoSlideUp 0.6s ease-out;
display: flex;
justify-content: center;
align-items: center;
}

.logo-image {
width: 80px;
height: 80px;
border-radius: 12px;
filter: drop-shadow(0 0 30px rgba(74, 158, 255, 0.6)) drop-shadow(0 0 60px rgba(74, 158, 255, 0.3));
animation: logoGlow 2s ease-in-out infinite alternate;
}

.splash-title {
font-family: 'Rubik', sans-serif;
font-size: 2.8rem;
font-weight: 900;
color: #ffffff;
margin-bottom: 16px;
text-shadow: 
0 0 20px rgba(74, 158, 255, 0.8),
0 0 40px rgba(74, 158, 255, 0.5),
0 0 60px rgba(74, 158, 255, 0.3),
0 4px 8px rgba(0, 0, 0, 0.8);
letter-spacing: -0.5px;
animation: titleSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both, titleGlow 3s ease-in-out infinite alternate;
}

.loading-bar {
width: 200px;
height: 4px;
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
overflow: hidden;
margin: 0 auto;
animation: lineSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
box-shadow: inset 0 0 10px rgba(74, 158, 255, 0.3), 0 0 20px rgba(74, 158, 255, 0.2);
}

.loading-progress {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #4a9eff, #3b8eef, #4a9eff);
border-radius: 2px;
animation: loading 1.5s ease-out 0.9s forwards, progressGlow 2s ease-in-out infinite;
box-shadow: 0 0 20px rgba(74, 158, 255, 0.8), 0 0 40px rgba(74, 158, 255, 0.4);
}

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

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

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

@keyframes loading {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

@keyframes backgroundPulse {
0%, 100% {
opacity: 1;
transform: scale(1.01);
}
50% {
opacity: 0.8;
transform: scale(1.02);
}
}

@keyframes coldAura {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.1);
}
}

@keyframes logoGlow {
0% {
filter: drop-shadow(0 0 30px rgba(74, 158, 255, 0.6)) drop-shadow(0 0 60px rgba(74, 158, 255, 0.3));
}
100% {
filter: drop-shadow(0 0 50px rgba(74, 158, 255, 1)) drop-shadow(0 0 100px rgba(74, 158, 255, 0.5));
}
}

@keyframes titleGlow {
0% {
text-shadow: 
0 0 20px rgba(74, 158, 255, 0.8),
0 0 40px rgba(74, 158, 255, 0.5),
0 0 60px rgba(74, 158, 255, 0.3),
0 4px 8px rgba(0, 0, 0, 0.8);
}
100% {
text-shadow: 
0 0 30px rgba(74, 158, 255, 1),
0 0 60px rgba(74, 158, 255, 0.8),
0 0 90px rgba(74, 158, 255, 0.4),
0 4px 8px rgba(0, 0, 0, 0.8);
}
}

@keyframes progressGlow {
0%, 100% {
box-shadow: 0 0 20px rgba(74, 158, 255, 0.8), 0 0 40px rgba(74, 158, 255, 0.4);
}
50% {
box-shadow: 0 0 30px rgba(74, 158, 255, 1), 0 0 60px rgba(74, 158, 255, 0.6), 0 0 90px rgba(74, 158, 255, 0.3);
}
}

@media (max-width: 480px) {
.splash-title {
font-size: 2.2rem;
}

.logo-image {
width: 60px;
height: 60px;
}

.loading-bar {
width: 160px;
}
}