@property --angle-1 {
            syntax: "<angle>";
            inherits: false;
            initial-value: -75deg;
        }

        @property --angle-2 {
            syntax: "<angle>";
            inherits: false;
            initial-value: -45deg;
        }
        * {
            cursor: url("cursors/arrow.cur") 16 16, auto;
        }


        :root {
            --global--size: clamp(2rem, 4vw, 5rem);
            --anim--hover-time: 400ms;
            --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
            --anim--glide-time: 800ms; 
            --anim--glide-ease: cubic-bezier(0.23, 1, 0.32, 1); 
        }

        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            font-size: 16px;
            background: url("https://files.123freevectors.com/wp-content/original/112574-plain-white-blurred-background-vector.jpg") no-repeat center center fixed;
            background-size: cover;
            font-family: "Fira Mono", monospace;
            -webkit-font-smoothing: antialiased;
            overflow: hidden;
            user-select: none;
        }
        .draggable-wrap {
            position: absolute;
            z-index: 10;
            background: transparent;
            cursor: grab;
            transition: transform var(--anim--hover-time) var(--anim--hover-ease);
        }

        .draggable-wrap:active {
            cursor: dragging;
        }

        .draggable-wrap.is-gliding {
            transition: top var(--anim--glide-time) var(--anim--glide-ease), 
                        left var(--anim--glide-time) var(--anim--glide-ease),
                        transform var(--anim--glide-time) var(--anim--glide-ease);
        }

        
        .glass-shadow {
            --shadow-cuttoff-fix: 2em;
            position: absolute;
            width: calc(100% + var(--shadow-cuttoff-fix));
            height: calc(100% + var(--shadow-cuttoff-fix));
            top: calc(0% - var(--shadow-cuttoff-fix) / 2);
            left: calc(0% - var(--shadow-cuttoff-fix) / 2);
            filter: blur(clamp(2px, 0.125em, 12px));
            overflow: visible;
            pointer-events: none;
            z-index: -1;
        }

        .glass-shadow::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 24px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
            width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
            height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
            top: calc(var(--shadow-cuttoff-fix) - 0.5em);
            left: calc(var(--shadow-cuttoff-fix) - 0.875em);
            padding: 0.125em;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            transition: all var(--anim--hover-time) var(--anim--hover-ease);
            opacity: 1;
        }

        .glass-box {
            --border-width: clamp(1px, 0.0625em, 4px);
            width: 300px;
            height: 200px;
            position: relative;
            z-index: 3;
            background: linear-gradient(
                -75deg,
                rgba(255, 255, 255, 0.05),
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.05)
            );
            border-radius: 24px;
            
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
                inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
                0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
                0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
                0 0 0 0 rgba(255, 255, 255, 1);
            
            backdrop-filter: blur(clamp(4px, 0.25em, 8px));
            -webkit-backdrop-filter: blur(clamp(4px, 0.25em, 8px));
            
            transition: all var(--anim--hover-time) var(--anim--hover-ease);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .glass-box-big {
            --border-width: clamp(1px, 0.0625em, 4px);
            width: 400px;
            height: 300px;
            position: relative;
            z-index: 3;
            background: linear-gradient(
                -75deg,
                rgba(255, 255, 255, 0.05),
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.05)
            );
            border-radius: 24px;
            
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
                inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
                0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
                0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
                0 0 0 0 rgba(255, 255, 255, 1);
            
            backdrop-filter: blur(clamp(5px, 0.25em, 8px));
            -webkit-backdrop-filter: blur(clamp(5px, 0.25em, 8px));
            
            transition: all var(--anim--hover-time) var(--anim--hover-ease);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .glass-box-button {
            --border-width: clamp(1px, 0.0625em, 4px);
            cursor: url("cursors/hand.cur") 32 32, grab !important;
            width: 50px;
            height: 50px;
            position: sticky;
            z-index: 999999999;
            pointer-events: auto;
            background: linear-gradient(
                -75deg,
                rgba(255, 255, 255, 0.05),
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.05)
            );
            border-radius: 5px;
            
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
                inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
                0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
                0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
                0 0 0 0 rgba(255, 255, 255, 1);
            
            backdrop-filter: blur(clamp(4px, 0.25em, 8px));
            -webkit-backdrop-filter: blur(clamp(4px, 0.25em, 8px));
            
            transition: all var(--anim--hover-time) var(--anim--hover-ease);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .glass-box::before {
            content: "";
            position: absolute;
            inset: 4px;
            border-radius: 20px;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.15),
                rgba(255, 255, 255, 0) 40%,
                rgba(255, 255, 255, 0) 60%,
                rgba(255, 255, 255, 0.05)
            );
            box-shadow: inset 0 0 8px rgba(255,255,255,0.1);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            z-index: 2;
            pointer-events: none;
        }

        .draggable-wrap:hover .glass-box,
        .draggable-wrap:hover .glass-box-big {
            transform: scale(1.02);
            backdrop-filter: blur(clamp(2.2px, 0.15em, 5px));
            -webkit-backdrop-filter: blur(clamp(2px, 0.15em, 5px));
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
                inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
                0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
                0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
                0 0 0 0 rgba(255, 255, 255, 1);
        }


        .content {
            position: relative;
            z-index: 5;
            text-align: center;
            pointer-events: none;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        .content h3 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
            color: rgba(50, 50, 50, 1);
            letter-spacing: -0.05em;
            text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
        }

        .content p {
            margin: 0.5rem 0 0;
            font-size: 0.9rem;
            color: rgba(80, 80, 80, 0.8);
            font-weight: 500;
        }

        .content::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 3;
            width: calc(100% - var(--border-width) * 2);
            height: calc(100% - var(--border-width) * 2);
            top: var(--border-width);
            left: var(--border-width);
            border-radius: 22px;
            overflow: clip;
            
            background: linear-gradient(
                var(--angle-2),
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 40% 50%,
                rgba(255, 255, 255, 0) 55%
            );
            mix-blend-mode: screen;
            pointer-events: none;
            background-size: 200% 200%;
            background-position: 0% 50%;
            background-repeat: no-repeat;
            transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),
                        --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
        }

        .draggable-wrap:hover .content::after {
            background-position: 25% 50%;
        }

        .glass-box::after {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            border-radius: 24px;
            width: calc(100% + var(--border-width));
            height: calc(100% + var(--border-width));
            top: calc(0% - var(--border-width) / 2);
            left: calc(0% - var(--border-width) / 2);
            padding: var(--border-width);
            box-sizing: border-box;
            background: conic-gradient(
                    from var(--angle-1) at 50% 50%,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0) 5% 40%,
                    rgba(0, 0, 0, 0.5) 50%,
                    rgba(0, 0, 0, 0) 60% 95%,
                    rgba(0, 0, 0, 0.5)
                ),
                linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease;
            box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
        }

        .draggable-wrap:hover .glass-box::after {
            --angle-1: -125deg;
        }

        .draggable-wrap.is-dragging {
            transform: rotate3d(1, 0, 0, 25deg); 
            transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .draggable-wrap.is-dragging .glass-box {
            transform: scale(1.05);
            
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
                inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
                0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
                0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
                0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
                0 0.25em 0 0 rgba(255, 255, 255, 0.75),
                inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
        }

        .draggable-wrap.is-dragging .content {
            transform: scale(calc(1 / 1.05));
        }

        .draggable-wrap.is-dragging .glass-shadow {
            filter: blur(clamp(2px, 0.125em, 12px));
        }

        .draggable-wrap.is-dragging .glass-shadow::after {
            top: calc(var(--shadow-cuttoff-fix) - 0.5em);
            opacity: 0.75;
        }

        .draggable-wrap.is-dragging .content::after {
            background-position: 50% 15%;
            --angle-2: -15deg;
        }

        .draggable-wrap.is-dragging .glass-box::after {
            --angle-1: -75deg;
        }

        @media (hover: none) and (pointer: coarse) {
            .draggable-wrap.is-dragging .content::after {
                --angle-2: -45deg;
            }
            .draggable-wrap.is-dragging .glass-box::after {
                --angle-1: -75deg;
            }
        }