@import url('fonts.css');

:root {
    --c-primary: #15196e;
    --c-secondary: #50a7e1;
    --c-bg: #ebb8f7;

    --card-width: min(75vw, 25em);
    --card-height: calc(var(--card-width) * 1.5);
    --v-card-image-object-fit: cover;
    cursor: url('../public/icons/cursor.svg') 16 16, auto;
    
    &:has(input[id="pokemon-theme"]:checked) {
        --theme:pokemon;
        --v-card-image-object-fit: contain;
    }

    @media (min-width: 400px) {
        --card-width: min(35vw, 50em);
    }
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--c-bg);
    display: grid;
    gap: 1rem;
    margin: 0;
    margin-top: .5rem;
    margin-bottom: 10%;
}

h1 {
    font-size: 3em;
    font-family: atma-bold, sans-serif;
    font-weight: 300;
    padding-inline: .5rem;
    margin-block: .5rem;
    color: var(--c-primary);
}

h2 {
    font-size: 2em;
    font-family: atma-bold, sans-serif;
    font-weight: 200;
    padding-inline: .5rem;
    margin-block: .5rem;
    color: var(--c-secondary);
}

h3 {
    font-size: 1.5em;
    font-family: atma, sans-serif;
    font-weight: 100;
    padding-inline: .5rem;
    margin-block: .5rem;
    color: var(--c-secondary);
}

dd, dt {
    font-size: 1em;
}

dd {
    font-family: 'Arial Narrow', sans-serif;
}

dt {
    font-family: 'Arial Narrow Bold', sans-serif;
}

p {
    font-family: atma, sans-serif;
}

label {
    font-family: atma-semi, sans-serif;
    color: var(--c-primary);
    cursor: pointer;
}

button { 
    font-size: 1.25rem;
    font-family: atma-light, sans-serif;
    &:hover {
        cursor: pointer;
    }
}

button.reset-button {
    border: .25rem solid white;
    background: var(--c-primary);
    color: white;
    border-radius: 1rem;

    &:hover {
        background: var(--c-secondary);
    }
}


.intro {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-inline: 1rem;
}

.header-text {
    text-align: center;
    border-radius: 1rem;
    padding: .5rem;
}

.romy-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.cards {
    /* Het gebruik van grid en de werking van de 3d kaarten heb ik van Sanne 't Hooft */
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    display: grid;
    justify-content: center;
    transition: ease 3s;

    &:has(.open) {
        padding-bottom: calc(var(--card-height));
    }

    @media (min-width: 400px) {
        transform: translateX(-50%);
        align-self: center;

        &:has(.open) {
            padding-bottom: unset;
        }
    }

}

.memory-card,
.card {
    background: none;
    border: none;
    border-radius: 1.5rem;

    transform-style: preserve-3d;

    &:hover {
        cursor: url('../public/icons/cursor-dice.svg') 16 16, auto;
    }
}

.card {
    grid-row-start: 1;
    grid-column-start: 1;

    width: var(--card-width);
    aspect-ratio: 2/3;

    transition: transform 3s ease;
    transform-origin: 50% calc(100% + 2.5%);

    @media (min-width: 400px) {
        transform-origin: 100% 50%;
    }
}

.memory-card {
    aspect-ratio: 1/1;

    transition: transform 1.5s ease;
}

.card.open {
    transform: 
        rotateX( calc( -179.4deg - sibling-index() * .2deg));

        @media (min-width: 400px) {
            transform:
                rotateY( calc( 179.4deg + sibling-index() * .2deg));
        }
}

.memory-card.open {
    transform: 
        rotateY(.5turn);
}

.memory-card-inner,
.card-inner {
    background: white;
    border: .5rem solid white;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    border-radius: inherit;
    pointer-events: none;
    transition: transform .8s;
}

.card:hover .card-inner {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

.card-front,
.card-back,
.memory-card-front,
.memory-card-back {
    top: 0;
    inset: 0;  
    position: absolute;
    backface-visibility: hidden;

    border-radius: inherit;
}

.card-back {
    > * {
        width: 100%;
        height: 100%;   
        object-fit: var(--v-card-image-object-fit);
        border: none;
        border-radius: inherit;
    }
}

.card-front,
.memory-card-front {
    background-color: var(--c-secondary);
    transform: rotateY(180deg);
}

.card-front {
    @media (max-width: 400px) {
        transform: rotateX(180deg);
    }
}

.card-front > section {
    position: relative;
    padding-inline: .5rem;
    flex-direction: column;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: clamp(0.5rem, 4vw, 1.25rem);
    text-align: center;
    align-self: center;
    color: white;
    
    > * {
        overflow-wrap: break-word;
        hyphens: auto;
    }

    > dl {
        text-align: start;
        width: 100%;
        overflow-wrap: break-word;

        dd {
            margin-inline-start: 1.5rem;

            ::before {
                content: '> '
            }
        }
    }

    > #emoji {
        position: absolute;
        top: 0;
    }

    > img {
        width: min-content;
        height: min-content;
    }

    @media (min-width: 400px) {
        font-size: clamp(0.5rem, 2.75vw, 1.25rem);
    }
}

.memory-card-front {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(.5em, 2vw, 1.5rem);
    overflow-wrap: break-word;
    color: white;

    > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        border-radius: inherit;
    }

    > p {
        margin: 0;

        @media (max-width: 400px) {
            font-size: 1.5em;
        }
    }
}

.question-svg {
    color: var(--c-secondary);
    stroke: white;
    width: 100%;
    height: 100%;
}

.memory-card-back {
    background-color: var(--c-primary);
}

.memory-card:hover {
    .memory-card-back {
        background-color: white;
    }

    .question-svg {
        stroke: var(--c-primary);
        color: var(--c-secondary);
    }
}

.memory-field {
    display: grid;
    grid-template-columns: auto auto;
    gap: .5rem;
    width: 90vw;

    @media (min-width: 400px) {
        width: 80vw;
        grid-template-columns: auto auto auto;
    }

    @media (min-width: 1024px) {
        width: 70vw;
        grid-template-columns: auto auto auto auto;
    }
}

.memory-card-extra {
    @media (max-width: 400px) {
        display: none;
    }
}

.memory {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;

    > .header-text {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;

        @media (min-width: 400px) {
            grid-template-columns: 2fr 1fr 1fr;
        }
    }
}

.memory-title::before {
    content: 'Studenten'
}

.ducks-container {
    position: fixed;
    width: 100%;
    z-index: 9999;
    bottom: 0;
    display: grid;
}

.ducks-container,
.ducks-container > * {
    pointer-events: none;
}

.wave-wrapper {
    position: relative;
    grid-row-start: 1;
    grid-column-start: 1;
    display: flex;
    width: 200vw;

    /*scroll-animation met behulp van de sessie van Cyd en haar codepens*/
    animation-timeline: scroll(root);
    animation-name: moveWaves;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

.wave {
    width: 100vw;
}

.mother-duck {
    position: absolute;
    left: 54%;
    top: 10%;
    height: clamp(3rem, 8vw, 5rem);
    width: clamp(3rem, 8vw, 5rem);

    @media (min-width: 400px) {
        top: 50%;
    }

    @media (min-width: 2000px) {
        top: 75%;
    }
}

.duckling {
    position: absolute;
    left: 51.5%;
    top: 60%;
    height: clamp(1rem, 5vw, 3rem);
    width: clamp(1rem, 5vw, 3rem);

    @media (min-width: 400px) {
        top: 65%;
    }

    @media (min-width: 2000px) {
        top: 80%;
    }

    &:nth-of-type(2) {
        left: 50%;
    }
}

@keyframes moveWaves {
    /*Ik wil beter worden in animaties met CSS, zodat ik betere code schrijf, 
        waardoor mijn websites visueel aantrekkelijker zijn zonder dat dit veel tijd kost.*/
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}

.pokemon-toggle {
    display: flex;
    background: white;
    margin: 0 .5rem .5rem .5rem;
    padding-inline: 1rem;
    border-radius: 1rem;
    border: .25rem solid var(--c-primary);

    @media (min-width: 1024px) {
        position: fixed;
        z-index: 9999;
    }
}

@container style(--theme:pokemon) {
    body {
        background-color: var(--c-secondary);
        background-image: url('../public/images/decidueye.png');
        background-size: 10%;
    }

    .header-text {
        background: white;
        border-radius: 1rem;
    }

    .memory-title::before {
        content: 'Pokémon'
    }

    .mother-duck {
        position: absolute;
        left: 54%;
        top: 50%;
        height: clamp(3rem, 8vw, 8rem);
        width: clamp(3rem, 8vw, 8rem);

        @media (max-width: 400px) {
            top: 10%;
        }
    }

    .duckling {
        position: absolute;
        left: 51.5%;
        top: 65%;
        height: clamp(1rem, 5vw, 5rem);
        width: clamp(1rem, 5vw, 5rem);

        @media (max-width: 400px) {
            top: 10%;
        }

        &:nth-of-type(2) {
            left: 50%;
        }
    }
}