/*
 * Enhanced Pieces CSS for Baobab Technologies - Futuristic Design
 * This CSS enhances the pieces/image display with improved animation effects
 */

.pieces {
    width: 98.6572vw; /* make the size of container to be same ratio like image; will be reset dynamically */
    height: 80vh;  /* will be reset dynamically */
    margin: auto;
    flex: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.2));
    transition: filter 0.5s ease;
}

.pieces:hover {
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.4));
}

.piece {
    pointer-events: none;
    transition: transform 0.8s ease, opacity 0.8s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Add 3D perspective effect to pieces */
.pieces.hover .piece {
    transform-style: preserve-3d;
    animation: floatPiece 3s ease-in-out infinite alternate;
}

/* Staggered float animation for pieces */
@keyframes floatPiece {
    0% {
        transform: translateZ(0) translateY(0);
    }
    100% {
        transform: translateZ(20px) translateY(-5px);
    }
}

/* Matrix-style scan line effect */
.pieces::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 229, 255, 0.03) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
}

/* Glitch effect on hover */
.pieces.glitch {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

/* Lightning effect for the tree */
.lightning-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 1; /* Always visible */
}

.lightning {
    position: absolute;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.9), 
        rgba(0, 229, 255, 0.9), 
        rgba(150, 220, 255, 0.7)
    );
    opacity: 0.8; /* More visible */
    filter: blur(0.8px); /* Sharper to be more visible */
    z-index: 11;
    box-shadow: 
        0 0 12px rgba(255, 255, 255, 0.9),
        0 0 22px rgba(0, 229, 255, 0.9),
        0 0 35px rgba(255, 255, 255, 0.7);
    transform-origin: top center;
    animation: pulseLightning 3s infinite alternate; /* Constant pulsing */
    
    /* Enhanced for visibility on branches */
    pointer-events: none;
    will-change: opacity, filter;
}

/* Constant glow effect for the tree */
.pieces {
    filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.6)) brightness(1.15);
    animation: treePulse 6s infinite alternate; /* Subtle pulsing glow */
}

/* Animation for the lightning pulse */
@keyframes pulseLightning {
    0% {
        opacity: 0.4;
        filter: blur(1px);
    }
    50% {
        opacity: 0.7;
        filter: blur(1.5px);
    }
    100% {
        opacity: 0.9;
        filter: blur(1px);
    }
}

/* Animation for the tree pulse */
@keyframes treePulse {
    0% {
        filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5)) brightness(1.1);
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.7)) brightness(1.2);
    }
    100% {
        filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.6)) brightness(1.15);
    }
}

/* Stronger effect when lightning strikes */
.pieces.lightning-strike {
    filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.8)) brightness(1.4);
}

/* Desktop specific styles for enhanced branch lightning */
@media screen and (min-width: 769px) {
    /* Create a more dramatic background glow for the tree */
    .pieces {
        position: relative;
        overflow: visible !important;
    }
    
    /* Enhanced lightning effect */
    .lightning-container {
        overflow: visible;
    }
    
    /* Make the lightning on top of the tree more visible */
    .lightning[style*="top: 5"] {
        opacity: 0.9 !important;
        width: 2px !important;
        background: linear-gradient(to bottom, 
            rgba(255, 255, 255, 1), 
            rgba(0, 229, 255, 0.95), 
            rgba(150, 220, 255, 0.8)
        ) !important;
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.95),
            0 0 25px rgba(0, 229, 255, 0.95),
            0 0 40px rgba(150, 220, 255, 0.85) !important;
    }
}

/* Media query for mobile */
@media screen and (max-aspect-ratio: 597/916), (max-width: 768px) {
    .pieces {
        width: 70vw;
        height: 70vw;
        background-position: center !important;
        background-size: cover !important;
        margin: 0 auto;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.35));
        z-index: 5;
    }
    
    /* Single tree effect for mobile - hide all pieces */
    .pieces .piece {
        opacity: 0 !important;
        visibility: hidden;
    }
    
    /* Create a single centered tree */
    .pieces::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../img/normal.jpg);
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.4);
        z-index: 10;
        animation: gentlePulse 4s infinite alternate;
        transform-origin: center center;
    }
    
    .pieces[data-img-code]::after {
        background-image: url(../img/code.jpg);
    }

    .pieces[data-img-alt="url(img/alt.jpg)"]::after {
        background-image: url(../img/alt.jpg);
    }
    
    @keyframes gentlePulse {
        0% {
            opacity: 0.9;
            box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
        }
        100% {
            opacity: 1;
            box-shadow: 0 0 40px rgba(0, 229, 255, 0.5);
        }
    }
    
    /* Mobile lightning adjustments */
    .lightning-container {
        border-radius: 8px;
        overflow: hidden;
        z-index: 12;
    }
    
    /* Brighter lightning for mobile */
    .lightning {
        background: linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.9), 
            rgba(0, 229, 255, 0.9), 
            rgba(150, 220, 255, 0.7)
        );
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.9),
            0 0 25px rgba(0, 229, 255, 0.9),
            0 0 35px rgba(255, 255, 255, 0.7);
    }
    
    /* Stronger lightning strike effect for mobile */
    .pieces.lightning-strike {
        filter: drop-shadow(0 0 45px rgba(0, 229, 255, 0.8)) brightness(1.4);
    }
}
    
    /* Enhanced scan lines for mobile */
    .pieces::before {
        background-size: 100% 2px;
        opacity: 0.7;
        z-index: 11;
    }
}

/* Code mode enhancement */
.pieces[data-img-code] {
    transition: background-image 0.5s ease, filter 0.5s ease;
}

/* Create a subtle grid pattern in the background */
@media screen and (min-width: 769px) {
    .pieces::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px);
        background-size: 20px 20px;
        z-index: 1;
        opacity: 0.3;
        pointer-events: none;
    }
}