/* Glassmorphism Portfolio — extracted stylesheet
   Note: Tailwind's custom theme (@theme block, dark variant, blob keyframes)
   remains inline in index.html inside a <style type="text/tailwindcss"> tag,
   since the Tailwind Browser CDN script only processes that tag in-page. */

        /* Utilities */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        body { overflow-x: hidden; } 

        html, body {
            cursor: url('https://harp.njit.edu/~kt474/media/general/pb2.png') 14 7, auto;
            height: 100%;
        }

        html:active, body:active {
            cursor: url('https://harp.njit.edu/~kt474/media/general/pb1.png') 14 4, auto;
        }

        button, a, input[type="submit"], input[type="button"], .btn {
            cursor: url('https://harp.njit.edu/~kt474/media/general/pb2.png') 14 7, pointer;
        }

        button:active, a:active, input[type="submit"]:active, input[type="button"]:active, .btn:active {
            cursor: url('https://harp.njit.edu/~kt474/media/general/pb1.png') 14 4, pointer;
        }

        .project-image-container,
        .project-image-container::after {
            cursor: url('https://harp.njit.edu/~kt474/media/general/pb2.png') 14 7, pointer;
        }

        .project-image-container:active,
        .project-image-container:active::after {
            cursor: url('https://harp.njit.edu/~kt474/media/general/pb1.png') 14 4, pointer;
        }

        /* Keep gallery images at their original colors. */
        #work img,
        #projects img,
        #hobbies img {
            mix-blend-mode: normal;
            opacity: 1;
        }

        /* Give every horizontal gallery a stable, touch-friendly page width. */
        [id^="gallery-"] {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
        }
        [id^="gallery-"] > img {
            flex: 0 0 100%;
            min-width: 100%;
            scroll-snap-align: center;
        }
        
        /* Glassmorphism Core Classes */
        .glass-panel {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
        }
        .dark .glass-panel {
            background: rgba(20, 20, 25, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.07);
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
            content-visibility: auto;
            contain-intrinsic-size: 500px;
        }
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.35);
            box-shadow: 0 12px 36px 0 rgba(31, 38, 135, 0.1);
        }
        .dark .glass-card {
            background: rgba(30, 30, 35, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3);
        }
        .dark .glass-card:hover {
            background: rgba(40, 40, 45, 0.5);
            box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.5);
        }

        /* Text Animations for Hero */
        .text-rotate-enter { opacity: 0; transform: translateY(20px); }
        .text-rotate-active { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
        .text-rotate-exit { opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }

        /* Custom delay classes for blobs */
        .animation-delay-2000 { animation-delay: 2s; }
        .animation-delay-4000 { animation-delay: 4s; }

        /* 3D Container */
        .canvas-container {
            width: 100%;
            height: 300px;
            border-radius: 1rem;
            overflow: hidden;
            position: relative;
        }
        .canvas-container canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }