/*
 * The shared ground of the Avenc 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 letters are Avenc'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;
}

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

@font-face {
    font-family: 'Source Serif 4';
    src: url('fonts/source-serif-4.woff2') format('woff2');
    font-weight: 200 900;
    font-display: block;
}

@font-face {
    font-family: 'Caveat';
    src: url('fonts/caveat.woff2') format('woff2');
    font-weight: 600;
    font-display: block;
}

:root {
    --inkt: #121e3a;
    --kobalt: #3048d6;
    --koraal: #ff5b4a;
    --saffraan: #ffb23e;
    --pen: #c8321f;
    --markeer: #ffe3a8;
    --papier: #f2f4f8;
    --grijsblauw: #5a6480;
    --wit: #ffffff;
    --lijn: #dfe3ec;
    --lijn-donker: #2f3b5c;
    --tekst-op-inkt: #c9d0e2;

    --display: 'Geist', system-ui, sans-serif;
    --body: 'Public Sans', system-ui, sans-serif;
    --doc: 'Source Serif 4', Georgia, serif;
    --hand: 'Caveat', cursive;

    --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(--inkt);
}

body {
    font-family: var(--body);
    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 four 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 marks its end state with `.still` rules of its own; 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;
}