/* Gebaseerd op "FLOW V.4.0 — Flexible Library for Optimised Wireframes" door Little Miss Robot,
   gelicentieerd onder CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Aangepast: vertaald naar
   CSS-tokens met eigen elevation, radii en componenten. Little Miss Robot onderschrijft dit werk niet. */

/* =========================================================
   Horeca-template — FOUNDATION (v2 "FLOW refined")
   ---------------------------------------------------------
   Tokens en primitieven. Pagina-specifieke stijlen staan in:
     pages/shell.css     header, mobiele tabbalk, zwevend mandje, footer
     pages/home.css      home, contact, juridisch, 404
     pages/checkout.css  mandje, checkout, bedankpagina
     components/menu.css menu + productpopup
     admin.css           beheer
   Basis: Figma-library FLOW v4.0 (Little Miss Robot) — kleuren,
   typografie, radii en spacing uit de FLOW-variabelen. v2 laat de
   harde offset-schaduw los voor haarlijnranden + zachte elevation.
   Regel: gebruik ALTIJD tokens, nooit losse hex-waarden of px-schaduwen.
   ====================================================== */

:root {
    /* ---- Neutral (FLOW 🌈 Theme / Light) ---- */
    --n-1000: #030217;
    --n-900: #100f2a;
    --n-800: #1e1f3b;
    --n-700: #333455;
    --n-600: #474b69;
    --n-500: #64698b;
    --n-400: #9498b8;
    --n-300: #cbcee1;
    --n-200: #ebebf5;
    --n-150: #f1f1f8;
    --n-100: #f8f8fc;
    --n-0: #ffffff;

    /* ---- Semantisch ---- */
    --bg: var(--n-0);
    --bg-subtle: var(--n-100);
    --surface: var(--n-0);
    --text: var(--n-1000);
    --text-2: var(--n-600);
    --text-3: var(--n-500);
    --border: var(--n-200);
    --border-strong: var(--n-300);

    /* ---- Accent: per zaak overschreven via brand_color (layout.twig) ---- */
    --accent: #4f46e5;
    --accent-ink: #ffffff;
    --accent-hover: color-mix(in srgb, var(--accent) 88%, #000);
    --accent-press: color-mix(in srgb, var(--accent) 78%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 9%, #fff);
    --accent-soft-2: color-mix(in srgb, var(--accent) 16%, #fff);
    --accent-text: color-mix(in srgb, var(--accent) 82%, #000);
    --accent-strong: var(--accent-hover);

    /* ---- Op donkere vlakken (slot-CTA, donkere kaarten, zwevend mandje) ---- */
    --on-dark: #ffffff;
    --on-dark-2: rgba(255, 255, 255, .72);
    --on-dark-3: rgba(255, 255, 255, .52);
    --on-dark-border: rgba(255, 255, 255, .14);
    --on-dark-surface: rgba(255, 255, 255, .08);

    /* ---- Feedback (FLOW) ---- */
    --success-600: #5f9605;
    --success-800: #3d5f06;
    --success-100: #f7fded;
    --success-200: #d6f3a7;
    --warning-600: #ea580c;
    --warning-800: #9a3412;
    --warning-100: #fff4e5;
    --warning-200: #fed7aa;
    --danger-600: #e81745;
    --danger-800: #9f1239;
    --danger-100: #fff0f1;
    --danger-200: #fecdd3;
    --info-600: #0284c7;
    --info-800: #075985;
    --info-200: #bae6fd;
    --info-100: #f0f9ff;

    /* ---- Overlay achter modals/sheets/off-canvas ---- */
    --scrim: rgba(3, 2, 23, .4);

    /* ---- Radii (FLOW 4/8/16/48 + v2 control/media) ---- */
    --r-tiny: 4px;
    --r-small: 8px;
    --r-control: 12px;
    --r-default: 16px;
    --r-card: 20px;
    --r-media: 24px;
    --r-xl: 48px;
    --r-pill: 999px;
    --r-tag: 6px;
    --r-mark: 10px; /* logo-merkje */

    /* ---- Spacing (FLOW) ---- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;

    /* ---- Typografie (FLOW 🅰️, Inter) ---- */
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-display: clamp(44px, 6.4vw, 88px);
    --fs-h1: clamp(36px, 4.6vw, 64px);
    --fs-h2: clamp(28px, 3.2vw, 44px);
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-lead: clamp(17px, 1.4vw, 20px);
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-tiny: 12px;
    --track-display: -0.04em;
    --track-heading: -0.025em;

    /* ---- Elevation (v2: geen harde offset meer) ---- */
    --e-0: 0 0 0 1px var(--border);
    --e-1: 0 1px 2px rgba(3, 2, 23, .05);
    --e-2: 0 1px 2px rgba(3, 2, 23, .04), 0 4px 12px -2px rgba(3, 2, 23, .06);
    --e-3: 0 2px 4px rgba(3, 2, 23, .04), 0 12px 32px -6px rgba(3, 2, 23, .12);
    --e-4: 0 4px 8px rgba(3, 2, 23, .04), 0 24px 64px -12px rgba(3, 2, 23, .22);
    --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    --ring-neutral: 0 0 0 4px rgba(3, 2, 23, .08);

    /* ---- Motion ---- */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;

    /* ---- Layout ---- */
    --header-h: 72px;
    --header-h-compact: 60px; /* header na scrollen */
    --tabbar-h: 64px; /* mobiele tabbalk (.mobile-nav), exclusief safe-area */
    --section-y: clamp(64px, 9vw, 128px); /* verticale ruimte tussen secties */
    --container: 1240px;
    --gutter: clamp(16px, 4vw, 32px);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 72px);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01", "ss03";
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main { flex: 1; }

img, svg, video { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--accent-soft-2); color: var(--text); }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    letter-spacing: var(--track-heading);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-body); line-height: 1.4; letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

.display { font-size: var(--fs-display); line-height: .98; letter-spacing: var(--track-display); font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
main.container { padding-block: var(--s-10) var(--s-24); }

.space-y > * + * { margin-top: var(--s-6); }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-small); line-height: 20px; }
.num, .tabular { font-variant-numeric: tabular-nums; }

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

.skip {
    position: absolute;
    left: -9999px;
    top: var(--s-2);
    z-index: 6000;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--n-1000);
    color: var(--n-0);
}
.skip:focus { left: var(--s-4); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-small); }

.row { display: flex; flex-wrap: wrap; align-items: center; }
.gap { gap: var(--s-3); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-tiny);
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* =========================================================
   Tags / chips (FLOW Tag)
   ====================================================== */
.tag, .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--n-150);
    color: var(--text);
    font-size: var(--fs-tiny);
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.chip { font-size: 13px; padding: 6px 12px; }
.tag--accent { background: var(--accent-soft); color: var(--accent-text); }
.tag--success, .chip--success { background: var(--success-100); color: var(--success-800); box-shadow: inset 0 0 0 1px var(--success-200); }
.tag--danger { background: var(--danger-100); color: var(--danger-800); box-shadow: inset 0 0 0 1px var(--danger-200); }
.tag--warning { background: var(--warning-100); color: var(--warning-800); box-shadow: inset 0 0 0 1px var(--warning-200); }
.tag--glass { background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--e-1); }

.dot {
    position: relative;
    width: 8px; height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}
.tag--success .dot { background: var(--success-600); }
.tag--success .dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--success-600);
    opacity: .35;
    animation: pulse 2s var(--ease) infinite;
}
.tag--danger .dot { background: var(--danger-600); }
@keyframes pulse { 0% { transform: scale(.6); opacity: .45; } 70%, 100% { transform: scale(1.8); opacity: 0; } }

/* =========================================================
   Knoppen (FLOW Button, v2)
   primary = accent · secondary = wit + rand · dark = inkt · ghost = vlak
   ====================================================== */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
    --btn-sh: var(--e-1);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--btn-sh);
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease),
        box-shadow var(--dur-2) var(--ease),
        transform var(--dur-1) var(--ease);
}
.btn:hover { --btn-bd: var(--n-400); --btn-sh: var(--e-2); }
.btn:active { transform: scale(.98); --btn-sh: none; }
.btn:focus-visible { box-shadow: var(--ring); border-radius: var(--r-pill); }

.btn--primary, .btn.add {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-ink);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(3, 2, 23, .12), 0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn--primary:hover, .btn.add:hover {
    --btn-bg: var(--accent-hover);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(3, 2, 23, .12), 0 10px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn--primary:active { --btn-bg: var(--accent-press); }

.btn--dark {
    --btn-bg: var(--n-1000);
    --btn-fg: var(--n-0);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(3, 2, 23, .2);
}
.btn--dark:hover { --btn-bg: var(--n-800); --btn-bd: transparent; }

.btn--subtle, .btn--ghost, .btn--secondary-soft {
    --btn-bg: var(--n-150);
    --btn-bd: transparent;
    --btn-sh: none;
}
.btn--subtle:hover, .btn--ghost:hover { --btn-bg: var(--n-200); --btn-bd: transparent; --btn-sh: none; }

.btn--danger { --btn-bg: var(--danger-600); --btn-fg: var(--n-0); --btn-bd: transparent; }
.btn--danger:hover { --btn-bg: var(--danger-800); --btn-bd: transparent; }

.btn--small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn--full { width: 100%; }
.btn--icon { width: 44px; padding: 0; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    --btn-sh: none;
}

.btn svg, .icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn .btn__arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* =========================================================
   Kaarten (FLOW Card)
   ====================================================== */
.card {
    position: relative;
    padding: var(--s-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
}
.card--raised { border-color: transparent; box-shadow: var(--e-0), var(--e-2); }
.card--bold { border-color: transparent; box-shadow: var(--e-0), var(--e-3); }
.card--subtle { background: var(--bg-subtle); border-color: transparent; }
.card--interactive { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.card--interactive:hover { border-color: transparent; box-shadow: var(--e-0), var(--e-3); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--text-2); }

/* =========================================================
   Grids
   ====================================================== */
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.split {
    display: grid;
    gap: var(--s-12);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-8); } }

/* =========================================================
   Meldingen (FLOW Notification)
   ====================================================== */
.alert {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-default);
    background: var(--warning-100);
    box-shadow: inset 0 0 0 1px var(--warning-200);
    color: var(--warning-800);
}
.alert strong { color: inherit; font-weight: 600; }
.alert--warning { background: var(--warning-100); box-shadow: inset 0 0 0 1px var(--warning-200); color: var(--warning-800); }
.alert--info { background: var(--info-100); box-shadow: inset 0 0 0 1px var(--info-200); color: var(--info-800); }
.alert--success { background: var(--success-100); box-shadow: inset 0 0 0 1px var(--success-200); color: var(--success-800); }
.alert--danger { background: var(--danger-100); box-shadow: inset 0 0 0 1px var(--danger-200); color: var(--danger-800); }

.field-hint { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 20px; color: var(--text-3); }
.error { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 20px; color: var(--danger-600); }

/* =========================================================
   Formulieren (FLOW Form elements, v2)
   ====================================================== */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }

label { font-size: var(--fs-small); line-height: 20px; font-weight: 600; color: var(--text); }

input, textarea, select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px; /* voorkomt zoom op iOS */
    box-shadow: var(--e-1);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--n-400); }
input:hover, textarea:hover, select:hover { border-color: var(--n-400); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
    border-radius: var(--r-control);
}
input[disabled], select[disabled] { background: var(--bg-subtle); color: var(--n-400); box-shadow: none; }

select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364698b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.field-group {
    padding: var(--s-6);
    border-radius: var(--r-default);
    background: var(--bg-subtle);
}
.field-group h3 { margin-bottom: var(--s-4) !important; }
.field-group .field + .grid-2 { margin-top: var(--s-4); }

/* Keuzepillen (FLOW Content switcher) */
.radio-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.radio-pill, .checkbox-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: 12px 18px 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    background: var(--surface);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--e-1);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.radio-pill input, .checkbox-pill input {
    appearance: none;
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--n-400);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: none !important;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.checkbox-pill input { border-radius: 6px; }
.radio-pill input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--dur-2) var(--ease-out); }
.checkbox-pill input::after {
    content: "";
    width: 10px; height: 6px;
    border: 2px solid var(--accent-ink);
    border-top: 0; border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform var(--dur-2) var(--ease-out);
}
.radio-pill:hover, .checkbox-pill:hover { border-color: var(--n-400); }
.radio-pill:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.radio-pill input:checked { border-color: var(--accent); }
.radio-pill input:checked::after { transform: scale(1); }
.radio-pill:has(input:focus-visible), .checkbox-pill:has(input:focus-visible) { box-shadow: var(--ring); }
.checkbox-pill { align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 22px; }
.checkbox-pill input { margin-top: 1px; }
.checkbox-pill input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox-pill input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.checkbox-pill:has(input:checked) { border-color: var(--accent); }

/* =========================================================
   Prijzen (gedeeld: menu, mandje, popup)
   ====================================================== */
.price-stack { display: inline-flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.price-stack--cart { justify-content: flex-end; }
.price-old { color: var(--n-400); text-decoration: line-through; font-size: .86em; font-weight: 500; }
.price-current { font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================
   Toast
   ====================================================== */
.toast {
    position: fixed;
    left: 50%;
    bottom: var(--s-6);
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-width: calc(100% - 32px);
    padding: 12px 18px 12px 14px;
    border-radius: var(--r-pill);
    background: var(--n-1000);
    color: var(--n-0);
    font-size: 15px;
    font-weight: 500;
    box-shadow: var(--e-4);
    transform: translateX(-50%);
    animation: toast-in var(--dur-3) var(--ease-out);
}
.toast::before {
    content: "";
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
@media (max-width: 768px) { .toast { bottom: calc(148px + env(safe-area-inset-bottom)); } }

/* =========================================================
   Loader
   ====================================================== */
body.is-loading { cursor: progress !important; }
#global-loader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(2px);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
}
#global-loader.visible { opacity: 1; }
#global-loader::before {
    content: "";
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid var(--n-200);
    border-top-color: var(--accent);
    animation: loader-spin .7s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* Skeleton (laadstatus van lijsten) */
.skeleton {
    border-radius: var(--r-small);
    background: linear-gradient(90deg, var(--n-150) 0%, var(--n-100) 50%, var(--n-150) 100%) 0 0 / 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
}
@keyframes skeleton { to { background-position: -200% 0; } }

/* =========================================================
   Reveal-on-scroll (JS zet .is-visible; zonder JS gewoon zichtbaar)
   ====================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}