/* START CLEAN-FIX-SKELETON-INTEGRATION-CSS */
/**
 * V3 Loading System CSS
 * GPU-accelerated skeleton animations for content-driven loading
 *
 * REVERT INSTRUCTIONS:
 * 1. Delete this file: src/v3/styles/v3-loading-system.css
 * 2. Remove import from index.html and about.html
 */

/* ============================================
   BASE SKELETON CONTAINER
   ============================================ */

/* START CLEAN-FIX-SKELETON-VISIBILITY */
/* Fixed: Made skeleton fully opaque to completely hide content */
.v3-skeleton-container {
    position: absolute !important; /* Override any relative positioning */
    inset: 0;
    z-index: 999;
    background: var(--white, #ffffff) !important; /* Solid white background */
    opacity: 1 !important; /* Fully opaque */
    overflow: hidden;
    pointer-events: none; /* Prevent interaction with content below */

    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;

    /* Fade transition */
    transition: opacity 300ms ease-out;
}

.v3-skeleton-container.hidden {
    opacity: 0;
    pointer-events: none;
}

/* CLEAN-FIX-7.5-GPU-CLEANUP-START */
/* Performance: Release GPU layers after fade animation completes */
.v3-skeleton-container.gpu-released,
.v3-skeleton-container.gpu-released .skeleton-shimmer::before {
    will-change: auto !important;
}
/* CLEAN-FIX-7.5-GPU-CLEANUP-END */

/* START CLEAN-FIX-SKELETON-RADIUS */
/* Issue: Skeleton boxes have 4px radius, breaking brutalist aesthetic */
/* Fix: Remove all border-radius from skeleton elements */
/* Skeleton block base - now with solid background */
.skeleton-block {
    background: var(--lightest, #e5e5e5) !important; /* Solid light gray */
    border-radius: 0; /* Was: 4px - violates brutalist design */
    position: relative;
    opacity: 1 !important;
}
/* END CLEAN-FIX-SKELETON-RADIUS */
/* END CLEAN-FIX-SKELETON-VISIBILITY */

/* ============================================
   SKELETON TYPE PADDING & POSITIONING
   ============================================ */

/* START CLEAN-FIX-PROJECT-FULL-COVERAGE */
/* Fixed: Project info skeleton now fills entire column height
   Previous: Only had padding, didn't cover full area
   To revert: Delete between START/END and restore original padding-only rule */
/* START CLEAN-FIX-CSS-EFFICIENCY */
/* Added: CSS efficiency enhancements for layout properties
   To revert: Delete CSS-EFFICIENCY additions between START/END */
.v3-skeleton-container[data-skeleton-type="projectInfo"] {
    position: absolute !important;  /* Override any relative positioning */
    inset: 0;                       /* Cover entire column */
    height: 100%;                   /* Full height coverage */
    padding: 24px;                  /* Keep padding for content spacing */
    display: flex;                  /* Flexbox layout for template */
    flex-direction: column;         /* Vertical stacking */
    box-sizing: border-box;         /* Include padding in height */
}
/* END CLEAN-FIX-CSS-EFFICIENCY */
/* END CLEAN-FIX-PROJECT-FULL-COVERAGE */

/* START CLEAN-FIX-MARQUEE-SINGLE-SKELETON-CSS */
/* Updated: Single skeleton covers entire marquee wrapper
   Previous: Individual skeletons for each asset
   To revert: Delete between START/END and restore position:relative only */
.v3-skeleton-container[data-skeleton-type="mockupAsset"] {
    position: absolute !important;  /* Cover entire marquee wrapper */
    inset: 0;                       /* Full coverage */
    z-index: 100;                   /* Above content but below modals */
    overflow: hidden;
    background: var(--white, #ffffff) !important;  /* Solid white background */
}
/* END CLEAN-FIX-MARQUEE-SINGLE-SKELETON-CSS */

/* START CLEAN-FIX-PANEL-SKELETON-VISIBILITY */
/* Panel skeleton must be fully opaque */
.v3-skeleton-container[data-skeleton-type="panel"] {
    padding: 48px;
    background: var(--white, #ffffff) !important; /* Solid white, not gradient */
    position: absolute !important;
    inset: 0;
    z-index: 10; /* Above content but below modals */
}
/* END CLEAN-FIX-PANEL-SKELETON-VISIBILITY */

.v3-skeleton-container[data-skeleton-type="footerPreview"] {
    padding: 32px;
}

/* ============================================
   TIMEOUT FALLBACK (10s auto-hide)
   ============================================ */

.v3-skeleton-container {
    animation: skeleton-timeout 10s forwards;
}

@keyframes skeleton-timeout {
    0%, 99% {
        opacity: 1;
        pointer-events: auto;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* ============================================
   ACCENT COLOR SUPPORT (Aligned with v3-design-system.css)
   ============================================ */

.v3-skeleton-container[style*="--skeleton-accent: var(--pink)"] {
    --skeleton-accent-rgb: 255, 0, 68; /* Corrected from 255,105,180 */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--purple)"] {
    --skeleton-accent-rgb: 170, 0, 255; /* Corrected from 147,51,234 - Project 4 */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--blue)"] {
    --skeleton-accent-rgb: 0, 0, 255; /* Corrected from 59,130,246 */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--magenta)"] {
    --skeleton-accent-rgb: 255, 0, 204; /* Matches design system */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--darkblue)"] {
    --skeleton-accent-rgb: 7, 7, 51; /* Corrected from 30,58,138 */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--cyan)"] {
    --skeleton-accent-rgb: 0, 247, 255; /* Added - Project 6 */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--cool)"] {
    --skeleton-accent-rgb: 169, 176, 178; /* Matches design system */
}

.v3-skeleton-container[style*="--skeleton-accent: var(--warm)"] {
    --skeleton-accent-rgb: 121, 126, 128; /* Corrected from 251,146,60 */
}

/* ============================================
   SIMPLE SPINNER FALLBACK
   ============================================ */

.simple-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--dark, #333);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 24px auto;

    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

/* START CLEAN-FIX-PHASE8-BREAKPOINT-LOADING */
/* SM Breakpoint - Updated from 768px to 767px for Phase 8 standardization */
@media (max-width: 767px) {
    .v3-skeleton-container[data-skeleton-type="projectInfo"],
    .v3-skeleton-container[data-skeleton-type="footerPreview"] {
        padding: 16px;
    }

    .v3-skeleton-container[data-skeleton-type="panel"] {
        padding: 24px;
    }
}
/* END CLEAN-FIX-PHASE8-BREAKPOINT-LOADING */

/* START CLEAN-FIX-REFINED-SKELETON-STYLES */
/* ============================================
   REFINED SKELETON STYLES - Production Selected
   ============================================ */
/* Selected from 20 tested variations: R2, R5, R4, R2 */
/* To revert: Search for CLEAN-FIX-REFINED-SKELETON-STYLES and delete between START/END */

/* Grid Background (Project Info R2) */
.skeleton-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    z-index: 0;
    transform: translateZ(0);
}

/* Accent Border Blocks (Project Info R2) */
.skeleton-block-accent-border {
    background: var(--lightest);
    border: 2px solid var(--skeleton-accent, var(--cool));
    border-radius: 0; /* CLEAN-FIX-SKELETON-RADIUS: Was 4px */
    position: relative;
    animation: pulse-border 2s ease-in-out infinite;
    transform: translateZ(0);
}

@keyframes pulse-border {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.01);
    }
}

/* Wave Background (Asset R5) */
.skeleton-wave-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.03) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: wave-sweep 2s ease-in-out infinite;
    transform: translateZ(0);
}

@keyframes wave-sweep {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Scanning Lines (Asset R5) */
.skeleton-scanning-lines-accent {
    position: absolute;
    inset: 0;
}

.skeleton-scanning-lines-accent::before,
.skeleton-scanning-lines-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--skeleton-accent, var(--cool));
    opacity: 0.6;
    box-shadow: 0 0 10px var(--skeleton-accent, var(--cool));
    animation: scan-vertical 2s ease-in-out infinite;
    transform: translateZ(0);
}

.skeleton-scanning-lines-accent::after {
    animation-delay: 1s;
}

@keyframes scan-vertical {
    0%, 100% {
        top: 0;
        opacity: 0;
    }
    50% {
        top: 100%;
        opacity: 0.6;
    }
}

/* Pulse Border (Asset R5) */
.skeleton-pulse-border-accent {
    position: absolute;
    inset: 0;
    border: 3px solid var(--skeleton-accent, var(--cool));
    border-radius: 0; /* CLEAN-FIX-SKELETON-RADIUS: Was 4px */
    animation: pulse-border 2s ease-in-out infinite;
    transform: translateZ(0);
}

/* Center Icon (Asset R5) */
.skeleton-center-icon-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border: 3px solid var(--skeleton-accent, var(--cool));
    border-radius: 50%;
    opacity: 0.4;
    animation: pulse-icon 2s ease-in-out infinite;
    transform: translateZ(0);
}

.skeleton-center-icon-accent::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--skeleton-accent, var(--cool));
    margin: -10px 0 0 -6px;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* Marquee Line Structure (Panel R4) */
.skeleton-marquee-line {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Pulse Accent Blocks (Panel R4) */
.skeleton-block-pulse-accent {
    width: 200%;
    height: 100%;
    background: var(--skeleton-accent, var(--cool));
    opacity: 0.2;
    animation: pulse-accent 2s ease-in-out infinite;
    transform: translateZ(0);
}

@keyframes pulse-accent {
    0%, 100% {
        opacity: 0.1;
        transform: scaleY(0.95);
    }
    50% {
        opacity: 0.3;
        transform: scaleY(1);
    }
}

/* Progressive Accent Blocks (Footer R2) */
.skeleton-block-progressive-accent {
    position: relative;
    background: var(--lightest);
    border-radius: 0; /* CLEAN-FIX-SKELETON-RADIUS: Was 4px */
    overflow: hidden;
}

.skeleton-block-progressive-accent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--skeleton-accent, var(--cool)) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0.3;
    animation: progressive-reveal 2s ease-in-out infinite;
    transform: translateZ(0);
}

@keyframes progressive-reveal {
    0% {
        background-position: -200% 0;
        opacity: 0;
    }
    50% {
        background-position: 0% 0;
        opacity: 0.3;
    }
    100% {
        background-position: 200% 0;
        opacity: 0;
    }
}
/* END CLEAN-FIX-REFINED-SKELETON-STYLES */

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

@media (prefers-reduced-motion: reduce) {
    .skeleton-wave-bg,
    .skeleton-scanning-lines-accent::before,
    .skeleton-scanning-lines-accent::after,
    .skeleton-pulse-border-accent,
    .skeleton-center-icon-accent,
    .skeleton-block-accent-border,
    .skeleton-block-pulse-accent,
    .skeleton-block-progressive-accent::before,
    .simple-spinner {
        animation: none !important;
    }

    /* Static alternatives for reduced motion */
    .skeleton-wave-bg {
        background: rgba(0, 0, 0, 0.03);
    }

    .skeleton-block-accent-border {
        opacity: 0.6;
    }

    .skeleton-block-pulse-accent {
        opacity: 0.2;
    }

    .skeleton-block-progressive-accent::before {
        opacity: 0.2;
        background-position: 0 0;
    }
}

/* END CLEAN-FIX-SKELETON-INTEGRATION-CSS */