@import url('base.css');

body {
    overflow: hidden;
}

/* region Navigation */

aside#pagination {
    position: absolute;
    display: flex;
    z-index: 100;
    right: 0;
    width: 40px;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

aside#pagination article.page {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 5px 0;
    border-radius: 30px;
    border: 2px solid rgba(var(--foreground-colour-rgb), 0.5);
    cursor: pointer;
}

aside#pagination article.page::after {
    content: '';
    display: block;
    margin: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 100%;
    background: rgba(var(--foreground-colour-rgb), 0.8);
    transform: scale(0, 0);
    transition: transform 500ms;
}

aside#pagination article.page.selected::after {
    transform: scale(1, 1);
}

/* endregion */

/* region Header */

header {
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    background: var(--background-colour);
}

header section#header-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../images/header.png) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) inset;
}

header section#header-wrapper article {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

header section#header-wrapper article div#logo-wrapper {
    position: relative;
    padding: 10px 0;
    overflow: hidden;
}

header section#header-wrapper article div#logo-wrapper div#logo-background {
    position: absolute;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: -20px;
    left: -20px;
    background: url(../images/header.png) no-repeat center;
    background-size: auto 100vh;
    filter: blur(10px);
}

header section#header-wrapper article div#logo-wrapper div#logo-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
}

header section#header-wrapper article a#logo {
    position: relative;
    display: inline-block;
    max-width: calc(100% - 70px);
    width: 600px;
    height: 160px;
    background: url(../images/Frenily.png) no-repeat center;
    background-size: contain;
}

header section#call-to-action-arrow {
    position: absolute;
    z-index: 3;
    bottom: 10px;
    width: 100%;
    height: 120px;
    margin-bottom: env(safe-area-inset-bottom);
    color: var(--light-colour);
}

header section#call-to-action-arrow div {
    position: absolute;
    top: 0;
    height: calc(100% - 20px);
    width: 100%;
    filter: drop-shadow(2px 2px 2px rgba(var(--dark-colour-rgb), 0.9));
}

header section#call-to-action-arrow div svg path#line {
    stroke-dasharray: 1556.44, 1556.44, 0, 0;
    stroke-dashoffset: 1556.44;
    animation-name: lineDraw;
    animation-duration: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

header section#call-to-action-arrow div svg path#head {
    stroke-dasharray: 1556.44, 1556.44, 0, 0;
    stroke-dashoffset: 1556.44;
    animation-name: lineHeadDraw;
    animation-duration: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

header section#call-to-action-arrow small {
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
}

@keyframes lineDraw {
    0% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 1556.44;
    }
    11.11% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 0;
    }
    49.99% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 1556.44, 0, 0, 0;
        stroke-dashoffset: 1556.44;
    }
    61.11% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 1556.44;
    }
}

@keyframes lineHeadDraw {
    0% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 1556.44;
    }
    11.11% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 1556.44;
    }
    16.67% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 0;
    }
    61.11% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 0;
    }
    61.12% {
        stroke-dasharray: 1556.44, 0, 0, 0;
        stroke-dashoffset: 1556.44;
    }
    66.67% {
        stroke-dasharray: 1556.44, 1556.44, 0, 0;
        stroke-dashoffset: 1556.44;
    }
}

/* endregion */

main {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--background-colour-rgb), 0.75);
    backdrop-filter: blur(20px);
}

main section[data-page] {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, var(--background-gradient), var(--background-colour));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

main section[data-page]:nth-child(even) {
    background: linear-gradient(0deg, rgba(var(--highlight-colour-rgb), 1) 0%, rgba(var(--main-colour-rgb), 1) 100%);
    color: var(--light-colour);
}

main section article {
    padding: 120px 50px 50px;
}

main section h1 {
    text-align: center;
    height: 185px;
    padding-top: 120px;
}

/* region News */
main section#news-page {
    height: 100%;
}

main section#news-page section#news {
    display: flex;
    flex-grow: 2;
    column-gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

main section#news-page section#news a.news-article {
    position: relative;
    width: 400px;
    height: 250px;
    padding: 0;
    vertical-align: top;
    text-decoration: none;
    border-radius: 5px;
    background-image: var(--background);
    background-size: cover;
    background-position: center center;
    transition: scale 150ms;
}

main section#news-page section#news a.news-article:hover {
    scale: 0.95;
}

main section#news-page section#news a.news-article::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border: 1px rgba(var(--light-colour-rgb), 0.3) solid;
}

main section#news-page section#news a.news-article div.category {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 5px;
}

main section#news-page section#news a.news-article div.category div {
    --bg: var(--light-colour);
    --color: var(--light-colour);

    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 20px;
    border-top-right-radius: 5px;
    transform: skewX(-15deg) translateX(-5px);
    background: var(--bg);
    color: var(--color);
}

main section#news-page section#news a.news-article div.news-title {
    position: absolute;
    text-align: center;
    top: 100%;
    width: 100%;
    padding: 10px;
    font-family: 'Figerona', Arial, sans-serif;
    font-size: 21px;
}

main section#news-page section#news-link {
    flex-grow: 1;
    text-align: center;
}

/* endregion */

/* region Staff */

main section#staff-page section#staff-member {
    width: min(calc(100% - 600px), 1500px);
    padding-top: 0;
    margin: 20px auto auto;
    translate: max(-10vh, -5.5vw);
}

main section#staff-page section#staff-member div#member-content {
    position: relative;
    padding: 50px;
    overflow: visible !important;
}

main section#staff-page section#staff-member div#member-content div#background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(var(--light-colour-rgb), 0.5);
    transform: skew(15deg, 0);
    border-radius: 50px;
    overflow: hidden;
}

main section#staff-page section#staff-member div#member-content div#background div#progress {
    position: absolute;
    width: 0;
    height: 7px;
    bottom: 0;
    background: var(--accent-colour);
    transform: skew(-15deg, 0)
}

main section#staff-page section#staff-member div#member-content div#content {
    position: relative;
    z-index: 1;
    color: var(--dark-colour);
}

main section#staff-page section#staff-member div#member-content div#content h5::before,
main section#staff-page section#staff-member div#member-content div#next-content h5::before {
    content: attr(data-rank);
    position: relative;
    font-size: 17px;
    font-family: Open Sans, Arial, sans-serif;
    font-weight: 200;
    padding: 0 5px;
    margin-right: 10px;
    border-radius: 2px;
}

main section#staff-page section#staff-member div#member-content div#content h5[data-rank='Owner']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='Owner']::before,
main section#staff-page section#staff-member div#member-content div#content h5[data-rank='HR/Construction']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='HR/Construction']::before,
main section#staff-page section#staff-member div#member-content div#content h5[data-rank='Events']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='Events']::before,
main section#staff-page section#staff-member div#member-content div#content h5[data-rank='Marketing']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='Marketing']::before,
main section#staff-page section#staff-member div#member-content div#content h5[data-rank='Dev']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='Dev']::before {
    color: var(--light-colour);
    background: var(--colour-4);
}

main section#staff-page section#staff-member div#member-content div#content h5[data-rank='Admin']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='Admin']::before {
    color: var(--colour-3);
    background: var(--colour-b);
}

main section#staff-page section#staff-member div#member-content div#content h5[data-rank='Mod']::before,
main section#staff-page section#staff-member div#member-content div#next-content h5[data-rank='Mod']::before {
    color: var(--colour-2);
    background: var(--colour-a);
}

main section#staff-page div#staff-image-container {
    position: absolute;
    width: min(70vh, 37vw);
    right: 0;
    bottom: 0;
}

main section#staff-page div#staff-image-container img {
    position: absolute;
    width: 100%;
    bottom: 0;
    filter: drop-shadow(0 0 100px rgba(var(--light-colour-rgb), 0.4));
}

main section#staff-page section#staff-member div#member-content div#next-content {
    position: absolute;
    top: 70px;
    width: calc(100% - 100px);
    z-index: 1;
    color: var(--dark-colour);
    pointer-events: none;
    opacity: 0;
}

main section#staff-page div#staff-image-container img#next-staff-image {
    opacity: 0;
    pointer-events: none;
    bottom: -20px;
}

main section#staff-page section#staff-nav {
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
    row-gap: 10px;
    column-gap: 10px;
    margin: 20px auto 0 auto;
    padding: 0 10px;
    justify-content: center;
}

main section#staff-page section#staff-nav article.staff-nav-item {
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
}

main section#staff-page section#staff-nav article.staff-nav-item:hover,
main section#staff-page section#staff-nav article.staff-nav-item.selected {
    border: 4px var(--highlight-colour) solid;
    border-radius: 5px;
}

main section#staff-page section#staff-nav article.staff-nav-item img {
    width: 100%;
}

/* endregion */

/* region Socials */

main section#socials iframe,
main section#socials #twitch-embed {
    border: none;
    width: 800px;
    max-width: calc(100% - 40px);
    aspect-ratio: 16 / 9;
    margin: auto;
}

main section#socials #twitch-embed iframe {
    max-width: 100%;
}

main section#socials footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: rgba(0, 0, 0, 0.3);
}

main section#socials footer section#social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: top;
    margin: 5px;
    filter: saturate(0) brightness(2);
    color: var(--foreground-colour);
    padding: 10px;
    opacity: 0.5;
    transition: opacity 150ms, filter 150ms;
}

main section#socials footer section#social-links a:hover {
    opacity: 1;
    filter: saturate(100%) brightness(1);
}

main section#socials footer section#social-links a#instagram {
    background: url(../images/instagram.png) no-repeat center center;
    background-size: 20px;
}

main section#socials footer section#social-links a#twitter {
    background: url(../images/twitter.png) no-repeat center center;
    background-size: 20px;
}

main section#socials footer section#social-links a#youtube {
    background: url(../images/youtube.png) no-repeat center center;
    background-size: 20px;
}

main section#socials footer section#server-address {
    display: inline-block;
    width: 300px;
    z-index: 3;
    border-radius: 10px;
    background: var(--highlight-colour);
    color: var(--light-colour);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(var(--highlight-colour-rgb), 0);
    transition: filter 150ms, box-shadow 150ms;
}

main section#socials footer section#server-address:hover {
    filter: brightness(110%);
    box-shadow: 0 0 10px rgba(var(--highlight-colour-rgb), 0.4);
}

main section#socials footer section#server-address article {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    font-size: 16px;
    text-align: center;
}

main section#socials footer section#server-address article#address,
main section#socials footer section#server-address article#address-footer {
    width: calc(100% - 62px);
}

main section#socials footer section#server-address article#count {
    width: 60px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 10px 10px 0;
}

/* endregion */

/* region Light mode */

body.light main section article section#staff-members article.member img {
    filter: drop-shadow(0 0 100px rgba(var(--foreground-colour-rgb), 1));
}

body.light main section#socials footer section#social-links a {
    filter: saturate(0) brightness(0.5);
}

/* endregion */

/* region Mobile */

/* Fix news articles */
@media all and (max-width: 830px) {
    main section#news-page section#news {
        overflow: auto;
        overflow-y: hidden;
        justify-content: left;
        padding-left: calc(50% - min(50vw - 30px, 200px));
    }

    main section#news-page section#news a.news-article {
        min-width: min(calc(100vw - 60px), 400px);
    }
}

/* Fix staff */
@media all and (max-width: 1160px) {
    main section#staff-page section#staff-member {
        width: calc(100% - 40px);
        height: 100%;
        overflow: hidden;
        translate: 0;
        flex-grow: 1;
    }

    main section#staff-page section#staff-member div#member-content {
        max-height: 100%;
        padding: 50px 20px;
    }

    main section#staff-page section#staff-member div#member-content div#background {
        max-height: calc(100% - 20px);
        transform: skew(0, 0);
    }

    main section#staff-page section#staff-member div#member-content div#background div#progress {
        transform: skew(0, 0);
    }

    main section#staff-page section#staff-member div#member-content div#content {
        max-height: 100%;
        overflow: auto;
    }

    main section#staff-page section#staff-member div#member-content div#next-content {
        width: calc(100% - 40px);
    }

    main section#staff-page div#staff-image-container {
        display: none;
    }
}

/* endregion */