/* COLOR PALETTE
------------------------------------*/
:root {
    --color-0: oklch(0.099 0.035 279);
    --color-1: oklch(from var(--color-0) 0.167 c h);
    --color-2: oklch(from var(--color-0) 0.202 c h);
    --color-3: oklch(from var(--color-0) 0.239 c h);
    --color-4: oklch(from var(--color-0) 0.282 c h);
    --color-5: oklch(from var(--color-0) 0.326 c h);
    --color-6: oklch(from var(--color-0) 0.397 c h);
    --color-7: oklch(from var(--color-0) 0.528 c h);
    --color-8: oklch(from var(--color-0) 0.636 c h);
    --color-9: oklch(from var(--color-0) 0.805 c h);
    --full-gradient: var(--color-0), var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5), var(--color-6), var(--color-7), var(--color-8), var(--color-9);
    --color-highlight-1: oklch(from var(--color-7) l 0.213 h);
    --color-highlight-2: oklch(from var(--color-0) 0.735 0.118 h);
    --gradient-bg: linear-gradient(45deg, var(--color-0) 20%, var(--color-4) 80%);
    --gradient-bg-trans-val: 0.73;
    --gradient-bg-trans: linear-gradient(45deg, oklch(from var(--color-0) l c h / var(--gradient-bg-trans-val)), oklch(from var(--color-3) l c h / var(--gradient-bg-trans-val)));
    --color-animation-playing: oklch(0.6206 0.2026 143.68); /* TODO: alter this */

    /* Borders */
    --default-border-size-pixels: 2px;
    --default-border-size: var(--default-border-size-pixels) solid;
    --default-border-color: var(--color-highlight-1);
    --default-border: var(--default-border-size) var(--default-border-color);
    --default-border-radius: 1rem;
    --bright-border: var(--default-border-size) var(--color-highlight-2);
    --fancy-border-gradient: linear-gradient(
        to right, 
        var(--color-highlight-1),
        var(--color-9)
    ) 1;
}


/* GLOBAL STYLES 
------------------------------------*/
*, *::before, *::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;

    /* Default Font */
    font-family: "Play", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: calc(2.25 * 0.0625em) calc(2.25 * 0.0625em) calc(0.0625em) var(--color-5);
}
html, body {
    min-block-size: 100vh;
}
body { margin: 0; }
.content-wrapper {
    margin-block: 0;
    margin-inline: auto;
    padding: .9375rem;
    max-inline-size: min(100%, 56.25rem);
}
.display-hidden,
.hidden { display: none; }
.opacity-hidden { opacity: 0; }
.visibility-hidden { visibility: hidden; }
.position-reference { position: relative; }
.cover-container {
    position: absolute;
    inset: 0;
}
.card-background {
    padding: 1rem;

    background-color: var(--color-2);

    border: var(--default-border);
}
/* Typography */
body, .default-typography {
    /* Default Typography */
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: var(--color-9);
}
h1, h2, h3,
.h1, .h2, .h3,
.heading {
    margin: 0;
    
    font-family: "Bruno Ace SC", sans-serif;
    font-weight: 400;
    font-style: normal;

    text-shadow: calc(3 * 0.0625rem) calc(3 * 0.0625rem) calc(0.0625rem) var(--color-4);
}
h1, .h1 {
    font-size: 3.75rem;
    line-height: 1.05;
    margin-bottom: 1rem;
}
h2, .h2 {
    font-size: 2.25rem;
    margin-block-end: 1.125rem;
    line-height: 1.2;
}
h3, .h3 {
    font-size: 1.5rem;
}
/* Backgrounds */
.background-holder {
    position: fixed;
    z-index: -100;
    block-size: 100vh;
    inline-size: 100vw;
}
.background-holder.site {
    background: var(--gradient-bg);
}
/* Links */
a:hover { text-decoration: none; }
a {
    color: var(--color-highlight-1);

    &:hover {
        color: var(--color-highlight-2);
    }
}
.btn {
    display: inline-block;

    width: fit-content;
    padding: 0.4375rem;

    background: var(--color-2);
    color: var(--color-9);

    border: var(--bright-border);

    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1;
    transition: all .4s;
}
.btn:hover, 
button:is(:focus, :hover) {
    color: #fff;
    background: oklch(from var(--color-highlight-1) calc(l * 0.05) c h / 0.75);
    box-shadow: inset 0 0 .25rem var(--color-highlight-2);
    border: var(--default-border-size);
    border-image: var(--fancy-border-gradient);
}
/* Logo */
.logo {
    aspect-ratio: 1;
    :is(.any, *) {
        aspect-ratio: unset;
    }
}
@keyframes logotype-load {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#main-logo {
    max-block-size: 7vh;
    block-size: 100%;

    color: var(--color-9);
    text-decoration: none;
    font-size: 1rem;
    text-align: center;

    overflow: hidden;
    
    .heading {
        align-items: center;
        text-shadow: none;
        transition: color .35s;

        animation: logotype-load 1.25s ease-in-out backwards;
    }
    span {
        display: initial;
        inline-size: auto;
    }
    
    > :first-child {
        z-index: -1;
        transform: translate(.25em, .3em);
        color: var(--color-8);
    }
    > :last-child {
        z-index: -2;
        transform: translate(-.25em, -.3em);
        animation-delay: .5s;
    }
    &:is(:hover, :active) {
        > :first-child { color: var(--color-highlight-1); }
        > :last-child { color: var(--color-highlight-2); }
    }
}


/* NAV
------------------------------------*/
.navWrap {
    position: sticky;
    inset-block-start: 0;
    z-index: 99;
    block-size: 3rem;
    inline-size: 100%;
    border-block-end: var(--bright-border);

    background: var(--color-1);
    
    display: flex;
    align-items: center;
}
.navWrap > .content-wrapper {
    inline-size: 100%;
    padding-block: 0;
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    justify-content: space-between;
}
input#navToggle {
    display: none;
}
input#navToggle ~ label {
    position: relative;
    padding: 0.25rem;
    inline-size: 2rem;
    block-size: 2rem;
}
input#navToggle ~ label > span,
input#navToggle ~ label > span::before,
input#navToggle ~ label > span::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0.75rem;
    block-size: 0.125rem;
    inline-size: 1.75rem;
    opacity: 1;
    background: #fff;
    transition: 0.14s ease-in-out;
}
input#navToggle ~ label > span::before {
    inset-block-start: -0.5rem;
}
input#navToggle ~ label > span::after {
    inset-block-start: 0.5rem;
}
#navToggle:checked ~ label > span {
    inline-size: 0;
    background: oklch(0.1822 0 / 0);
}
#navToggle:checked ~ label > span::before {
    transform: rotateZ(45deg);
    inset-block-start: 0;
}
#navToggle:checked ~ label > span::after {
    transform: rotateZ(-45deg);
    inset-block-start: 0;
}
#navToggle:checked ~ nav {
    inset-inline-start: 0;
}
nav {
    position: absolute;
    z-index: -1;
    inset-block-start: 3rem;
    inset-inline-start: -110%;
    inline-size: 100%;
    transition: 0.22s ease-in-out;

    anchor-name: --nav;
}
nav::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    z-index: -1;
    block-size: 100vh;
    inline-size: 100vw;
    background-color: var(--color-2);
    background-size: cover;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul li > a {
    display: inline-block;
    text-decoration: none;
    inline-size: 100%;
    padding: 0.75rem 1rem;
    color: var(--color-9);
    border-block-end: var(--default-border);
    background: var(--color-2);
    transition: 0.25s ease-in-out;
}
nav ul li > a:hover {
    color: #fff;
    background: var(--color-3);
}
nav ul li > a:active {
    transition-duration: 0.15s;
    background: var(--color-4);
}
.active-page {
    color: #fff !important;
    background: var(--color-4) !important;
}
nav ul li:last-of-type {
    display: flex;
    padding-block-start: 1.5rem;
    justify-content: center;
}
nav ul li > .btn {
    padding: .75rem;
    font-size: 1rem;

    anchor-name: --contact-button;
}
/* contact popover */
#contact-box:popover-open {
    position: absolute;
    position-anchor: --contact-button;
    container: contact-box / inline-size;

    inset-block-start: anchor(bottom);

    margin: 0 auto;
    border: var(--bright-border);

    inline-size: max(33vw, min(100%, 24.8rem));

    &::backdrop {
        background-color: #000;
        opacity: 0.35;
    }
    & img {
        aspect-ratio: 3/4;
        inline-size: clamp(6rem, 100%, 7.875rem);
        outline: calc(1.5 * var(--default-border-size-pixels)) solid var(--default-border-color);
    }
}
#contact-box-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    & * { margin: 0; }
    & > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}
#contact-box-content-biography { display: none; }
@container contact-box (min-inline-size: 22.5rem) {
    #contact-box-content-wrapper {
        flex-direction: row;
        align-items: start;
        grid-template: auto / 1fr auto;

        & > div { align-items: start; }
    }
}
@container contact-box (min-inline-size: 23.75rem) {
    #contact-box-content-biography { display: block; }
}


/* HOME
------------------------------------*/
.home {
    display: flex;
    flex-direction: column;

    & .content-wrapper {
        flex: 1 0 auto;
        
        & .content-wrapper { padding-inline: 0; }
    }
}


/* RESUME
------------------------------------*/
body:not(.home) {
    & header {
        &::before {
            content: '';
            mask-image: linear-gradient(oklch(0 0 0 / 1), oklch(0 0 0 / 0) 90%);
            mask-mode: alpha;
            background: url(../images/bg-planet.jpg) no-repeat bottom / cover;
            display: block;
            block-size: 12.5rem;
        }
    }
    & > * > section {
        margin-block-end: 3.125rem;

        & h2 {
            border-block-end: 2px solid;
            border-image: linear-gradient(
                to right, 
                var(--color-highlight-1),
                var(--color-9)
            ) 1;

        }
    }
}

/* Profile
------------------------------------*/

/* Projects
------------------------------------*/
.project-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    margin-inline: 0;

    & img {
        display: block;
        object-fit: contain;
        
        inline-size: 100%;
    }
}
.project-item-content-wrapper {
    /* Yes technically this is flex not grid but the user would never know and it looks better anyways. */
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.project-item-button-wrapper {
    display: flex;
    flex-direction: column;
    margin-block-start: auto;
    gap: .5rem;
    align-items: flex-start;
}
.project-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Work Experience
------------------------------------*/
.work-item {
    display: block;
    grid: 1fr / 18.75rem 1fr;
    column-gap: 1.25rem;
}
.work-details p { margin: 0; }
.work-summary { margin-block-end: 1.875rem; }


/* Animation
------------------------------------*/
.animation-space {
    display: grid;
    grid-template: 1fr / 1fr;

    * {
        display: grid;
        grid-template: 1fr / 1fr;
        grid-column: 1;
        grid-row: 1;
        
        inline-size: 100%;
        aspect-ratio: 1;
    }
}
@scope (body.animations-page .animation-grid) {
    :scope {
        display: grid;
        grid-template: repeat(3, 1fr) / auto;
        gap: 1rem;
    }

    @keyframes anim-1--clip-mask--square {
        0%, 10% {
            clip-path: inset(0%);
        }
        30%, 100% {
            clip-path: inset(14.6446609407%);
        }
    }
    @keyframes anim-1--rotate--square {
        0%, 10% {
            transform: rotate(var(--initial-rotation));
        }
        90%, 100% {
            transform: rotate(calc(360deg + var(--initial-rotation)));
        }
    }
    @keyframes anim-1--clip-mask--center-circle {
        0%, 10% {
            clip-path: circle(3rem);
        }
        30%, 100% {
            clip-path: circle(30%);
        }
    }
    #animation-1 {
        & > div {
            clip-path: circle(closest-side);
            
            & > div {
                background-color: var(--color-highlight-1);
                --initial-rotation: 0deg;

                animation: 
                    anim-1--clip-mask--square 3s ease-in-out infinite alternate backwards,
                    anim-1--rotate--square 6s linear infinite alternate backwards
                ;

                &:last-of-type {
                    --initial-rotation: 45deg;
                }
            }
        }
        :last-child {
            transform: scale(0.9);

            & > div {
                background-color: var(--color-2);
            }
        }
    }

    @property --anim-2--rotation {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0turn;
    }
    @keyframes anim-2--rotation {
        0% {
            --anim-2--rotation: calc(0turn + var(--initial-rotation));
        }
        100% {
            --anim-2--rotation: calc(1turn + var(--initial-rotation));
        }
    }
    #animation-2 {
        clip-path: circle(closest-side);
        transform: rotate(45deg);
        
        :not(:last-child) {
            --initial-rotation: 0turn;

            background-color: var(--color-highlight-1);

            clip-path: polygon(46% 100%, 54% 100%, 50% 50%);
            
            transform: rotate(var(--anim-2--rotation));
            filter: 
                blur(calc(250px * (.5 + cos(var(--anim-2--rotation)) / 2)))
                opacity(calc(100% * (.5 - cos(var(--anim-2--rotation)) / 2)))
            ;

            animation: anim-2--rotation 4s linear infinite backwards;
        }
        :last-child {
            clip-path: circle(40%);
            background-color: var(--color-2);
        }

        :nth-child(02) { --initial-rotation: 0.05turn; }
        :nth-child(03) { --initial-rotation: 0.10turn; }
        :nth-child(04) { --initial-rotation: 0.15turn; }
        :nth-child(05) { --initial-rotation: 0.20turn; }
        :nth-child(06) { --initial-rotation: 0.25turn; }
        :nth-child(07) { --initial-rotation: 0.30turn; }
        :nth-child(08) { --initial-rotation: 0.35turn; }
        :nth-child(09) { --initial-rotation: 0.40turn; }
        :nth-child(10) { --initial-rotation: 0.45turn; }
        :nth-child(11) { --initial-rotation: 0.50turn; }
        :nth-child(12) { --initial-rotation: 0.55turn; }
        :nth-child(13) { --initial-rotation: 0.60turn; }
        :nth-child(14) { --initial-rotation: 0.65turn; }
        :nth-child(15) { --initial-rotation: 0.70turn; }
        :nth-child(16) { --initial-rotation: 0.75turn; }
        :nth-child(17) { --initial-rotation: 0.80turn; }
        :nth-child(18) { --initial-rotation: 0.85turn; }
        :nth-child(19) { --initial-rotation: 0.90turn; }
        :nth-child(20) { --initial-rotation: 0.95turn; }
    }
    
    @property --anim-3--moon-phase {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0turn;
    }
    @keyframes anim-3--moon-phase {
        0% {
            --anim-3--moon-phase: 0turn;
        }
        100% {
            --anim-3--moon-phase: 1turn;
        }
    }
    @keyframes anim-3--day-night--block {
        0%, 49.9999% {
            background-color: #fff;
        }
        50%, 100% {
            background-color: var(--color-4);
        }
    }
    @keyframes anim-3--day-night--ellipse {
        0%, 24.9999%, 75%, 100% {
            background-color: #fff;
        }
        25%, 74.9999% {
            background-color: var(--color-4);
        }
    }
    #animation-3 {
        clip-path: circle(49.7%);
        
        & > :first-child {
            background-color: var(--color-9);

            * {
                --anim-3--crater-size: 0%;
                --anim-3--crater-dist: 0%;
                --anim-3--crater-angle: 0deg;

                background-color: var(--color-7);

                mix-blend-mode: darken;
                clip-path: circle(calc(var(--anim-3--crater-size) / 2));
                transform: translate(
                    calc(var(--anim-3--crater-dist) / 2 * cos(var(--anim-3--crater-angle))), 
                    calc(var(--anim-3--crater-dist) / 2 * sin(var(--anim-3--crater-angle)))
                );
            }

            :first-child {
                --anim-3--crater-size: 32%;
                --anim-3--crater-dist: 38%;
                --anim-3--crater-angle: 224deg;
            }
            :nth-child(2) {
                --anim-3--crater-size: 19%;
                --anim-3--crater-dist: 53%;
                --anim-3--crater-angle: -102deg;
            } 
            :nth-child(3) {
                --anim-3--crater-size: 12%;
                --anim-3--crater-dist: -19%;
                --anim-3--crater-angle: -40deg;
            } 
            :nth-child(4) {
                --anim-3--crater-size: 7%;
                --anim-3--crater-dist: -72%;
                --anim-3--crater-angle: -23deg;
            } 
            :nth-child(5) {
                --anim-3--crater-size: 8%;
                --anim-3--crater-dist: 44%;
                --anim-3--crater-angle: -34deg;
            } 
            :nth-child(6) {
                --anim-3--crater-size: 21%;
                --anim-3--crater-dist: 50%;
                --anim-3--crater-angle: 47deg;
            } 
            :nth-child(7) {
                --anim-3--crater-size: 14%;
                --anim-3--crater-dist: 65%;
                --anim-3--crater-angle: -46deg;
            } 
            :nth-child(8) {
                --anim-3--crater-size: 13%;
                --anim-3--crater-dist: 61%;
                --anim-3--crater-angle: 101deg;
            } 
            :nth-child(9) {
                --anim-3--crater-size: 8%;
                --anim-3--crater-dist: 63%;
                --anim-3--crater-angle: 8deg;
            } 
            :nth-child(10) {
                --anim-3--crater-size: 8%;
                --anim-3--crater-dist: -51%;
                --anim-3--crater-angle: 1deg;
            } 
            :nth-child(11) {
                --anim-3--crater-size: 5%;
                --anim-3--crater-dist: 77%;
                --anim-3--crater-angle: -71deg;
            } 
        }
        & > :last-child {
            mix-blend-mode: multiply;

            animation: anim-3--moon-phase 11s linear infinite backwards;

            :first-child {
                background-color: #fff;
                animation: anim-3--day-night--block 11s linear infinite;
            }
            :nth-child(2) {
                /* Non-logical properties are intentionally used here to ensure the animation works sensibly in other orientations */
                width: 50%;
                height: 100%;

                background-color: var(--color-4);
                
                animation: anim-3--day-night--block 11s reverse infinite;
            }
            :last-child {
                background-color: #fff;
                
                clip-path: circle(50%);
                transform: scaleX(cos(var(--anim-3--moon-phase)));

                animation: anim-3--day-night--ellipse 11s linear infinite backwards;
            }
        }
    }
    
    .card-background {
        padding: calc(3 * var(--default-border-size-pixels));
        border-width: calc(1.5 * var(--default-border-size-pixels));
    }

    .grid-item {
        overflow: hidden;
        animation: var(--animation--hover-pulse,);
    }

    .animation-space * {
        animation-play-state: paused !important;
    }

    @scope (.grid-item:has(> input:checked)) {
        :scope {
            border-color: var(--color-animation-playing);

            animation: none;
        }
        
        .animation-space * {
            animation-play-state: running !important;
        }
    }
}


/* FOOTER
------------------------------------*/
footer {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding-block: 1rem;
    padding-inline: 3rem;

    background: linear-gradient(to top, var(--color-1), var(--color-4));

    border-block-start: var(--default-border);
}
.socials {
    list-style-type: none;
    padding: 0;

    & li {
        display: inline-block;

        margin-inline-start: .625rem;
    }
    & img {
        inline-size: 2rem;

        &:hover {
            opacity: .5;
        }
    }
}



@media (hover: hover) {

    @keyframes hover-pulse {
        0% {
            outline: var(--default-border-size) var(--color-highlight-1);
            outline-offset: 0rem;
        }
        100% {
            outline: var(--default-border-size) transparent;
            outline-offset: var(--animation--hover-pulse--final-offset, 0.75rem);
        }
    }

    [data-animation~="hover-pulse"]:hover:not(:focus, :active) {
        --animation--hover-pulse: 
            hover-pulse 
            var(--animation--hover-pulse--duration, 1.5s)
            ease-out
            var(--animation--hover-pulse--delay,)
            var(--animation--hover-pulse--count, infinite)
        ;
    }

}

@media screen and (min-width: 31.25rem) {
    .home {
        background: url(../images/bg-blackhole-2_1080.jpg) no-repeat bottom / cover;
    }
    .home .background-holder { visibility: hidden; }
    .content-bg { 
        background: var(--gradient-bg-trans); 
        padding: 1.25rem; 
        border-radius: var(--default-border-radius);
    }

    .resume {
        & header {
            &::before {
                block-size: 23.4375rem;
            }
        }
    }
    h1 {
        font-size: 4.375rem;
    }
}
/* 750px */
@media screen and (min-width: 46.875rem) {
    .content-wrapper, .content-bg { padding: 1.875rem; }
    
    footer {
        flex-direction: row;
        align-items: baseline;
        text-align: start;
    }
    
    .navWrap {
        block-size: auto;
    }

    .navWrap > .content-wrapper {
        display: grid;
        grid-template-columns: 6.25rem minmax(auto, 68.75rem);
        justify-content: center;
    }

    .navToggleLabel {
        display: none;
    }

    nav {
        position: initial;
        z-index: 100;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    nav ul li > a {
        background: none;
        border-bottom: none;
    }

    nav::after {
        display: none;
        padding: initial;
    }

    nav ul li:last-of-type {
        display: initial;
        padding: 0 1rem;
        justify-content: center;
    }

    nav ul .btn {
        padding: 0.4375rem;
        font-size: 0.75rem;
    }
    
    #contact-box:popover-open {
        position-anchor: --nav;

        inset: anchor(bottom) anchor(end) auto auto;
        margin: var(--default-border-size-pixels) auto 0;
    }

    #main-logo {
        font-size: 1.8rem;
    }

    @scope (body.animations-page .animation-grid) {
        :scope {
            grid-template: auto / repeat(3, 1fr) !important;
        }
    }
}
/* 900px */
@media screen and (min-width: 56.25rem) {
    /*
    .project-item {
        flex-direction: row;
    
        & img {
            inline-size: 18.75rem;
        }
    }
    .project-item-content-wrapper {
        flex: unset;
    }
    .project-item-wrapper {
        display: block;
    }
    */
    
    .project-item-wrapper {
        display: grid;
        grid-template: repeat(8, max-content) / repeat(3, 1fr);
    }
    .project-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
    }
    
    .work-item { display: grid; }
    .work-summary { margin: 0; }
}