#preloader {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
display: flex;
align-items: center;
justify-content: center;
background: #0f1724; /* dark background */
z-index: 9999;
transition: opacity 300ms ease, visibility 300ms ease;
}


/* Container around the logo for effects */
.preloader-inner {
position: relative;
width: 300px;
height: 160px;
display: grid;
place-items: center;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}


/* Logo image */
.preloader-inner img.logo {
width: 82%;
height: auto;
display: block;
z-index: 2;
animation: pulse 1.8s ease-in-out infinite;
will-change: transform, opacity;
}


/* Shimmer layer */
.preloader-inner::after {
content: "";
position: absolute;
top: -40%;
left: -60%;
width: 220%;
height: 200%;
background: linear-gradient(120deg,
rgba(255,255,255,0.02) 0%,
rgba(255,255,255,0.08) 25%,
rgba(255,255,255,0.18) 50%,
rgba(255,255,255,0.08) 75%,
rgba(255,255,255,0.02) 100%);
transform: translateX(-100%) rotate(-10deg);
z-index: 3;
pointer-events: none;
animation: shimmer 1.8s linear infinite;
mix-blend-mode: screen;
opacity: 0.95;
}


/* small subtle pulse behind the logo (glow) */
.preloader-inner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.03), rgba(255,255,255,0));
z-index: 1;
filter: blur(6px);
animation: glow 1.8s ease-in-out infinite;
}
/* Animations */
@keyframes shimmer {
0% { transform: translateX(-100%) rotate(-10deg); }
100% { transform: translateX(100%) rotate(-10deg); }
}


@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.06); opacity: 0.92; }
100% { transform: scale(1); opacity: 1; }
}


@keyframes glow {
0% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 0.9; }
}


/* Hide preloader when .hidden applied */
#preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}


/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.preloader-inner::after,
.preloader-inner::before,
.preloader-inner img.logo {
animation: none !important;
}
}


/* Small responsive tweak */
@media (max-width:420px){
.preloader-inner{ width:120px; height:120px; }
}