/* ==========================================================================
   romar.nathoe.nl — design system
   Layers: reset → tokens → base → layout → components → sections → motion
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, motion;

/* -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  input, button { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
}

/* -------------------------------------------------------------------------- */
@layer tokens {
  @property --mx { syntax: '<length>'; inherits: false; initial-value: -999px; }
  @property --my { syntax: '<length>'; inherits: false; initial-value: -999px; }

  :root {
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%,
                     1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%,
                     .975 57.1%, .997 69.8%, 1.003 76.9%, 1);

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    --container: 1240px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-gap: clamp(6rem, 14vw, 11rem);

    --accent: oklch(0.66 0.24 25);          /* signaalrood */
    --accent-ink: #fff;
    --accent-2: oklch(0.76 0.16 55);         /* warm oranje, loopt mooi in rood over */
  }

  [data-theme='dark'] {
    color-scheme: dark;
    --bg: #0a0a0b;
    --bg-elev: #111113;
    --surface: rgb(255 255 255 / .035);
    --surface-hover: rgb(255 255 255 / .06);
    --border: rgb(255 255 255 / .08);
    --border-strong: rgb(255 255 255 / .16);
    --fg: #ededec;
    --fg-muted: #8e8e93;
    --fg-faint: #55555a;
    --contour: 255 255 255;
    --shadow: 0 30px 80px -20px rgb(0 0 0 / .7);
    --grain-opacity: .06;
  }

  [data-theme='light'] {
    color-scheme: light;
    --bg: #f4f3ef;
    --bg-elev: #ffffff;
    --surface: rgb(0 0 0 / .025);
    --surface-hover: rgb(0 0 0 / .05);
    --border: rgb(0 0 0 / .08);
    --border-strong: rgb(0 0 0 / .18);
    --fg: #121214;
    --fg-muted: #66666c;
    --fg-faint: #a5a5aa;
    --contour: 0 0 0;
    --accent: oklch(0.56 0.22 25);
    --accent-ink: #fff;
    --shadow: 0 30px 60px -25px rgb(0 0 0 / .25);
    --grain-opacity: .035;
  }
}

/* -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    background: var(--bg);
  }

  body {
    font-family: var(--font-sans);
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    font-feature-settings: 'ss01', 'cv11';
  }

  ::selection { background: var(--accent); color: var(--accent-ink); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
  }

  h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
  p { text-wrap: pretty; }

  .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
  .mono { font-family: var(--font-mono); font-size: .8125em; letter-spacing: 0; }
  .muted { color: var(--fg-muted); }

  kbd {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1;
    padding: .25em .45em;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    color: var(--fg-muted);
    background: var(--surface);
  }

  .link {
    background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat;
    transition: background-size .5s var(--ease-out), color .2s;
    padding-bottom: 1px;
  }
  .link:hover { background-size: 100% 1px; color: var(--accent); }

  .skip {
    position: fixed; left: 1rem; top: 1rem; z-index: 999;
    padding: .6rem 1rem; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    translate: 0 -200%;
    transition: translate .3s var(--ease-out);
  }
  .skip:focus { translate: 0 0; }
}

/* -------------------------------------------------------------------------- */
@layer layout {
  .container {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }

  .section { padding-block: var(--section-gap) 0; }

  .section__head {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .section__head h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
  .section__index { color: var(--accent); }
  .section__meta { margin-left: auto; }
  @media (max-width: 600px) { .section__meta { display: none; } }
}

/* -------------------------------------------------------------------------- */
@layer components {
  /* ---- Scroll progress ---- */
  .progress {
    position: fixed; inset: 0 0 auto; height: 2px; z-index: 200;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transform-origin: 0 50%;
    scale: 0 1;
  }
  @supports (animation-timeline: scroll()) {
    .progress { animation: grow-x linear both; animation-timeline: scroll(root); }
  }
  @keyframes grow-x { to { scale: 1 1; } }

  /* ---- Film grain ---- */
  .grain {
    position: fixed; inset: 0; z-index: 150; pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (pointer: coarse) { .grain { display: none; } }

  /* ---- Nav ---- */
  .nav {
    position: fixed; z-index: 100;
    top: 1rem; left: 50%; translate: -50% 0;
    width: min(100% - 2rem, 1100px);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .5rem .5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in oklab, var(--bg) 70%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    transition: translate .5s var(--ease-out), background .3s, box-shadow .3s;
  }
  .nav[data-scrolled] { box-shadow: var(--shadow); }
  @media (pointer: coarse) {
    .nav {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: color-mix(in oklab, var(--bg) 94%, transparent);
    }
    .nav[data-scrolled] { box-shadow: 0 10px 30px -12px rgb(0 0 0 / .5); }
  }
  .nav[data-hidden] { translate: -50% calc(-100% - 2rem); }

  .nav__logo { display: flex; align-items: center; gap: .65rem; font-weight: 600; letter-spacing: -.02em; }
  .nav__mark {
    display: grid; place-items: center;
    width: 2rem; aspect-ratio: 1; border-radius: 50%;
    background: var(--fg); color: var(--bg);
    font-size: .72rem; font-weight: 700; letter-spacing: 0;
    transition: rotate .8s var(--spring), background .3s;
  }
  .nav__logo:hover .nav__mark { rotate: 360deg; background: var(--accent); color: var(--accent-ink); }

  .nav__links { display: flex; gap: .25rem; }
  .nav__links a {
    position: relative;
    display: block; padding: .45rem .85rem; border-radius: 999px;
    font-size: .875rem; color: var(--fg-muted);
    transition: color .2s;
  }
  .nav__links a:hover, .nav__links a[aria-current='true'] { color: var(--fg); }
  .nav__links a[aria-current='true']::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; background: var(--surface-hover);
  }

  .nav__actions { display: flex; align-items: center; gap: .4rem; }

  .kbd-btn, .icon-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 2.4rem; border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--fg-muted); font-size: .85rem;
    transition: border-color .2s, color .2s, background .2s;
  }
  .kbd-btn { padding: 0 .55rem 0 .8rem; }
  .icon-btn { width: 2.4rem; justify-content: center; }
  .kbd-btn:hover, .icon-btn:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface); }
  .kbd-btn svg, .icon-btn svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .kbd-btn kbd { font-size: .65rem; }

  [data-theme='dark'] .icon-moon, [data-theme='light'] .icon-sun { display: none; }

  @media (max-width: 860px) {
    .nav__links { display: none; }
    .kbd-btn__label, .kbd-btn kbd { display: none; }
    .kbd-btn { width: 2.4rem; padding: 0; justify-content: center; }
  }

  /* ---- Buttons ---- */
  .btn {
    --btn-bg: var(--surface);
    position: relative;
    display: inline-flex; align-items: center; gap: .6rem;
    height: 3.25rem; padding: 0 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--btn-bg);
    font-weight: 500; font-size: .95rem;
    transition: background .25s, border-color .25s, color .25s, translate .4s var(--ease-out);
    overflow: hidden;
    isolation: isolate;
  }
  .btn svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease-out); }
  .btn svg.fill { fill: currentColor; stroke: none; }
  .btn:hover svg:not(.fill) { translate: 3px 0; }
  .btn--primary { --btn-bg: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .btn--primary::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%);
    translate: -100% 0;
    transition: translate .8s var(--ease-out);
  }
  .btn--primary:hover::after { translate: 100% 0; }
  .btn--ghost:hover { background: var(--surface-hover); border-color: var(--fg-faint); }
  .btn--xl { height: 4rem; padding: 0 2rem; font-size: clamp(.95rem, 2vw, 1.15rem); }

  /* ---- Eyebrow + pulse ---- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .4rem .9rem .4rem .7rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface);
    font-size: .85rem; color: var(--fg-muted);
  }
  .pulse {
    position: relative; width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent);
  }
  .pulse::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit;
    animation: ping 2s var(--ease-out) infinite;
  }
  @keyframes ping { to { scale: 3.2; opacity: 0; } }

  /* ---- Spotlight hover (cursor-volgend licht) ---- */
  [data-spotlight] {
    position: relative;
    isolation: isolate;
  }
  [data-spotlight]::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my),
                color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%);
    opacity: 0; transition: opacity .4s;
  }
  [data-spotlight]::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
    background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent) 70%, transparent), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s;
  }
  [data-spotlight]:hover::before, [data-spotlight]:hover::after { opacity: 1; }

  /* ---- Badge ---- */
  .badge {
    display: inline-block; padding: .1rem .55rem; border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    color: var(--accent); font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  }

  /* ---- Command palette ---- */
  .palette {
    margin: 12vh auto auto;
    width: min(100% - 2rem, 600px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--bg-elev) 88%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: var(--fg);
    box-shadow: 0 40px 120px -20px rgb(0 0 0 / .6);
    overflow: hidden;
    opacity: 0; scale: .96; translate: 0 -8px;
    transition: opacity .25s var(--ease-out), scale .35s var(--ease-out), translate .35s var(--ease-out),
                overlay .3s allow-discrete, display .3s allow-discrete;
  }
  .palette[open] { opacity: 1; scale: 1; translate: 0 0; }
  @starting-style { .palette[open] { opacity: 0; scale: .96; translate: 0 -8px; } }
  .palette::backdrop {
    background: rgb(0 0 0 / 0);
    backdrop-filter: blur(0);
    transition: background .3s, backdrop-filter .3s, overlay .3s allow-discrete, display .3s allow-discrete;
  }
  .palette[open]::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(4px); }
  @starting-style { .palette[open]::backdrop { background: rgb(0 0 0 / 0); backdrop-filter: blur(0); } }

  .palette__search {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
  }
  .palette__search svg { width: 1.15rem; fill: none; stroke: var(--fg-muted); stroke-width: 2; stroke-linecap: round; flex: none; }
  .palette__search input { flex: 1; background: none; border: 0; outline: 0; font-size: 1.05rem; }
  .palette__search input::placeholder { color: var(--fg-faint); }

  .palette__list { max-height: min(420px, 55vh); overflow-y: auto; padding: .5rem; scroll-padding: .5rem; }
  .palette__group {
    padding: .75rem .75rem .35rem;
    font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--fg-faint);
  }
  .palette__item {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem .75rem; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--fg-muted);
  }
  .palette__item[aria-selected='true'] { background: var(--surface-hover); color: var(--fg); }
  .palette__item[aria-selected='true'] .palette__icon { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .palette__icon {
    display: grid; place-items: center; flex: none;
    width: 1.9rem; aspect-ratio: 1; border-radius: 8px;
    border: 1px solid var(--border); font-family: var(--font-mono); font-size: .75rem;
    transition: background .15s, color .15s;
  }
  .palette__hint { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--fg-faint); }
  .palette__empty { padding: 2rem; text-align: center; color: var(--fg-muted); }
  .palette__foot {
    display: flex; gap: 1.25rem; padding: .7rem 1.25rem;
    border-top: 1px solid var(--border); color: var(--fg-faint); font-size: .72rem;
  }
  .palette__foot kbd { margin-right: .2rem; }

  /* ---- Toast ---- */
  .toast {
    position: fixed; z-index: 300; left: 50%; bottom: 2rem;
    translate: -50% 150%; opacity: 0;
    padding: .75rem 1.25rem; border-radius: 999px;
    background: var(--fg); color: var(--bg); font-weight: 500; font-size: .9rem;
    box-shadow: var(--shadow);
    transition: translate .5s var(--spring), opacity .3s;
    pointer-events: none;
  }
  .toast[data-show] { translate: -50% 0; opacity: 1; }
}

/* -------------------------------------------------------------------------- */
@layer sections {
  /* ================= HERO ================= */
  .hero {
    position: relative;
    min-height: 100svh;
    display: grid; align-items: center;
    padding-block: 8rem 5rem;
    overflow: hidden;
  }
  .hero__canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 30%, transparent 80%);
  }
  .hero::after {
    content: ''; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none;
    background: linear-gradient(transparent, var(--bg));
  }
  .hero__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
  }
  .hero__title {
    margin-block: 1.75rem 1.5rem;
    font-size: clamp(4rem, 13vw, 11.5rem);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 700;
  }
  .hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
  .hero__title .line > span { display: inline-block; animation: rise 1.2s var(--ease-out) both; }
  .hero__title .line:nth-child(2) > span { animation-delay: .1s; }
  .hero__title em { color: var(--accent); }
  @keyframes rise { from { translate: 0 105%; } }

  .hero__lead {
    max-width: 32rem;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.4;
    color: var(--fg-muted);
    animation: fade-up 1s .35s var(--ease-out) both;
  }

  .rotator {
    display: inline-grid; vertical-align: bottom;
    height: 1.4em; overflow: hidden;
    color: var(--fg); font-weight: 500;
  }
  .rotator > span {
    grid-area: 1 / 1;
    translate: 0 110%; opacity: 0;
    transition: translate .7s var(--ease-out), opacity .5s;
    white-space: nowrap;
  }
  .rotator > span[data-active] { translate: 0 0; opacity: 1; }
  .rotator > span[data-leaving] { translate: 0 -110%; opacity: 0; }

  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; animation: fade-up 1s .5s var(--ease-out) both; }

  .hero__meta {
    display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 3.5rem;
    animation: fade-up 1s .65s var(--ease-out) both;
  }
  .hero__meta dt { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }
  .hero__meta dd { margin-top: .25rem; font-weight: 500; font-variant-numeric: tabular-nums; }

  .hero__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0b0b0c;
    box-shadow: var(--shadow);
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--ease-out);
    animation: photo-in 1.4s .2s var(--ease-out) both;
  }
  .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; scale: 1.04; }
  .hero__photo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .12), transparent 50%),
                linear-gradient(transparent 60%, rgb(0 0 0 / .65));
  }
  .hero__photo figcaption {
    position: absolute; inset: auto 1.25rem 1.1rem; z-index: 1;
    display: flex; justify-content: space-between; gap: 1rem;
    color: rgb(255 255 255 / .75);
  }
  @keyframes photo-in { from { clip-path: inset(100% 0 0 0 round var(--radius-lg)); scale: 1.08; } to { clip-path: inset(0 0 0 0 round var(--radius-lg)); } }
  @keyframes fade-up { from { opacity: 0; translate: 0 20px; } }

  .hero__scroll {
    position: absolute; z-index: 2; left: 50%; bottom: 2rem; translate: -50% 0;
    width: 1.6rem; height: 2.6rem; border: 1.5px solid var(--border-strong); border-radius: 999px;
  }
  .hero__scroll span {
    position: absolute; left: 50%; top: .5rem; width: 3px; height: .5rem; translate: -50% 0;
    border-radius: 3px; background: var(--fg);
    animation: scroll-dot 2s var(--ease-in-out) infinite;
  }
  @keyframes scroll-dot { 0% { opacity: 0; translate: -50% 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: -50% 1rem; } }

  @media (max-width: 860px) {
    .hero { padding-top: 7rem; }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__photo { order: -1; width: min(62%, 280px); aspect-ratio: 4 / 5; }
    .hero__title { margin-top: 1.25rem; }
    .hero__meta { margin-top: 2.5rem; }
    .hero__scroll { display: none; }
    .hero__photo figcaption { display: none; }
  }

  /* ================= MARQUEE ================= */
  .marquee {
    position: relative; z-index: 1;
    display: flex; overflow: hidden;
    padding-block: 1.5rem;
    border-block: 1px solid var(--border);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .marquee__track { display: flex; flex: none; animation: marquee 40s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee ul { display: flex; flex: none; }
  .marquee li {
    display: flex; align-items: center;
    padding-inline: 1.75rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.03em;
    color: var(--fg-faint);
    transition: color .3s;
  }
  .marquee li:hover { color: var(--fg); }
  .marquee li::after { content: '✦'; margin-left: 3.5rem; font-size: .5em; color: var(--accent); }
  @keyframes marquee { to { translate: -50% 0; } }

  /* ================= OVER ================= */
  .about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .about__photo {
    position: sticky; top: 7rem;
    aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    background: #0b0b0c;
  }
  .about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
  @supports (animation-timeline: view()) {
    .about__photo img { animation: parallax linear both; animation-timeline: view(); }
    @keyframes parallax { from { scale: 1.15; translate: 0 -4%; } to { scale: 1.15; translate: 0 4%; } }
  }
  .about__text { display: grid; gap: 1.5rem; font-size: 1.075rem; color: var(--fg-muted); }
  .about__text strong { color: var(--fg); }
  .lead {
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.2; letter-spacing: -.03em; font-weight: 500;
    color: var(--fg);
    text-wrap: balance;
  }
  .lead .serif { color: var(--accent); }

  .stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-top: 1.5rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
  }
  .stats li { padding: 1.25rem; display: grid; gap: .3rem; }
  .stats li + li { border-left: 1px solid var(--border); }
  .stats strong {
    font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .stats span { font-size: .82rem; }

  @media (max-width: 860px) {
    .about { grid-template-columns: 1fr; }
    .about__photo { position: relative; top: 0; max-width: 420px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats li:nth-child(3) { border-left: 0; }
    .stats li:nth-child(n+3) { border-top: 1px solid var(--border); }
  }

  /* ================= NU ================= */
  .now {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background:
      radial-gradient(700px circle at 0% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
      var(--surface);
  }
  @media (max-width: 960px) { .now { grid-template-columns: 1fr; } }

  .now__goal { display: flex; flex-direction: column; gap: 1.25rem; }
  .now__event { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--fg-muted); }
  .now__tag { color: var(--accent); }
  @media (max-width: 560px) {
    .now__event { display: block; }
    .now__event .pulse { display: inline-block; margin-right: .5rem; vertical-align: .05em; }
  }
  .now__title {
    font-size: clamp(3.25rem, 8vw, 6.5rem); font-weight: 700; letter-spacing: -.06em; line-height: .9;
  }
  .now__time {
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* Door de negatieve letter-spacing steekt de laatste 0 buiten het vak waarin de gradient getekend wordt:
       ruimte rechts erbij, en met een negatieve marge weer weg zodat de opmaak niet verschuift */
    padding-right: .08em; margin-right: -.08em;
  }
  .now__text { color: var(--fg-muted); max-width: 46ch; }
  .now__next {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
    max-width: 52ch; padding: .85rem 1rem;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
    color: var(--fg-muted); font-size: .95rem;
  }
  .now__next .mono { color: var(--accent-2); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
  .now__next .link { color: var(--fg); font-size: .85rem; }

  .countdown {
    display: flex; align-items: stretch; gap: clamp(.35rem, 1.2vw, .75rem);
    margin-top: .25rem;
  }
  .countdown__unit {
    position: relative;
    flex: 1 1 0; min-width: 0; max-width: 8.5rem;
    display: grid; justify-items: center; gap: .35rem;
    padding: clamp(.75rem, 2vw, 1.1rem) .5rem clamp(.6rem, 1.6vw, .85rem);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: linear-gradient(var(--bg) 50%, color-mix(in oklab, var(--bg) 85%, var(--fg))) ;
    overflow: hidden;
  }
  /* "flip-klok" naad in het midden */
  .countdown__unit::after {
    content: ''; position: absolute; inset: 50% 0 auto; height: 1px;
    background: color-mix(in oklab, var(--border-strong) 60%, transparent);
  }
  .countdown__value {
    display: flex; justify-content: center;
    font-size: clamp(1.9rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
    clip-path: inset(0);
  }
  .countdown__digit { display: inline-block; min-width: .6em; text-align: center; }
  .countdown__unit:last-child .countdown__value { color: var(--accent); }
  .countdown__label { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); }
  .countdown__sep {
    align-self: center; margin-top: -1.2rem;
    font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 600; color: var(--fg-faint);
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: .25; } }
  .countdown__note { font-size: .75rem; margin-top: -.5rem; }
  .countdown[data-finished] .countdown__value { color: var(--accent); }
  .countdown[data-finished] .countdown__sep { animation: none; }
  @media (max-width: 420px) { .countdown__sep { display: none; } }
  .now__facts {
    display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(1.25rem, 4vw, 2.5rem);
    margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border);
  }
  .now__facts dt { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }
  .now__facts dd { margin-top: .2rem; font-weight: 600; font-variant-numeric: tabular-nums; }

  .pace {
    display: grid; gap: .6rem; align-content: start;
    padding: 1.5rem; border-radius: var(--radius);
    background: var(--bg); border: 1px solid var(--border);
  }
  .pace__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; white-space: nowrap; }
  @media (max-width: 560px) {
    .now { padding: 1.25rem; }
    .pace { padding: 1.1rem; }
    .pace__splits li { padding: .65rem; }
  }
  .pace__status {
    padding: .2rem .6rem; border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent);
    transition: background .3s, color .3s;
  }
  .pace[data-over-goal] .pace__status { background: var(--surface-hover); color: var(--fg-muted); }
  .pace__label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }
  .pace__finish {
    font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .pace__range {
    --fill: 40%;
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 2.25rem; margin-top: .5rem;
    background: transparent; cursor: pointer;
    touch-action: pan-y;
  }
  .pace__range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) var(--fill), var(--border-strong) var(--fill));
  }
  .pace__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-strong); }
  .pace__range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
  .pace__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: var(--fg); border: 4px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border-strong), 0 4px 12px rgb(0 0 0 / .4);
    transition: scale .3s var(--spring);
  }
  .pace__range::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--fg); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--border-strong);
  }
  .pace__range:active::-webkit-slider-thumb { scale: 1.2; }
  .pace__range:focus-visible { outline: none; }
  .pace__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }

  /* 3:00 ligt op 40% van de schaal (2:30 – 3:45) */
  .pace__scale { position: relative; height: 1rem; font-size: .7rem; }
  .pace__scale span { position: absolute; top: 0; }
  .pace__scale span:nth-child(1) { left: 0; }
  .pace__scale span:nth-child(2) { left: 40%; translate: -50% 0; color: var(--accent); }
  .pace__scale span:nth-child(3) { right: 0; }

  .pace__splits {
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin-top: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  }
  .pace__splits li { display: grid; gap: .15rem; padding: .75rem .85rem; }
  .pace__splits li + li { border-left: 1px solid var(--border); }
  .pace__splits span { font-size: .75rem; }
  .pace__splits b { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .pace__hint { font-size: .8rem; margin-top: .25rem; }

  /* ================= WERK ================= */
  .work-intro {
    display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end;
    margin-bottom: 3rem;
  }
  .work-intro .lead { max-width: 46rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
  .work-intro .lead strong { font-weight: 600; }
  .role { display: grid; gap: .25rem; justify-items: end; text-align: right; }
  .role__title { font-weight: 600; font-size: 1.1rem; }
  @media (max-width: 860px) { .work-intro { grid-template-columns: 1fr; } .role { justify-items: start; text-align: left; } }

  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 960px) { .cards { grid-template-columns: 1fr; } }

  .card {
    display: grid; gap: .65rem; align-content: start;
    padding: 1.5rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
    transition: translate .5s var(--ease-out), border-color .3s;
  }
  .card:hover { translate: 0 -4px; border-color: var(--border-strong); }
  .card h3 { font-size: 1.5rem; }
  .card p { color: var(--fg-muted); }
  .card__tag { color: var(--accent); margin-top: .75rem; }

  .card__visual {
    height: 150px; border-radius: var(--radius);
    background: var(--bg); border: 1px solid var(--border);
    overflow: hidden; position: relative;
  }
  .card__visual--bars { display: flex; align-items: end; gap: 8%; padding: 1.25rem 1.5rem 0; }
  .card__visual--bars span {
    flex: 1; height: calc(var(--h) * 100%);
    border-radius: 6px 6px 0 0;
    background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 15%, transparent));
    transform-origin: bottom; scale: 1 .25;
    transition: scale .9s var(--spring);
  }
  .card__visual--bars span:nth-child(odd) { background: linear-gradient(var(--accent-2), color-mix(in oklab, var(--accent-2) 10%, transparent)); }
  .card:hover .card__visual--bars span, .card[data-visible] .card__visual--bars span { scale: 1 1; }
  .card__visual--bars span:nth-child(2) { transition-delay: .04s; } .card__visual--bars span:nth-child(3) { transition-delay: .08s; }
  .card__visual--bars span:nth-child(4) { transition-delay: .12s; } .card__visual--bars span:nth-child(5) { transition-delay: .16s; }
  .card__visual--bars span:nth-child(6) { transition-delay: .2s; } .card__visual--bars span:nth-child(7) { transition-delay: .24s; }

  .card__visual--map {
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: var(--bg);
  }
  .card__visual--map svg { width: 100%; height: 100%; }
  .card__visual--map path {
    fill: none; stroke: var(--accent-2); stroke-width: 1.5;
    stroke-dasharray: 400; stroke-dashoffset: 400;
    transition: stroke-dashoffset 2s var(--ease-out);
  }
  .card__visual--map path:nth-child(2) { stroke: var(--accent); transition-delay: .15s; }
  .card__visual--map path:nth-child(3) { stroke: var(--fg-faint); transition-delay: .3s; }
  .card__visual--map circle { fill: var(--accent); scale: 0; transform-box: fill-box; transform-origin: center; transition: scale .6s var(--spring) 1s; }
  .card[data-visible] .card__visual--map path { stroke-dashoffset: 0; }
  .card[data-visible] .card__visual--map circle { scale: 1; }

  .card__visual--chat { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: 1rem 1.25rem; }
  .bubble { display: block; height: 1.6rem; border-radius: 1rem; }
  .bubble--in { width: 62%; background: var(--surface-hover); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
  .bubble--out { width: 48%; align-self: end; background: var(--accent); border-bottom-right-radius: 4px; opacity: .9; }
  .bubble--typing { width: 4rem; display: flex; align-items: center; justify-content: center; gap: .25rem; }
  .bubble--typing i { width: 5px; aspect-ratio: 1; border-radius: 50%; background: var(--fg-muted); animation: typing 1.2s infinite; }
  .bubble--typing i:nth-child(2) { animation-delay: .15s; } .bubble--typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes typing { 0%, 60%, 100% { translate: 0 0; opacity: .4; } 30% { translate: 0 -4px; opacity: 1; } }

  .timeline {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-top: 3rem; padding-top: 2rem;
    counter-reset: step;
  }
  .timeline::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transform-origin: left; scale: var(--line, 1) 1;
  }
  /* Eén label over de hele lijn: drie lagen tegelijk, geen volgorde */
  .timeline::after {
    content: 'full-stack · alles tegelijk';
    position: absolute; top: 0; left: 50%; translate: -50% -50%;
    padding: .2rem .7rem; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--bg);
    font-family: var(--font-mono); font-size: .7rem; color: var(--fg-muted); white-space: nowrap;
  }
  .timeline li { position: relative; display: grid; gap: .2rem; }
  .timeline li::before {
    content: ''; position: absolute; top: calc(-2rem - 5px); left: 0;
    width: 11px; aspect-ratio: 1; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 20%, transparent);
  }
  .timeline span { color: var(--fg-faint); }
  .timeline strong { font-size: 1.15rem; }
  .timeline p { color: var(--fg-muted); font-size: .95rem; }

  /* ================= PROJECTEN ================= */
  .project {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color .3s;
  }
  .project:hover { border-color: var(--border-strong); }
  .project + .project { margin-top: 1rem; }
  /* Tweede project: beeld rechts, zodat de twee kaarten niet identiek ogen */
  @media (min-width: 961px) {
    .project + .project { grid-template-columns: 1fr 1.15fr; }
    .project + .project .project__visual { order: 2; }
    .project + .project .project__body { padding: 0 0 0 clamp(0rem, 2vw, 1.5rem); }
  }
  .project__logo--run {
    display: grid; place-items: center; padding: 0;
    background: oklch(0.22 0.06 260); border-color: oklch(0.55 0.2 260 / .4);
    color: oklch(0.78 0.12 215); font-size: .8rem; font-weight: 500;
  }
  /* Specifieker dan .project__brand h3 (Clueuntry-goud), ook in het lichte thema */
  .project .project__brand h3.project__name--run {
    font-family: var(--font-sans); font-weight: 600; font-size: 2rem; letter-spacing: -.04em; line-height: 1;
    color: var(--fg);
  }
  .project .project__brand h3.project__name--run span { color: oklch(0.72 0.15 240); font-weight: 400; }
  [data-theme='light'] .project .project__brand h3.project__name--run span { color: oklch(0.52 0.2 260); }
  .project__visual {
    display: block; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: #0b1220;
  }
  .project__visual img {
    width: 100%; height: auto; aspect-ratio: 1200 / 760; object-fit: cover;
    transition: scale .9s var(--ease-out);
  }
  .project:hover .project__visual img { scale: 1.03; }
  .project__body { display: grid; gap: 1rem; padding-right: clamp(0rem, 2vw, 1.5rem); }
  .project__brand { display: flex; align-items: center; gap: .9rem; }
  .project__logo {
    width: 48px; height: 48px; padding: 8px;
    border-radius: 14px; background: #10182a; border: 1px solid rgb(214 174 92 / .3);
  }
  .project__brand h3 { font-family: var(--font-serif); font-weight: 400; font-size: 2.25rem; line-height: 1; color: #c9a14e; }
  .project__brand h3 span { color: #e3bf6c; }
  [data-theme='light'] .project__brand h3 { color: #8a6620; }
  [data-theme='light'] .project__brand h3 span { color: #5c4410; }
  .project__brand .mono { font-size: .8rem; }
  .project__body > p { color: var(--fg-muted); }
  .project__tags { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .75rem; }
  .project__tags li {
    padding: .25rem .65rem; border-radius: 999px;
    border: 1px solid var(--border-strong); color: var(--fg-muted);
  }
  .project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: .25rem; }
  @media (max-width: 960px) {
    .project { grid-template-columns: 1fr; }
    .project__body { padding: 0 .25rem .5rem; }
  }
  @media (max-width: 700px) {
    .timeline { grid-template-columns: 1fr; gap: 1.75rem; padding: 0 0 0 1.75rem; margin-top: 3.5rem; }
    .timeline::before { top: 0; bottom: 0; right: auto; width: 1px; height: auto; background: linear-gradient(var(--accent-2), var(--accent)); }
    .timeline::after { left: 0; translate: 0 calc(-100% - .75rem); }
    .timeline li::before { top: .35rem; left: calc(-1.75rem - 5px); }
  }

  /* ================= STACK ================= */
  .stack-filter {
    display: inline-flex; gap: .25rem; padding: .3rem; margin-bottom: 1.5rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    flex-wrap: wrap;
  }
  .stack-filter button {
    padding: .5rem 1rem; border-radius: 999px; font-size: .875rem; color: var(--fg-muted);
    transition: color .2s, background .2s;
  }
  .stack-filter button:hover { color: var(--fg); }
  .stack-filter button[aria-selected='true'] { background: var(--fg); color: var(--bg); }

  .stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
  .stack-grid li {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
    font-weight: 500;
    transition: opacity .4s var(--ease-out), scale .4s var(--ease-out), filter .4s, border-color .3s;
  }
  .stack-grid li .mono {
    display: grid; place-items: center; flex: none;
    width: 2.5rem; aspect-ratio: 1; border-radius: 10px;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--accent); font-weight: 500;
  }
  .stack-grid li[data-dim] { opacity: .18; scale: .97; filter: grayscale(1); }

  /* ================= CV ================= */
  .cv { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (max-width: 960px) { .cv { grid-template-columns: 1fr; } }
  .cv__list li {
    display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem;
    padding-block: 1.75rem; border-bottom: 1px solid var(--border);
  }
  .cv__list li:first-child { padding-top: 0; }
  .cv__list h3 { font-size: 1.35rem; letter-spacing: -.025em; margin-bottom: .35rem; }
  .cv__list p + p { margin-top: .5rem; }
  @media (max-width: 600px) { .cv__list li { grid-template-columns: 1fr; gap: .4rem; } }

  .certs { display: grid; gap: 1rem; position: sticky; top: 7rem; }
  .cert {
    display: grid; gap: .35rem;
    padding: 1.5rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--surface);
    transition: translate .5s var(--ease-out), border-color .3s;
  }
  .cert:hover { translate: 0 -3px; border-color: var(--border-strong); }
  .cert strong { font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.3; }
  .cert__issuer { color: var(--accent); }
  .cert__link { margin-top: .75rem; color: var(--fg-muted); transition: color .2s; }
  .cert:hover .cert__link { color: var(--fg); }

  /* ================= BUITEN WERK (bento) ================= */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(190px, auto);
    gap: 1rem;
  }
  .tile {
    display: flex; flex-direction: column; gap: .6rem;
    padding: 1.5rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .3s, translate .5s var(--ease-out);
  }
  .tile:hover { border-color: var(--border-strong); }
  .tile h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .tile p { color: var(--fg-muted); margin-top: auto; max-width: 34ch; }
  .tile__label { color: var(--accent); }
  .tile__more { align-self: start; margin-top: .25rem; color: var(--fg); }
  .tile p + .tile__more { margin-top: .5rem; }

  .tile--tri    { grid-column: span 4; grid-row: span 2; }
  .tile--run    { grid-column: span 2; grid-row: span 2; }
  .tile--bike   { grid-column: span 2; }
  .tile--guitar { grid-column: span 2; }
  .tile--photo  { grid-column: span 2; grid-row: span 2; }
  .tile--sim    { grid-column: span 2; }
  .tile--moto   { grid-column: span 2; }
  .tile--ski    { grid-column: span 3; }
  .tile--diy    { grid-column: span 3; }

  @media (max-width: 960px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento .tile { grid-column: span 1; grid-row: auto; }
    .bento .tile--tri { grid-column: span 2; }
  }
  @media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .bento .tile, .bento .tile--tri { grid-column: auto; }
  }

  /* triatlon */
  .tile--tri p { margin-top: 0; }
  .tri { display: flex; gap: .5rem; margin-top: auto; padding-top: 2rem; }
  .tri__seg {
    flex: var(--w) 1 0; min-width: 4.5rem;
    display: grid; gap: .3rem; align-content: end;
    padding: .9rem; height: 8.5rem; border-radius: var(--radius);
    background: var(--bg); border: 1px solid var(--border);
    position: relative; overflow: hidden;
  }
  .tri__seg::before {
    content: ''; position: absolute; inset: auto 0 0; height: 100%;
    background: linear-gradient(transparent, color-mix(in oklab, var(--accent) 22%, transparent));
    transform-origin: bottom; scale: 1 0;
    transition: scale 1.2s var(--ease-out);
  }
  .tri__seg:nth-child(1)::before { background: linear-gradient(transparent, color-mix(in oklab, var(--accent-2) 30%, transparent)); }
  .tri__seg:nth-child(2)::before { transition-delay: .2s; }
  .tri__seg:nth-child(3)::before { transition-delay: .4s; }
  .tile[data-visible] .tri__seg::before { scale: 1 1; }
  .tri__seg span { position: relative; font-size: .8rem; color: var(--fg-muted); }
  .tri__seg b { position: relative; font-size: 1.35rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) {
    .tri { gap: .35rem; }
    .tri__seg { flex: 1 1 0; min-width: 0; padding: .7rem; }
    .tri__seg span { font-size: .7rem; }
    .tri__seg b { font-size: 1.05rem; }
  }

  /* hardlopen */
  .big-num { display: grid; margin-block: auto; }
  .big-num span {
    font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 700; letter-spacing: -.06em; line-height: .9;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--fg) 30%, var(--fg-faint));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .big-num small { font-family: var(--font-mono); font-size: .75rem; color: var(--fg-faint); }

  /* fiets */
  .bike { width: 120px; margin-block: .25rem; fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .bike circle { stroke: var(--fg-faint); stroke-dasharray: 6 4; transform-box: fill-box; transform-origin: center; animation: spin 4s linear infinite paused; }
  .tile--bike:hover .bike circle { animation-play-state: running; }
  @keyframes spin { to { rotate: 360deg; } }

  /* gitaar */
  .wave { display: flex; align-items: center; gap: 4px; height: 48px; }
  .wave i {
    flex: 1; height: 100%; border-radius: 2px; background: var(--accent);
    transform-origin: center; scale: 1 .15;
    animation: wave 1.1s var(--ease-in-out) infinite alternate paused;
  }
  .tile--guitar:hover .wave i, .tile--guitar[data-visible] .wave i { animation-play-state: running; }
  .wave i:nth-child(3n)   { animation-duration: .8s; }
  .wave i:nth-child(3n+1) { animation-duration: 1.3s; animation-delay: -.4s; }
  .wave i:nth-child(4n)   { animation-duration: .6s; animation-delay: -.2s; background: var(--accent-2); }
  .wave i:nth-child(5n)   { animation-duration: 1.5s; animation-delay: -.7s; }
  @keyframes wave { to { scale: 1 1; } }

  /* fotografie */
  .viewfinder {
    position: relative; flex: 1; min-height: 160px; margin-block: .5rem;
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 70% 35%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 40%),
      radial-gradient(circle at 25% 80%, color-mix(in oklab, var(--accent-2) 35%, transparent), transparent 45%),
      var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .vf-corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--fg); }
  .vf-corner:nth-child(1) { top: 12px; left: 12px; border-width: 2px 0 0 2px; }
  .vf-corner:nth-child(2) { top: 12px; right: 12px; border-width: 2px 2px 0 0; }
  .vf-corner:nth-child(3) { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; }
  .vf-corner:nth-child(4) { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }
  .vf-focus {
    position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); translate: -50% -50%;
    width: 38px; aspect-ratio: 1; border: 1.5px solid var(--accent); border-radius: 4px;
    transition: left .5s var(--ease-out), top .5s var(--ease-out), scale .3s;
  }
  .tile--photo:hover .vf-focus { scale: .75; }
  .vf-info { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; color: var(--fg-muted); font-size: .7rem; white-space: nowrap; }

  /* simracen */
  .lap {
    display: flex; align-items: baseline; gap: .75rem; margin-block: auto .25rem;
  }
  .lap span { color: var(--fg-faint); font-size: .75rem; }
  .lap b { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
  .lap b[data-best] { color: #c58cff; }

  .tile--moto, .tile--ski, .tile--diy { min-height: 190px; }

  /* ================= CONTACT ================= */
  .contact { text-align: center; display: grid; justify-items: center; padding-bottom: var(--section-gap); }
  .contact__title {
    margin-block: 2rem 1.5rem;
    font-size: clamp(3.5rem, 12vw, 10rem);
    letter-spacing: -.065em; line-height: .9; font-weight: 700;
  }
  .contact__title em { color: var(--accent); }
  .contact__lead { max-width: 34rem; color: var(--fg-muted); font-size: 1.15rem; }
  .contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.75rem; }
  .contact__mail { margin-top: 1.5rem; color: var(--fg-muted); font-size: .9rem; }

  /* ================= FOOTER ================= */
  .footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
    padding-block: 2rem 2.5rem;
    border-top: 1px solid var(--border);
    font-size: .875rem; color: var(--fg-muted);
  }
  .footer kbd { font-size: .65rem; }
}

/* -------------------------------------------------------------------------- */
@layer motion {
  /* Reveal on scroll: CSS scroll-driven waar mogelijk, anders IntersectionObserver (JS) */
  .reveal { opacity: 0; translate: 0 32px; transition: opacity 1s var(--ease-out), translate 1s var(--ease-out); }
  .reveal[data-visible] { opacity: 1; translate: 0 0; }

  /* View Transitions: cirkel-reveal bij themawissel */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; translate: none; }
    .grain { display: none; }
  }
}