/* Lusion-inspired timing, original SWOO content. Motion enhances semantic HTML. */
:root{--dm-ease:cubic-bezier(.22,1,.24,1)}
.dm-scroll-line{display:block;transform:translate3d(var(--type-x,0px),var(--type-y,0px),0);will-change:transform}
.mirage-definitions{position:fixed;width:0;height:0;pointer-events:none;overflow:hidden}
.mirage-active{filter:url(#swoo-image-refraction)}
.mirage-lens{position:fixed;top:0;left:0;width:190px;height:150px;pointer-events:none;z-index:55;opacity:0;contain:layout paint;backdrop-filter:url(#swoo-cursor-refraction) blur(.2px);-webkit-backdrop-filter:url(#swoo-cursor-refraction) blur(.2px);mask-image:radial-gradient(ellipse,black 15%,transparent 68%);background:radial-gradient(ellipse at 32% 45%,#0016ec0b,transparent 58%),radial-gradient(ellipse at 70% 60%,#c7332612,transparent 55%);border-radius:50%}
.detail-motion-still .dm-scroll-line{transform:none!important;will-change:auto}
.detail-motion-still .mirage-lens{display:none}
@media(prefers-reduced-motion:reduce){.dm-scroll-line{transform:none!important;will-change:auto}.mirage-lens{display:none}.mirage-active{filter:none}}
@media(hover:none),(pointer:coarse),(max-width:799px){.mirage-lens{display:none}.mirage-active{filter:none}}
.home .reel-frame{background:#0016ec;will-change:width,height,left,top,clip-path;box-shadow:none}
.home .reel-heading{opacity:var(--reel-heading-opacity,1);pointer-events:none}
.home .reel-frame video{object-fit:contain;background:transparent}
.home .reel-frame[data-expanded=true] video{object-fit:contain}
.home .reel-frame[data-expanded=true][data-playback] .play-reel{inset:auto 16px 14px auto;transform:none}
.home .reel-frame[data-expanded=true] .reel-badge{bottom:18px}
@media(max-width:600px){.home .reel-frame[data-expanded=true][data-playback] .play-reel{bottom:10px;right:10px}.home .reel-frame[data-expanded=true] .reel-badge{display:none}}
.home .reel-frame .play-reel{font-size:clamp(18px,2.8vw,42px);gap:15px;padding:16px 22px;transition:left .6s,top .6s,bottom .6s,font-size .6s,background .3s}
.home .reel-frame .play-reel i{width:38px;height:38px;font-size:12px}
.home .reel-frame[data-playback=playing] .play-reel{inset:auto 20px 20px auto;transform:none;padding:10px 16px;gap:12px;font-size:12px}
.home .reel-frame[data-playback=playing] .play-reel>span{display:none}
.home .reel-frame[data-playback=playing] .play-reel:before{content:'Bekijk met geluid';font-size:12px}
.home .reel-frame[data-playback=playing] .play-reel i{width:24px;height:24px;font-size:9px}
@media(max-width:600px){.home .reel-frame .play-reel{gap:8px;padding:10px 12px}.home .reel-frame .play-reel i{width:26px;height:26px}.home .reel-frame[data-playback=playing] .play-reel{right:10px;bottom:10px}}
.dm-word{display:inline-block;overflow:clip;vertical-align:top;padding:0 .06em .12em;margin:0 -.06em -.12em;perspective:600px}
.dm-word-inner{display:inline-block;transform-origin:0 100%;transition:transform 1.12s var(--dm-ease),opacity .6s;transition-delay:calc(min(var(--dm-order),12)*38ms)}
.detail-motion-ready .dm-heading:not(.dm-entered) .dm-word-inner{transform:translate3d(0,112%,0) rotateZ(9deg) rotateX(-22deg);opacity:.1}
.dm-heading.dm-entered .dm-word-inner{transform:none;opacity:1}
.dm-block{transition:transform .95s var(--dm-ease),opacity .7s}
.detail-motion-ready .dm-block:not(.dm-entered){transform:translateY(26px);opacity:0}
.dm-read-word{color:color-mix(in srgb,currentColor calc(var(--word-ink,1)*100%),#626775);transition:color .14s linear}
.dm-roll-word{display:inline;white-space:nowrap}
.dm-glyph{display:inline-block;position:relative;overflow:clip;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.dm-glyph>span,.dm-glyph:after{display:inline-block;transition:transform .64s var(--dm-ease);transition-delay:calc(min(var(--glyph-order),20)*12ms)}
.dm-glyph:after{content:attr(data-glyph);position:absolute;inset:.08em 0 auto;transform:translateY(125%) rotate(8deg);color:#0016ec}
.play-reel .dm-glyph:after{color:inherit}
.detail-motion-ready .dm-card{--dm-x:0;--dm-y:0;--dm-drift:0px;transform:translateZ(0);transition:opacity .75s,translate 1.1s var(--dm-ease),border-color .3s,box-shadow .5s;transition-delay:var(--dm-card-delay,0ms)}
.detail-motion-ready .dm-card:not(.dm-entered){translate:0 65px;opacity:0}
.dm-visual{isolation:isolate;transform-origin:50% 50%;transition:clip-path 1.25s var(--dm-ease),rotate .8s var(--dm-ease);clip-path:inset(0 round 18px)}
.detail-motion-ready .dm-card:not(.dm-entered) .dm-visual{clip-path:inset(12% 8% 12% 8% round 40px)}
.dm-image-light{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at calc(50% + var(--dm-x)*40%) calc(50% + var(--dm-y)*40%),#fff7,transparent 60%);mix-blend-mode:soft-light;transition:opacity .5s}
.detail-motion-ready .module-object-visual img{transform:translate3d(calc(var(--dm-x)*10px),calc(var(--dm-y)*8px + var(--dm-drift)),0) scale(.98) rotate(calc(var(--dm-x)*-3deg));transition:transform .85s var(--dm-ease);}
.detail-motion-ready .dm-pointed .module-object-visual img{transform:translate3d(calc(var(--dm-x)*14px),calc(var(--dm-y)*11px + var(--dm-drift)),0) scale(1.08) rotate(calc(var(--dm-x)*-3deg));transition:transform .12s linear}
.detail-motion-ready .dm-card:focus-within{opacity:1;translate:none}
.detail-motion-ready .cursor-label{display:none}
.dm-scroll-progress{position:fixed;z-index:70;left:0;top:0;width:100%;height:2px;background:#0016ec;transform:scaleX(0);transform-origin:left;pointer-events:none}
.detail-motion-ready .menu-link{transition:transform .85s var(--dm-ease),opacity .5s,color .25s;transition-delay:calc(var(--menu-order,0)*55ms)}
.detail-motion-ready .menu:not(.open) .menu-link{transform:translateY(38px) rotate(2deg);opacity:0}
.detail-motion-ready .menu.open .menu-link{transform:none;opacity:1}
.detail-motion-ready .menu-link small{transition:translate .5s var(--dm-ease)}
.detail-motion-ready .menu-link:is(:hover,:focus-visible) small{translate:-12px 0}
.detail-motion-ready .module-object-arrow,.detail-motion-ready .card-arrow{transition:transform .5s var(--dm-ease),background .25s,color .25s}
.detail-motion-ready .module-object:focus-visible,.detail-motion-ready .work-card:focus-visible{outline:3px solid #0016ec;outline-offset:6px}
.detail-motion-ready .pill:focus-visible,.detail-motion-ready .menu-link:focus-visible{outline:3px solid #0016ec;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
 .detail-motion-ready .module-object:hover{transform:none;box-shadow:0 18px 55px #0016ec12;border-color:#a6afe4}
 .detail-motion-ready .dm-pointed .dm-image-light{opacity:.8}
 .detail-motion-ready .dm-pointed .art{rotate:calc(var(--dm-x)*.7deg)}
 .detail-motion-ready :is(.module-object,.work-card,.play-reel):is(:hover,:focus-visible) .dm-glyph>span{transform:translateY(-125%) rotate(-8deg)}
 .detail-motion-ready :is(.module-object,.work-card,.play-reel):is(:hover,:focus-visible) .dm-glyph:after{transform:translateY(0) rotate(0)}
 .detail-motion-ready :is(.module-object,.work-card):hover :is(.module-object-arrow,.card-arrow){transform:rotate(45deg)}
}
@media(min-width:1001px){
 .detail-motion-ready .module-gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}
 .detail-motion-ready .module-object-visual{aspect-ratio:1.08}
 .detail-motion-ready .module-object-copy{padding:21px 20px 26px}
 .detail-motion-ready .module-object h3{font-size:clamp(22px,1.65vw,29px);font-weight:500}
 .detail-motion-ready .module-object p{font-size:13px;line-height:1.55}
 .detail-motion-ready .module-object-group{font-size:10px}
 .detail-motion-ready .module-compose{grid-column:span 2;min-height:300px;padding:34px}
 .detail-motion-ready .module-compose h3{font-size:clamp(42px,4vw,66px)}
}
@media(max-width:600px){
 .dm-word-inner{transition-duration:.85s;transition-delay:calc(min(var(--dm-order),10)*28ms)}
 .detail-motion-ready .dm-card:not(.dm-entered){translate:0 32px}
 .dm-visual{clip-path:inset(0 round 12px)}
 .detail-motion-ready .module-object h3{font-size:clamp(16px,4.5vw,20px)}
 .dm-block{transition-duration:.7s}
}
.detail-motion-still .dm-word-inner,.detail-motion-still .dm-block,.detail-motion-still .dm-card,.detail-motion-still .dm-visual,.detail-motion-still .dm-glyph>span,.detail-motion-still .module-object-visual img{transform:none!important;translate:none!important;rotate:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
.detail-motion-still .dm-glyph:after{display:none}.detail-motion-still .dm-image-light{display:none}.detail-motion-still .dm-read-word{color:inherit}.detail-motion-still .menu-link{transition:none!important}
@media(prefers-reduced-motion:reduce){.dm-word-inner,.dm-block,.dm-card,.dm-visual,.dm-glyph>span{transform:none!important;translate:none!important;opacity:1!important;clip-path:none!important;transition:none!important}.dm-glyph:after,.dm-image-light{display:none!important}.dm-read-word{color:inherit!important}.dm-scroll-progress{display:none}}