/* base.css */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400;1,500&family=JetBrains+Mono:wght@300;400&display=swap");

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    background: var(--bg);
    color: var(--mid);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100%;
    background: radial-gradient(
        ellipse at 50% 40%,
        #0f1018 0%,
        #090a0f 45%,
        #050508 100%
    );
    overflow-x: hidden;
    transition: opacity 0.2s ease;
}

body.ready {
    opacity: 1;
}

/* scrollbar hidden */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}
* {
    scrollbar-width: none;
}

/* selection */
::selection {
    background: rgba(106, 152, 190, 0.25);
    color: var(--bright);
}

/* scanlines */
.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    animation: flicker 16s ease-in-out infinite;
}

@keyframes flicker {
    0%,
    88%,
    100% {
        opacity: 1;
    }
    89% {
        opacity: 0.6;
    }
    90% {
        opacity: 1;
    }
    92% {
        opacity: 0.4;
    }
    93% {
        opacity: 0.9;
    }
    96% {
        opacity: 1;
    }
}

/* vignette */
.vignette {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: radial-gradient(
        ellipse at 50% 45%,
        transparent 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* cursor */
.cursor {
    display: inline-block;
    width: 7px;
    height: 12px;
    background: var(--bright);
    box-shadow: 0 0 6px rgba(240, 240, 232, 0.3);
    animation: cblink 1.1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 1px;
}

@keyframes cblink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* colour utilities */
.c-bright {
    color: var(--bright);
}
.c-mid {
    color: var(--mid);
}
.c-dim {
    color: var(--dim);
}
.c-dimmer {
    color: var(--dimmer);
}
.c-acc {
    color: var(--acc);
}
.c-ok {
    color: var(--ok);
}
.c-warn {
    color: var(--warn);
}
.c-bl {
    color: var(--bl);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scanlines {
        animation: none;
    }
    .cursor {
        animation: none;
        opacity: 1;
    }
    .sdot {
        animation: none;
        opacity: 0.7;
    }
}