/*
 * If you're reading this, you care about craft.
 * Us too.
 */

@layer reset, tokens, base, components, utilities;

/* The secret sauce: animatable custom properties */
@property --gradient-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --gradient-y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --gradient-hue {
    syntax: "<number>";
    inherits: false;
    initial-value: 270;
}

@property --grain-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.04;
}

@property --text-reveal {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@layer tokens {
    :root {
        --color-black: oklch(0% 0 0);
        --color-deep: oklch(12% 0.03 270);
        --color-violet: oklch(18% 0.04 300);
        --color-teal: oklch(15% 0.03 220);
        
        --color-text-primary: oklch(100% 0 0);
        --color-text-secondary: color-mix(in oklch, var(--color-text-primary) 70%, transparent);
        --color-text-tertiary: color-mix(in oklch, var(--color-text-primary) 50%, transparent);
        
        --color-accent: oklch(72% 0.12 85);
        --color-accent-glow: color-mix(in oklch, var(--color-accent) 30%, transparent);
        
        --font-sans: 'Inter', system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', ui-monospace, monospace;
        
        --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
        --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
        --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
        --space-s: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --space-m: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
        --space-l: clamp(2rem, 1.85rem + 0.75vw, 2.5rem);
        --space-xl: clamp(3rem, 2.75rem + 1.25vw, 4rem);
        
        --text-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
        --text-base: clamp(0.875rem, 0.83rem + 0.22vw, 1.0625rem);
        --text-md: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
        --text-lg: clamp(1.125rem, 0.95rem + 0.875vw, 1.75rem);
        --text-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
        
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
        
        --duration-instant: 100ms;
        --duration-fast: 200ms;
        --duration-normal: 400ms;
        --duration-slow: 800ms;
        --duration-slower: 1200ms;
        
        --stagger-1: 0.3s;
        --stagger-2: 0.9s;
        --stagger-3: 1.5s;
        --stagger-4: 2.0s;
    }
}

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        hanging-punctuation: first last;
    }
    
    body {
        min-block-size: 100dvh;
        line-height: 1.5;
    }
    
    img, picture, video, canvas, svg {
        display: block;
        max-inline-size: 100%;
    }
    
    a {
        color: inherit;
        text-decoration: none;
    }
}

@layer base {
    body {
        font-family: var(--font-sans);
        background-color: var(--color-black);
        color: var(--color-text-primary);
        overflow-x: hidden;
        
        @media (pointer: fine) {
            cursor: none;
        }
    }
    
    ::selection {
        background-color: var(--color-accent);
        color: var(--color-black);
    }
}

@layer components {
    
    /* Yes, we made our own cursor */
    @media (pointer: fine) {
        body::before {
            content: '';
            position: fixed;
            inset-block-start: var(--cursor-y, 50%);
            inset-inline-start: var(--cursor-x, 50%);
            inline-size: 20px;
            block-size: 20px;
            border: 1.5px solid color-mix(in oklch, var(--color-text-primary) 60%, transparent);
            border-radius: 50%;
            pointer-events: none;
            translate: -50% -50%;
            z-index: 9999;
            opacity: 0;
            transition: 
                scale var(--duration-fast) var(--ease-out-expo),
                opacity var(--duration-fast) ease,
                border-color var(--duration-normal) ease;
            mix-blend-mode: difference;
        }
        
        body.cursor-ready::before {
            opacity: 1;
        }
        
        body:has(.contact:hover)::before {
            scale: 1.5;
            border-color: var(--color-accent);
        }
    }

    /* Film grain. Because we're not animals. */
    .grain {
        position: fixed;
        inset: -50%;
        inline-size: 200%;
        block-size: 200%;
        pointer-events: none;
        z-index: 1000;
        opacity: var(--grain-opacity);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
        animation: grain 8s steps(10) infinite;
        
        @media (prefers-reduced-motion: reduce) {
            animation: none;
        }
    }
    
    @keyframes grain {
        0%, 100% { translate: 0 0; }
        10% { translate: -5% -10%; }
        20% { translate: -15% 5%; }
        30% { translate: 7% -25%; }
        40% { translate: -5% 25%; }
        50% { translate: -15% 10%; }
        60% { translate: 15% 0%; }
        70% { translate: 0% 15%; }
        80% { translate: 3% 35%; }
        90% { translate: -10% 10%; }
    }

    /* This gradient is alive. */
    .gradient-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        opacity: 0;
        
        background: radial-gradient(
            ellipse 80% 80% at var(--gradient-x) var(--gradient-y),
            oklch(18% 0.04 var(--gradient-hue)) 0%,
            var(--color-deep) 40%,
            var(--color-black) 70%
        );
        
        animation: 
            gradient-fade-in var(--duration-slower) var(--ease-out-expo) var(--stagger-1) forwards,
            gradient-hue-shift 30s ease-in-out infinite;
        
        transition: 
            --gradient-x 2s var(--ease-out-quint),
            --gradient-y 2s var(--ease-out-quint);
    }
    
    @keyframes gradient-fade-in {
        from { opacity: 0; scale: 0.8; }
        to { opacity: 1; scale: 1; }
    }
    
    @keyframes gradient-hue-shift {
        0%, 100% { --gradient-hue: 270; }
        33% { --gradient-hue: 290; }
        66% { --gradient-hue: 250; }
    }

    .light-follower {
        position: fixed;
        inline-size: 600px;
        block-size: 600px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        background: radial-gradient(
            circle,
            var(--color-accent-glow) 0%,
            color-mix(in oklch, var(--color-accent) 10%, transparent) 30%,
            transparent 70%
        );
        translate: -50% -50%;
        transition: opacity var(--duration-slow) ease;
        
        body.cursor-ready & {
            opacity: 1;
        }
    }

    .container {
        position: relative;
        z-index: 10;
        min-block-size: 100dvh;
        display: grid;
        place-content: center;
        padding: var(--space-l);
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-m);
    }

    .title {
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: var(--text-xl);
        letter-spacing: 0.02em;
        color: var(--color-text-primary);
        text-wrap: balance;
        opacity: 0;
        translate: 0 30px;
        animation: text-reveal var(--duration-slower) var(--ease-out-expo) var(--stagger-1) forwards;
    }

    .descriptor {
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: var(--text-md);
        letter-spacing: 0.05em;
        color: var(--color-text-secondary);
        max-inline-size: 50ch;
        text-wrap: pretty;
        opacity: 0;
        translate: 0 25px;
        animation: text-reveal var(--duration-slower) var(--ease-out-expo) var(--stagger-2) forwards;
        
        & .scramble-char {
            color: var(--color-accent);
            opacity: 0.7;
        }
    }

    .teaser {
        font-family: var(--font-mono);
        font-weight: 400;
        font-style: italic;
        font-size: var(--text-base);
        color: var(--color-text-tertiary);
        opacity: 0;
        translate: 0 20px;
        animation: text-reveal var(--duration-slower) var(--ease-out-expo) var(--stagger-3) forwards;
    }

    .contact {
        position: relative;
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: var(--text-sm);
        color: var(--color-accent);
        padding: var(--space-2xs) var(--space-s);
        margin-block-start: var(--space-xs);
        isolation: isolate;
        opacity: 0;
        translate: 0 20px;
        animation: text-reveal var(--duration-slower) var(--ease-out-expo) var(--stagger-4) forwards;
        
        @media (pointer: fine) { cursor: none; }
        @media (pointer: coarse) { cursor: pointer; }
        
        & .contact-underline {
            position: absolute;
            inset-block-end: 6px;
            inset-inline: 50%;
            inline-size: 0;
            block-size: 1px;
            background-color: var(--color-accent);
            translate: -50% 0;
            transition: inline-size var(--duration-normal) var(--ease-out-expo);
        }
        
        &:hover,
        &:focus-visible {
            & .contact-underline {
                inline-size: calc(100% - var(--space-s) * 2);
            }
            
            & .contact-text {
                text-shadow: 0 0 20px var(--color-accent-glow);
            }
        }
        
        &:focus { outline: none; }
        
        &:focus-visible {
            outline: 1px solid var(--color-accent);
            outline-offset: 8px;
        }
    }

    .contact-text {
        position: relative;
        z-index: 1;
        transition: text-shadow var(--duration-normal) ease;
        
        & .scramble-char {
            color: var(--color-text-primary);
            opacity: 0.5;
        }
    }

    @keyframes text-reveal {
        to { opacity: 1; translate: 0 0; }
    }
    
    .toast {
        position: fixed;
        inset-block-end: var(--space-l);
        inset-inline-start: 50%;
        translate: -50% 20px;
        padding: var(--space-xs) var(--space-m);
        background: color-mix(in oklch, var(--color-text-primary) 10%, transparent);
        backdrop-filter: blur(10px);
        border: 1px solid color-mix(in oklch, var(--color-text-primary) 15%, transparent);
        border-radius: 6px;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        opacity: 0;
        pointer-events: none;
        transition: 
            opacity var(--duration-normal) var(--ease-out-expo),
            translate var(--duration-normal) var(--ease-out-expo);
        z-index: 2000;
        
        &.visible {
            opacity: 1;
            translate: -50% 0;
        }
    }
    
    button.contact {
        background: none;
        border: none;
        font: inherit;
    }
}

@layer utilities {
    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* We care about your preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .title, .descriptor, .teaser, .contact {
        opacity: 1;
        translate: none;
    }
    
    .gradient-bg { opacity: 1; }
}

@media (prefers-contrast: more) {
    :root {
        --color-text-secondary: var(--color-text-primary);
        --color-text-tertiary: var(--color-text-primary);
    }
}

@media print {
    .grain, .gradient-bg, .light-follower { display: none; }
    
    body { background: white; color: black; }
    
    .title, .descriptor, .teaser, .contact {
        opacity: 1;
        translate: none;
        color: black;
    }
}

@supports (container-type: inline-size) {
    .container {
        container-type: inline-size;
        container-name: main;
    }
    
    @container main (max-width: 400px) {
        .content { gap: var(--space-s); }
    }
}

/* Mobile. Because thumbs. */
@media (max-width: 768px) {
    :root {
        --text-xl: clamp(2.25rem, 8vw, 3rem);
        --text-md: clamp(1rem, 4vw, 1.25rem);
        --text-base: clamp(0.875rem, 3.5vw, 1rem);
        --text-sm: clamp(0.875rem, 3.5vw, 1rem);
        --space-m: clamp(1.25rem, 4vw, 1.5rem);
    }
    
    .container {
        padding: var(--space-l);
        padding-block-start: max(var(--space-l), env(safe-area-inset-top));
        padding-block-end: max(var(--space-l), env(safe-area-inset-bottom));
        padding-inline-start: max(var(--space-l), env(safe-area-inset-left));
        padding-inline-end: max(var(--space-l), env(safe-area-inset-right));
        align-content: center;
        padding-block-end: 15vh;
    }
    
    .gradient-bg {
        background: radial-gradient(
            ellipse 120% 100% at 50% 60%,
            oklch(20% 0.05 var(--gradient-hue)) 0%,
            var(--color-deep) 35%,
            var(--color-black) 65%
        );
    }
    
    .grain {
        opacity: 0.025;
        animation: grain 12s steps(6) infinite;
    }
    
    .content { gap: var(--space-m); }
    
    .title {
        font-weight: 600;
        letter-spacing: 0.01em;
    }
    
    .descriptor { letter-spacing: 0.08em; }
    
    .contact {
        padding: var(--space-s) var(--space-m);
        margin-block-start: var(--space-m);
        min-block-size: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:active {
            scale: 0.97;
            
            & .contact-underline {
                inline-size: calc(100% - var(--space-m) * 2);
            }
            
            & .contact-text {
                text-shadow: 0 0 20px var(--color-accent-glow);
            }
        }
    }
    
    .contact-underline { inset-block-end: 10px; }
    
    .toast {
        inset-block-end: max(var(--space-xl), calc(env(safe-area-inset-bottom) + var(--space-l)));
    }
}

@media (max-width: 375px) {
    :root {
        --text-xl: 2rem;
        --space-l: 1.25rem;
    }
    
    .descriptor { letter-spacing: 0.06em; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .container {
        padding-block: var(--space-m);
        min-block-size: auto;
    }
    
    .content { gap: var(--space-s); }
    .title { font-size: clamp(1.5rem, 5vw, 2rem); }
}

@media (pointer: coarse) {
    .contact {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .contact::after {
        content: '';
        position: absolute;
        inset: -8px;
        border-radius: 8px;
        background: var(--color-accent);
        opacity: 0;
        transition: opacity var(--duration-fast) ease;
        z-index: -1;
    }
    
    .contact:active::after { opacity: 0.1; }
}