/* Main Loader Container */
.encom-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9); /* translucent black */
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    overflow: hidden;
}

.encom-loader.fade-out {
    opacity: 1;
    pointer-events: none;
}

.encom-loader.hidden {
    display: none;
}

/* Hide terminal elements while loader is active
body > .container, body > .container * {
    visibility: hidden;
}

Hide main page until loader finishes loading
body.loading-complete > .container, body.loading-complete > .container * {
    visibility: visible;
}
*/

/* Hide terminal while loader is active */
.encom-loader:not(.hidden) ~ .container {
    display: none;
}


/* Boot Log Output (background effect) */
.loader-log {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* hazy black layer */
    color: #ff004c80;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    padding: 10px;
    opacity: 0.5;
    overflow: hidden;
    z-index: 1; /* below main content */
}

#loader-log {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 100%;
    overflow-y: hidden;
    opacity: 0.8;
}

/* Main Loader Content (centered above logs) */
.loader-content {
    position: relative;
    z-index: 10;
    text-align: center;
    font-family: 'Audiowide', cursive;
    /* background: rgba(0, 0, 0, 0.4);  hazy translucent panel */
    background: transparent;
    padding: 20px 40px;
    border-radius: 0;
    box-shadow: none;
}

/* Title */
.loader-title {
    font-size: 3rem;
    color: #05d9e8;
    text-shadow: 0 0 20px rgba(5, 217, 232, 0.8);
    margin-bottom: 20px;
    animation: glitchTitle 2s infinite;
}

/* Subtitle */
.loader-subtitle {
    font-size: 1.2rem;
    color: #ff2a6d;
    text-shadow: 0 0 10px rgba(255, 42, 109, 0.6);
    margin-bottom: 40px;
    font-family: 'Fira Code', monospace;
    animation: subtitleGlitch 3s infinite;
}

/* Progress Bar */
.progress-container {
    width: 400px;
    height: 4px;
    background: rgba(5, 217, 232, 0.2);
    border: 1px solid rgba(5, 217, 232, 0.4);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto 20px;
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(5, 217, 232, 0.8), rgba(255, 42, 109, 0.8));
    box-shadow: 0 0 20px rgba(5, 217, 232, 0.8);
    animation: progressFill 2.5s ease-out forwards;
    position: relative;
    overflow: hidden;
}

/* Status text */
.loader-status {
    font-size: 0.9rem;
    color: #d1f7ff;
    font-family: 'Fira Code', monospace;
    letter-spacing: 2px;
    animation: statusBlink 1.5s infinite;
}

/* Animations */
@keyframes glitchTitle {
    0%, 90%, 100% { transform: translate(0); text-shadow: 0 0 20px rgba(5, 217, 232, 0.8); }
    92% { transform: translate(-2px, 2px); }
    94% { transform: translate(2px, -2px); }
    96% { transform: translate(-2px, -2px); }
}

@keyframes subtitleGlitch {
    0%, 95%, 100% { opacity: 1; transform: skew(0deg); }
    96% { opacity: 0.8; transform: skew(-5deg); }
    97% { opacity: 1; transform: skew(5deg); }
    98% { opacity: 0.9; transform: skew(-3deg); }
}

@keyframes progressFill { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes statusBlink { 0%, 49%, 100% { opacity: 1; } 50%, 99% { opacity: 0.3; } }

/* Mobile Responsive */
@media (max-width: 768px) {
    .loader-title { font-size: 2rem; }
    .loader-subtitle { font-size: 1rem; }
    .progress-container { width: 80%; }
}