/* SD Dystopian Font */
        @font-face {
            font-family: 'SD Dystopian';
            src: url('/assets/fonts/Sddystopiandemo-GO7xa.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'JetBrains Mono';
            src: url('/assets/vendor/fonts/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'JetBrains Mono';
            src: url('/assets/vendor/fonts/jetbrains-mono/files/jetbrains-mono-latin-700-normal.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'JetBrains Mono';
            src: url('/assets/vendor/fonts/jetbrains-mono/files/jetbrains-mono-latin-800-normal.woff2') format('woff2');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Rajdhani';
            src: url('/assets/vendor/fonts/rajdhani/files/rajdhani-latin-400-normal.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Rajdhani';
            src: url('/assets/vendor/fonts/rajdhani/files/rajdhani-latin-600-normal.woff2') format('woff2');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Rajdhani';
            src: url('/assets/vendor/fonts/rajdhani/files/rajdhani-latin-700-normal.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        ::-webkit-scrollbar {
            width: 4px;
            background: #050505;
        }

        ::-webkit-scrollbar-thumb {
            background: #00f3ff;
            border-radius: 4px;
            box-shadow: 0 0 10px #00f3ff;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #bc13fe;
            box-shadow: 0 0 10px #bc13fe;
        }

        html {
            background-color: #050505;
        }

        body {
            background-color: transparent;
            color: #e5e7eb;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .clip-corner {
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
        }

        .scanline {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 3px);
            pointer-events: none;
            z-index: 50;
            opacity: 0.15;
        }

        .glitch-text {
            position: relative;
            display: inline-block;
            color: #00f3ff !important;
            font-weight: 800;
            text-shadow: 2px 2px 0px #bc13fe;
            animation: glitch-skew 8.0s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate-reverse;
            will-change: transform;
        }

        /* Reduce animations on scroll for performance */
        .glitch-text:not(:hover)::before,
        .glitch-text:not(:hover)::after {
            animation-play-state: paused;
        }

        /* Pause glitch when not in viewport */
        .glitch-text[data-visible="false"] {
            animation-play-state: paused;
        }

        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .glitch-text::before {
            color: #bc13fe;
            z-index: -1;
            animation: glitch-anim-1 8.0s infinite linear alternate-reverse;
        }

        .glitch-text::after {
            color: #00f3ff;
            z-index: -2;
            animation: glitch-anim-2 6.0s infinite linear alternate-reverse;
        }

        @keyframes glitch-skew {
            0% {
                transform: skew(0deg);
            }

            20% {
                transform: skew(1deg);
            }

            40% {
                transform: skew(-1deg);
            }

            60% {
                transform: skew(0.5deg);
            }

            80% {
                transform: skew(-0.5deg);
            }

            100% {
                transform: skew(0deg);
            }
        }

        @keyframes glitch-anim-1 {
            0% {
                opacity: 0;
                transform: translate(0);
            }

            2% {
                opacity: 1;
                clip-path: inset(40% 0 61% 0);
                transform: translate(-3px, 1px);
            }

            4% {
                opacity: 0;
                transform: translate(0);
            }
        }

        @keyframes glitch-anim-2 {
            0% {
                opacity: 0;
                transform: translate(0);
            }

            10% {
                opacity: 0;
            }

            12% {
                opacity: 1;
                clip-path: inset(10% 0 60% 0);
                transform: translate(3px, 1px);
            }

            14% {
                opacity: 0;
            }
        }

        /* --- ANIMATED GLOWING CYBER BORDERS --- */
        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        .cyber-border {
            position: relative;
            background: rgba(17, 24, 39, 0.8);
            z-index: 1;
            padding: 1px; /* The border width */
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
        }

        .cyber-border::before, .cyber-border::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: conic-gradient(from var(--angle), transparent 70%, #00f3ff 85%, #bc13fe 100%);
            animation: cyber-border-spin 4s linear infinite;
        }

        .cyber-border::after {
            filter: blur(15px);
            opacity: 0.5;
        }

        .cyber-border > div {
            height: 100%;
            width: 100%;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
        }

        @keyframes cyber-border-spin {
            0% { --angle: 0deg; }
            100% { --angle: 360deg; }
        }

        .gradient-text {
            color: #ffffff;
        }

        /* Atmospheric paper: near-black tinted toward the cyan anchor (Hallmark gate 7 — no pure #000) */
        #cyber-bg-container { background-color: oklch(13% 0.025 200); }
        #glass-overlay { background-color: oklch(13% 0.025 200 / 0.4); }

        .aspect-video {
            aspect-ratio: 16/9;
        }

        /* Matrix Rain SVG Animation - Optimized */
        @keyframes matrix-fall {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        .matrix-col {
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            fill: #00f3ff;
            opacity: 0.8;
            animation: matrix-fall linear infinite;
            writing-mode: vertical-rl;
            text-orientation: upright;
            text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
            will-change: transform;
            contain: layout style paint;
        }

        /* Pause matrix when page hidden */
        .matrix-col {
            animation-play-state: running;
        }

        /* Pause on non-focused tabs */
        @media (prefers-reduced-motion: reduce) {
            .matrix-col {
                animation: none;
            }
        }

        .matrix-col:nth-child(2n) {
            fill: #bc13fe;
            text-shadow: 0 0 5px rgba(188, 19, 254, 0.5);
        }

        /* Purple */
        .matrix-col:nth-child(3n) {
            fill: #ff003c;
            text-shadow: 0 0 5px rgba(255, 0, 60, 0.5);
        }

        /* Pink */

        @keyframes matrix-fall {
            0% {
                transform: translateY(-100%);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateY(100%);
                opacity: 0;
            }
        }

        /* Magnetic Glitch Buttons */
        .btn-glitch {
            position: relative;
            transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
        }
        
        .btn-glitch:hover {
            transform: scale(1.02);
            box-shadow: -2px 0 0 #00f3ff, 2px 0 0 #bc13fe;
        }
        
        .btn-glitch:hover::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 243, 255, 0.1);
            transform: translate(-3px, 2px);
            z-index: -1;
        }
        
        .btn-glitch:hover::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(188, 19, 254, 0.1);
            transform: translate(3px, -2px);
            z-index: -2;
        }

        @view-transition {
            navigation: auto;
        }

        ::view-transition-old(root) {
            animation: site-view-out 0.1s ease-in both;
        }

        ::view-transition-new(root) {
            animation: site-view-in 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        @keyframes site-view-out {
            from {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: brightness(1);
            }

            to {
                opacity: 0.55;
                transform: translateY(-8px) scale(0.996);
                filter: brightness(0.75);
            }
        }

        @keyframes site-view-in {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.998);
                filter: brightness(0.85);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: brightness(1);
            }
        }

        html.page-transition-ready body {
            transition: opacity 0.12s cubic-bezier(0.16, 1, 0.3, 1), transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), filter 0.12s ease-out;
        }

        html.page-transition-in body {
            opacity: 0;
            transform: translateY(10px) scale(0.998);
            filter: brightness(0.85);
        }

        #page-transition-overlay {
            position: fixed;
            inset: 0;
            z-index: 9000;
            pointer-events: none;
            opacity: 0;
            transform: scaleY(0.985);
            transform-origin: top center;
            background:
                linear-gradient(90deg, rgba(0, 243, 255, 0), rgba(0, 243, 255, 0.18), rgba(188, 19, 254, 0)),
                radial-gradient(circle at 50% 25%, rgba(188, 19, 254, 0.18), transparent 38%),
                rgba(0, 0, 0, 0.68);
            backdrop-filter: blur(8px);
            transition: opacity 0.1s ease-out, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #page-transition-overlay::before,
        #page-transition-overlay::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            pointer-events: none;
        }

        #page-transition-overlay::before {
            top: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, #00f3ff, #bc13fe, transparent);
            box-shadow: 0 0 18px rgba(0, 243, 255, 0.75), 0 0 28px rgba(188, 19, 254, 0.45);
            transform: translateY(-50%);
        }

        #page-transition-overlay::after {
            inset: 0;
            background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 5px);
            opacity: 0.22;
        }

        html.page-transitioning #page-transition-overlay,
        html.page-transition-in #page-transition-overlay {
            opacity: 1;
            transform: scaleY(1);
        }

        /* --- CUSTOM CYBERPUNK CURSOR (SVG) --- */
        body {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><filter id="neon"><feGaussianBlur stdDeviation="1.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><path d="M6 6 L14 28 L18 18 L28 14 Z" fill="%23111827" stroke="%2300f3ff" stroke-width="2" filter="url(%23neon)"/></svg>') 6 6, auto !important;
        }

        a, button, [role="button"], input, select, textarea, [data-tilt] {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><filter id="neon-hover"><feGaussianBlur stdDeviation="2" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><path d="M6 6 L14 28 L18 18 L28 14 Z" fill="%23111827" stroke="%23bc13fe" stroke-width="2" filter="url(%23neon-hover)"/><circle cx="18" cy="18" r="4" fill="%23bc13fe" filter="url(%23neon-hover)"/></svg>') 6 6, pointer !important;
        }

        /* --- ACCESSIBILITY IMPROVEMENTS (WCAG 2.1 AA) --- */
        /* Skip to Content Keyboard Shortcut */
        .skip-to-content {
            position: absolute;
            top: -9999px;
            left: 50%;
            transform: translateX(-50%);
            background: #050505;
            color: #00f3ff;
            border: 2px solid #00f3ff;
            padding: 8px 16px;
            z-index: 10000;
            font-family: 'JetBrains Mono', monospace;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
            transition: top 0.2s ease-out;
        }
        .skip-to-content:focus {
            top: 15px;
        }

        /* Neon Cyber Focus-Visible Rings */
        *:focus-visible {
            outline: 2px solid #00f3ff !important;
            outline-offset: 2px !important;
            box-shadow: 0 0 10px #00f3ff !important;
        }

        /* Prefers Reduced Motion System */
        @media (prefers-reduced-motion: reduce) {
            /* Stop background matrix animations */
            .matrix-col {
                animation: none !important;
                display: none !important;
            }
            /* Freeze glitch animation on headings */
            .glitch-text {
                animation: none !important;
                text-shadow: 1px 1px 0px #bc13fe !important;
            }
            .glitch-text::before,
            .glitch-text::after {
                display: none !important;
            }
            /* Stop spinning borders on cards */
            .cyber-border::before,
            .cyber-border::after {
                animation: none !important;
                background: linear-gradient(135deg, #00f3ff, #bc13fe) !important;
            }
            /* Hide distracting CRT scanline layers */
            .scanline,
            #page-transition-overlay {
                display: none !important;
            }
            /* Speed up / skip animations */
            * {
                animation-delay: 0s !important;
                animation-duration: 0.01s !important;
                animation-iteration-count: 1 !important;
                transition-delay: 0s !important;
                transition-duration: 0.01s !important;
                scroll-behavior: auto !important;
            }
        }