/*
|--------------------------------------------------------------------------
| STYLE.CSS
|--------------------------------------------------------------------------
|
| Globale Styles
|
| Diese Datei enthält ausschliesslich globale Regeln,
| die nicht eindeutig einem anderen Stylesheet zugeordnet
| werden können.
|
| Keine Komponenten!
|
*/

/*
|--------------------------------------------------------------------------
| HTML & BODY
|--------------------------------------------------------------------------
*/

html,
body {
    width: 100%;
    min-height: 100%;
}

html {
    color-scheme: dark;
}

/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-skip-link);

    min-height: 44px;
    padding: var(--space-3) var(--space-4);

    color: var(--color-background);
    background: var(--color-text);
    border-radius: var(--radius-small);

    transform: translateY(calc(-100% - 1.5rem));
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
}

button,
.button,
input[type="checkbox"],
.footer__links a {
    min-height: 44px;
}

button,
.button,
.footer__links a {
    display: inline-flex;
    align-items: center;
}

/*
|--------------------------------------------------------------------------
| Textauswahl
|--------------------------------------------------------------------------
*/

::selection {
    background: var(--color-primary);
    color: var(--color-background);
}

/*
|--------------------------------------------------------------------------
| Fokus
|--------------------------------------------------------------------------
|
| :focus dient als Fallback für Browser ohne :focus-visible.
| Unterstützende Browser zeigen den Ring nur bei Tastatur-/Assistenzfokus.
|
*/

:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

@supports selector(:focus-visible) {
    :focus {
        outline: none;
    }

    :focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 3px;
    }
}

#main-content:focus {
    outline: none;
}

/*
|--------------------------------------------------------------------------
| Animationen
|--------------------------------------------------------------------------
*/

.motion-enabled .reveal {
    opacity: 0;
    transform: translateY(var(--motion-distance-medium));
    transition:
        opacity var(--motion-duration-slow) var(--motion-ease-emphasized),
        transform var(--motion-duration-slow) var(--motion-ease-emphasized);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.motion-enabled .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.game-card,
.command-card,
.faq__item {
    transition:
        transform var(--motion-duration-base) var(--motion-ease-standard),
        box-shadow var(--motion-duration-base) var(--motion-ease-standard),
        opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
    .game-card:hover,
    .command-card:hover,
    .faq__item:hover {
        transform: translateY(calc(var(--motion-distance-small) * -1));
    }
}

.footer__cat {
    transform-origin: 50% 100%;
    animation: cat-idle var(--motion-duration-idle) ease-in-out infinite;
}

@keyframes cat-idle {
    0%,
    82%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    88% {
        transform: rotate(-2deg) translateY(-2px);
    }

    94% {
        transform: rotate(2deg) translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .motion-enabled .reveal {
        opacity: 1;
        transform: none;
    }
}