/* =========================================
MOBILE-OPTIMIZED SPLASH / LOADING SCREEN
========================================= */

@media (max-width: 768px) {

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height: 100%;
overflow: hidden; /* lock scrolling */
}

body {
font-family: 'Poppins', sans-serif;
background-color: #030a29;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}

/* Container */
.container {
width: 100%;
height: 100vh;
max-width: 480px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 16px;
}

/* Logo */
.logo-img {
width: 60%;
max-width: 180px;
height: auto;
margin-bottom: 14px;
object-fit: contain;
}

/* Text */
.main-text {
text-align: center;
font-size: 15px;
line-height: 1.4;
text-transform: uppercase;
max-width: 90%;
margin-bottom: 12px;
font-weight: 600;
}

/* Illustration Area */
.illustration-area {
flex: 1; /* fills remaining space */
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
}

/* Illustration */
.illustration-area img {
width: 100%;
width: 51rem;
max-height: 56rem;
object-fit: contain;
animation: slideUp 1s ease-out;
margin-bottom: -5rem;
}
}

/* Animation */
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Loader */
.loader {
width: 24px;
height: 24px;
border: 3px solid rgba(255,255,255,0.3);
border-bottom-color: #fff;
border-radius: 50%;
animation: rotation 1s linear infinite;
margin-bottom: 10px;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }