:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #17221e; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.experience { --split: 50%; position: relative; height: 100vh; height: 100svh; height: 100dvh; min-height: 240px; width: 100%; overflow: hidden; isolation: isolate; touch-action: none; user-select: none; cursor: ew-resize; background: #17221e; }
.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene--consultancy { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.scene img { display: block; position: absolute; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(var(--camera-scale, 1)); }
.photo-effect { position: absolute; width: min(100%, calc(100dvh * 1214 / 629)); aspect-ratio: 1214 / 629; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--camera-scale, 1)); pointer-events: none; }
.experience.is-opening .handle { box-shadow: 0 0 0 8px rgb(255 255 255 / .055), 0 3px 26px rgb(0 0 0 / .25); }
.brand-frame { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
.world-title { position: absolute; top: calc(50% - min(50dvh, 25.91cqw) * .6); transform: translateX(-50%); width: max-content; margin: 0; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: min(5.4cqw, 10.42dvh); font-weight: 400; letter-spacing: -.045em; line-height: .98; text-align: center; text-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.consultancy-title { left: calc(var(--split) / 2); opacity: var(--consultancy-title-opacity, 1); }
.fauna-title { left: calc((100% + var(--split)) / 2); opacity: var(--fauna-title-opacity, 1); }
.atmosphere { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) brightness(.48); transform: scale(1.06); }
.scene--consultancy .atmosphere { background-image: url('assets/consultancy-kolf-uitgelijnd.png'); }
.scene--fauna .atmosphere { background-image: url('assets/faunabeheer-arm-uitgelijnd.png'); }
.atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 15 14 / .48), transparent 45%, rgb(7 15 14 / .16)); }
.divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; background: rgb(255 255 255 / .68); box-shadow: 0 0 8px rgb(0 0 0 / .16); pointer-events: none; }
.handle { position: absolute; left: clamp(30px, var(--split), calc(100% - 30px)); top: 52%; width: 56px; height: 56px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .9); border-radius: 50%; background: rgb(20 29 26 / .46); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgb(0 0 0 / .22); cursor: ew-resize; outline: none; transition: background 160ms, box-shadow 160ms; touch-action: none; }
.handle svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.handle:hover, .experience.is-dragging .handle { background: rgb(20 29 26 / .75); }
.handle:focus-visible { outline: 3px solid #fff; outline-offset: 5px; box-shadow: 0 0 0 7px rgb(0 0 0 / .5); }
.guidance { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 11px 18px; border: 1px solid rgb(255 255 255 / .18); border-radius: 32px; background: rgb(13 22 19 / .68); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 14px; line-height: 1.4; letter-spacing: .02em; text-align: center; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.keyboard-hint { display: none; }
.handle:focus-visible ~ .guidance .pointer-hint { display: none; }
.handle:focus-visible ~ .guidance .keyboard-hint { display: inline; }
.load-error, .no-script { position: absolute; bottom: 85px; left: 16px; right: 16px; margin: auto; max-width: 480px; background: #17221e; padding: 16px; text-align: center; line-height: 1.5; }
@media (max-aspect-ratio: 3/4) { .handle { top: calc(50% + 25.91vw + 40px); } .guidance { bottom: max(40px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .handle { transition: none; } }
@media (prefers-reduced-motion: reduce) { .photo-effect { display: none; } }
@media (forced-colors: active) { .handle { border: 2px solid ButtonText; background: ButtonFace; } .divider { background: ButtonText; } }
.scene-controls { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; display: flex; gap: 8px; z-index: 3; cursor: default; }
.scene-controls button { min-height: 44px; border: 1px solid rgb(255 255 255 / .22); border-radius: 24px; padding: 10px 15px; background: rgb(13 22 19 / .68); color: #fff; font: 13px Arial, sans-serif; backdrop-filter: blur(12px); cursor: pointer; touch-action: manipulation; }
.scene-controls button:hover { background: rgb(13 22 19 / .9); }
.scene-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scene-controls button:disabled { opacity: .6; cursor: default; }
.guidance { transition: opacity 180ms, visibility 180ms; }
.experience.has-interacted .guidance { opacity: 0; visibility: hidden; }
#sound-toggle { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
#sound-toggle svg { pointer-events: none; }
#sound-toggle[aria-pressed="false"] .sound-waves, #sound-toggle[aria-pressed="true"] .sound-muted { display: none; }
@media (max-width: 600px), (max-width: 1100px) and (max-height: 600px) {
  .scene-controls { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  #sound-toggle { width: 32px; height: 32px; min-height: 32px; }
  #sound-toggle svg { width: 18px; height: 18px; }
  .handle { width: 32px; height: 32px; left: clamp(22px, var(--split), calc(100% - 22px)); }
  .handle svg { width: 22px; height: 18px; }
  .handle::after, #sound-toggle::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
  .experience.is-opening .handle { box-shadow: 0 0 0 4px rgb(255 255 255 / .055), 0 2px 16px rgb(0 0 0 / .2); }
}
@media (prefers-reduced-motion: reduce) { .guidance { transition: none; } }
.sound-credits { position: absolute; z-index: 4; bottom: max(7px, env(safe-area-inset-bottom)); left: 14px; max-width: min(360px, calc(100% - 28px)); color: #d0d5d2; font: 11px/1.5 Arial, sans-serif; cursor: default; touch-action: manipulation; }
.sound-credits summary { width: fit-content; padding: 12px 4px; cursor: pointer; list-style: none; text-shadow: 0 1px 4px #000; }
.sound-credits summary::-webkit-details-marker { display: none; }
.sound-credits summary::after { content: ' +'; }
.sound-credits[open] summary::after { content: ' −'; }
.sound-credits[open] { border-radius: 6px; background: rgb(13 22 19 / .94); padding: 0 8px 6px; }
.sound-credits-sources p { margin: 0 4px 6px; }
.sound-credits a { color: #d7eee1; text-underline-offset: 3px; }
.sound-credits a:hover { color: #fff; }
.sound-credits a:focus-visible, .sound-credits summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sound-credits-note { font-size: 10px; color: #b4c1b9; }