/**
 * V3 Page Loader Styles
 * Page-specific loading screen with V3 design system
 */

/* Main container */
.v3-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002; /* Above navigation hub */
    pointer-events: none;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: opacity; /* Optimize for opacity changes */
}

/* Dark backdrop - solid black to prevent white flash */
.loader-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black); /* Solid black background */
    pointer-events: auto;
}

/* Content wrapper - centered */
.loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-align children to prevent shifting */
    gap: 24px; /* 6n: 4×6 */
    will-change: transform, opacity; /* Optimize for animations */
    width: 300px; /* Fixed width to prevent layout shifts */
}

/* Loading text */
.loading-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-standard);
    font-weight: var(--font-weight-medium);
    color: var(--light);
    text-transform: lowercase;
    letter-spacing: 1px;
    white-space: nowrap;
    text-align: left; /* Left-align to prevent horizontal shifts */
    width: 100%; /* Full width of container */
    display: block;
}

.loading-percent {
    color: var(--page-color, var(--cyan));
    font-weight: var(--font-weight-bold);
    text-shadow: 0 0 10px var(--page-color, var(--cyan));
}

.loading-separator {
    margin: 0 6px; /* 6n: 1×6 */
    opacity: 0.6;
}

.loading-phase {
    opacity: 0.9;
}

/* Progress bar */
.loading-progress {
    width: 100%; /* Full width of container */
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    margin: 0; /* Remove auto margin */
}

.loading-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        var(--page-color, var(--cyan)) 0%,
        rgba(255, 255, 255, 0.8) 100%
    );
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px var(--page-color, var(--cyan));
    animation: v3-loader-pulse 2s ease-in-out infinite;
    will-change: width; /* Optimize for width changes */
    transform: translateZ(0); /* Force GPU acceleration */
}

@keyframes v3-loader-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px var(--page-color, var(--cyan));
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 20px var(--page-color, var(--cyan));
    }
}

/* Glitch effect on phase change */
.loader-content.glitch {
    animation: v3-loader-glitch 0.1s linear;
}

@keyframes v3-loader-glitch {
    0%, 100% {
        transform: translate(-50%, -50%);
        filter: none;
        opacity: 1;
    }
    20% {
        transform: translate(calc(-50% - 1px), -50%);
        filter: hue-rotate(45deg);
        opacity: 0.95;
    }
    40% {
        transform: translate(calc(-50% + 1px), -50%);
        filter: none;
        opacity: 1;
    }
    60% {
        transform: translate(-50%, calc(-50% - 1px));
        filter: hue-rotate(-45deg);
        opacity: 0.95;
    }
    80% {
        transform: translate(-50%, -50%);
        filter: none;
        opacity: 1;
    }
}

/* Logo - positioned in top-right corner */
.loader-logo {
    position: absolute;
    top: 90px; /* 6n: 15×6 - tripled padding from corner accent */
    right: 90px; /* 6n: 15×6 - tripled padding from corner accent */
    width: 108px; /* 6n: 18×6 - doubled size */
    height: 108px; /* 6n: 18×6 - doubled size */
    opacity: 0;
    animation: logoFadeIn 0.8s ease forwards;
    animation-delay: 0.2s;
    z-index: 2;
}

.loader-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Page title - positioned in bottom-left corner */
.loader-page-title {
    position: absolute;
    bottom: 96px; /* 6n: 16×6 - tripled padding from corner accent */
    left: 96px; /* 6n: 16×6 - tripled padding from corner accent */
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.4s;
    z-index: 2;
}

.page-label {
    font-family: var(--font-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    color: var(--light);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 12px; /* 6n: 2×6 */
}

.page-name {
    font-family: var(--font-primary);
    font-size: var(--font-size-standard);
    font-weight: var(--font-weight-bold);
    color: var(--page-color, var(--cyan));
    text-transform: uppercase;
    letter-spacing: 3px; /* 6n: 0.5×6 */
    text-shadow: 0 0 20px var(--page-color, var(--cyan));
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Corner brackets */
.loader-corner {
    position: absolute;
    width: 48px; /* 6n: 8×6 */
    height: 48px; /* 6n: 8×6 */
    border: 2px solid var(--page-color, var(--cyan));
    opacity: 0;
    animation: cornerPulse 2s ease-in-out infinite;
}

.loader-corner.tl {
    top: 60px; /* 6n: 10×6 */
    left: 60px; /* 6n: 10×6 */
    border-right: none;
    border-bottom: none;
}

.loader-corner.tr {
    top: 60px; /* 6n: 10×6 */
    right: 60px; /* 6n: 10×6 */
    border-left: none;
    border-bottom: none;
}

.loader-corner.bl {
    bottom: 60px; /* 6n: 10×6 */
    left: 60px; /* 6n: 10×6 */
    border-right: none;
    border-top: none;
}

.loader-corner.br {
    bottom: 60px; /* 6n: 10×6 */
    right: 60px; /* 6n: 10×6 */
    border-left: none;
    border-top: none;
}

@keyframes cornerPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Scanning lines */
.loader-scanner-h,
.loader-scanner-v {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--page-color, var(--cyan)) 50%, 
        transparent 100%);
    opacity: 0.04;
    pointer-events: none;
    will-change: transform; /* Optimize for animation */
    transform: translateZ(0); /* Force GPU acceleration */
}

.loader-scanner-h {
    left: 0;
    right: 0;
    height: 2px;
    top: 50%;
}

.loader-scanner-v {
    top: 0;
    bottom: 0;
    width: 2px;
    left: 50%;
    background: linear-gradient(0deg, 
        transparent 0%, 
        var(--page-color, var(--cyan)) 50%, 
        transparent 100%);
}

@keyframes scanHorizontal {
    0% { transform: translateY(-50vh); }
    100% { transform: translateY(50vh); }
}

@keyframes scanVertical {
    0% { transform: translateX(-50vw); }
    100% { transform: translateX(50vw); }
}

/* Grid overlay */
.loader-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 60px 60px; /* 6n: 10×6 */
    opacity: 0.5;
    animation: gridDrift 20s linear infinite;
    pointer-events: none;
}

@keyframes gridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Responsive adjustments — 5-tier system restructured from production signed-off code (Feb 18, 2026)
   START CLEAN-FIX-8A-B4-LOADER-PORT
   XL/LG/MD use base styles (300px width, 108px logo, 48px corners at 60px positions).
   SM/XS override to compact layout. XS adds fluid width for narrow screens.
   To revert: Delete everything between START and END markers.
   Re-add original single-breakpoint block from git history (commit 8c9c4c9). */

/* B4-F: XL (≥1200px) — No overrides, base styles apply */
/* B4-G: LG (992-1199px) — No overrides, base styles apply */
/* B4-H: MD (768-991px) — No overrides, base styles apply */

/* B4-I: SM (600-767px) — Compact layout for phones/small tablets */
@media (min-width: 600px) and (max-width: 767px) {
    .loader-content {
        width: 240px;          /* 40×6 — compact centered content */
        padding: 0 30px;       /* 6n: 5×6 — breathing room on smaller screens */
    }

    .loading-text {
        font-size: var(--font-size-small);
    }

    .loading-progress {
        width: 100%;
    }

    .loader-logo {
        width: 84px;           /* 6n: 14×6 */
        height: 84px;          /* 6n: 14×6 */
        top: 48px;             /* 6n: 8×6 */
        right: 48px;           /* 6n: 8×6 */
    }

    .loader-page-title {
        bottom: 48px;          /* 6n: 8×6 */
        left: 48px;            /* 6n: 8×6 */
    }

    .loader-corner {
        width: 36px;           /* 6n: 6×6 */
        height: 36px;          /* 6n: 6×6 */
    }

    .loader-corner.tl,
    .loader-corner.tr {
        top: 30px;             /* 6n: 5×6 */
    }

    .loader-corner.bl,
    .loader-corner.br {
        bottom: 30px;          /* 6n: 5×6 */
    }

    .loader-corner.tl,
    .loader-corner.bl {
        left: 30px;            /* 6n: 5×6 */
    }

    .loader-corner.tr,
    .loader-corner.br {
        right: 30px;           /* 6n: 5×6 */
    }
}

/* B4-J: XS (≤599px) — Fluid width for narrow screens (320px iPhone SE to 599px) */
@media (max-width: 599px) {
    .loader-content {
        width: calc(100% - 72px); /* 72=12×6 → 36px margin each side, fluid at any XS width */
        padding: 0 30px;       /* 6n: 5×6 */
    }

    .loading-text {
        font-size: var(--font-size-small);
    }

    .loading-progress {
        width: 100%;
    }

    .loader-logo {
        width: 84px;           /* 6n: 14×6 */
        height: 84px;          /* 6n: 14×6 */
        top: 48px;             /* 6n: 8×6 */
        right: 48px;           /* 6n: 8×6 */
    }

    .loader-page-title {
        bottom: 48px;          /* 6n: 8×6 */
        left: 48px;            /* 6n: 8×6 */
    }

    .loader-corner {
        width: 36px;           /* 6n: 6×6 */
        height: 36px;          /* 6n: 6×6 */
    }

    .loader-corner.tl,
    .loader-corner.tr {
        top: 30px;             /* 6n: 5×6 */
    }

    .loader-corner.bl,
    .loader-corner.br {
        bottom: 30px;          /* 6n: 5×6 */
    }

    .loader-corner.tl,
    .loader-corner.bl {
        left: 30px;            /* 6n: 5×6 */
    }

    .loader-corner.tr,
    .loader-corner.br {
        right: 30px;           /* 6n: 5×6 */
    }
}
/* END CLEAN-FIX-8A-B4-LOADER-PORT */