@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    @keyframes slide-from-right {
        from {
            transform: translateY(100vh);
            opacity: 0;
        }
    }

    @keyframes slide-from-left {
        from {
            transform: translateY(-100vh);
            opacity: 0;
        }
    }

    @keyframes slide-to-right {
        80% {
            opacity: 0;
        }

        to {
            transform: translateY(100vh);
            opacity: 0;
        }
    }

    @keyframes slide-to-left {
        80% {
            opacity: 0;
        }

        to {
            transform: translateY(-100vh);
            opacity: 0;
        }
    }

    ::view-transition(root) {
        animation: none;
        animation-duration: 1s;
        background-color: var(--color-background);
    }

    ::view-transition-old(homepage) {
        animation: slide-to-left 600ms ease-in-out forwards;
    }

    ::view-transition-new(homepage) {
        animation: slide-from-left 800ms ease-in-out forwards;
    }

    ::view-transition-old(sidepage) {
        animation: slide-to-right 600ms ease-in-out forwards;
    }

    ::view-transition-new(sidepage) {
        animation: slide-from-right 800ms ease-in-out forwards;
    }
}


:root {
    --color-background: #FFF7F0;
    --color-primary: #6EB718;
    --color-secondary: #EF7070;
    --color-discord: #5865F2;
    --color-title: oklch(from var(--color-background) calc(l - .7) calc(c + .1) h);
    --color-subtitle: var(--color-title);
    --color-emphasized: oklch(from var(--color-primary) calc(l - .2) c h);

    --font-family-title: 'Tiny5', monospace;
    --font-family-body: 'Pixelify Sans', monospace;
    --font-family-button: 'Jersey 10', monospace;

    --font-size-title: 2em;
    --font-size-button: 1.2em;

    --spacing-page: 2rem;

    --size-container: 80ch;

    --transition-duration-in: 150ms;
    --transition-duration-out: 400ms;
    --transition-ease-in: ease-in;
    --transition-ease-out: linear(0, 0.223 11.7%, 0.392 18.4%, 0.619 24.8%, 0.999 33.3%, 0.748 40%, 0.691 42.7%, 0.672 45.3%, 0.69 47.8%, 0.743 50.4%, 0.999 57.7%, 0.883 61.8%, 0.856 63.6%, 0.848 65.3%, 0.855 67%, 0.879 68.8%, 0.999 74.5%, 0.953 77.5%, 0.94 80.2%, 0.95 82.7%, 1 88.2%, 0.987 91.9%, 1);
}



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

html {
    font-size: 8px;
}

body {
    font-size: clamp(16px, 2vw, 20px);
    font-family: var(--font-family-body), monospace;
    background: var(--color-background);
    color: black;
}

main {
    display: flex;
    flex-direction: column;
}

img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

p + p {
    margin-top: 1em;
}

em {
    font-style: normal;
    color: var(--color-emphasized);
}

/**** Elements ****/

.title,
.subtitle {
    font-family: var(--font-family-title), monospace;
    font-size: var(--font-size-title, 1em);
    text-transform: uppercase;
    color: var(--color-title, currentColor);
}

.title {
    text-align: center;
}

.subtitle {
    font-size: 1.2em;
    color: var(--color-subtitle);

    &:has(+ .card) {
        text-align: center;
        margin-bottom: 0.25lh;
    }
}

.button {
    ---button-borderColor: var(
        --button-borderColor,
        oklch(from var(--button-backgroundColor) calc(l - .2) c h)
    );

    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-family: var(--font-family-button), sans-serif;
    font-size: var(--font-size-button, 1em);
    text-decoration: none;
    text-transform: uppercase;
    background: var(--button-backgroundColor);
    color: var(--button-color, currentColor);
    border: 1px solid var(---button-borderColor, black);
    box-shadow: .5rem .5rem 0px var(---button-borderColor, black);
    cursor: pointer;

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

    user-select: none;

    &:hover {
        background: oklch(from var(--button-backgroundColor) calc(l + .1) c h);
    }

    &:focus {
        translate: .5rem .5rem;
        box-shadow: none;
    }

    &:not([class*="button--"]) {
        --button-backgroundColor: white;
        --button-borderColor: black;
    }

    &.button--discord {
        --button-backgroundColor: var(--color-discord);
        --button-color: white;
    }
}

.card {
    border: 1px solid var(--card-borderColor, black);
    border-radius: 2rem;
    background-color: #fff;
    padding: 2rem;
    width: fit-content;
    text-align: left;
    box-shadow:
            var(--card-shadowOffset, 0)
            var(--card-shadowOffset, 0)
            0px
            var(--card-borderColor, black);
    overflow: clip;

    &:has(> img:first-child) {
        padding-top: 0;
    }

    &:has(> img:last-child) {
        padding-bottom: 0;
    }

    & > img {
        margin-inline: -2rem;
        width: calc(100% + 4rem);
        object-fit: cover;
        background-size: cover;
        background-repeat: no-repeat;
        aspect-ratio: 16 / 9;
    }

    & > img + :not(img) {
        padding-top: 2rem;
    }

    & > :not(img):has(+ img) {
        padding-bottom: 2rem;
    }

    em {
        font-style: normal;
        color: oklch(from var(--card-borderColor) calc(l - .2) c h);
    }

    &:where(.prose),
    :where(.prose) {
        --mark-color: oklch(from var(--card-borderColor) l c h / 0.15);
        padding: 1lh 3ch 1lh 2ch;

        & > ol:first-child {
            margin-top: 1lh;
        }
    }
}

:where(.prose) {
    font-family: monospace;
    line-height: 1.5em;
    letter-spacing: 2%;

    & > * + * {
        margin-top: 1em;
    }

    :where(h1, h2, h3) {
        font-family: var(--font-family-title), monospace;
        text-transform: uppercase;
    }

    :where(h1) {
        margin-bottom: 1lh;
    }

    :where(h2) {
        font-size: 2em;
        line-height: 1.25em;
    }

    :where(h3) {
        font-size: 1.5em;
        line-height: 1.5em;
    }

    :is(ul, ol) {
        list-style: decimal;
        padding-left: 4ch;

        :is(ul, ol) {
            list-style: lower-alpha;
            margin-block-start: 0.5lh;
            padding-left: 3ch;

            & > li + li {
                margin-top: .5lh;
            }
        }

        li::marker {
            font-weight: bold;
        }

        :not(li, li > mark) > & {
            & > li::marker {
                font-weight: bold;
                color: var(--card-borderColor);
            }

            & > li + li {
                margin-top: 1lh;
            }
        }
    }

    dl {
        dt {
            font-weight: bold;
        }

        dd {
            padding-left: 2ch;
        }

        dd + dt,
        div + div {
            margin-top: 1em;
        }
    }

    mark {
        border-radius: 8px;
        background-color: var(--mark-color);
        color: contrast-color(var(--mark-color));
        padding: 0.1ch 0.5ch;

        &[block] {
            display: block;
            padding: 1ch;
        }
    }

    .text-justify {
        text-align: justify;
    }
}


/**** Components ****/

.appbar {
    padding-block: 1lh;
}

.container {
    width: min(100%, var(--size-container, none));
    max-width: calc(100dvi - 2 * var(--spacing-page, 0px));
    margin-inline: auto;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    gap: 1rem;
    padding: 3rem;

    img {
        aspect-ratio: 1;
        box-shadow: 1px 1px 0 oklch(from var(--color-background) calc(l - .3) calc(c + .05) h);
    }
}

.chat {
    padding-inline: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .chat__left,
    .chat__right {
        max-width: 80%;
        font-size: 1em;
        font-weight: normal;
    }

    .chat__left {
        border-top-left-radius: .5rem;

        --card-borderColor: var(--color-secondary);
        --card-shadowOffset: 6px;
    }

    .chat__right {
        border-top-right-radius: .5rem;
        align-self: end;

        --card-borderColor: var(--color-primary);
        --card-shadowOffset: 6px;
    }
}

.slider {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-color: oklch(from var(--color-background) calc(l - .15) c h / 0.2) transparent;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    &:hover {
        scrollbar-color: oklch(from var(--color-background) calc(l - .15) c h) transparent;
    }

    .slider__container {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        padding: 3rem;
        width: max-content;
        margin-inline: auto;
    }

    .slider__slide {
        scroll-snap-align: center;
        flex: 1 0 max-content;
        width: 100%;
        max-width: min(30ch, 80dvw);
        text-align: center;

        display: flex;
        flex-direction: column;
    }

    .card {
        flex: 1 0;
        --card-shadowOffset: 6px;

        &:is(details) {
            appearance: none;
        }
    }
}

.header {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
    margin-inline: auto;
    padding-inline: var(--spacing-page);
    margin-bottom: 2rem;
    --size-container: 80ch;

    & > * + .button {
        margin-top: 1rem;
    }
}

.above-fold {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    @media (min-width: 800px) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        max-width: var(--size-container, none);
        margin-inline: auto;
    }
}

.image-divider {
    max-height: 90dvh;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
}

/**** Specific ****/

#homepage {
    view-transition-name: homepage;

    main {
        gap: 12rem;
        padding-block: 12rem;
    }

    #header {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 8rem var(--spacing-page);
    }

    #introduction {
        max-width: 60ch;
        margin-inline: auto;
    }

    #projects {
        --card-borderColor: var(--color-secondary);
        --color-subtitle: var(--color-secondary);
    }

    #events {
        --card-borderColor: var(--color-primary);
        --color-subtitle: var(--color-primary);
    }

    #become-a-member {
        padding-inline: var(--spacing-page);
    }

    #what-members-say {
        container: cloud / inline-size;
        display: block;
        width: 100%;
        padding-inline: 6rem;

        ol {
            list-style: none;
            padding: 0;
            margin: 0;
            border-radius: 50%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: end;
            gap: 4rem 4rem;
            align-items: center;
            justify-content: center;
            font-size: .9em;
            padding-block: 6rem;

            li {
                display: inline;
                font-size: calc(0.5em + 0.5em * var(---size, 0));
                line-height: .65em;
                flex: 1 0 max(max-content, 100%);
                text-transform: uppercase;
                font-family: var(--font-family-title);

                transition: scale, rotate;
                transition-duration: var(--transition-duration-out);
                transition-timing-function: var(--transition-ease-out);

                user-select: none;

                &:hover {
                    scale: .9;
                    rotate: var(---rotate);
                    transition-duration: var(--transition-duration-in);
                    transition-timing-function: var(--transition-ease-in);
                }
            }

            li:nth-child(even) {
                order: calc(-1 * (var(---max, 0) - var(---size, 0)));
            }

            li:nth-child(odd) {
                order: calc(var(---max, 0) - var(---size, 0));
            }

            /**/

            li:nth-child(3n) {
                color: oklch(from var(--color-secondary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 360 / var(---size, 0)));
                ---rotate: 3deg;
            }

            li:nth-child(3n + 1) {
                color: oklch(from var(--color-secondary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 180 / var(---size, 0)));
                ---rotate: -3deg;
            }

            li:nth-child(3n + 2) {
                color: oklch(from var(--color-secondary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 480 / var(---size, 0)));
                ---rotate: 5deg;
            }

            /**/

            li:nth-child(5n) {
                color: oklch(from var(--color-primary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 600 / var(---size, 0)));
            }

            li:nth-child(5n + 2) {
                color: oklch(from var(--color-primary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 300 / var(---size, 0)));
            }

            li:nth-child(5n + 4) {
                color: oklch(from var(--color-primary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 900 / var(---size, 0)));
            }

            /**/

            li:nth-child(7n) {
                color: oklch(from var(--color-secondary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 50 / var(---size, 0)));
            }

            li:nth-child(7n + 3) {
                color: oklch(from var(--color-secondary) l calc(c - ((var(---max) - var(---size)) / var(---max) * .1)) calc(h - 100 / var(---size, 0)));
            }
        }
    }
}

#rights-and-rules-page {
    --card-shadowOffset: 2px;
    view-transition-name: sidepage;

    main {
        gap: 12rem;
        padding-block: 12rem;
    }

    .subtitle {
        font-size: 2em;
    }

    #rights {
        --card-borderColor: var(--color-primary);
        --color-subtitle: var(--color-primary);
    }

    #rules {
        --card-borderColor: var(--color-secondary);
        --color-subtitle: var(--color-secondary);
    }

    #admin-rules {
        --card-borderColor: var(--color-discord);
        --color-subtitle: var(--color-discord);
    }
}