/**
 * Dynamic Long Shadow CSS Implementation
 * Optimizes card shadows to project infinitely without GPU overhead.
 */

/* Ensure the card allows the pseudo-element to be positioned relative to it */
.glass-panel {
    position: relative;
    /* overflow: hidden; */ /* MUST NOT have overflow hidden on the card itself for long shadows */
}

/* Ensure sections clip the infinite shadows */
#skills, #projets, #labs, #performance, .content-wrapper {
    overflow: hidden;
}

/* The Dynamic Shadow */
.glass-panel::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 300%; /* Large enough to simulate infinity */
    height: 400vh;
    z-index: -1;
    background: rgba(0, 0, 0, 0.15); /* Solid shadow color with opacity */
    
    /* Origin at the top left of the card */
    transform-origin: top left;
    
    /* Dynamic transform based on scroll */
    /* Skew creates the oblique angle, translateY simulates the "length" or movement */
    /* We use the --scroll-offset variable provided by dynamic-shadow.js */
    transform: 
        skewX(calc(-45deg + (var(--scroll-offset, 0) * 0.005deg))) 
        translateY(calc(var(--scroll-offset, 0) * -0.05px));
    
    pointer-events: none;
    will-change: transform;
}

/* Adjustments for specific themes if needed */
.hover-python::before { background: rgba(55, 118, 171, 0.1); }
.hover-js::before { background: rgba(247, 223, 30, 0.05); }
.hover-go::before { background: rgba(0, 173, 216, 0.1); }