/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

html {
    overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
    html {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

/* Set core body defaults */
body {
    min-height: 100vh;
    min-height: 100svh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
@property --hue-a {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --hue-b {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --hue-c {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --hue-d {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --drift-a {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --drift-b {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --drift-c {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }
    @property --drift-d {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }

    #main {
        font-family: system-ui, sans-serif;
        font-size: 1.25rem;
        line-height: 1.7;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        min-height: 100vh;
        min-height: 100svh;
    }

    .seiche {
        width: 100%;
        max-width: 40rem;
        text-align: center;
    }

    .seiche > * + * {
        margin-block-start: 1.25rem;
    }

    .seiche h1 {
        margin: 0;
        line-height: 1.15;
    }

    .seiche figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .seiche figcaption {
        font-size: 0.9rem;
        font-style: italic;
    }

    .seiche p {
        text-align: start;
    }

    .seiche-skin {
        position: relative;
        isolation: isolate;
        width: min(22rem, 100%);
    }

    .seiche-skin picture {
        display: block;
    }

    .seiche-skin img {
        display: block;
        width: 100%;
        height: auto;
    }

    .seiche-tint {
        position: absolute;
        inset: 0;

        --seiche-base: oklch(0.7 0.15 55);
        --tint-a: oklch(
            from var(--seiche-base) l calc(c + 0.05) calc(h + var(--hue-a) - 15)
        );
        --tint-b: oklch(
            from var(--seiche-base) l c calc(h + var(--hue-b) + 15)
        );
        --tint-c: oklch(
            from var(--seiche-base) l calc(c + 0.07) calc(h + var(--hue-c) + 30)
        );
        --tint-d: oklch(
            from var(--seiche-base) l c calc(h + var(--hue-d) - 30)
        );

        --x-a: calc(-80px + 160px * var(--drift-a));
        --y-a: calc(-40px + 100px * var(--drift-a));
        --x-b: calc(-80px + 160px * var(--drift-b));
        --y-b: calc(-40px + 100px * var(--drift-b));
        --x-c: calc(-80px + 160px * var(--drift-c));
        --y-c: calc(-40px + 100px * var(--drift-c));
        --x-d: calc(-80px + 160px * var(--drift-d));
        --y-d: calc(-40px + 100px * var(--drift-d));

        background-image:
            radial-gradient(
                90% 100% at calc(50% + var(--x-a)) calc(0% + var(--y-a)),
                var(--tint-a),
                transparent
            ),
            radial-gradient(
                100% 100% at calc(80% - var(--x-b)) calc(0% - var(--y-b)),
                var(--tint-b),
                transparent
            ),
            radial-gradient(
                150% 210% at calc(100% + var(--x-c)) calc(0% + var(--y-c)),
                var(--tint-c),
                transparent
            ),
            radial-gradient(
                100% 100% at calc(100% - var(--x-d)) calc(30% - var(--y-d)),
                var(--tint-d),
                transparent
            ),
            linear-gradient(115deg, var(--tint-a), var(--tint-b));

        mask: var(--seiche-mask, linear-gradient(#0000, #0000)) center / contain
            no-repeat;
        mix-blend-mode: color;

        animation:
            hue-a 5s linear infinite,
            hue-b 15s linear infinite,
            hue-c 40s linear infinite,
            hue-d 7s linear infinite,
            drift-a 12s ease-in-out infinite alternate,
            drift-b 15s ease-in-out infinite alternate,
            drift-c 10s ease-in-out infinite alternate,
            drift-d 17s ease-in-out infinite alternate;
    }

    @keyframes hue-a {
        to {
            --hue-a: 360;
        }
    }
    @keyframes hue-b {
        to {
            --hue-b: 360;
        }
    }
    @keyframes hue-c {
        to {
            --hue-c: 360;
        }
    }
    @keyframes hue-d {
        to {
            --hue-d: 360;
        }
    }
    @keyframes drift-a {
        to {
            --drift-a: 1;
        }
    }
    @keyframes drift-b {
        to {
            --drift-b: 1;
        }
    }
    @keyframes drift-c {
        to {
            --drift-c: 1;
        }
    }
    @keyframes drift-d {
        to {
            --drift-d: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .seiche-tint {
            animation: none;
        }
    }