/* Lyt Stylr POC - CSS Effects and Custom Properties */

/* Base container styles */
.test-container {
    position: relative;
    background: transparent;
    overflow: hidden;
}

/* Special background for transparency test to show transparency clearly */
#test-case-t {
    background: white !important;
}

/* Test Case A: WebGL + GSAP + Depth Map */
.vixviu-lyt-stylr-depth-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: depth-sheen;
    --lyt-webgl-intensity: 0.8;
    --lyt-gsap-duration: 2.0s;
    --lyt-depth-map-fit: cover;
    --lyt-animation-trigger: continuous;
    background: transparent;
    border-radius: 6px;
}

/* Test Case B: WebGL + GSAP (No Depth Map) */
.vixviu-lyt-stylr-procedural-matrix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: procedural-matrix;
    --lyt-webgl-intensity: 0.9;
    --lyt-gsap-duration: 1.5s;
    --lyt-animation-trigger: continuous;
    background: transparent;
    border-radius: 6px;
}

/* Test Case: Ethereal Drift - Mystical Floating Particles */
.vixviu-lyt-stylr-ethereal-drift {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: ethereal-drift;
    --lyt-webgl-intensity: 1.0;
    --lyt-gsap-duration: 3.0s;
    --lyt-animation-trigger: continuous;
    background: transparent;
    border-radius: 6px;
}

/* Test Case: Piano Keys - Mystical Floating Particles */
.vixviu-lyt-stylr-piano-keys {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: piano-keys;
    --lyt-webgl-intensity: 1.0;
    --lyt-gsap-duration: 3.0s;
    --lyt-animation-trigger: continuous;
    background: transparent;
    border-radius: 6px;
}

/* Test Case C: WebGL + Depth Map Only */
.vixviu-lyt-stylr-static-depth {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: static-depth;
    --lyt-webgl-intensity: 0.7;
    --lyt-depth-map-fit: cover;
    --lyt-animation-trigger: none;
    background: transparent;
    border-radius: 6px;
}

/* WebGL Canvas Overlay */
.vixviu-lyt-stylr-webgl-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Effect States */
.lyt-stylr-effect-active {
    --lyt-effect-state: active;
}

.lyt-stylr-effect-paused {
    --lyt-effect-state: paused;
}

.lyt-stylr-effect-error {
    --lyt-effect-state: error;
}

/* Responsive Design */
@media (max-width: 768px) {
    .test-container {
        width: 100%;
        max-width: 400px;
        height: 250px;
    }
}

/* Performance Monitoring Styles */
.lyt-stylr-performance-warning {
    border: 2px solid #f39c12;
}

.lyt-stylr-performance-error {
    border: 2px solid #e74c3c;
}

/* Loading States */
.lyt-stylr-loading {
    position: relative;
}

.lyt-stylr-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: lyt-stylr-spin 1s linear infinite;
}

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

/* Effect Variations */
.lyt-stylr-effect-ocean {
    --lyt-effect-variant: ocean;
    --lyt-webgl-color-primary: #3498db;
    --lyt-webgl-color-secondary: #2980b9;
}

.lyt-stylr-effect-matrix {
    --lyt-effect-variant: matrix;
    --lyt-webgl-color-primary: #e74c3c;
    --lyt-webgl-color-secondary: #c0392b;
}

.lyt-stylr-effect-forest {
    --lyt-effect-variant: forest;
    --lyt-webgl-color-primary: #27ae60;
    --lyt-webgl-color-secondary: #229954;
}

/* Animation Triggers */
.lyt-stylr-trigger-scroll {
    --lyt-animation-trigger: scroll;
}

.lyt-stylr-trigger-hover {
    --lyt-animation-trigger: hover;
}

.lyt-stylr-trigger-click {
    --lyt-animation-trigger: click;
}

.lyt-stylr-trigger-load {
    --lyt-animation-trigger: load;
}

.lyt-stylr-trigger-continuous {
    --lyt-animation-trigger: continuous;
}

/* Intensity Controls */
.lyt-stylr-intensity-low {
    --lyt-webgl-intensity: 0.3;
}

.lyt-stylr-intensity-medium {
    --lyt-webgl-intensity: 0.6;
}

.lyt-stylr-intensity-high {
    --lyt-webgl-intensity: 0.9;
}

/* Speed Controls */
.lyt-stylr-speed-slow {
    --lyt-gsap-duration: 3.0s;
}

.lyt-stylr-speed-normal {
    --lyt-gsap-duration: 1.5s;
}

.lyt-stylr-speed-fast {
    --lyt-gsap-duration: 0.8s;
}

/* Depth Map Fit Modes */
.lyt-stylr-fit-cover {
    --lyt-depth-map-fit: cover;
}

.lyt-stylr-fit-contain {
    --lyt-depth-map-fit: contain;
}

.lyt-stylr-fit-stretch {
    --lyt-depth-map-fit: stretch;
}

.lyt-stylr-fit-center {
    --lyt-depth-map-fit: center;
}

/* ===== NEW HIGH PRIORITY TEST CASES ===== */

/* Test Case D: Real JPG + Real Depth Map (portrait lighting) */
.vixviu-lyt-stylr-image-depth-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: image-depth-lighting;
    --lyt-webgl-intensity: 0.8;
    --lyt-gsap-duration: 2.0s;
    --lyt-depth-map-fit: cover;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'portrait.jpg';
    --lyt-depth-map-source: 'portrait-depth.jpg';
    background: transparent;
    border-radius: 6px;
}

/* Test Case F: Real JPG + No Depth Map (basic image effects) */
.vixviu-lyt-stylr-image-basic-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: image-basic-lighting;
    --lyt-webgl-intensity: 0.7;
    --lyt-gsap-duration: 1.5s;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'product.jpg';
    background: transparent;
    border-radius: 6px;
}

/* Test Case N: Portrait + Depth Map (human subject lighting) */
.vixviu-lyt-stylr-image-advanced-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: image-advanced-lighting;
    --lyt-webgl-intensity: 0.9;
    --lyt-gsap-duration: 2.5s;
    --lyt-depth-map-fit: cover;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'portrait.jpg';
    --lyt-depth-map-source: 'portrait-depth.jpg';
    background: transparent;
    border-radius: 6px;
}

/* Test Case P: Product + Depth Map (commercial use) */
.vixviu-lyt-stylr-image-commercial-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: image-commercial-lighting;
    --lyt-webgl-intensity: 0.8;
    --lyt-gsap-duration: 2.0s;
    --lyt-depth-map-fit: cover;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'product.jpg';
    --lyt-depth-map-source: 'product-depth.jpg';
    background: transparent;
    border-radius: 6px;
}

/* Test Case T: PNG with Transparency (logos/icons) */
.vixviu-lyt-stylr-alpha-channel-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: alpha-channel-lighting;
    --lyt-webgl-intensity: 0.6;
    --lyt-gsap-duration: 1.8s;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'logo-transparent.png';
    --lyt-support-alpha: true;
    background: transparent;
    border-radius: 6px;
}

/* ===== PHASE 2: MEDIUM PRIORITY TEST CASES ===== */

/* Test Case E: Real JPG + Procedural Depth */
.vixviu-lyt-stylr-auto-depth-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: auto-depth-lighting;
    --lyt-webgl-intensity: 0.7;
    --lyt-gsap-duration: 2.2s;
    --lyt-depth-map-fit: cover;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'product.jpg';
    --lyt-generate-depth: true;
    --lyt-depth-algorithm: 'luminance-edge';
    background: transparent;
    border-radius: 6px;
}

/* Test Case G: Rim Lighting */
.vixviu-lyt-stylr-edge-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: edge-lighting;
    --lyt-webgl-intensity: 0.8;
    --lyt-gsap-duration: 2.5s;
    --lyt-animation-trigger: continuous;
    --lyt-image-source: 'portrait.jpg';
    --lyt-rim-color: '#ffffff';
    --lyt-rim-thickness: 0.02;
    --lyt-rim-softness: 0.8;
    background: transparent;
    border-radius: 6px;
}

/* ===== PHASE 2B: BASIC INTERACTION TEST CASES ===== */

/* Test Case K: Mouse Interaction (Basic) */
.vixviu-lyt-stylr-interactive-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: interactive-lighting;
    --lyt-webgl-intensity: 0.7;
    --lyt-gsap-duration: 1.0s;
    --lyt-animation-trigger: mouse;
    --lyt-image-source: 'product.jpg';
    --lyt-mouse-sensitivity: 1.0;
    --lyt-light-color: '#ffffff';
    --lyt-light-radius: 0.3;
    background: transparent;
    border-radius: 6px;
    cursor: crosshair;
}

/* Test Case L: Scroll-Based Effects (Basic) */
.vixviu-lyt-stylr-scroll-responsive-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --lyt-effect-type: scroll-responsive-lighting;
    --lyt-webgl-intensity: 0.8;
    --lyt-gsap-duration: 1.0s;
    --lyt-animation-trigger: scroll;
    --lyt-image-source: 'product.jpg';
    --lyt-scroll-sensitivity: 1.0;
    --lyt-scroll-range: 0.5;
    background: transparent;
    border-radius: 6px;
}