@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

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

/* // <weight>: Use a value from 100 to 1000
// <grade>: Use a value from -200 to 150
// <slant>: Use a value from -10 to 0
// <width>: Use a value from 25 to 151
// <thick stroke>: Use a value from 27 to 175
// <thin stroke>: Use a value from 25 to 135
// <counter width>: Use a value from 323 to 603
// <uppercase height>: Use a value from 528 to 760
// <lowercase height>: Use a value from 416 to 570
// <ascender height>: Use a value from 649 to 854
// <descender depth>: Use a value from -305 to -98
// <figure height>: Use a value from 560 to 788
// <uniquifier>: Use a unique and descriptive class name */

.font-body {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 125, "GRAD" 47, "XOPQ" 96, "XTRA" 449, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
}

/* // <weight>: Use a value from 100 to 900 */
/* // <softness>: Use a value from 0 to 100 */
/* // <uniquifier>: Use a unique and descriptive class name */
.font-title {
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "SOFT" 50, "WONK" 1, "wght" 600;
}

.font-variation-title-light {
    font-variation-settings: "SOFT" 50, "WONK" 1, "wght" 400;
}

@view-transition {
    navigation: auto;
}

.title-link::before {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.gradient-text {
    background-image: url("/assets/images/noise-gradient-5.png");
    overflow-wrap: unset;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: cover;
    filter: drop-shadow(3px 3px 0px black);
    filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(0px -1px 0px black);
    font-variation-settings: "SOFT" 50, "WONK" 1, "wght" 800;
    font-size: 7rem;
}

img.dither-canvas {
    width: 0;
    height: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.dither-skeleton {
    position: relative;
    display: block;
    width: 100%;
    height: 500px;
    background-color: #e5e7eb;
    overflow: hidden;
}

.dither-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: dither-skeleton-shimmer 1.2s infinite;
}

@keyframes dither-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

canvas.dither-canvas {
    filter: brightness(1.1);
    /* image-rendering: crisp-edges;
    image-rendering: pixelated; */
}