/* Portfolio (/werk/). Donkere pagina; elke site is een scène die blijft staan terwijl je scrolt:
   het scherm kantelt in beeld, de site scrolt erin mee en de naam schuift er groot achterlangs.
   Alles in CSS: geen JavaScript, geen inline stijl (CSP). Zonder scroll-animaties: gewone, stilstaande scènes. */
body.werkpagina { background: var(--ink); color: var(--paper); }
.werkpagina a { color: inherit; }
.werkpagina .bar { max-width: none; position: relative; z-index: 2; }
.werkpagina .pill-dark { background: var(--paper); color: var(--ink); }
.werkpagina .pill-dark:hover { background: var(--oker); color: var(--ink); }
.werkpagina :focus-visible { outline-color: var(--oker); }
.werkpagina .legal, .werkpagina .legal a { color: #A8A8A8; }

.w-kop { min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) clamp(32px, 6vw, 72px); }
.w-kop h1 { max-width: none; font-size: clamp(64px, 21vw, 400px); line-height: .8; }
.w-kop h1 span { display: block; }
.w-kop .sub { max-width: 40ch; margin: 28px 0 0; font-size: clamp(17px, 1.6vw, 22px); color: #C9C9C9; }

.scene { --c: var(--oker); position: relative; }
.c-munster { --c: #3D9BEA; }
.c-gba { --c: #4FA39D; }
.c-typischtop { --c: #FFD000; }
.c-racket { --c: #F0692E; }
.stage { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 12svh var(--gutter) 22svh; overflow: hidden; background: radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%); }
.reuzen { position: absolute; left: 50%; top: 46%; margin: 0; translate: -50% -50%; font: 400 clamp(140px, 30vw, 560px)/.8 var(--display); white-space: nowrap; color: var(--c); user-select: none; }
.toestel { position: relative; z-index: 1; width: min(74vw, 96svh); aspect-ratio: 16 / 10; border: 1px solid rgba(255, 255, 255, .28); border-radius: clamp(12px, 1.6vw, 24px); background: var(--ink); overflow: hidden; box-shadow: 0 0 0 clamp(4px, .5vw, 8px) #111, 0 50px 140px -20px color-mix(in srgb, var(--c) 70%, transparent), 0 30px 60px -30px #000; }
.toestel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 6s ease-in-out; }
.scene:hover .toestel img { object-position: 50% 60%; }
.meta { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 5svh, 56px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.meta .nr { margin: 0 0 8px; font: 14px var(--mono); letter-spacing: .08em; color: var(--c); }
.meta h2 { margin: 0; font: 400 clamp(36px, 4.6vw, 76px)/.9 var(--display); }
.meta .wat { margin: 6px 0 0; color: #C9C9C9; }
.meta .live { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--c); color: var(--ink); font-weight: 600; text-decoration: none; }
.meta .live::after { content: '→'; transition: transform .2s ease-out; }
.meta .live:hover::after { transform: translateX(4px); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* De scène is 2,6 schermen hoog; het podium blijft daarbinnen staan. 28% tot 72% van de tijdlijn is het stuk waarin het vaststaat. */
    .scene { height: 260svh; view-timeline: --scene block; }
    .stage { position: sticky; top: 0; height: 100svh; }
    .toestel { animation: toestel linear both; animation-timeline: --scene; }
    .toestel img { transition: none; animation: schuif linear both; animation-timeline: --scene; }
    .scene:hover .toestel img { object-position: 50% 0; }
    .reuzen { animation: langs linear both; animation-timeline: --scene; }
    .meta { animation: meta linear both; animation-timeline: --scene; }
    .w-kop h1 { animation: weg linear both; animation-timeline: scroll(); animation-range: 0 90svh; transform-origin: left bottom; }
  }
}
@keyframes toestel {
  0% { opacity: 0; transform: perspective(1400px) translateY(22svh) rotateX(52deg) scale(.6); }
  28% { opacity: 1; transform: perspective(1400px) rotateX(0) scale(1); }
  72% { opacity: 1; transform: perspective(1400px) rotateX(0) scale(1); }
  100% { opacity: 0; transform: perspective(1400px) translateY(-12svh) rotateX(-24deg) scale(.82); }
}
@keyframes schuif { 0%, 34% { object-position: 50% 0; } 72%, 100% { object-position: 50% 64%; } }
@keyframes langs { from { translate: 20% -50%; } to { translate: -120% -50%; } }
@keyframes meta { 0%, 24% { opacity: 0; transform: translateY(32px); } 32%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes weg { to { opacity: .15; scale: .9; } }

.band { margin: clamp(48px, 10vw, 140px) 0 0; overflow: hidden; }
.band div { display: flex; width: max-content; animation: loop 40s linear infinite; }
.band p { flex: none; margin: 0; font: 400 clamp(56px, 10vw, 168px)/1 var(--display); white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.band span { padding: 0 .3em; color: var(--oker); -webkit-text-stroke: 0; }
@keyframes loop { to { transform: translateX(-50%); } }

.w-eind { padding: clamp(48px, 10vw, 140px) var(--gutter) clamp(64px, 10vw, 140px); }
.w-eind h2 { margin: 0 0 32px; font: 400 clamp(72px, 15vw, 280px)/.82 var(--display); }
.w-eind h2 span { color: var(--oker); }
.werkpagina .w-eind .pill-dark { display: inline-block; padding: 18px 32px; font-size: 19px; background: var(--oker); }

@media (max-width: 700px) {
  .toestel { width: 100%; aspect-ratio: 4 / 5; }
  .stage { padding-bottom: 30svh; }
}
@media (prefers-reduced-motion: reduce) {
  .band div { animation: none; width: auto; flex-wrap: wrap; }
  .band p[aria-hidden] { display: none; }
  .band p { white-space: normal; font-size: clamp(32px, 6vw, 72px); padding-inline: var(--gutter); }
  .toestel img { transition: none; }
}
.w-kop .status { margin-bottom: clamp(8px, 1.4vw, 24px); }