/**
 * ============================================================================
 * PAGE LOADER COMPONENT
 * Priya Glam Studio & Academy
 * ============================================================================
 *
 * Branded loading screen with graceful reduced-motion behavior.
 * ============================================================================
 */

/* ============================================================================
   LOADER CONTAINER
   ============================================================================ */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding: var(--spacing-xl);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--color-primary-50) 50%,
            var(--color-primary-100) 100%
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity 500ms var(--ease-standard),
        visibility 500ms var(--ease-standard);
}

.page-loader.hidden {
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
}


/* ============================================================================
   BRAND
   ============================================================================ */

.loader-brand {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;

    margin-bottom: var(--spacing-3xl);

    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.05;

    letter-spacing: 0.05em;
    text-align: center;
}

.loader-brand .word {
    display: inline-flex;

    margin-inline: clamp(0.35rem, 1.5vw, 0.75rem);
}

.loader-brand .letter {
    display: inline-block;

    opacity: 0;

    transform: translateY(2rem) scale(0.9);

    animation:
        loaderLetterAppear
        700ms
        var(--ease-bounce)
        forwards;
}

.loader-brand .priya .letter {
    color: var(--color-primary-600);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-600) 0%,
            var(--color-primary-500) 50%,
            var(--color-primary-400) 100%
        );

    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.loader-brand .glam .letter {
    color: var(--color-primary-700);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-700) 0%,
            var(--color-primary-600) 50%,
            var(--color-primary-500) 100%
        );

    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Staggered letter entrance */

.loader-brand .letter:nth-child(1) { animation-delay: 100ms; }
.loader-brand .letter:nth-child(2) { animation-delay: 150ms; }
.loader-brand .letter:nth-child(3) { animation-delay: 200ms; }
.loader-brand .letter:nth-child(4) { animation-delay: 250ms; }
.loader-brand .letter:nth-child(5) { animation-delay: 300ms; }
.loader-brand .letter:nth-child(6) { animation-delay: 350ms; }
.loader-brand .letter:nth-child(7) { animation-delay: 400ms; }
.loader-brand .letter:nth-child(8) { animation-delay: 450ms; }


/* ============================================================================
   DOTS
   ============================================================================ */

.loader-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    width: 6.25rem;
    min-height: 2.5rem;
}

.loader-dot {
    width: 0.875rem;
    height: 0.875rem;

    background: var(--gradient-rose-gold);

    border-radius: var(--radius-full);

    box-shadow: var(--shadow-rose);

    animation:
        loaderDotBounce
        1.4s
        var(--ease-standard)
        infinite;
}

.loader-dot:nth-child(1) {
    animation-delay: 0ms;
}

.loader-dot:nth-child(2) {
    animation-delay: 180ms;
}

.loader-dot:nth-child(3) {
    animation-delay: 360ms;
}


/* Optional variants retained for compatibility */

.loader-spinner-container.wave-style .loader-dot {
    animation-name: loaderDotWave;
    animation-timing-function: ease-in-out;
}

.loader-spinner-container.pulse-style .loader-dot {
    animation-name: loaderDotPulse;
    animation-timing-function: ease-in-out;
}


/* ============================================================================
   LOADING LABEL
   ============================================================================ */

.loader-text {
    margin-top: var(--spacing-2xl);

    color: var(--color-primary-700);

    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;

    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);

    opacity: 0;

    animation:
        loaderFadeInUp
        600ms
        var(--ease-standard)
        700ms
        forwards;
}


/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes loaderLetterAppear {
    0% {
        opacity: 0;
        transform: translateY(2rem) scale(0.9);
    }

    60% {
        opacity: 1;
        transform: translateY(-0.25rem) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loaderDotBounce {
    0%,
    80%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    40% {
        transform: translateY(-1rem) scale(1.2);
        opacity: 0.8;
    }
}

@keyframes loaderDotWave {
    0%,
    60%,
    100% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-0.9rem) scale(1.15);
    }
}

@keyframes loaderDotPulse {
    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes loaderFadeInUp {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .page-loader {
        padding: var(--spacing-lg);
    }

    .loader-brand {
        margin-bottom: var(--spacing-2xl);
    }

    .loader-spinner-container {
        width: 5rem;
        gap: 0.625rem;
    }

    .loader-dot {
        width: 0.75rem;
        height: 0.75rem;
    }

    .loader-text {
        margin-top: var(--spacing-xl);
        font-size: 0.75rem;
    }
}


/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .page-loader {
        transition-duration: 1ms;
    }

    .loader-brand .letter,
    .loader-text {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .loader-dot {
        animation: none;
    }
}


/* ============================================================================
   LEGACY FALLBACK
   ============================================================================ */

.loader-spinner {
    display: none;
}