/*
   GlobalTechVibers - Premium Intro Loader CSS
   Handles the layout, transitions, logo reveal, and homepage entrance animations.
*/

/* 1. Full Screen Overlay Loader */
.intro-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: all;
}

.intro-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Scroll Lock when Loading */
body.loading-active {
    overflow: hidden !important;
    height: 100vh !important;
}

/* 2. Text Sequence Steps */
.loader-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 200px; /* Constrains height to prevent layout shifts */
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-text-step {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--color-dark-navy);
    letter-spacing: -0.02em;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Stacking sub-items for Step 3 (Web, AI, Projects) */
.loader-text-step div {
    margin: 6px 0;
    font-size: 2.25rem;
    font-weight: 500;
}

/* Active and Exit States for Text */
.loader-text-step.active {
    opacity: 1;
    transform: translateY(0);
}

.loader-text-step.exit {
    opacity: 0;
    transform: translateY(-15px);
}

/* 3. Logo Reveal Step */
.loader-logo-step {
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-logo-step.active {
    opacity: 1;
    transform: scale(1);
}

.loader-logo-icon {
    font-size: 5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.loader-logo-text {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-dark-navy);
    letter-spacing: -0.02em;
    margin: 0;
}

.loader-logo-text span {
    color: var(--color-primary);
}

/* 4. Homepage Content Animation States */
.homepage-content-hidden {
    opacity: 0;
    transform: translateY(15px);
}

.homepage-content-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Instant reveal state when bypassing animation */
.homepage-content-visible-instant,
.homepage-content-visible-instant .header,
.homepage-content-visible-instant .hero-text,
.homepage-content-visible-instant .hero-image,
.homepage-content-visible-instant .hero-buttons .btn,
.homepage-content-visible-instant .card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Entrance Animation Initial Prep (Pre-reveal) */
.entrance-ready .header {
    opacity: 0;
    transform: translateY(-20px);
}

.entrance-ready .hero-text,
.entrance-ready .hero-image {
    opacity: 0;
    transform: translateY(30px);
}

.entrance-ready .hero-buttons .btn {
    transform: scale(0.98);
}

.entrance-ready .card {
    opacity: 0;
    transform: translateY(30px);
}

/* Entrance Animation Active State (Triggered simultaneously on reveal) */
.entrance-active .header {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.entrance-active .hero-text,
.entrance-active .hero-image {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.entrance-active .hero-buttons .btn {
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.entrance-active .card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile adjustments to prevent font overflow during load */
@media (max-width: 768px) {
    .loader-text-step, 
    .loader-text-step div,
    .loader-logo-text {
        font-size: 1.65rem;
    }
    
    .loader-logo-icon {
        font-size: 4rem;
    }
}