body.loading {
    overflow: hidden;
}

    #loader {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader-content {
        text-align: center;
    }

    .breathing {
        width: 280px;
        height: auto;
        display: block;
        margin: 0 auto;
        animation: logo-pulse 1.5s ease-in-out infinite;
        will-change: transform, filter;
    }

    .line-container {
        width: 400px;
        height: 1px;
        background: rgba(0, 172, 255, 0.1);
        margin: 40px auto;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 172, 255, 0.15);
    }

    .moving-line {
        position: absolute;
        width: 200px;
        height: 100%;
        background: linear-gradient(90deg, transparent, #00d9ff, #00acff, transparent);
        left: -200px;
        animation: sweep 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    }

    .status-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .pulse-dot {
        width: 8px;
        height: 8px;
        background: #00d9ff;
        border-radius: 50%;
        animation: dot-blink 1s infinite alternate;
    }

    .loading-sub {
        color: #1c2a38;
        font-family: 'Arial', sans-serif;
        font-size: 0.7rem;
        letter-spacing: 6px;
        margin: 0;
    }

    @keyframes logo-pulse {
        0% {
            transform: scale(1);
            filter: drop-shadow(0 0 10px rgba(0, 172, 255, 0.15)) brightness(1);
        }
        50% {
            transform: scale(1.03);
            filter: drop-shadow(0 0 20px rgba(0, 172, 255, 0.5)) brightness(1.1);
        }
        100% {
            transform: scale(1);
            filter: drop-shadow(0 0 10px rgba(0, 172, 255, 0.15)) brightness(1);
        }
    }

    @keyframes sweep {
        0% { left: -200px; }
        100% { left: 600px; }
    }

    @keyframes dot-blink {
        0% { opacity: 0.3; }
        100% { opacity: 1; box-shadow: 0 0 8px #00d9ff; }
    }

    .fade-out {
        opacity: 0;
        transform: scale(1.1);
        transition: all 0.8s cubic-bezier(0.7, 0, 0.3, 1);
        pointer-events: none;
    }

    @media (max-width: 768px) {
        .breathing { width: 180px; }
        .line-container { width: 250px; }
    }

.tech-hidden {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.05);
    pointer-events: none; 
}

.tech-visible {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    pointer-events: auto;
    transition: opacity 1.2s ease-out, filter 1.2s ease-out, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}