:root, :host {
    --card-width: 240px;
    --max-width: 720px;

    --col-grey-1: #DDD4C7;
    --col-grey-2: #CAC3B7;
    --col-grey-3: #ADA79D;
    --col-grey-4: #79746D;
    --col-grey-5: #4A4743;
    --col-grey-6: #383633;
    --col-gold-light: #EED4B0;
    --col-gold: #D9B788;
    --col-red: #CE595F;
    --col-dark: #252422;

    /* --key-art-aspect: 2860 / 1747; */
}

/* html {
    overscroll-behavior: none;
} */

body {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: var(--col-dark);
    font-size: 16px;
    overflow-x: hidden;

    @media (scripting: none), (scripting: initial-only) {
        overflow: hidden;
    }
}

h1 {
    margin: 0;
    font-family: 'Economica', sans-serif;
    font-size: 48px;
    line-height: 100%;
    background-image: linear-gradient(var(--col-gold) 28%, var(--col-red) 94%);
    color: transparent;
    background-clip: text;
    font-weight: 700;
}

h2 {
    margin: 0;
    font-family: 'Economica', sans-serif;
    font-size: 24px;
    line-height: 115%;
    background-image: linear-gradient(var(--col-gold) 28%, var(--col-red) 94%);
    color: transparent;
    background-clip: text;
    font-weight: 700;
}

.emph {
    font-weight: 400;
}

p {
    margin: 0;
    padding: 0;
    font-weight: 200;
    color: white;
    line-height: 150%;
}

main {
    overflow: hidden;
    opacity: 1;
    transition: opacity 2s ease-out;

    &.loading {
        opacity: 0;
    }
}

img {
    max-width: 100%;
}

.key-halo-wrapper {
    width: var(--max-width);
    position: absolute;
    /* height: calc(var(--vh, 1vh) * 100); */
    height: 100vh;
    justify-self: center;

    /* width: 100%; */
    /* max-width: 100%; */
    box-sizing: border-box;

    display:none;
}

img.key-halo {
    position: absolute;
    z-index: -2;
    /* width: 640px; */
    width: 64vh;
    filter: drop-shadow(0px 1px 2px var(--col-dark)) drop-shadow(0px 0px 4px var(--col-dark));
    /* margin-left: auto;
    margin-right: auto; */
    /* left: 0px;
    right: 111px;
    top: -50px; */
    justify-self: center;
    /* inset: -4.92vh 10.91vh 0 0; */
    inset: -4.92vh 0 0 -10.91vh;
    max-width: none;

    animation: rotation 180s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

img.halo {
    position: fixed;
    z-index: -12;
    /* height: calc(var(--vh, 1vh) * 100); */
    height: 100vh;
    aspect-ratio: 1;
    max-width: none;
    opacity: 0.5;
    /* background-color: #252422bb; */

    /* top: 50%; */

    &.h-left {
        /* left: -65vh; */
        right: 65%;
        animation: rotation-l 180s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;

        /* &.h-1 {
            right: 65%;
        }
        &.h-2 {
            right: 75%;
        }
        &.h-3 {
            right: 85%;
        }
        &.h-4 {
            right: 95%;
        } */
    }

    &.h-right {
        /* right: -65vh; */
        left: 65%;
        animation: rotation-r 180s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;

        /* &.h-1 {
            left: 65%;
        }
        &.h-2 {
            left: 75%;
        }
        &.h-3 {
            left: 85%;
        }
        &.h-4 {
            left: 95%;
        } */
    }
}

@keyframes rotation-r {
    from {
        /* transform: translate(0, -50%) rotate(0deg); */
        transform: rotate(0deg);
    }
    to {
        /* transform: translate(0, -50%) rotate(359deg); */
        transform: rotate(359deg);
    }
}

@keyframes rotation-l {
    from {
        /* transform: translate(0, -50%) rotate(359deg); */
        transform: rotate(359deg);
    }
    to {
        /* transform: translate(0, -50%) rotate(0deg); */
        transform: rotate(0deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.page-shadow {
    position: fixed;
    justify-self: center;
    /* height: calc(var(--vh, 1vh) * 100); */
    height: 100vh;
    /* background-image: linear-gradient(to right, #25242200 0%, var(--col-dark) 30%, var(--col-dark) 70%, #25242200 100%); */
    background-image: linear-gradient(to right, #25242200 0%, #252422cc 20%, var(--col-dark) 30%, var(--col-dark) 70%, #252422cc 80%, #25242200 100%);
    width: calc(var(--max-width) * 1.5);
    z-index: -11;
}

.img-small {
    max-height: 200px;
    object-fit: contain;
}

.gallery {
    border-radius: 8px;
    filter: drop-shadow(0px 1px 2px var(--col-dark)) drop-shadow(0px 0px 4px var(--col-dark));
}

.dashes {
    border: 1px dashed var(--col-grey-3);
    height: 0;
    flex-grow: 1;
}

.divider {
    background-color: var(--col-grey-6);
    height: 1px;
    flex-grow: 1;
}

.cta {
    font-size: 18px;
    font-family: 'Economica', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-decoration: none;
    /* text-decoration-thickness: 1px;
    text-underline-offset: 3px; */
    color: white;
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    align-items:center;
    justify-content: center;

    border: 12px solid transparent;

    border-image-source: url(/eoe/button_border.svg);
    border-image-slice: 25%;
    border-image-repeat: stretch;

    padding: 0px 8px;

    * {
        opacity: 0.9;
        transition: opacity 0.1s ease-out;
    }

    .mark-on {
        display: none;
    }

    transition: border-image 0.1s ease-out;

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            border-image-source: url(/eoe/button_border_gradient.svg);
            
            * {
                opacity: 1;
            }
        }
    }

    &:active {
        border-image-source: url(/eoe/button_border_gradient.svg);
        * {
            opacity: 1;
        }
        .mark-on {
            display: block;
        }
        .mark-off {
            display: none;
        }
    }
}

.scribble {
    position: absolute;
    background-image: url(/eoe/scribble_bg.png);
    background-size: cover;
    /* height: calc(var(--vh, 1vh) * 100); */
    height: 100vh;
    width: 100%;
    z-index: -10;
    background-repeat: no-repeat;
    overflow: clip;
    box-sizing: border-box;
}

.key-art {
    position: absolute;
    /* height: calc(var(--vh, 1vh) * 100); */
    height: 100vh;
    object-fit: cover;
    filter: drop-shadow(0px 1px 2px var(--col-dark)) drop-shadow(0px 0px 4px var(--col-dark)) drop-shadow(0px 0px 12px var(--col-dark));
    z-index: -1;
    width: 100%;

    @media (min-aspect-ratio: 2860/1747) {
        object-fit: contain;
    }
}

.pagebody {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 0px 24px 48px 24px;
    background-image: linear-gradient(#25242200 75%, var(--col-dark) 99%), linear-gradient(#25242233, #25242211), linear-gradient(to top,  #25242200 20%, #252422cc 60%, var(--col-dark) 95%), linear-gradient(#25242200 75%, var(--col-dark) 99%);
    /* background-position: top center, top center, center top calc(var(--vh, 1vh) * 100), bottom center; */
    background-position: top center, top center, center top 100vh, bottom center;
    /* background-size: auto calc(var(--vh, 1vh) * 100), auto calc(var(--vh, 1vh) * 100); */
    background-size: auto 100vh, auto 100vh;
    background-repeat: no-repeat;
    width: 100vw;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;
}

.landing {
    /* height: calc(var(--vh, 1vh) * 100); */
    height: 100vh;
    box-sizing: border-box;
    max-width: var(--max-width);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .landing-title {
        width: 100%;
        filter: drop-shadow(0px 1px 2px var(--col-dark)) drop-shadow(0px 0px 4px var(--col-dark));
    }
}

.about-head {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

.section-head {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;

    .head-underline {
        height: 1px;
        background-color: var(--col-grey-4);
        flex-grow: 1;
    }

    filter: drop-shadow(0px 1px 2px var(--col-dark)) drop-shadow(0px 0px 4px var(--col-dark));
}

.section-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.section-body {
    display: flex;
    flex-direction: column;
    gap: 32px;

    @media (min-width: 640px) {
        flex-direction: row;

        img {
            max-height: none;
        }

        .section-body {
            flex-grow: 1;
        }
    }
}

.border-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;

    border: 12px solid transparent;

    border-image-source: url(/eoe/border.svg);
    border-image-slice: 25%;
    border-image-repeat: stretch;

    padding: 16px;

    background-color: var(--col-dark);
    background-clip: padding-box;

    box-shadow: 0px 2px 16px 0px #25242233, 0px 2px 4px 0px #25242240;

    @media (min-width: 640px) {
        padding: 24px
    }
}

.section {
    max-width: var(--max-width);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

characard-component img {
    width: 100%;
    aspect-ratio: 196 / 264;
    border-radius: 12px;
    object-fit: cover;
    background-image: url(/eoe/scribble_bg.png);
    background-size: auto 200%;
}

.characard {
    background-color: var(--col-dark);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 16px;
    width: var(--card-width);
    box-sizing: border-box;
    border: 2px solid transparent;
    transform-style: preserve-3d;

    .characard-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        backface-visibility: hidden;
        z-index: -1; /* needed for safari idk why */
        transform-style: preserve-3d; /* needed for firefox idk why!! */
    }

    ::slotted(img) {
        backface-visibility: hidden;
    }
}

footer {
    display: flex;
    flex-direction: row;
    background-image: linear-gradient(to top, #25242200 10%, #252422bb 60%, var(--col-dark) 90%), url(/eoe/scribble_bg.png);
    background-size: cover;
    width: 100%;
    padding: 32px 16px 16px 16px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;

    a {
        /* color: white; */
        font-weight: 300;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
        background-image: linear-gradient(white, white);
        color: transparent;
        background-clip: text;
        /* transition: color 0.1s ease-out; */

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                background-image: linear-gradient(var(--col-gold-light) 28%, var(--col-red) 100%);
            }
        }

        &:active {
            background-image: linear-gradient(var(--col-gold) 28%, var(--col-red) 100%);
        }
    }

    opacity: 1;
    transition: opacity 2s ease-out;

    &.loading {
        opacity: 0;
    }
}

/* CAROUSEL */

.carousel-wrapper-3d {
    position: relative;
    perspective: 232px;
    width: 100%;
    height: 480px;
    align-self: center;
    align-content: center;
    display: flex;

    max-width: 680px;
}

.carousel-3d {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-640px);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    &.can-rotate {
        transition: transform 0.75s;
    }

    characard-component {
        position: absolute;
        transform-style: preserve-3d;
        box-sizing: border-box;

        border-radius: 16px;
        border: 2px solid var(--col-grey-5);
    }
}

.carousel-controls {
    width: 100%;
    display: flex;
    position: absolute;
    top: 45%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.arrow-button {
    padding: 0;
    color: white;
    cursor: pointer;
    background:
        linear-gradient(var(--col-dark), var(--col-dark)) padding-box,
        linear-gradient(var(--col-grey-5), var(--col-grey-5)) border-box;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    border-radius: 50%;
    aspect-ratio: 1;
    box-shadow: 0px 2px 16px 0px #25242233, 0px 2px 4px 0px #25242240;
    transition: background 0.1s ease-out;

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background:
            linear-gradient(var(--col-dark), var(--col-dark)) padding-box,
            linear-gradient(var(--col-gold) 28%, var(--col-red) 94%) border-box;
        }
    }

    &:active {
        background:
            linear-gradient(var(--col-dark), var(--col-dark)) padding-box,
            linear-gradient(var(--col-gold) 28%, var(--col-red) 94%) border-box;
    }

}

.c-button {
    height: 72px;
    width: 72px;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.c-button-shadow {
    width: 72px;
    height: 72px;
    position: absolute;
    z-index: -1;
}

input[type="radio"] {
    appearance: none;
    margin: 0;
    box-sizing: border-box;
    width: 0px;
    height: 0px;

    + img {
        width: 72px;
        height: 72px;
        position: absolute;
        opacity: 0.4;
        transition: opacity 0.1s ease-out;
    }

    &:checked {
        + img {
            opacity: 1;
        }
    }

    &:hover:not(:checked) {
        + img {
            opacity: 1;
        }
    }

    &:active:not(:checked) {
        + img {
            opacity: 0.2;
        }
    }
}

.carousel-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: calc((72px * 8) + (8px * 7));
    align-self: center;
    filter: drop-shadow(0px 1px 4px var(--col-dark));
}

.a {
    transform: rotateY(0deg) translateZ(640px);
}
.b {
    transform: rotateY(24deg) translateZ(640px);
}
.c {
    transform: rotateY(48deg) translateZ(640px);
}
.d {
    transform: rotateY(72deg) translateZ(640px);
}
.e {
    transform: rotateY(96deg) translateZ(640px);
}
.f {
    transform: rotateY(120deg) translateZ(640px);
}
.g {
    transform: rotateY(144deg) translateZ(640px);
}
.h {
    transform: rotateY(168deg) translateZ(640px);
}
.i {
    transform: rotateY(192deg) translateZ(640px);
}
.j {
    transform: rotateY(216deg) translateZ(640px);
}
.k {
    transform: rotateY(240deg) translateZ(640px);
}
.l {
    transform: rotateY(264deg) translateZ(640px);
}
.m {
    transform: rotateY(288deg) translateZ(640px);
}
.n {
    transform: rotateY(312deg) translateZ(640px);
}
.o {
    transform: rotateY(336deg) translateZ(640px);
}

.js-disabled {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #252422cc;
    color: white;
    font-family: 'Economica', sans-serif;
    font-weight: 700;
    font-size: 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;

    img {
        width: 200px;
        filter: drop-shadow(0px 1px 2px var(--col-dark)) drop-shadow(0px 0px 4px var(--col-dark));
        animation: rotation 120s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}