/* Copyright (c) Ian Abrams 2024 */

/* CSS flag for portrait (read: mobile) */
@media (orientation: portrait) {
    :root {
        --portrait: 1;
    }
}

@media (orientation: landscape) {
    :root {
        --landscape: 1;
    }
}

/* sizing parameters */
/* contract: allow elements to overwrite these without breaking the styling code */
:root {
    --blurb-content-width-portrait: min(20dvh, 20rem);
    --blurb-content-width-landscape: min(12dvw, 20rem);
    --blurb-content-height-portrait: var(--blurb-content-width-portrait);
    --blurb-content-height-landscape: var(--blurb-content-width-landscape);
    --navbar-height: 3rem;
    --eyecandy-line-size: max(0.5dvw, 0.5dvh, 0.5rem);
    --eyecandy-spacing: 1rem;
    --section-inner-margins: min(
        max(
            calc(1rem * var(--portrait, 0) + 3rem * var(--landscape, 0)),
            var(--portrait, 0) * 100lvh - var(--portrait, 0) * 100svh),
        10lvh);
    --aboutme-title-height: 3rem;
    --aboutme-title-width: 12rem;
    --eyecandy-frame-size: 3rem;
    --page-margin: 2rem;
    --min-section-height-portrait: calc(
        100dvh
        - var(--navbar-height)
        - var(--blurb-content-height-portrait)
        - 2 * var(--section-inner-margins));
    --min-section-height-landscape: calc(
        50dvh
        - 0.5 * var(--navbar-height)
        - 0.5 * var(--eyecandy-line-size)
        - var(--section-inner-margins));
    --small-font: calc(max(1vw, 1vh, 1em)) "arial";
    --large-font: small-caps calc(min(4.5dvh, 8dvh)) "impact";
    --max-aboutme-width: calc(30rem + max(50dvw, 30rem));
    --dev-icon-size: 2em;
}

/* default color palette */
.pal-default {
    --color-fore: rgb(190, 190, 190);
    --text-color-fore: white;
    --color-mid: rgb(122, 171, 221);
    --text-color-mid: black;
    --color-back: white;
    --text-color-back: black;
}

/* secondary color palette to break up sections */
.pal-alt {
    --color-fore: rgb(190, 190, 190);
    --text-color-fore: white;
    --color-mid: rgb(145, 145, 145);
    --text-color-mid: white;
    --color-back: rgb(60, 60, 60);
    --text-color-back: white;
}

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* calculated vars (recalculated for each element -- think of as functions with fixed inputs rather than variables) */
* {
    --blurb-content-width: calc(
        var(--blurb-content-width-portrait) * var(--portrait, 0) +
        var(--blurb-content-width-landscape) * var(--landscape, 0));
    --blurb-content-height: calc(
        var(--blurb-content-height-portrait) * var(--portrait, 0) +
        var(--blurb-content-height-landscape) * var(--landscape, 0));
    --min-section-height: calc(
        var(--min-section-height-portrait) * var(--portrait, 0) +
        var(--min-section-height-landscape) * var(--landscape, 0));
    --blurb-width: calc(max(
        var(--blurb-content-width),
        var(--eyecandy-line-size)) * var(--landscape, 0));
    --blurb-height: calc(max(
        var(--blurb-content-height),
        var(--eyecandy-line-size)) * var(--portrait, 0));
    --prev-blurb-width: calc(max(
        var(--blurb-content-width),
        var(--eyecandy-line-size)) * var(--landscape));
    --prev-blurb-height: calc(max(
        var(--blurb-content-width),
        var(--eyecandy-line-size)) * var(--portrait));
    --ttt-font-size: calc(0.15 * min(var(--min-section-height), 60dvw));
}

/* for overriding the colors: */
.foreground {
    color: var(--text-color-fore);
    background-color: var(--color-fore);
}
.midground {
    color: var(--text-color-mid);
    background-color: var(--color-mid);
}
.background {
    color: var(--text-color-back);
    background-color: var(--color-back);
}

.fill {
    width: 100%;
    height: 100%;
}

html, body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

.page {
    width: calc(100% - 2 * var(--page-margin)); /* fill space (auto does not work when position is absolute) */
    margin: var(--page-margin);
}

.nav-container {
    position: sticky;
    top: 0;
    height: var(--navbar-height);
}

.navlist {
    color: var(--text-color-back);
    background-color: var(--color-back);
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    & > li {
        float: left;
        display: flex;
        height: var(--navbar-height);
        & > a {
            padding: 1rem;
            text-decoration: none;
            cursor: pointer;
            color: inherit;
            /* reset color of visited links in the navbar */
            &:visited {
                color: inherit
            }
        }
    }
}

.navlist-active {
    color: var(--text-color-mid);
    background-color: var(--color-mid);
    transition-duration: 250ms;
}

.pages-container {
    display: flex;
    justify-content: center;
    overflow: scroll;
    position: relative;
    scroll-snap-type: y mandatory;
    background-color: var(--color-back);
    & > * {
        top: 0;
        transition-duration: 250ms;
    }
    /* the init state for all the non-homepages */
    & > *:not(:first-child) {
        display: none;
        opacity: 0; /* necessary so that the first render isn't immediate (transition-duration doesn't affect display-less elems) */
    }
}

.page-section {
    min-height: var(--min-section-height);
    display: flex;
    flex-wrap: nowrap;
    height: fit-content;
    position: relative;
    font: var(--large-font);
    & > * {
        width: fit-content;
    }
    & p {
        align-self: center;
        text-align: justify;
        font: var(--small-font);
    }
}

#aboutme {
    max-width: var(--max-aboutme-width);
}

#aboutme .section-content {
    width: auto;    /* to fill parent (portrait) */
    flex-grow: 1;   /* to fill parent (landscape) */
    display: flex;
    align-items: center;
    justify-content: center;
}

#aboutme .section-blurb {
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
    display: flex;
    position: relative;
    align-items: center;        /* vertical centering */
    justify-content: center;    /* horizontal centering */
    overflow: hidden;
    & img {
        object-fit: cover;
    }
}

.blurb-content-container {
    /* for size: mult by 1.15 due to hexagon shape, add 2 eyecandy line due to clipping */
    width: calc(1.15 * var(--blurb-content-width) + 2 * var(--eyecandy-line-size));
    height: calc(1.15 * var(--blurb-content-height) + 2 * var(--eyecandy-line-size));

    /* --rhombus: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); */
    --offset: calc(var(--landscape, 0) * pi / 6); /* angle offset for the hexagon */
    /* a hexagon, rotated by --offset */
    --hexagon: polygon(
        calc(50% * cos(var(--offset) + 1 * pi / 3) + 50%) calc(50% * sin(var(--offset) + 1 * pi / 3) + 50%),
        calc(50% * cos(var(--offset) + 2 * pi / 3) + 50%) calc(50% * sin(var(--offset) + 2 * pi / 3) + 50%),
        calc(50% * cos(var(--offset) + 3 * pi / 3) + 50%) calc(50% * sin(var(--offset) + 3 * pi / 3) + 50%),
        calc(50% * cos(var(--offset) + 4 * pi / 3) + 50%) calc(50% * sin(var(--offset) + 4 * pi / 3) + 50%),
        calc(50% * cos(var(--offset) + 5 * pi / 3) + 50%) calc(50% * sin(var(--offset) + 5 * pi / 3) + 50%),
        calc(50% * cos(var(--offset) + 6 * pi / 3) + 50%) calc(50% * sin(var(--offset) + 6 * pi / 3) + 50%)
    );
    clip-path: var(--hexagon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(-1 * var(--eyecandy-spacing));
    flex-shrink: 0;
    
    & * {
        margin: 0;
        width: calc(100% - 2 * var(--eyecandy-line-size));
        height: calc(100% - 2 * var(--eyecandy-line-size));
        clip-path: var(--hexagon);
    }
    /* we use a pseudo-element for the background coloring so that we can clip it */
    &::before {
        content: "";
        position: absolute;
        background-color: var(--color-mid);
        width: calc(100% * var(--portrait, 0) + var(--eyecandy-frame-size) * var(--landscape, 0));
        height: calc(var(--eyecandy-frame-size) * var(--portrait, 0) + 100% * var(--landscape, 0));
    }
}

/* common properties for  vert/horiz eyecandy */
#aboutme .section-blurb::before,
#aboutme .section-blurb::after {
    content: "";
    display: block;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: var(--color-mid);
}

#aboutme #aboutme-title h1 {
    text-align: center;
    height: fit-content;
    width: 100%;
    clip-path: none;
}

#aboutme #aboutme-blurb-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-back);
}

#aboutme #aboutme-title {
    & > .blurb-content-container {
        --blurb-content-height: calc(max(var(--aboutme-title-height), var(--aboutme-title-width)));
        --blurb-content-width: calc(max(var(--aboutme-title-height), var(--aboutme-title-width)));
    }
    height: var(--aboutme-title-height);
    scroll-margin-top: var(--page-margin);
    margin-top: 0;
    /* remove extra eyecandy line from aboutme-title */
    &::after {
        opacity: 0;
    }
}

.dev-icon {
    border: calc(0.5 * var(--eyecandy-line-size)) solid var(--text-color-mid);
    border-radius: 5px;
    width: var(--dev-icon-size);
    margin: 5px;
    padding: 2px;
}

@media (orientation: landscape) {
    #aboutme .section-content {
        margin-top: calc(0.5 * var(--eyecandy-line-size) + var(--section-inner-margins)); /* adjustment for eyecandy */
        margin-bottom: calc(0.5 * var(--eyecandy-line-size) + var(--section-inner-margins)); /* adjustment for eyecandy */
        margin-left: var(--section-inner-margins);
        margin-right: var(--section-inner-margins);
    }
    /* START: horizontal eyecandy */
    #aboutme .page-section::after {
        content: "";
        position: absolute;
        background-color: var(--color-mid);
        height: var(--eyecandy-line-size);
        width: calc(100% - var(--blurb-width) + var(--eyecandy-line-size));
        margin-left: calc(0.5 * var(--blurb-width) - 0.5 * var(--eyecandy-line-size));
        margin-right: calc(0.5 * var(--blurb-width) - 0.5 * var(--eyecandy-line-size));
        bottom: calc(-0.5 * var(--eyecandy-line-size));
    }
    /* END */
    /* START: vertical eyecandy */
    #aboutme .section-blurb {
        flex-direction: column;
        width: var(--blurb-width);
    }
    #aboutme .page-section {
        flex-direction: row;
        padding-right: var(--blurb-width);
    }
    #aboutme > .page-section:nth-child(2n+1)  {
        flex-direction: row-reverse;
        padding-right: 0;
        padding-left: var(--blurb-width);
    }
    #aboutme .section-blurb::before,
    #aboutme .section-blurb::after {
        width: var(--eyecandy-line-size);
        height: 50%;
    }
    /* END */
    /* START: make aboutme-title horizontal */
    #aboutme #aboutme-title {
        
        /* offset for column size of blurbs */
        margin-left: calc(0.5 * var(--blurb-width) - 0.5 * var(--eyecandy-line-size));
        margin-right: calc(0.5 * var(--blurb-width) - 0.5 * var(--eyecandy-line-size));
        width: calc(100% - var(--blurb-width) - var(--eyecandy-line-size));

        /* update the portrait and landscape vars to draw eyecandy in the correct orientation */
        & * {
            --landscape: 0;
            --portrait: 1;
        }

        /* the following is based off the portrait styling for .section-blurb */
        flex-direction: row;
        margin-bottom: calc(-0.5 * var(--aboutme-title-height));
        &::before,
        &::after {
            height: var(--eyecandy-line-size);
            width: 50%;
        }
    }
    #aboutme #aboutme-title + .page-section > .section-content {
        /* adjustment for aboutme-title */
        margin-top: calc(max(
                        0.5 * var(--aboutme-title-height),
                        0.5 * var(--eyecandy-frame-size),
                        var(--section-inner-margins) + 0.5 * var(--eyecandy-line-size)
                    ));
    }
    #aboutme #aboutme-title {
        scroll-snap-align: start;
    }
    #aboutme .page-section::after {
        scroll-snap-align: start;
        scroll-margin: var(--section-inner-margins);
    }
    #aboutme-tic-tac-toe {
        flex-direction: row;
    }
    #aboutme-tic-tac-toe > div {
        flex-grow: 1;
        flex-basis: 0;
        &:nth-child(1) {
            text-align: right;
        }
        &:nth-child(3) {
            text-align: left;
        }
    }

    .flex-lc {
        display: flex;
        flex-direction: column;
    }
    .flex-lr {
        display: flex;
        flex-direction: row;
    }
}

@media (orientation: portrait) {
    #aboutme .page-section {
        flex-direction: column-reverse;
    }
    #aboutme .section-content {
        flex-grow: 1;
        /* margin on the top and bottom to prevent overlapping with blurbs */
        /* we choose max of prev and current blurb heights for centering reasons */
        margin-top: calc(var(--section-inner-margins) + 0.5 * max(var(--prev-blurb-height), var(--blurb-height)));
        margin-bottom: calc(var(--section-inner-margins) + 0.5 * max(var(--prev-blurb-height), var(--blurb-height)));

        /* adjustment for eyecandy plus 'normal' margin size */
        margin-left: calc(0.5 * var(--eyecandy-line-size) + var(--section-inner-margins));
        margin-right: calc(0.5 * var(--eyecandy-line-size) + var(--section-inner-margins));
    }
    /* START: horizontal eyecandy */
    #aboutme .section-blurb {
        width: 100%;
        flex-direction: row;
        height: var(--blurb-height);
        /* for centering and alignment, we made the content use padding to prevent overlapping */
        /* so we need to effectively remove our height */
        margin-bottom: calc(-0.5 * var(--blurb-height));
        margin-top: calc(-0.5 * var(--blurb-height));
    }
    #aboutme .section-blurb::before,
    #aboutme .section-blurb::after {
        height: var(--eyecandy-line-size);
        width: 50%;
    }
    /* END */
    /* START: vertical eyecandy */
    #aboutme #aboutme-title+.page-section * {
        --prev-blurb-height: var(--aboutme-title-height);
    }
    #aboutme .page-section::before {
        content: "";
        width: var(--eyecandy-line-size);
        height: 100%;
        background-color: var(--color-mid);
        position: absolute;
        /*margin-top: calc(0.5 * var(--blurb-height) - 0.5 * var(--eyecandy-line-size));
        margin-bottom: calc(0.5 * var(--blurb-height) - 0.5 * var(--eyecandy-line-size));*/
        top: 0;/*calc(-0.5 * var(--prev-blurb-height));*/
    }
    #aboutme .page-section:nth-child(2n)::before {
        left: 0;
    }
    #aboutme .page-section:nth-child(2n+1)::before {
        right: 0;
    }
    /* END */

    #aboutme #aboutme-title {
        margin-bottom: calc(-0.5 * var(--aboutme-title-height));

        /* make the first 'real' page section slightly larger */
        /* to compensate for the lack of a real blurb above it */
        & + .page-section {
            height: calc(
                var(--min-section-height)
                + 0.5 * var(--blurb-height) - 0.5 * var(--aboutme-title-height)
                + var(--section-inner-margins) - var(--page-margin));
        }
    }
    #aboutme .section-blurb {
        scroll-snap-align: start;
        scroll-margin: var(--section-inner-margins);
    }
    #aboutme-tic-tac-toe {
        flex-direction: column;
    }
    .section-blurb:first {
        min-height: calc(var(--min-section-height) + var(--blurb-height));
    }

    .flex-pc {
        display: flex;
        flex-direction: column;
    }
    .flex-pr {
        display: flex;
        flex-direction: row;
    }
}

/* longer line of the #aboutme text is ~ 70 chars */
#aboutme p {
    font-size: 1.5rem;
}

#aboutme #aboutme-tic-tac-toe {
    justify-content: space-around;
}

#aboutme #tic-tac-toe-board {
    flex-grow: 0;
    flex-shrink: 0;

    display: grid;
    gap: var(--eyecandy-line-size);
    grid-template-columns: 1fr 1fr 1fr;

    background-color: var(--text-color-mid);

    margin: calc(2 * var(--eyecandy-line-size));
    flex-basis: calc(0.6 * min(var(--min-section-height), 60dvw));
    width: calc(0.6 * min(var(--min-section-height), 60dvw));
    height: calc(0.6 * min(var(--min-section-height), 60dvw));
    font-family: sans-serif;
    font-size: var(--ttt-font-size);
    & > div {
        flex-grow: 1;
        flex-basis: 0;
        user-select: none;
        transition: 350ms;
        position: relative;
        background-color: var(--color-back);
        & > span {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;

            /* for animations */
            position: absolute;
            top: 0;
            left: 0;
            transition: inherit;
        }
    }
}

.ttt-first-move {
    animation: ttt-first-move 500ms forwards cubic-bezier(.55,.09,.68,.53);
}

@keyframes ttt-clear {
    0% {
        font-size: var(--ttt-font-size);;
    }
    35% {
        font-size: calc(0.75 * var(--ttt-font-size));
    }
    70% {
        font-size: calc(1.3 * var(--ttt-font-size));
    }
    100% {
        font-size: 0;
    }
}

@keyframes ttt-first-move {
    /* have the peice 'fall in' */
    0% {
        font-size: calc(5 * var(--ttt-font-size));
    }
    60% {
        font-size: var(--ttt-font-size);
    }

    /* do a few 'bounces' */
    70% {
        font-size: calc(1.2 * var(--ttt-font-size));
    }
    80% {
        font-size: var(--ttt-font-size);;
    }
    90% {
        font-size: calc(1.05 * var(--ttt-font-size));
    }
    100% {
        font-size: inherit;
    }
}

#app-dev-pics {
    position: relative;
    width: fit-content;
    height: 100%;
    &> img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    &> img:first-child {
        position: relative;
        padding-right: 4rem;
        padding-bottom: 4rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .navlit > li:hover {
        color: var(--text-color-fore);
        background-color: var(--color-fore);
        transition-duration: 250ms;
    }
    #aboutme #tic-tac-toe-board > div:hover {
        background-color: var(--color-fore);
    }
}