@keyframes appear
{
    from  { opacity: 0; scale: 0.5; }
    to { opacity: 1; scale: 1; }
}
/*
@keyframes appear
{
    from  { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0px); }
}
*/

.frame, .linkTree, .frame_deluxeEdition
{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
}

.menu
{
    z-index: 9998;

    display: flex;
    height: var(--menu-height);
    padding: var(--gap);

    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.menu_icon
{
    height: 100%;
    aspect-ratio: 1 / 1;
}

.menutabs
{
    display: none;
    
    height: 100%;
    width: fit-content;

    padding: var(--padding) var(--gap);
    gap: calc(2 * var(--gap));

    justify-content: center;
    align-items: center;

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

    border-radius: var(--border-radius);

    color: var(--color-text-secondary);
}

.menutab
{
    position: relative;
    display: flex;

    width: fit-content;
    height: 100%;

    justify-content: center;
    align-items: center;
    align-self: stretch;

    cursor: pointer;
}
.menutab:hover { text-decoration: 2px underline; text-underline-offset: .4em; }

.menutab_panel
{
    z-index: 9999;
    position: absolute;
    top: calc(var(--menu-height) - var(--gap) / 2);
    display: none;
    flex-direction: column;
    width: 100%;
    min-width: 10rem;
    height: fit-content;
    padding: var(--gap);
    gap: var(--gap);
    background-color: var(--color-background-black);
    border-radius: 0px 0px var(--border-radius) var(--border-radius);
    border: 0.3em solid white;
    border-top: none;
    -webkit-border-radius: 0px 0px var(--border-radius) var(--border-radius);
    -moz-border-radius: 0px 0px var(--border-radius) var(--border-radius);
    -ms-border-radius: 0px 0px var(--border-radius) var(--border-radius);
    -o-border-radius: 0px 0px var(--border-radius) var(--border-radius);
}
.menutab_panel.assets
{
    min-width: 20rem;
}
.menutab:hover .menutab_panel { display: flex; }
.menutab_panel:hover { display: flex; }

.menutab_panel_row
{
    width: 100%;
    height: 2em;

    text-align: left;

    display: flex;
    gap: var(--gap);
}
.menutab_panel_row:has(.menu_icon) .menu_icon { max-height: 2em; }

.menutab_panel.purple .menutab_panel_row:hover { filter: var(--filter-purple); }
.menutab_panel.purple { border-color: var(--color-purple); }
.menutab.purple { text-decoration-color: var(--color-purple); }

.menutab_panel.orange .menutab_panel_row:hover { filter: var(--filter-orange); }
.menutab_panel.orange { border-color: var(--color-orange); }
.menutab.orange { text-decoration-color: var(--color-orange); }


.menutab_panel.cyan .menutab_panel_row:hover { filter: var(--filter-cyan); -webkit-filter: var(--filter-cyan); }
.menutab_panel.cyan { border-color: var(--color-cyan); }
.menutab.cyan { text-decoration-color: var(--color-cyan); -moz-text-decoration-color: var(--color-cyan); }


.menutab_panel_row_label
{
    height: 100%;
}


/* new menuframe */

.menuframe-modern
{
    position: absolute;
    z-index: 190;

    right: var(--padding);
    top: var(--padding);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    width: 350px;
    max-width: 350px;
    max-height: fit-content;

    padding: calc(2 * var(--padding));
    gap: calc(1.5 * var(--padding));

    background: var(--color-background-black);
    border-radius: calc(2 * var(--border-radius));
    border: 2.5px solid var(--color-purple);

    transform: translateY(-110%);
    transition: transform 0.7s ease;
}

.menuframe-modern.open { transform: translateX(0); }

.menutabs_iconCollapsed { rotate: 180deg; }

.menutabs_modern
{
    display: flex;

    gap: calc(0.6 * var(--gap));

    height: calc(var(--menu-height) * 0.75);
    width: 100%;

    cursor: pointer;

    border-radius: calc(1.5 * var(--border-radius));
    border: 1px solid var(--gradient-purple);
}
.menutabs_modern.company
{
    height: var(--menu-height);

    padding-left: 0;
    margin-bottom: 0px;
}

.menutabs_modern.hover_purple:hover { background: color-mix(in srgb, var(--color-purple) 15%, transparent); }
.menutabs_modern.hover_orange:hover { background: color-mix(in srgb, var(--color-orange) 15%, transparent); }
.menutabs_modern.hover_cyan:hover { background: color-mix(in srgb, var(--color-cyan) 15%, transparent); }

.menutabs_modern.background_purple { background: color-mix(in srgb, var(--color-purple) 30%, transparent); }
.menutabs_modern.background_orange { background: color-mix(in srgb, var(--color-orange) 30%, transparent); }
.menutabs_modern.background_cyan { background: color-mix(in srgb, var(--color-cyan) 30%, transparent); }


.menutabs_modern_collection
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--padding);
    padding-left: var(--gap);
    margin-bottom: 0px;

    height: fit-content;
    width: calc(100% - 1 * var(--gap));

    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.menutabs_modern_collection.collapsed
{
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;

    height: 0;
    margin-bottom: -10px;
}


.menutabs_modern_label
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;

    color: #FFF;
    font-family: Inter;
    font-size: var(--font-label);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}

.menutabs_modern_label.company
{
    text-align: center;
    font-size: var(--font-body);
}

.menutabs_modern_dropdown
{
    aspect-ratio: 1 / 1;
    border-radius: calc(0.5 * var(--border-radius));
    border: 1px solid var(--gradient-purple);
}
.menutabs_modern_dropdown.purple
{
    background: var(--gradient-purple);
}
.menutabs_modern_dropdown.orange
{
    background: var(--gradient-orange);
}
.menutabs_modern_dropdown.cyan
{
    background: var(--gradient-cyan);
}

#menuCloseButton
{
    transition: transform 0.4s ease;
    transform: rotate(0deg);
}

#menuCloseButton:hover 
{
    transform: rotate(180deg);
}

/* old menuframe */

.menuframe
{
    position: fixed;
    z-index: 190;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    inset: var(--padding);    
    padding: calc(2 * var(--padding));
    gap: var(--gap);

    background: var(--gradient-menu);
    border-radius: calc(2 * var(--border-radius));
    border: 1px solid var(--color-background-black);

    transform: translateY(-110%);
    transition: transform 0.7s ease;
}

.menuframe.open { transform: translateX(0); }

.menuframe_labels
{
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;

    gap: var(--gap);

    align-items: flex-start;
    align-self: stretch;
}

.menuframe_panel
{
    position: relative;
    top: 0;
    z-index: 191;
    
    height: fit-content;
    width: calc(100% - 2 * var(--padding));
    flex: 1;

    padding: var(--padding);
    gap: var(--gap);

    display: none;
    flex-direction: column;
    
    border-radius: var(--border-radius);
    border: 1px solid var(--color-background-white);
}
.menuframe_panel.open
{
    display: block;
}

.label_menuframe
{
    display: flex;
    flex: 1 0 0;
    height: 100%;

    padding: 0;
    margin: 0;

    flex-direction: column;
    justify-content: center;
    align-self: center;

    font-size: var(--font-h2);

    color: var(--color-text-secondary);
    text-align: left;
    text-transform: uppercase;
}

/* body */
.body
{
    height: fit-content;
    
    display: flex;
    flex-direction: column;
    flex: 1;

    gap: var(--gap);
    padding: var(--padding);
}

.frame
{
    flex: 1;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    overflow: hidden;

    border-radius: var(--border-radius);
    background-color: var(--color-background-preview);
}

.projectframe
{
    flex: 1;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    gap: var(--gap);
} 

.frame.container
{
    padding: var(--gap);
    gap: var(--padding);

    height: fit-content;
    max-height: fit-content;
}

.frame_section
{
    display: flex;
    flex-direction: row;

    width: fit-content;
    height: fit-content;

    gap: var(--gap);
}

.frame_section_entry
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
}
.frame_section_entry.mainpanel
{
    width: 100%;
}
.frame_section_entry.sidepanel
{
    display: none;
    width: 30%;
    height: fit-content;
    min-height: 4rem;
}

.frame_section_sidepanel_element
{
    width: 100%;
    height: fit-content;

    display: flex;

    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    gap: calc(var(--padding) / 2);
    padding-bottom: calc(var(--padding) / 2);

    border-bottom: 1px solid var(--color-text);
}
.frame_section_sidepanel_element.lastElement
{
    border-bottom: 0px;
}

.section_sidepanel_label { height: fit-content; }

.frame_section_sidepanel_button
{
    width: 50%;
    min-height: 1.6rem;

    border-radius: var(--border-radius);

    text-align: center;
    align-content: center;

    cursor: pointer;
}

.section_sidepanel_elements_iconList
{
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: top;

    height: 16vw;
    width: calc(100% - 1.2rem); 

    gap: var(--padding);
    flex-shrink: 0;
}
.section_sidepanel_elements_icon { height: 100%; aspect-ratio: 1 / 1; }
.section_sidepanel_elements_icon.small { height: 50%; }

.section_sidepanel_alternative_mobile { display: flex; height: fit-content; }

.row
{
    display: flex;
    height: fit-content;
    width: 100%;
}
.row.h1
{
    height: 2.5em;
}
.row.grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(0.1 * var(--gap));
}
.row.centered
{
    display: flex;
    align-items: center;
    gap: var(--gap);
    align-self: center;
}
.group
{
    display: flex;
    height: fit-content;
    align-items: center;
    gap: var(--padding);
}

.gradient { color: var(--color-text-secondary); }
.gradient.purple { background: var(--gradient-purple); }
.gradient.orange { background: var(--gradient-orange); }
.gradient.cyan { background: var(--gradient-cyan); }

.gradient.menu_panel { background: var(--gradient-menu-panel); }

/* frames */

.frame_tag
{
    height: 1em;
    width: 5em;
}

.frame_banner
{
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    border-radius: var(--border-radius);
    background-color: var(--color-background-preview);

    overflow: hidden;
}
.frame_banner.parent
{
    width: 100%;
    aspect-ratio: 16 / 9;
}

.frame_banner.img
{
    width: 100%;
    aspect-ratio: 16 / 9;
}
.frame_banner.white
{
    border-radius: var(--border-radius);
    background-color: var(--color-background-white);
}

.frame_banner.nobr
{
    border-radius: 0;
}

.frame_banner_wishlistInfo
{
    position: absolute;
    top: 1rem;
    right: 1rem;

    width: 6rem;
    height: fit-content;

    cursor: pointer;
}
.frame_banner_wishlistInfo.relative
{
    position: relative;
    top: 0;
    right: 0;
}

.frame_banner_wishlistInfo_icon
{
    width: 100%;
    aspect-ratio: 1/1;
}

.frame_banner_ultimateEdition
{
    position: absolute;
    top: 1rem;
    left: 1rem;

    width: 6rem;
    aspect-ratio: 1/1;
}

.frame_banner_wishlistInfo_text
{
    color: var(--color-text);
    width: 5rem;
    height: fit-content;
    text-align: center;
}

.frame_labels
{
    width: calc(100% - 2* var(--padding));
    height: fit-content;

    flex-direction: column;
    align-items: center;

    padding: var(--padding);
    gap: var(--gap);
}

.frame_icon
{
    display: flex;
    flex: 1;
    height: fit-content;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: var(--padding);
    padding: var(--gap);

    background-color: var(--color-background-preview);
    border-radius: var(--border-radius);
}

.icon
{
    height: 100%;
    aspect-ratio: 1 / 1;
    filter: var(--filter-black);
}
.icon.white { filter: none; }
.icon.hl { height: 4em; }
.icon.hl2 { height: 2em; }
.icon.hl3 { height: 3em; }

/* labels */

.labels_header
{
    font-size: var(--font-h3);
    font-weight: bold;
    height: fit-content;
    flex: 1;
    min-width: fit-content;

    text-transform: uppercase;
}

.labels_subheadline
{   
    height: fit-content;
    flex: 1;

    font-size: var(--font-label);
    color: var(--color-text-light-gray);
    text-transform: uppercase;
}
.labels_headline
{
    height: fit-content;
    flex: 1;
    
    font-size: var(--font-body);
    text-transform: uppercase;
}
.labels_text
{
    position: relative;

    display: flex;
    width: fit-content;
    height: 100%;

    text-align: center;
    align-items: center;

    font-size: var(--font-small);
    letter-spacing: 2px;
}
.labels_label
{
    position: relative;

    height: fit-content;
    flex: 1;
    
    padding: var(--padding) 0;
    margin: 0;

    font-size: var(--font-label);
}
.labels_label.l2 { font-size: var(--font-small); }
.labels_smallLabel
{
    position: relative;

    height: fit-content;
    flex: 1;
    min-width: fit-content;
    
    padding: var(--padding) 0;
    margin: 0;
    
    font-size: var(--font-small-label);
    text-transform: uppercase;
}
.labels_smallLabel.l2
{
    font-size: var(--font-label);
}

.uppercase { text-transform: uppercase; }
.noUpper { text-transform: none; }
.centeredText { text-align: center; align-items: center; }

.color_gray { color: var(--color-text-light-gray); }
.color_black { color: var(--color-text); }
.color_white { color: var(--color-text-secondary); }

.bold
{
    font-weight: bold;
}

.labels_button
{
    padding: calc(0.2 * var(--padding)) calc(0.5 * var(--padding));
    border-radius: calc(0.5 * var(--border-radius));

    width: fit-content;

    background-color: #00000046;
    text-transform: uppercase;

    font-size: var(--font-label);
}

/* 1ressbar */

.progressbar
{
    position: relative;

    width: 100%;    
    flex: 1;

    margin-right: var(--padding);

    color: var(--color-text-secondary);
}
.progressbar.projectBar
{
    position: absolute;

    height: 100%;

    border-radius: var(--border-radius);
}
.progressbar.background
{
    background-color: var(--color-background-black);
    border-radius: var(--border-radius);

    width: 100%;
    height: 100%;
    display: flex;
}

.progressbar_label
{
    padding: 0;
    margin: 0;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
}

/* linkTree */
.linkTree
{
    height: fit-content;
    flex: 1;

    display: grid;
    grid-template-columns: repeat(calc(var(--productLinkTreeGridModifier) * 4), 1fr);

    justify-content: center;
    align-items: flex-start;
    align-self: stretch;

    gap: var(--gap);
}

.linkTree-entry
{
    animation: none;

    display: flex;
    flex: 1;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    padding: var(--padding);
    padding-top: var(--gap);
    gap: var(--padding);
    
    color: var(--color-text);
}

.linkTree-icon
{
    width: 4em;
    height: 4em;
}
.linkTree-icon.purple, .icon.purple { filter: var(--filter-purple); }
.linkTree-icon.orange, .icon.orange { filter: var(--filter-orange); }
.linkTree-icon.cyan, .icon.cyan { filter: var(--filter-cyan); -webkit-filter: var(--filter-cyan); }



/* deluxe edition */

.frame_deluxeEdition
{
    display: flex;

    width: calc(100% - 2 * var(--padding));
    height: fit-content;

    padding: var(--padding);
    gap: var(--padding);

    align-items: flex-start;
    flex-direction: column;

    background-color: var(--color-background-black);
    border-radius: var(--border-radius);
}

.frame_deluxeEditon_header
{
    width: 100%;
    max-height: 1rem;

    text-align: center;
}
.frame_deluxeEditon_header.orange { color: var(--color-orange); }
.frame_deluxeEditon_header.purple { color: var(--color-purple); }

.frame_deluxeEdition_frame
{
    height: fit-content;
    min-height: 8rem;

    display: flex;
    flex-direction: column;

    padding: var(--padding);
    gap: var(--padding);

    border-radius: var(--border-radius);
    border: 1px solid var(--color-background-white);
}

.frame_deluxeEdition_grid
{
    display: grid;
    grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 2), 1fr);
    gap: var(--padding);
    width: 100%;
    height: fit-content;
}
.frame_deluxeEdition_grid.dlcs
{
    grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 2), 1fr);
}
.frame_deluxeEdition_grid.fullView { --deluxeEditionGridModfier: 2; }
.frame_deluxeEdition_grid.fullView.modifier3 { --deluxeEditionGridModfier: 3; }
.frame_deluxeEdition_frame:has(.frame_deluxeEdition_grid.fullView) { width: calc(100% - 2 * var(--padding)); }

.frame_deluxeEdition_frame.content
{
    width: calc(100% - 2 * var(--padding));
    height: fit-content;
}

.frame_deluxeEdition_frame.dlcs
{
    width: calc(100% - 2 * var(--padding));
    height: fit-content;
}

.frame_deluxEdition_entry
{
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    border-radius: var(--border-radius);
    overflow: hidden;

    cursor: pointer;
}
.frame_deluxEdition_entry.fullwidth
{
    grid-column: 2;
    width: calc(200% + var(--padding));
    left: calc(-100% - var(--padding));
    aspect-ratio: 32 / 9;
}
.frame_deluxEdition_entryImage
{
    width: 100%;
    aspect-ratio: 16 / 9;
}
.frame_deluxEdition_entryImage.loadingPreview
{
    cursor: default;
}
.frame_deluxEdition_entryLabel
{
    position: absolute;
    padding: 0.6rem;

    width: calc(100% - 2rem);
    height: 1rem;

    font-weight: bold;
    color: var(--color-text-secondary);

    cursor: default;
}

/* animations */

.row > .icon, .linkTree-entry, .anim_hover { transition: 0.3s ease; }
.row > .icon:hover, .linkTree-entry:hover, .anim_hover:hover { transform: scale(1.1); cursor: pointer; }

.row > .label_menuframe:hover, .menuframe_panel > .row > .labels_headline:hover { font-weight: bold; cursor: pointer; }

.menuframe_panel > .frame_banner:hover, .menu_icon { cursor: pointer; }

/* large Mobile (>= 480px) */
@media (min-width: 480px)
{
    .menuframe
    {
        right: var(--padding);
        left: auto;
        width: 100%;
        max-width: calc(480px - 2 * var(--gap));
    }
    .frame_deluxeEdition_grid { grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 3), 1fr); }
    .frame_deluxeEdition_grid.dlcs { grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 2), 1fr); }

    .menutabs_modern { height: calc(var(--menu-height) * 1); }
    .menutabs_modern.company { height: calc(var(--menu-height) * 1.25); }
}

@media (max-width: 480px)
{
    .menuframe-modern
    {
        right: 0;
        left: 0;
        top: var(--padding);
        margin: 0 auto;

        width: calc(100% - 5 * var(--padding));
        max-width: none;

        transform: translateY(-110%);
    }

    .menutabs_modern { height: calc(var(--menu-height) * 1); }
    .menutabs_modern.company { height: calc(var(--menu-height) * 1.25); }
}

/* Tablet (>= 768px) */
@media (min-width: 768px)
{
    .body
    {
        padding: calc(2 * var(--padding)) var(--side-padding);
    }
    
    .menutabs
    {
        display: flex;
    }

    .menuframe
    {
        max-width: calc(2 * var(--side-padding));
        height: fit-content;
    }

    .section_sidepanel_elements_iconList
    {
        height: 10vw; 
    }

    .frame_deluxeEdition
    { 
        flex-direction: row;
    }

    .frame_deluxeEdition_grid { grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 2), 1fr); }
    .frame_deluxeEdition_grid.dlcs { grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 1), 1fr); }

    .frame_deluxeEdition_frame { min-height: calc(100% - 2 * var(--padding)); }
    .frame_deluxeEdition_frame.content { width: 70%; }
    .frame_deluxeEdition_frame.dlcs { width: 30%; }

    .menutabs_modern { height: calc(var(--menu-height) * 0.85); }
    .menutabs_modern.company { height: calc(var(--menu-height) * 1.1); }
}


/* Laptop (>= 1024px) */
@media (min-width: 1024px)
{
    .body
    {
        gap: calc(2 * var(--gap));
    }

    .projectframe:not(.container) > *:first-child
    {
        position: relative;

        display: grid;
        grid-template-columns: 2.2fr 1fr;
        height: 100%;
     
        margin: calc(-1 * var(--padding)) calc(-1 * var(--side-padding) + var(--padding));
    }
    .projectframe:not(.container) > *:first-child > div:first-of-type
    {
        height: calc(100% - 2 * var(--padding));
        display: flex;
    }
    
    .projectframe.container
    {
        flex: 0;
        height: fit-content;
        display: flex;
        width: 100%;
    }

    .projectframe.container  > .frame > .frame_labels
    {
        color: var(--color-text);
        gap: var(--padding);
    }

    .projectframe.container  > .frame > .frame_labels > .row { height: fit-content; }
    
    .progressbar, .group { height: 1.6em; }

    .projectframe.container  > .linkTree
    {
        gap: var(--padding);
        height: fit-content;
        flex: 0;
    }

    .linkTree-entry
    {    
        gap: calc(0.5 * var(--padding));
    }

    .linkTree-icon
    {
        width: 3em;
        height: 3em;
    }

    .section_sidepanel_elements_iconList
    {
        height: 6vw; 
    }


    /* sidepanel */
    .frame_section_entry.mainpanel { width: 70%; }
    .frame_section_entry.sidepanel { display: flex; }
    .section_sidepanel_alternative_mobile { display: none; }
    .section_sidepanel_elements_iconList { height: 4vw; }

    .menutabs_modern { height: calc(var(--menu-height) * 0.75); }
    .menutabs_modern.company { height: calc(var(--menu-height) * 1); }
}


/* Desktop (>= 1440px) */
@media (min-width: 1440px)
{
    .frame, .linkTree
    {
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 10%;
    }
    
    .body
    {
        padding: calc(2 * var(--padding)) var(--side-padding);
    }

    .menuframe
    {
        max-width: calc(1.4 * var(--side-padding));
    }

    .frame_deluxeEdition_grid { grid-template-columns: repeat(calc(var(--deluxeEditionGridModfier) * 3), 1fr); }
}

/* Desktop (>= 2560px) */
@media (min-width: 2560px)
{
    .menuframe
    {
        max-width: var(--largescreen-side-padding);
    }
    
    .projectframe:not(.container) > *:first-child
    {
        position: relative;

        display: grid;
        grid-template-columns: 2.2fr 1fr;
        height: 100%;
     
        margin: calc(-1 * var(--padding)) calc(-1 * var(--largescreen-side-padding) + var(--side-padding) + var(--padding));
    }
    
    .frame, .linkTree
    {
        animation: appear linear;
    }
}