/* Zerolabs — Syra.
   Benvitt, syragult, svart. Inget annat, ingen text. */

:root {
    --benvitt: #f1f1ec;
    --syra: #c6ff00;
    --svart: #0a0a0a;
}

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

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--benvitt);
    overflow: hidden;
    cursor: crosshair;
    -webkit-tap-highlight-color: transparent;
}

.falt {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* Formerna. Vildiga, enkla, langt storre an rutan. */

.form {
    position: absolute;
    will-change: transform;
}

.form.gul { background: var(--syra); }
.form.svart { background: var(--svart); }

/* Stadionform — den som gor paletten. */
.form.stadion { border-radius: 50vmax; }
.form.cirkel { border-radius: 50%; }
.form.balk { border-radius: 0; }

/* Logotypen ligger stilla medan allt annat ror sig. */

.mark {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    padding: 24px;
}

.mark img {
    grid-area: 1 / 1;
    width: clamp(170px, 34vw, 400px);
    height: auto;
}

/* Den vita kopian tands bara nar en svart form ligger bakom.
   Overgangen snapper — det ar ett omslag, inte en toning. */

.mark .vit {
    opacity: 0;
    transition: opacity 70ms steps(2);
}

.mark.inverterad .svart { opacity: 0; }
.mark.inverterad .vit { opacity: 1; }

.mark .svart { transition: opacity 70ms steps(2); }

@media (prefers-reduced-motion: reduce) {
    .mark img { transition: none; }
}