.layer-container {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}

.layer {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform var(--transition-base), opacity var(--transition-base);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
    will-change: transform;
}

.layer-1 {
    z-index: 1;
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.layer-2 {
    z-index: 2;
    transform: translateZ(25px) rotateY(-2deg);
    opacity: 0.95;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.layer-3 {
    z-index: 3;
    transform: translateZ(50px) rotateY(-4deg);
    opacity: 0.9;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.layer-4 {
    z-index: 4;
    transform: translateZ(60px);
    opacity: 0.7;
}

.layer-blue {
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 30%, var(--color-accent-tertiary) 60%, #1a237e 100%);
    transition: background 0.3s ease;
    clip-path: polygon(
        0% 15%, 
        25% 5%, 
        50% 20%, 
        75% 10%, 
        100% 25%, 
        95% 60%, 
        100% 85%, 
        75% 95%, 
        50% 80%, 
        25% 90%, 
        0% 75%, 
        5% 40%
    );
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    box-shadow: 
        0 15px 35px rgba(102, 126, 234, 0.6),
        0 5px 15px rgba(0, 212, 255, 0.4),
        0 0 30px rgba(0, 212, 255, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.4);
}

.layer-orange {
    background: linear-gradient(135deg, var(--color-accent-secondary) 0%, var(--color-accent-quaternary) 40%, var(--color-accent-tertiary) 100%);
    transition: background 0.3s ease;
    clip-path: polygon(
        10% 0%, 
        35% 8%, 
        60% 2%, 
        85% 12%, 
        100% 5%, 
        98% 45%, 
        100% 70%, 
        90% 100%, 
        65% 92%, 
        40% 98%, 
        15% 88%, 
        2% 55%
    );
    top: 2%;
    left: 0;
    width: 100%;
    height: 96%;
    box-shadow: 
        0 18px 40px rgba(74, 144, 226, 0.6),
        0 6px 18px rgba(0, 188, 212, 0.4),
        0 0 25px rgba(0, 212, 255, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 188, 212, 0.4);
}

.layer-pink {
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-quaternary) 35%, #1a237e 100%);
    transition: background 0.3s ease;
    clip-path: polygon(
        5% 10%, 
        30% 3%, 
        55% 15%, 
        80% 5%, 
        95% 18%, 
        100% 50%, 
        92% 75%, 
        100% 100%, 
        70% 97%, 
        45% 85%, 
        20% 95%, 
        0% 65%
    );
    top: 8%;
    left: 0;
    width: 100%;
    height: 92%;
    box-shadow: 
        0 20px 45px rgba(102, 126, 234, 0.6),
        0 7px 20px rgba(0, 188, 212, 0.4),
        0 0 30px rgba(0, 212, 255, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 188, 212, 0.4);
}

.layer-blur {
    filter: blur(2px);
    opacity: 0.6;
}

.layer-shadow {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.layer-hover:hover {
    transform: translateZ(80px) scale(1.02);
    opacity: 1;
}

.layer-parallax {
    will-change: transform;
}


.layer-ink {
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 55%, #1a2b33 100%);
    clip-path: polygon(0% 15%, 25% 5%, 50% 20%, 75% 10%, 100% 25%, 95% 60%, 100% 85%, 75% 95%, 50% 80%, 25% 90%, 0% 75%, 5% 40%);
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    box-shadow: 0 15px 35px rgba(13, 92, 99, 0.35);
    border: 1px solid rgba(13, 92, 99, 0.35);
}

.layer-brass {
    background: linear-gradient(135deg, var(--color-brass) 0%, var(--color-brass-soft) 45%, #8a6d2c 100%);
    clip-path: polygon(10% 0%, 35% 8%, 60% 0%, 90% 12%, 100% 40%, 92% 70%, 100% 100%, 70% 92%, 40% 100%, 15% 88%, 0% 60%, 8% 25%);
    top: -4%;
    left: 4%;
    width: 96%;
    height: 108%;
    opacity: 0.55;
    box-shadow: 0 12px 28px rgba(184, 149, 61, 0.28);
}

.layer-slate {
    background: linear-gradient(145deg, rgba(26, 43, 51, 0.85) 0%, rgba(61, 139, 148, 0.55) 100%);
    clip-path: polygon(5% 10%, 40% 0%, 80% 8%, 100% 35%, 95% 75%, 60% 100%, 20% 92%, 0% 55%);
    top: 0;
    left: 8%;
    width: 90%;
    height: 100%;
    opacity: 0.45;
}