/* ============================================
   PARALLAX DEPTH EFFECT SYSTEM
   Multi-layer PCB imagery with depth
   ============================================ */

/* Base Parallax Container */
.parallax-container {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

/* Parallax Layer System - Multiple layers at different depths */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Layer Depth Levels - Further = slower movement, creates depth */
.parallax-layer-1 {
    z-index: 1;
    transform: translateZ(0) scale(1.2);
}

.parallax-layer-2 {
    z-index: 2;
    transform: translateZ(0) scale(1.15);
}

.parallax-layer-3 {
    z-index: 3;
    transform: translateZ(0) scale(1.1);
}

.parallax-layer-4 {
    z-index: 4;
    transform: translateZ(0) scale(1.05);
}

/* Content Layer - Always on top */
.parallax-content {
    position: relative;
    z-index: 10;
    padding: 4rem 0;
}

/* ============================================
   PAGE-SPECIFIC PARALLAX VARIATIONS
   Same images, different treatments
   ============================================ */

/* HOME PAGE - Full BGA fanout, cyan tech theme */
.parallax-home .parallax-layer-1 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.15;
    filter: blur(8px) hue-rotate(180deg);
}

.parallax-home .parallax-layer-2 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.25;
    filter: blur(4px) hue-rotate(180deg);
    background-position: 45% 45%;
}

.parallax-home .parallax-layer-3 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.35;
    filter: hue-rotate(180deg);
    background-position: 50% 50%;
    background-size: 110% auto;
}

.parallax-home .parallax-layer-4 {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.1), rgba(0, 255, 200, 0.05));
}

/* HARDWARE DESIGN - Zoomed upper-left, blue engineering theme */
.parallax-hardware .parallax-layer-1 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.12;
    filter: blur(10px) hue-rotate(200deg);
    background-position: 20% 20%;
    background-size: 180% auto;
}

.parallax-hardware .parallax-layer-2 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.22;
    filter: blur(5px) hue-rotate(200deg);
    background-position: 25% 25%;
    background-size: 160% auto;
}

.parallax-hardware .parallax-layer-3 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.32;
    filter: hue-rotate(200deg) saturate(1.3);
    background-position: 30% 30%;
    background-size: 140% auto;
}

.parallax-hardware .parallax-layer-4 {
    background: linear-gradient(135deg, rgba(0, 100, 255, 0.15), rgba(0, 50, 150, 0.05));
}

/* PCB DESIGN - Centered BGA, green circuit board theme */
.parallax-pcb .parallax-layer-1 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.1;
    filter: blur(12px) hue-rotate(90deg);
    background-position: center center;
    background-size: 250% auto;
}

.parallax-pcb .parallax-layer-2 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.2;
    filter: blur(6px) hue-rotate(90deg);
    background-position: center center;
    background-size: 220% auto;
}

.parallax-pcb .parallax-layer-3 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.3;
    filter: hue-rotate(90deg) saturate(0.9);
    background-position: center center;
    background-size: 200% auto;
}

.parallax-pcb .parallax-layer-4 {
    background: linear-gradient(135deg, rgba(0, 255, 100, 0.1), rgba(0, 150, 50, 0.05));
}

/* 3D PRINTING - Lower-right crop, warm/orange theme */
.parallax-3d .parallax-layer-1 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.1;
    filter: blur(10px) hue-rotate(30deg);
    background-position: 75% 75%;
    background-size: 170% auto;
}

.parallax-3d .parallax-layer-2 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.2;
    filter: blur(5px) hue-rotate(30deg);
    background-position: 70% 70%;
    background-size: 150% auto;
}

.parallax-3d .parallax-layer-3 {
    background-image: url('../images/pcb-bga-fanout.png');
    opacity: 0.25;
    filter: hue-rotate(30deg) saturate(1.1);
    background-position: 65% 65%;
    background-size: 140% auto;
}

.parallax-3d .parallax-layer-4 {
    background: linear-gradient(135deg, rgba(255, 150, 0, 0.08), rgba(255, 100, 0, 0.03));
}

/* BIO/ABOUT - Schematic texture, subtle grayscale */
.parallax-bio .parallax-layer-1 {
    background-image: url('../images/schematic-max38.png');
    opacity: 0.05;
    filter: blur(15px) grayscale(1);
    background-size: cover;
}

.parallax-bio .parallax-layer-2 {
    background-image: url('../images/schematic-max38.png');
    opacity: 0.08;
    filter: blur(8px) grayscale(1);
    background-size: 120% auto;
    background-position: 60% 40%;
}

.parallax-bio .parallax-layer-3 {
    background-image: url('../images/c128-full.jpg');
    opacity: 0.12;
    filter: grayscale(0.7) blur(3px);
    background-size: cover;
    background-position: center;
}

.parallax-bio .parallax-layer-4 {
    background: linear-gradient(135deg, rgba(100, 100, 150, 0.08), rgba(50, 50, 80, 0.03));
}

/* MATERIALS GUIDE - Technical diagram overlay */
.parallax-materials .parallax-layer-1 {
    background-image: url('../images/pcb-layout-dark.png');
    opacity: 0.08;
    filter: blur(12px) grayscale(0.5);
    background-size: 180% auto;
}

.parallax-materials .parallax-layer-2 {
    background-image: url('../images/pcb-layout-dark.png');
    opacity: 0.12;
    filter: blur(6px) grayscale(0.5);
    background-size: 150% auto;
    background-position: 30% 30%;
}

.parallax-materials .parallax-layer-3 {
    background-image: url('../images/pcb-layout-dark.png');
    opacity: 0.15;
    filter: grayscale(0.5) hue-rotate(270deg);
    background-size: 130% auto;
    background-position: 40% 40%;
}

.parallax-materials .parallax-layer-4 {
    background: linear-gradient(135deg, rgba(150, 100, 200, 0.08), rgba(100, 50, 150, 0.03));
}

/* ============================================
   RESPONSIVE PARALLAX
   Reduce complexity on mobile
   ============================================ */

@media (max-width: 768px) {
    /* Disable parallax on mobile for performance */
    .parallax-layer {
        transform: none !important;
        transition: none;
    }

    /* Reduce layers to just 2 on mobile */
    .parallax-layer-1,
    .parallax-layer-2 {
        display: none;
    }

    /* Increase opacity for remaining layers */
    .parallax-layer-3 {
        opacity: 0.5 !important;
    }

    .parallax-layer-4 {
        opacity: 0.3 !important;
    }
}

/* ============================================
   HOVER EFFECTS - Subtle depth shift
   ============================================ */

.parallax-container:hover .parallax-layer-1 {
    transform: translateZ(0) scale(1.22);
}

.parallax-container:hover .parallax-layer-2 {
    transform: translateZ(0) scale(1.17);
}

.parallax-container:hover .parallax-layer-3 {
    transform: translateZ(0) scale(1.12);
}

.parallax-container:hover .parallax-layer-4 {
    transform: translateZ(0) scale(1.07);
}

/* ============================================
   ACCESSIBILITY - Respect motion preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .parallax-layer {
        transform: none !important;
        transition: none !important;
    }

    .parallax-container:hover .parallax-layer-1,
    .parallax-container:hover .parallax-layer-2,
    .parallax-container:hover .parallax-layer-3,
    .parallax-container:hover .parallax-layer-4 {
        transform: none !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */

.parallax-layer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    transform: translate3d(0, 0, 0);
}