:root {
            --motion-fast: 160ms;
            --motion-base: 300ms;
            --motion-reveal: 600ms;
            --motion-pulse: 2800ms;
            --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: #0B0B0B;
            color: #EDEDED;
            animation: page-in 450ms var(--ease-standard) both;
        }

        @keyframes page-in {
            from {
                opacity: .96;
                transform: translateY(4px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        ::selection {
            background: #00FF66;
            color: #000;
        }

        .logo {
            font-family:
                Inter,
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.06em;
        }

        .grid-bg {
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        .scanline {
            position: relative;
        }

        .scanline::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 1px;
            background: #00FF66;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }

        .scanline:hover::after {
            transform: scaleX(1);
        }

        .timeline-line {
            background: linear-gradient(
                to bottom,
                #00FF66 0,
                #333 80px,
                #333 100%
            );
        }

        .cursor {
            display: inline-block;
            width: 8px;
            height: 18px;
            margin-left: 5px;
            background: #00FF66;
            vertical-align: -2px;
            animation: blink 1s steps(1) infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        .reveal {
            opacity: 0;
            transform: translateY(14px);
            animation: reveal .7s ease forwards;
        }

        .delay-1 { animation-delay: .08s; }
        .delay-2 { animation-delay: .16s; }
        .delay-3 { animation-delay: .24s; }
        .delay-4 { animation-delay: .32s; }

        @keyframes reveal {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .status-dot {
            display: inline-block;
            animation: pulse-signal var(--motion-pulse) var(--ease-standard) infinite;
            transform-origin: center;
        }

        @keyframes pulse-signal {
            0%, 100% {
                opacity: .6;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.08);
            }
        }

        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity var(--motion-reveal) var(--ease-standard),
                        transform var(--motion-reveal) var(--ease-standard);
        }

        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1 { transition-delay: 90ms; }
        .reveal-delay-2 { transition-delay: 180ms; }
        .reveal-delay-3 { transition-delay: 270ms; }
        .reveal-delay-4 { transition-delay: 360ms; }

        .timeline-reveal {
            transform: scaleY(0);
            transform-origin: top;
            transition: transform 700ms var(--ease-standard);
        }

        .timeline-reveal.is-visible {
            transform: scaleY(1);
        }

        .project-card {
            transition: transform var(--motion-base) var(--ease-standard),
                        border-color var(--motion-base) var(--ease-standard);
        }

        .project-card:hover {
            transform: translateY(-3px);
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
            }

            body {
                animation: none;
            }

            .status-dot {
                animation: none;
            }

            .reveal-on-scroll,
            .timeline-reveal {
                opacity: 1;
                transform: none;
            }
        }