:root
{
    --header-height: 6.0rem;

    --filter-blur: blur(6px);
}

html
{
    scroll-behavior: smooth;
}

body
{
    /* so main block can grow to fill what header/footer dont */
    display:flex;
    flex-direction: column;

    /* fill out at least the whole screen - footer should always touch bottom */
    min-height: 100vh;
}


/* ============ HEADER ============ */

#header-main
{
    --space-interaction-inl: 1.2rem;
    --space-interaction-blk: 1.2rem;
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: auto;

    transition: var(--trans-med);
    transition-property:
        background-color,
        backdrop-filter,
        filter,
        opacity;

    &.active
    {
        background-color: var(--color-tint-dark);
        backdrop-filter: var(--filter-blur);
    }
    /* fix blocking when not enabled */
    &:not(.active){
        /* same as ignore-ptr-self */
        pointer-events: none;
        &>:not(.ignore-ptr-self){pointer-events: all;}
    }
}

#header-main>.content
{
    height: var(--header-height);
    display: flex;
    align-items: stretch;
}

#header-main .hamburger
{
    margin: var(--space-content);
    margin-left: auto;
    padding: var(--space-interaction-inl) var(--space-interaction-blk);
    
    background-color: var(--color-tint-dark);
    transition: var(--trans-med);
    transition-property: backdrop-filter, background-color;
    border: transparent;

    &.active
    {
        background-color: transparent;
        border: 2px var(--color-tint) solid;
    }

    span { transition: var(--trans-med); }
}

#header-main nav
{
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    transition:
        height var(--trans-med);
    text-align: right;
}

#header-main nav .break-line
{
    background-color: transparent;
    transition: var(--trans-med);
}

#header-main nav ul
{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#header-main nav li
{
    position: relative;
    right: -100%;
    opacity: 0;
    transition:
        right var(--trans-med),
        opacity var(--trans-med);
    &:nth-child(1) { transition-delay: 0.2s; }
    &:nth-child(2) { transition-delay: 0.1s; }
    &:nth-child(3) { transition-delay: 0s; }
}

#header-main nav a
{    
    display:block;
    text-shadow: 0px 0px 5px black;
}

#header-main nav.active
{
    height: 100vh;
}

#header-main nav.active .break-line
{
    background-color: var(--color-tint);
}

#header-main nav.active li
{
    right: 0%;
    opacity: 1;
    &:nth-child(1) { transition-delay: 0s; }
    &:nth-child(2) { transition-delay: 0.1s; }
    &:nth-child(3) { transition-delay: 0.2s; }
}

main
{
    flex: 1;
    overflow: hidden;
}

/* ============ SECTIONS ============ */

section
{
    position:relative;
}

section#home
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    font-weight: bold;
}

section#home #cta
{
    margin: var(--space-sector-blk) auto;
}

section#home #quicklinks
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-sector-inl);
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-sector-blk);
    width: 100%;
    transition: none;
}

section#about
{
    background: var(--grad-light);
    color: black;
}

section#about article
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

section#about article img
{
    max-height: 14rem;
    border-radius: 50cqh;
    aspect-ratio: 1;
    margin-inline: var(--space-sector-inl);
    align-self: center;
}

section#about ul.progress-list
{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-content);

    &>li
    {
        display: flex;
        gap: var(--space-content);
    }
}

section#about .skill-name
{
    font-weight: bold;
    width: 30%;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    align-self: center;
}

section#about .skill-alias
{
    align-self:center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 2px 2px black;
    opacity: 0.7;
}

section#about select#skill-category
{
    display: block;
    font-weight: bold;
    border: none;
    cursor:pointer;
    border-radius: var(--space-content);
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23333"><path d="M5 8L0 3h10z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

section#about article .scroll
{
    max-height: 28rem;
    overflow: auto;
}

section#projects .card
{
    transition: none;
}

section#projects .card:hover
{
    transform: none;
}

#project-viewer-overlay
{
    position:fixed;
    inset: 0;
    background-color: var(--color-tint-dark);
    opacity: 0;
    transition: opacity var(--trans-slow);
    pointer-events: none;
    z-index: 5;
    

    &.active
    {
        opacity: 1;
        pointer-events: all;
    }
}

#project-viewer
{
    border-radius: calc(2 * var(--space-content));
    border: 2px solid var(--color-tint);
    height: 100%;
    width: 100%;
    transform: scaleX(0.5) scaleY(0.1);
    transition: transform var(--trans-slow);

    display: flex;
    flex-direction: column;
    gap: var(--space-content);

    padding: var(--space-content);

    &.active
    {        
        transform: scale(1.0) scaleY(1.0);
    }
}
#pv-content
{
    overflow: hidden auto;

    display: flex;
    flex-direction: column;
    gap: var(--space-content);
}

#pv-info
{
  display: flex;
  align-items: center; /* optional, for vertical alignment */
}

#pv-date
{
    text-align: right;
    flex:1;
}

#pv-name
{
    background: var(--grad-accent);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
}
#pv-about
{
    position: relative;

    min-height: 20rem;

    >*
    {
        position: absolute;
        inset: var(--space-content);
        overflow-y: auto;

    }
}
#project-viewer 
{
    
}
#pv-media::part(content)
{
    min-height: 0;
    
    aspect-ratio: 16 / 9;

    --color-a: rgb(6, 6, 7);
    --color-b: rgb(14, 14, 19);

    --grad-a: linear-gradient(
        135deg, 
        rgb(18, 21, 26) 0%, 
        rgb(29, 36, 46) 50%, 
        rgb(18, 21, 26) 100%
    );

    --grad-b: linear-gradient(
        135deg, 
        rgb(24, 29, 37) 0%, 
        rgb(46, 57, 77) 50%, 
        rgb(24, 29, 37) 100%
    );
}

#pv-speclinks
{
    justify-content: center;
}
#pv-misclinks
{
    color: white;
    list-style: inside;

    a
    {
        display: inline-block;
        padding: var(--space-interaction-inl);
    }
}

k-carousel
{
    --gap: var(--space-content);
    width: 100%;
}

k-carousel::part(content)
{
    --color-a: transparent;
    --color-b: transparent;

    --grad-a: linear-gradient(0deg, transparent, transparent);
    --grad-b: linear-gradient(0deg, transparent, transparent);
}
k-carousel::part(nav-button)
{
    background: var(--grad-primary);
    color: white;
    border-radius: 1px;
    border: none;
    height: 2rem;
    aspect-ratio: 1;
}


k-carousel::part(nav-dot)
{
    background: var(--color-tint);
}

k-carousel::part(nav-dot):hover
{
    filter: brightness(1.3);
}

k-carousel::part(nav-dot-active)
{
    background: var(--color-primary);
}


@media screen and (min-width: 750px)
{
    /* ============ TABLET ============ */

    section#about article
    {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;

        div{
            flex: 1;
            position: relative;
        }
        
        &:nth-child(even)
        {
            flex-direction: row;

            img
            {
                margin-right: 0;
            }
        }

        &:nth-child(odd)
        {
            flex-direction: row-reverse;

            img
            {
                margin-left: 0;
            }
        }
    }

    #project-viewer
    {
        padding: var(--space-sector-inl);

    }
    #pv-about
    {
        flex: 0.75;
        min-height: 0;
    }

    k-carousel.project-cards
    {
        --per-page: 2;
    }
}


@media screen and (min-width: 1200px) and (pointer: fine)
{
    /* ============ DESKTOP ============ */

    :root
    {
        --trans-med: 0.2s ease-out;
        --space-interaction: calc(var(--spacing) * 0.4) calc(var(--spacing) * 0.8);
    }

    
    #header-main
    {
        &:hover
        {
            /* same as .active from mobile */
            background-color: var(--color-tint-dark);
            backdrop-filter: var(--filter-blur);
        }

        &.collapse:not(:hover)
        {
            opacity: 0.0;
            filter: blur(6px);
        }
    }
 
    #header-main .hamburger
    {
        display: none;
    }

    #header-main nav
    {
        position: absolute;
        top: 0;
        width: 100%;
        min-height: 100%;
        transition: none;

        &::before
        {
            content: none;
            display: none;
        }
    }

    #header-main nav ul
    {        
        transition: none;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
    }
    
    #header-main nav li
    {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: stretch;
        right: 0;
        opacity: 1;
        transition: background-size var(--trans-med);
        transition-delay: 0.05s !important;
        background-image: linear-gradient(0deg, #ffffff1a, transparent);
        background-repeat: no-repeat;
        background-position-y: 100%;
        background-size: 100% 0%;

        &::after
        {
            content: "";
            pointer-events: none;
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            bottom: 6px;
            width: 0;
            height: 2px;
            background: var(--color-tint-light);
            transition: width var(--trans-med);
        }
    }

    #header-main nav li:hover
    {
        background-size: 100% 80%;

        &::after
        {
            width: calc(100% - 2 * 6px);
        }
    }

    #header-main nav a
    {
        display: flex;font-size:1.5rem;
        justify-content: center;
        align-items: center;  
    }

    section#home #quicklinks
    {    
        gap: var(--space-sector-inl);
        opacity: 0.7;
        transition: opacity var(--trans-fast);

        &:hover
        {
            opacity: 1;
        }
    }

    k-carousel.project-cards
    {
        --per-page: 3;
    }
}