@layer utilities {
    /* --- 3D CSS Transforms Showcase --- */
    .perspective-container {
        perspective: 1000px; 
    }
    
    .card-3d-left {
        transform: rotateX(15deg) rotateY(-20deg);
        transform-style: preserve-3d;
        box-shadow: 20px 25px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255,255,255,0.05);
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.7s ease-out;
        will-change: transform;
    }

    .card-3d-right {
        transform: rotateX(15deg) rotateY(20deg);
        transform-style: preserve-3d;
        box-shadow: -20px 25px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255,255,255,0.05);
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.7s ease-out;
        will-change: transform;
    }

    /* Hover State / Touch State */
    .group:hover .card-3d-left,
    .group:hover .card-3d-right,
    .group:focus-visible .card-3d-left,
    .group:focus-visible .card-3d-right {
        transform: rotateX(0deg) rotateY(0deg) scale(1.05);
        box-shadow: 0 30px 60px -15px rgba(56, 189, 248, 0.25), inset 0 1px 1px rgba(255,255,255,0.15);
    }

    /* Glare effect pseudo-element */
    .card-3d-left::after,
    .card-3d-right::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 50%; height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        transition: left 0.7s ease;
        pointer-events: none;
    }
    
    .group:hover .card-3d-left::after,
    .group:hover .card-3d-right::after,
    .group:focus-visible .card-3d-left::after,
    .group:focus-visible .card-3d-right::after {
        left: 200%;
    }
}

/* Custom Scrollbar Global */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a; 
}
::-webkit-scrollbar-thumb {
    background: #334155; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569; 
}