/*
 * The shared ground of the Plenfix case animations.
 *
 * Each animation is drawn on a fixed 1200 × 750 stage and scaled to whatever
 * frame the case page gives it, so it looks the same on a phone as on a
 * desktop. The colours and the one typeface are Plenfix's, from its brand
 * book, and stay inside these pages: the portfolio around them never loads
 * them.
 */

@font-face {
    font-family: 'Geist';
    src: url('fonts/geist.woff2') format('woff2');
    font-weight: 100 900;
    font-display: block;
}

:root {
    --blauw: #3354ff;
    --logo-blauw: #2950f8;
    --blauw-donker: #2443f0;
    --inkt: #0b0c0e;
    --wit: #ffffff;
    --lichtgrijs: #f6f7f9;
    --tekst: #52575f;
    --subtiel: #8a8f98;
    --tint: #eef1ff;
    --live: #1fb38a;
    --montage: #f0a928;
    --service: #e5486a;
    --lijn: #e4e6ea;

    --font: 'Geist', system-ui, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--lichtgrijs);
}

body {
    font-family: var(--font);
    color: var(--inkt);
    -webkit-font-smoothing: antialiased;
}

/* The drawing surface. `stage.js` sets --scale to fit it into the frame. */
.stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 750px;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(var(--scale, 1));
    transform-origin: center;
}

/* Out of view, nothing moves: the page holds several of these at once. */
html[data-state='paused'] *,
html[data-state='paused'] *::before,
html[data-state='paused'] *::after {
    animation-play-state: paused !important;
}

/*
 * A visitor who asked for less motion gets the last frame, not a frozen first
 * one. Each animation's resting styles are its finished frame; this only
 * switches the movement off.
 */
html[data-state='still'] *,
html[data-state='still'] *::before,
html[data-state='still'] *::after {
    animation: none !important;
    transition: none !important;
}