/* Animation */
#home-page,
#home-page #chat-section,
#chat-page,
#chat-page #main > div {
    animation: slide-up var(--animation-duration) ease;
}

/* Gradient */
#background-wrapper {
    position: fixed;
    inset: 0px;

    z-index: 1;
    pointer-events: none;

    overflow: hidden;

    background: var(--background);
}

main {
    z-index: 2;
}

#background-wrapper > div {
    position: absolute;
    inset: -100px;

    z-index: -1;
    pointer-events: none;

    opacity: 0.3;
}

#background-wrapper > div > div {
    position: absolute;
    inset: 0px;
    filter: blur(80px);
}

#background-wrapper #sky {
    left: -100%;
    bottom: -50%;

    background-image: radial-gradient(var(--sky-1), var(--sky-2));
}

body {
    transition:
        --sky-1 1s,
        --sky-2 5s;
}

#background-wrapper #grass-1 {
    --color-1: hsl(104.61, 100%, 46.85%);
    --color-2: hsl(37.43, 88.75%, 53.58%);

    filter: var(--backdrop-grass-filter);

    background-image: linear-gradient(
        350deg,
        var(--color-1),
        var(--color-2) 30%,
        transparent 50%
    );
}

#background-wrapper #grass-2 {
    --color-1: hsl(110, 60%, 40%);
    --color-2: hsl(110, 60%, 35%);

    filter: var(--backdrop-grass-filter);

    background-image: linear-gradient(
        9deg,
        var(--color-1),
        var(--color-2) 30%,
        transparent 45%
    );
}

body[theme="dark"] #background-wrapper > div {
    opacity: 0.5;
}

body[theme="dark"] #background-wrapper #sky {
    --color-1: hsl(188, 100%, 30%);
    --color-2: hsl(194, 72%, 24%);
}

body[theme="dark"] #background-wrapper #grass-1 {
    --color-1: hsl(120, 30%, 30%);
    --color-2: hsl(120, 30%, 24%);
}

body[theme="dark"] #background-wrapper #grass-2 {
    --color-1: hsl(110, 60%, 30%);
    --color-2: hsl(110, 50%, 24%);
}

/* Zoom */
.zoom {
    display: flex;
    align-items: start;
    gap: var(--large-gap);

    width: auto;
    height: auto;

    transform-origin: center;

    padding: var(--content-padding);
}

/* Keystrokes */
[ctkeystroke] {
    position: relative;
}

[ctkeystroke]::after {
    content: attr(ctkeystroke);

    background: var(--primary);
    color: var(--text-on-color);

    --size: 24px;

    position: absolute;
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);

    width: var(--size);
    height: var(--size);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(10px);
    transition: all calc(var(--animation-duration) / 2);
}

body[keystroke-active] [ctkeystroke]::after {
    opacity: 0.7;
    transform: translateY(0px);
}