html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    cursor: none;
    overflow-x: hidden;
}

a,
button,
input,
textarea,
[role="button"] {
    cursor: none !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

:root {
    --color-primary: 30 41 59;
    --color-primary-dim: 71 85 105;
    --color-on-primary: 255 255 255;
    --color-surface: 228 230 232;
    --color-surface-container: 226 232 240;
    --color-surface-container-high: 233 238 243;
    --color-surface-container-low: 255 255 255;
    --color-on-surface: 15 23 42;
    --color-on-surface-variant: 60 76 99;
    --color-outline: 203 213 225;
    --color-outline-variant: 226 232 240;
    --color-background: 208 210 212;
}

html.dark {
    --color-primary: 187 199 223;
    --color-primary-dim: 150 173 208;
    --color-on-primary: 13 19 33;
    --color-surface: 13 19 33;
    --color-surface-container: 21 27 42;
    --color-surface-container-high: 24 33 52;
    --color-surface-container-low: 11 16 28;
    --color-on-surface: 225 230 240;
    --color-on-surface-variant: 188 203 224;
    --color-outline: 68 71 77;
    --color-outline-variant: 42 49 61;
    --color-background: 13 19 33;
}

.technical-cursor {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid rgb(var(--color-primary) / 0.3);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    pointer-events: none;
    z-index: 9999;
    scale: 1;
    display: none;
    transition: scale 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
    will-change: translate;
}

.technical-cursor.cursor-hover {
    scale: 1.5;
    border-color: rgb(var(--color-primary));
    background-color: rgb(var(--color-primary) / 0.1);
}

.technical-cursor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: rgb(var(--color-primary));
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@media (pointer: fine) {
    .technical-cursor {
        display: block;
    }
}

.oxide-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background-color: rgb(var(--color-primary));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.oxide-underline:hover::after {
    width: 100%;
}

.vignette-overlay {
    background: radial-gradient(circle, transparent 20%, rgb(var(--color-surface)) 120%);
}

.vignette-fade {
    background-image: linear-gradient(to top, rgb(var(--color-surface)) 0%, transparent 50%);
}

.technical-grid {
    position: relative;
}

.technical-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgb(var(--color-primary) / 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--color-primary) / 0.12) 1px, transparent 1px),
        radial-gradient(rgb(var(--color-primary) / 0.15) 1.5px, transparent 1.5px);
    background-size: 40px 40px, 40px 40px, 40px 40px;
    background-position: 0 0, 0 0, 20px 20px;
    mask-image: radial-gradient(circle at center, black, transparent 90%);
    pointer-events: none;
    z-index: 0;
}

.blueprint-grid {
    position: relative;
    overflow: hidden;
    background-color: rgb(var(--color-surface));
}

.blueprint-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgb(var(--color-primary) / 0.1) 2px, transparent 2px),
        linear-gradient(to bottom, rgb(var(--color-primary) / 0.1) 2px, transparent 2px),
        linear-gradient(to right, rgb(var(--color-primary) / 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--color-primary) / 0.05) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    mask-image: radial-gradient(circle at center, black, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.blueprint-grid::after {
    content: 'REF: SECTION_CONTACT / 39.9612° N, 82.9988° W';
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    font-family: var(--font-headline);
    font-size: 0.6rem;
    color: rgb(var(--color-primary) / 0.15);
    letter-spacing: 0.2em;
    pointer-events: none;
    writing-mode: vertical-rl;
    text-transform: uppercase;
}

.blueprint-grid .corner-mark {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgb(var(--color-primary) / 0.2);
    pointer-events: none;
    z-index: 1;
}

.blueprint-grid .corner-tl {
    top: 2rem;
    left: 2rem;
    border-right: 0;
    border-bottom: 0;
}

.blueprint-grid .corner-tr {
    top: 2rem;
    right: 2rem;
    border-left: 0;
    border-bottom: 0;
}

.blueprint-grid .corner-bl {
    bottom: 2rem;
    left: 2rem;
    border-right: 0;
    border-top: 0;
}

.blueprint-grid .corner-br {
    bottom: 2rem;
    right: 2rem;
    border-left: 0;
    border-top: 0;
}