/* ---------- Kleine reset (vervangt Bootstrap) ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-weight: 600;
}

p, ul, ol, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

img, svg {
    vertical-align: middle;
}

strong, b {
    font-weight: 600;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

/* ---------- Basis ---------- */
:root {
    --ink: #1d1d1f;
    --ink-soft: #6e6e73;
    --paper: #ffffff;
    --paper-alt: #f5f5f7;
    --night: #000000;
    --night-soft: #161617;
    --accent: #2997ff;
    --accent-press: #0071e3;
    --teal: #4fd1c5;
    --radius-tile: 28px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    /* Geen scroll-behavior: smooth; app.js regelt soepel en snel scrollen naar ankers */
    /* Scrollbalk verbergen (scrollen blijft werken; de voortgangsbalk bovenaan toont de positie) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    html::-webkit-scrollbar {
        display: none;
    }

html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    letter-spacing: -0.015em;
}

h1:focus {
    outline: none;
}

a {
    color: var(--accent-press);
}

/* ---------- Gedeelde knoppen ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.75rem 1.4rem;
    border-radius: 980px;
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--accent-press);
    color: #fff;
    transition: background-color 0.2s ease, transform 0.2s var(--ease-out);
}

    .pill:hover {
        background: #0077ed;
        color: #fff;
        transform: scale(1.03);
    }

.text-link {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}

    .text-link::after {
        content: " \203A";
        display: inline-block;
        transition: transform 0.2s var(--ease-out);
    }

    .text-link:hover {
        text-decoration: underline;
        color: var(--accent);
    }

        .text-link:hover::after {
            transform: translateX(3px);
        }

.on-light .text-link {
    color: var(--accent-press);
}

/* ---------- Scroll-animaties ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

/* Woord-voor-woord oplichten tijdens scrollen */
.scrub-text .w {
    opacity: 0.18;
    transition: opacity 0.25s linear;
}

    .scrub-text .w.on {
        opacity: 1;
    }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scrub-text .w {
        opacity: 1;
    }
}

/* Zonder JavaScript alles gewoon tonen */
html:not(.js) .reveal {
    opacity: 1;
    transform: none;
}

html:not(.js) .scrub-text .w {
    opacity: 1;
}

/* ---------- Blazor-standaard ---------- */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ---------- Juridische pagina's (privacy, voorwaarden) ---------- */
.legal {
    max-width: 692px;
    margin: 0 auto;
    padding: 7.5rem 22px 6rem;
    color: #1d1d1f;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.legal-head {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #d2d2d7;
}

.legal .eyebrow {
    font-size: 1rem;
    font-weight: 600;
    color: #6e6e73;
    margin: 0 0 0.5rem;
}

.legal h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 0.75rem;
}

.legal .updated {
    color: #6e6e73;
    font-size: 0.9rem;
    margin: 0;
}

.legal .intro {
    font-size: 1.25rem;
    color: #424245;
    margin-bottom: 2.5rem;
}

.legal h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 2.75rem 0 0.75rem;
}

.legal h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.legal p, .legal li {
    color: #424245;
}

.legal ul {
    padding-left: 1.25rem;
}

.legal li {
    margin-bottom: 0.3rem;
}

.legal .facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    background: #f5f5f7;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0 0;
}

    .legal .facts dt {
        font-weight: 600;
        color: #1d1d1f;
    }

    .legal .facts dd {
        margin: 0;
        color: #424245;
    }

@media (max-width: 520px) {
    .legal .facts {
        grid-template-columns: 1fr;
    }

        .legal .facts dd {
            margin-bottom: 0.5rem;
        }
}

.legal ol {
    padding-left: 1.5rem;
}

    .legal ol li {
        padding-left: 0.25rem;
    }

.legal .note {
    background: #f5f5f7;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
}

/* Netjes afdrukken / opslaan als PDF */
@media print {
    .globalnav, .legal .note, #blazor-error-ui {
        display: none !important;
    }

    .legal {
        padding: 0;
        max-width: none;
        font-size: 10.5pt;
    }

        .legal h2 {
            break-after: avoid;
        }
}

/* =====================================================================
   ANIMATIES (globaal: ook voor elementen die JavaScript of MarkupString maakt)
   ===================================================================== */

/* Woorden schuiven één voor één omhoog uit een masker */
[data-split] .sw-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

[data-split] .sw {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
}

[data-split].is-visible .sw {
    transform: none;
}

html:not(.js) [data-split] .sw {
    transform: none;
}

/* Knoppen: lichtglans bij hover */
.pill {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 8px 24px -10px rgba(0, 113, 227, 0.7);
}

    .pill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
        transform: translateX(-120%);
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: -1;
    }

    .pill:hover::after {
        transform: translateX(120%);
    }

/* Pulserend "live"-puntje */
.live-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4fd1c5;
    flex-shrink: 0;
}

    .live-dot::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid #4fd1c5;
        animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

@keyframes ping {
    from { transform: scale(0.5); opacity: 0.9; }
    to { transform: scale(1.8); opacity: 0; }
}

/* Scroll-voortgangsbalk bovenaan */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1040;
    background: linear-gradient(90deg, #2997ff, #4fd1c5);
    transform-origin: 0 50%;
    transform: scaleX(var(--sp, 0));
    pointer-events: none;
}

/* ---------- Codevenster: regels worden "getypt" ---------- */
.code .ln {
    display: block;
    font-variant-ligatures: none; /* >= niet als ≥ tonen */
    white-space: pre;
    min-height: 1.75em;
    overflow: hidden;
    width: 2.6em; /* regelnummer is altijd zichtbaar */
}

.code .gutter {
    display: inline-block;
    width: 2.6em;
    padding-right: 1.1em;
    text-align: right;
    color: #48484a;
    user-select: none;
}

.playing .code .ln {
    animation: typeLine calc(var(--n) * 13ms) steps(var(--n), end) var(--t) forwards;
}

@keyframes typeLine {
    from { width: 2.6em; }
    to { width: calc(var(--n) * 1ch + 2.6em + 2ch); } /* 2ch speling: lettertypes verschillen iets in breedte */
}

.code .c { color: #6e7781; font-style: italic; }
.code .k { color: #ff7ab2; }
.code .s { color: #4fd1c5; }
.code .f { color: #7cb7ff; }
.code .n { color: #ffb86b; }

.code .caret {
    display: inline-block;
    width: 0.6ch;
    height: 1.15em;
    margin-left: 3.7em;
    vertical-align: text-bottom;
    background: #4fd1c5;
    opacity: 0;
}

.playing .code .caret {
    animation: fadeInCaret 0.1s linear var(--t) forwards, blink 1s steps(1) calc(var(--t) + 0.1s) infinite;
}

@keyframes fadeInCaret { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }

.console .con-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    opacity: 0;
    transform: translateY(8px);
}

.playing .console .con-line {
    animation: conIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--t) forwards;
}

@keyframes conIn { to { opacity: 1; transform: none; } }

.console .tick { color: #28c840; font-weight: 700; }
.console .arrow { color: #48484a; }
.console .done { color: #4fd1c5; }
.console .idle { color: #86868b; margin-top: 1rem; }

/* ---------- Iconen in de tegels: kleine animaties ---------- */
.tile-icon svg { width: 26px; height: 26px; overflow: visible; }
.tile-icon .spark-a { transform-origin: 10px 9.5px; animation: twinkle 3.2s ease-in-out infinite; }
.tile-icon .spark-b { transform-origin: 18px 17px; animation: twinkle 3.2s ease-in-out 1.6s infinite; }
.tile-icon .br-l { animation: nudgeL 2.8s ease-in-out infinite; }
.tile-icon .br-r { animation: nudgeR 2.8s ease-in-out infinite; }
.tile-icon .layer-1 { animation: floatUp 3s ease-in-out infinite; }
.tile-icon .layer-3 { animation: floatDown 3s ease-in-out infinite; }
.tile-icon .link { stroke-dasharray: 20; animation: dash 3s linear infinite; }
.tile-icon .node { fill: currentColor; fill-opacity: 0.15; }

@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.75) rotate(25deg); } }
@keyframes nudgeL { 0%, 100% { transform: none; } 50% { transform: translateX(-1.5px); } }
@keyframes nudgeR { 0%, 100% { transform: none; } 50% { transform: translateX(1.5px); } }
@keyframes floatUp { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px); } }
@keyframes floatDown { 0%, 100% { transform: none; } 50% { transform: translateY(1.5px); } }
@keyframes dash { to { stroke-dashoffset: -40; } }

@media (prefers-reduced-motion: reduce) {
    [data-split] .sw { transform: none; transition: none; }
    .live-dot::after, .tile-icon *, .pill::after { animation: none !important; transition: none !important; }
    .code .ln { width: auto; animation: none !important; }
    .code .caret { display: none; }
    .console .con-line { opacity: 1; transform: none; animation: none !important; }
    .scroll-progress { display: none; }
}