@property --rotate-x {
    syntax: "<angle>";
    initial-value: 0;
    inherits: true;
}

@property --rotate-y {
    syntax: "<angle>";
    initial-value: 0;
    inherits: true;
}

:root {
    --initial-fade: 300ms;
    --border-reveal: 500ms;
    --title-reveal: 750ms;
    --motto-reveal: 500ms;
    --content-reveal: 500ms;
    --theme-switch: 500ms;

    --root-theme-properties:
        --background, --foreground, --color, --header-color, --subheader-color,
        --surface-0, --surface-1, --motto-color, --motto-shadow;

    --transition-theme-duration: var(--theme-switch);
    --transition-theme-easing: ease-in-out;

    transition-property: var(--root-theme-properties);
    transition-duration: var(--theme-switch);
    transition-timing-function: var(--transition-theme-easing);

    body {
        transition: background-color 0.5s ease-in-out;
        background-blend-mode: luminosity;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --theme-switch: 1s;
    }
}

/** {
    transition-property: var(--transition-theme-properties);
    transition-duration: var(--transition-theme-duration);
    transition-timing-function: var(--transition-theme-easing);
}*/

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes a-ltr-after {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(101%);
    }
}

@keyframes a-ltr-before {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200%);
    }
}

@keyframes a-ttb-after {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(101%);
    }
}

@keyframes a-ttb-before {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(200%);
    }
}

@keyframes slide {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: var(--stripe-hyp) var(--stripe-hyp);
    }
}

@media not (prefers-reduced-motion) {
    @layer animation {
        .fade-in {
            opacity: 0;
            animation: fade-in 300ms cubic-bezier(0.77, 0, 0.18, 1) forwards;
        }

        .swipe {
            position: relative;
            overflow: hidden;
            line-height: 1.2;
        }

        .swipe::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: var(--header-color);
            animation: a-ltr-after 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
            transform: translateX(-101%);
        }

        .swipe::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background);
            animation: a-ltr-before 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
            transform: translateX(0);
            z-index: 1;
        }
    }

    .main-content,
    fs-footer {
        opacity: 0;
        animation: fade-in var(--initial-fade) cubic-bezier(0.77, 0, 0.18, 1)
            forwards;
        animation-delay: 1.5s;
    }

    fs-header::before,
    fs-header::after {
        animation-duration: var(--title-reveal);
    }

    fs-motto .swipe::before,
    fs-motto .swipe::after {
        animation-delay: calc(var(--title-reveal));
        animation-duration: var(--motto-reveal);
    }

    @media (min-width: 600px) {
        fs-motto .swipe::before,
        fs-motto .swipe::after {
            animation-delay: 0s;
        }

        fs-motto {
            --x: calc(tan(atan2(var(--rotate-y), 1deg)) * 1px);
            --y: calc(tan(atan2(var(--rotate-x), 1deg)) * -1px);

            text-shadow: var(--x) var(--y) var(--motto-shadow);
            transition: text-shadow 50ms linear;
        }

        fs-header::before {
            animation-name: a-ttb-before;
        }

        fs-header::after {
            animation-name: a-ttb-after;
        }

        fs-header::before,
        fs-header::after {
            animation-delay: calc(var(--motto-reveal));
        }

        .parallax {
            --rotate-x: 0;
            --rotate-y: 0;
            --perspective: clamp(500px, 10000vmax, 2000px);

            transform: perspective(var(--perspective)) rotateX(var(--rotate-x))
                rotateY(var(--rotate-y));
            transform-style: preserve-3d;
            transition: transform 1.5s cubic-bezier(0.05, 0.5, 0, 1);
            will-change: transform;
        }
    }
}