/* @import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

:root {
    --font-family: "Onest";

    color-scheme: light dark;

    --background-light: #4078d9;
    --background-dark: #070e17;

    --shapes-light: #ffffff15;
    --shapes-dark: #ffffff04;

    --surface-light: #eee;
    --surface-dark: #0c1724;

    --border-light: color-mix(in srgb, #000 5%, var(--surface-light) 90%);
    --border-dark: color-mix(in srgb, #fff 5%, var(--surface-dark) 90%);

    --additional-light: #ddd;
    --additional-dark: #111e2e;

    --content-light: #111;
    --content-dark: #eee;

    --background: light-dark(var(--background-light), var(--background-dark));
    --background-shapes: light-dark(var(--shapes-light), var(--shapes-dark));
    --surface: light-dark(var(--surface-light), var(--surface-dark));
    --surface-r: light-dark(var(--surface-dark), var(--surface-light));
    --border: light-dark(var(--border-light), var(--border-dark));
    --additional: light-dark(var(--additional-light), var(--additional-dark));
    --content: light-dark(var(--content-light), var(--content-dark));
    --content-h: color-mix(in srgb, var(--content) 70%, transparent 30%);
    --intro: light-dark(#eee, #000);

    --cards-gap: 10px;
    --columns: 2;
    --card-padding: 16px;
    --mobile-padding: var(--cards-gap);
    --max-width: 800px;
    --max-height: 800px;
    --s-padding: 50px;

    --animation-time: 0.85s;
    --animation-delay: 0.15s;
    --animation-scaling: 1.5;
    --card-scale-min: 0;
}

@media (max-width: 720px) {
    :root {
        --columns: 1 !important;
    }
}

@media (852px < width <= 932px) {
    .content {
        padding-bottom: 0 !important;
        padding: calc(
                (100vw - (var(--max-width) + var(--card-padding) * 2)) / 2
            )
            0 !important;
    }
}

@media (width <= 852px) {
    .content {
        padding-bottom: 0 !important;
        padding: 10px 0 !important;
    }
}

@media (hover: hover) {
    .projects a:hover {
        cursor: pointer !important;
    }
    .projects a:focus-visible {
        outline: solid 2px darkred;
    }
    .links a:hover {
        color: var(--additional);
        background: var(--content-h);
    }
}

html {
    animation: scroll-kostyl
        calc(var(--animation-time) + var(--animation-delay)) forwards;
    animation-timing-function: steps(1, end);
    overscroll-behavior: none;
}

@keyframes scroll-kostyl {
    0% {
        overflow: hidden;
    }
    100% {
        overflow: overlay;
    }
}

body {
    color: var(--content);
    background: var(--background);
    font-family: var(--font-family);
    position: relative;
    margin: 0;
    perspective: 800px;
}

.bg-overlay {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100vh;
    background: var(--background-shapes);

    top: 0;
    left: 0;

    mask-image: url("background.svg");
    mask-repeat: repeat;
    mask-position: center top;
    mask-size: 30%;

    animation: appear calc(var(--animation-time) + var(--animation-time) / 2)
        forwards;
}

.intro-overlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--background);
    z-index: 21;
}

.intro-overlay.animate {
    animation:
        intro var(--animation-time) forwards,
        overlay-kostyl var(--animation-time) forwards;
    animation-timing-function: ease, steps(1, end);
}

@keyframes overlay-kostyl {
    100% {
        display: none;
    }
}

@keyframes intro {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(var(--animation-scaling));
        filter: grayscale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: grayscale(0);
    }
}

@keyframes slide-out {
    0% {
        transform: translateY(var(--card-translate, 0px)) rotateX(45deg)
            scale(var(--card-scale, 1));
    }
    100% {
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

body {
    overflow: hidden;
}

a {
	-webkit-tap-highlight-color: transparent !important;
}
a:hover {
	transition: 0.125s !important;
	/* nasral :( */
}
a:active {
    transform: scale(0.95) !important;
    transition: 25ms !important;
}

.content {
    z-index: 1;
    display: flex;
    position: relative;
    gap: var(--cards-gap);
    flex-direction: column;
    width: 100vw;
    align-items: center;
    padding: var(--s-padding) 0;
    animation: appear var(--animation-time) forwards;
    perspective: 800px;
    min-height: calc(100vh - var(--s-padding) * 2);
}

.card {
    background: var(--surface);
    padding: var(--card-padding);
    padding-top: 14px;
    border-radius: 16px;
    transform-origin: top center;
    width: calc(100% - (var(--card-padding) + var(--mobile-padding)) * 2);
    max-width: var(--max-width);
    transform: translateY(var(--card-translate, 0px)) rotateX(45deg)
        scale(var(--card-scale, 1));
}

.card.animate {
    animation: slide-out var(--animation-time) forwards;
    animation-delay: var(--animation-delay);
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

h1,
p {
    margin: 0;
    font-weight: 400;
}

p {
    margin-top: 6px;
}

h1,
h3 {
    margin: 0;
    margin-bottom: 6px;
}

.links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.links a {
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--content-h);
    background: var(--additional);
    transition: 0.125s;
}

.card .note {
    text-align: center;
    color: var(--content-h);
    margin-top: 10px;
}

.projects {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 12px;
    margin-top: 12px;
}

.projects a {
    display: contents;
    all: unset;
}

.project {
    border: solid 1px var(--border);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-size: 100% 100% !important;
}

.project .description {
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--content-dark);
    backdrop-filter: blur(8px);
}

.project .description p,
.project .description h3 {
    margin-top: 0;
    margin-bottom: 0;
}

::-webkit-scrollbar {
    width: 10px;
    padding: 4px;
    background-color: var(--background-shapes);
}

::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 6px;
    background-color: var(--background);
}