@import "./reset.css";
@import "../fonts/Play/stylesheets.css";
@import "../fonts/DeathStar/stylesheets.css";

:root {
    --white: #FFFFFF;
    --black: #000000;
    --orange: #F1C837;
    --cyan: #51C3E7;
    --red: #FF3333;
    --pink: #FF7676;

    --grid-gap: 20px;
}

html {
    font-size: 20px;
    font-family: 'Play', sans-serif;
}

h1 {
    font-size: 3rem;
    line-height: 3rem;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
}

h3,
p {
    font-size: 1rem;
    line-height: 1rem;
}

body {
    background: url("../img/starsBg.png") center / cover repeat-y;
}

.header {
    width: 100%;
    max-width: 1000px;
    height: 70dvh;

    margin-inline: auto;
    padding: 25px;
    text-align: center;

    perspective: 7rem;
    /* perspective-origin: 100%; */

    overflow: hidden;
}

.header__title {
    font-family: 'Death Star', sans-serif;
    color: white;
    margin-bottom: 22px;
}

.header__text {
    transform: rotateX(45deg);
}

.header__moving-part {
    font-family: 'Play', sans-serif;
    font-size: 2rem;
    line-height: 4rem;
    color: var(--orange);
    animation: move-text 25s linear 0s infinite;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: calc(var(--grid-gap) * 2);
}

.card__title {
    color: var(--white);
}

.card__switch {
    display: none;
}

.card__switch:checked~.card__switch-label {
    box-shadow: 0px 0px 30px 0px var(--red);
    background-color: var(--black);

    &>p:first-of-type {
        display: none;
    }

    &>p:last-of-type {
        display: block;
    }
}

.card__switch:checked~.card__content.content {
    transform: rotateY(180deg);
}

.card__switch-label {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 300px;
    height: 60px;

    color: var(--white);
    background-color: var(--cyan);
    font-family: "Death Star";

    border-radius: 20px;
    box-shadow: 0px 0px 30px 0px var(--cyan);
    text-transform: uppercase;
    user-select: none;

    transition: background-color 200ms ease,
        box-shadow 200ms ease;

    &>p:last-of-type {
        display: none;
    }
}

/* Карточки */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 1000px;

    margin-inline: auto;
    text-align: center;

    perspective: 33rem;

}

.card__content.content {
    max-width: 100%;
    height: 85dvh;
    aspect-ratio: 1045 / 1145;

    margin-inline: auto;

    container-name: card-content;
    container-type: size;

    transform-style: preserve-3d;

    position: relative;

    transition: transform .2s ease;

    &>.content__jedi,
    &>.content__sith {
        width: 100%;
        height: 100%;

        border-radius: 30px;
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    &>.content__jedi {
        background: url("../img/obiwan.png") center / cover no-repeat;

        &>.content__planet,
        &>.content__info {
            background-color: var(--white);

            &>h3 {
                color: var(--cyan);
            }

            & p {
                color: var(--black);
            }
        }

        & .content__wrapper>h4 {
            color: var(--cyan);

            &::after {
                background-color: var(--cyan);
            }
        }
    }

    &>.content__sith {
        background: url("../img/darthwaider.png") center / cover no-repeat;
        transform: rotateY(180deg);

        &>.content__planet,
        &>.content__info {
            background-color: var(--black);

            &>h3 {
                color: var(--pink);
            }

            & p {
                color: var(--white);
            }
        }

        & .content__wrapper>h4 {
            color: var(--pink);

            &::after {
                background-color: var(--pink);
            }
        }
    }

    & .content__icon,
    & .content__planet,
    & .content__info {
        position: absolute;
    }

    & .content__planet,
    & .content__info {
        display: flex;
        flex-direction: column;

        padding: 20px 20px 40px;

        border-radius: 20px;

        &>h3 {
            font-size: 30px;
            font-weight: 700;
        }

        &>p {
            font-size: 20px;
            font-weight: 400;
        }
    }

    & .content__icon {
        width: calc(200 / 1045 * 100%);

        top: var(--grid-gap);
        left: var(--grid-gap);
    }

    & .content__planet {
        align-items: center;
        row-gap: calc(var(--grid-gap) * 2);

        width: calc(400 / 1045 * 100%);

        top: var(--grid-gap);
        right: var(--grid-gap);

        &>img {
            width: calc(287 / 400 * 100%);
        }
    }

    & .content__info {
        row-gap: calc(var(--grid-gap) * 2);

        width: calc(472 / 1045 * 100%);

        text-align: left;

        top: 40%;
        left: var(--grid-gap);

        &>.content__wrapper {

            &>h4 {
                --margin: calc(var(--grid-gap) / 2);

                font-size: 20px;
                font-weight: 700;

                margin-bottom: var(--margin);

                &::after {
                    content: "";

                    display: block;

                    width: 70%;
                    height: 4px;

                    margin-top: var(--margin);

                    border: none;
                }
            }

            &>p {
                font-size: 20px;
                font-weight: 400;
            }
        }
    }
}

@keyframes move-text {
    from {
        transform: translateY(50%);
    }

    to {
        transform: translateY(-120%);
    }
}

@container card-content (width < 900px) {
    .card__content.content .content__info {
        top: auto;
        bottom: var(--grid-gap);
    }
}

@container card-content (width < 750px) {
    .card__content.content .content__planet {
        row-gap: var(--grid-gap);

        &>h3 {
            font-size: 20px;
        }

        &>p {
            font-size: 15px;
        }
    }

    .card__content.content .content__info {
        row-gap: var(--grid-gap);

        &>h3 {
            font-size: 20px;
        }

        &>.content__wrapper {

            &>h4 {
                font-size: 15px;
            }

            &>p {
                font-size: 12px;
            }
        }
    }
}

@container card-content (width < 650px) {

    .card__content.content .content__info,
    .card__content.content .content__planet {
        padding-bottom: 20px;
    }
}

@container card-content (height < 800px) {
    .card__content.content .content__info {
        bottom: var(--grid-gap);
        width: calc(100% - (var(--grid-gap) * 2));
    }
}

@container card-content (width < 750px) {
    .card__content.content {
        max-width: auto;
        height: auto;
        aspect-ratio: auto;

        &>.content__jedi,
        &>.content__sith {
            max-width: 100%;
            height: 85dvh;
            aspect-ratio: 1045 / 1145;
        }


        &:has(.content__jedi) {
            background-color: var(--cyan);
        }

        &:has(.content__sith) {
            background-color: var(--pink);
        }
    }

    .card__content.content .content__info {
        width: calc(100% - (var(--grid-gap) * 2));
        bottom: auto;
        top: calc(100% + var(--grid-gap));
        position: relative;
    }
}

@media screen and (max-width: 1000px) and (max-aspect-ratio: 860/1200) {
    .card__content.content {
        height: auto;
        max-width: auto;

        width: 100%;
    }
}