.foto-pop{border-radius:inherit;position:absolute;inset:0}.foto-pop:before{content:"";z-index:3;aspect-ratio:45/44.5;background:var(--poppetje) center / contain no-repeat;transform-origin:50% 62%;pointer-events:none;width:clamp(40px,9%,64px);position:absolute;bottom:calc(100% - 2px);right:8%}@media (prefers-reduced-motion:reduce){.item.pop :is(.lp,.foto-pop):before{animation:none!important}}.item.pop :is(.lp,.foto-pop):before{animation:.65s linear both pop-sprong-y}@keyframes pop-sprong-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}12%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1.1 .86}50%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -70%;scale:.95 1.06}88%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1.1 .88}to{translate:0;scale:1}}.item.pop[data-pop=salto] :is(.lp,.foto-pop):before{animation:.95s linear both pop-salto-y,.95s linear both pop-salto-r}@keyframes pop-salto-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}12%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1.1 .86}50%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -90%;scale:1}88%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1.1 .88}to{translate:0;scale:1}}@keyframes pop-salto-r{0%,12%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}88%,to{rotate:360deg}}.item.pop[data-pop=dubbel] :is(.lp,.foto-pop):before{animation:1.25s linear both pop-dubbel-y,1.25s linear both pop-dubbel-r}@keyframes pop-dubbel-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}12%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1.1 .86}50%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -100%;scale:1}88%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1.1 .88}to{translate:0;scale:1}}@keyframes pop-dubbel-r{0%,12%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}88%,to{rotate:720deg}}.item.pop[data-pop=buiging] :is(.lp,.foto-pop):before{animation:1.2s linear both pop-buiging-y,1.2s linear both pop-buiging-r}@keyframes pop-buiging-y{0%,to{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}35%,65%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:8%;scale:1 .94}}@keyframes pop-buiging-r{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}35%,65%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:38deg}to{rotate:0deg}}.item.pop[data-pop=zwaai] :is(.lp,.foto-pop):before{animation:1.4s linear both pop-zwaai-y,1.4s linear both pop-zwaai-r}@keyframes pop-zwaai-y{0%,to{translate:0}}@keyframes pop-zwaai-r{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}20%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-16deg}40%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:14deg}60%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-12deg}80%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:8deg}to{rotate:0deg}}.item.pop[data-pop=radslag] :is(.lp,.foto-pop):before{animation:1.7s linear both pop-radslag-y,1.7s linear both pop-radslag-r}@keyframes pop-radslag-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0}25%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:-75% -22%}50%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:-150%}75%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:-75% -22%}to{translate:0}}@keyframes pop-radslag-r{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}50%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-360deg}to{rotate:-720deg}}.item.pop[data-pop=koprol] :is(.lp,.foto-pop):before{animation:1.7s linear both pop-koprol-y,1.7s linear both pop-koprol-r}@keyframes pop-koprol-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}8%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1.05 .88}45%,55%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:-140%;scale:1}to{translate:0;scale:1}}@keyframes pop-koprol-r{0%,8%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}45%,55%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-360deg}to{rotate:0deg}}.item.pop[data-pop=spagaat] :is(.lp,.foto-pop):before{animation:.85s linear both pop-spagaat-y}@keyframes pop-spagaat-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}12%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1.1 .86}50%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -75%;scale:1.45 .8}88%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1.1 .88}to{translate:0;scale:1}}.item.pop[data-pop=pirouette] :is(.lp,.foto-pop):before{animation:1.3s linear both pop-pirouette-y,1.3s linear both pop-pirouette-r}@keyframes pop-pirouette-y{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1}12%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1.1 .86}50%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -35%;scale:1}88%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0;scale:1.1 .88}to{translate:0;scale:1}}@keyframes pop-pirouette-r{0%,12%{animation-timing-function:cubic-bezier(.45,0,.55,1);transform:perspective(200px)rotateY(0)}88%,to{transform:perspective(200px)rotateY(720deg)}}.item.pop[data-pop=juich] :is(.lp,.foto-pop):before{animation:1s linear both pop-juich-y,1s linear both pop-juich-r}@keyframes pop-juich-y{0%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1}25%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -55%;scale:1.15}50%{animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0;scale:1.08 .9}75%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -55%;scale:1.15}to{translate:0;scale:1}}@keyframes pop-juich-r{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}25%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-6deg}50%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}75%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:6deg}to{rotate:0deg}}.item.pop[data-pop=omval] :is(.lp,.foto-pop):before{animation:2.1s linear both pop-omval-y,2.1s linear both pop-omval-r}@keyframes pop-omval-y{0%,30%{animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0}48%,70%{animation-timing-function:cubic-bezier(.45,0,.55,1);translate:40%}to{translate:0}}@keyframes pop-omval-r{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}10%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-10deg}20%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:9deg}30%{animation-timing-function:cubic-bezier(.6,0,.78,.35);rotate:-4deg}48%,70%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:92deg}88%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-6deg}to{rotate:0deg}}.item.pop[data-pop=gluren] :is(.lp,.foto-pop):before{animation:1.7s linear both pop-gluren-y,1.7s linear both pop-gluren-r}@keyframes pop-gluren-y{0%{clip-path:inset(0);animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0}30%,58%{clip-path:inset(0 0 100%);animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0 140%}78%,88%{clip-path:inset(0 0 37%);animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0 75%}to{clip-path:inset(0);translate:0}}@keyframes pop-gluren-r{0%,78%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}83%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:-10deg}88%,to{rotate:0deg}}.item.pop[data-pop=duik] :is(.lp,.foto-pop):before{animation:1.9s linear both pop-duik-y,1.9s linear both pop-duik-r}@keyframes pop-duik-y{0%{clip-path:inset(0);animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0}20%{clip-path:inset(0);animation-timing-function:cubic-bezier(.6,0,.78,.35);translate:0 -80%}55%,70%{clip-path:inset(0 0 100%);animation-timing-function:cubic-bezier(.22,.7,.36,1);translate:0 140%}88%{clip-path:inset(0);animation-timing-function:cubic-bezier(.45,0,.55,1);translate:0 -15%}to{clip-path:inset(0);translate:0}}@keyframes pop-duik-r{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);rotate:0deg}48%,to{rotate:360deg}}.beeldmerk-achter{position:relative}.beeldmerk-achter:before{content:"";z-index:-1;aspect-ratio:45/44.5;background:var(--poppetje) center / contain no-repeat;opacity:.16;pointer-events:none;width:clamp(560px,70vw,1100px);position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-20deg}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.beeldmerk-achter:before{animation-name:beeldmerk-draait;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover}}}@supports not (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.beeldmerk-achter:before{rotate:calc(-65deg + 95deg * var(--v,.5))}}}@keyframes beeldmerk-draait{0%{rotate:-65deg}to{rotate:30deg}}.paneel{isolation:isolate;aspect-ratio:16/11;border-radius:var(--hoek-l);background:var(--steelblauw-licht);position:relative;overflow:clip}.lp{aspect-ratio:1154/814;width:68%;filter:drop-shadow(0 18px 18px color-mix(in srgb, var(--nachtblauw) 12%, transparent));margin-top:3%;position:absolute;top:50%;left:7%;transform:translateY(-54%)}.lp:after{content:"";z-index:2;background:var(--laptop-webp) center / 100% 100% no-repeat;background-image:image-set(var(--laptop-avif) type("image/avif"), var(--laptop-webp) type("image/webp"));pointer-events:none;position:absolute;inset:0}.lp .bs{background:var(--wit);width:83.9%;height:79.6%;position:absolute;top:3.6%;left:8.1%;overflow:hidden}.lp .bs picture{display:contents}.lp .bs img{object-fit:cover;object-position:50% 0;width:100%;height:100%;animation:7s linear forwards paused lp-scrollen;display:block}.item:hover .lp .bs img{animation-play-state:running}@keyframes lp-scrollen{to{object-position:50% 100%}}.paneel .ph{aspect-ratio:318/684;width:19%;filter:drop-shadow(0 16px 18px color-mix(in srgb, var(--nachtblauw) 16%, transparent));position:absolute;bottom:-8%;right:5%}.paneel .ph:after{content:"";z-index:2;background:var(--telefoon-webp) center / 100% 100% no-repeat;background-image:image-set(var(--telefoon-avif) type("image/avif"), var(--telefoon-webp) type("image/webp"));pointer-events:none;position:absolute;inset:0}.paneel .ph>div{background:var(--wit);border-radius:0 0 11% 11%/0 0 5% 5%;width:88.8%;height:89.4%;position:absolute;top:8.6%;left:5.6%;overflow:hidden}.paneel .ph picture{display:contents}.paneel .ph img{object-fit:cover;object-position:50% 0;width:100%;height:100%;display:block}.paneel[data-ph^=l] .lp{left:auto;right:7%}.paneel[data-ph^=l] .ph{left:5%;right:auto}.paneel[data-ph$=b] .ph{top:13%;bottom:auto}.paneel[data-ph=rb] .ph{right:4%}.paneel[data-ph=lb] .ph{left:4%}.lp:before{content:"";z-index:3;aspect-ratio:45/44.5;background:var(--poppetje) center / contain no-repeat;transform-origin:50% 62%;pointer-events:none;width:6.5%;position:absolute;bottom:103.5%;left:84.5%}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.binnenkomen .lp{animation-name:lp-in,lp-zweef;animation-timing-function:cubic-bezier(.16,1,.3,1),linear;animation-fill-mode:both,both;animation-timeline:view(),view();animation-range:entry 15% entry 75%,cover}.binnenkomen .ph{animation-name:ph-in;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:view();animation-range:entry 25% entry 90%}.binnenkomen[data-ph^=l] .ph{animation-name:ph-in-links}}}@supports not (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.js-animatie .binnenkomen .lp{opacity:0;scale:.7;translate:0 calc((.5 - var(--v,.5)) * 56px);transition:opacity .8s,scale 1.2s cubic-bezier(.16,1,.3,1)}.js-animatie .binnenkomen .ph{opacity:0;transition:opacity .6s .3s,translate 1.1s cubic-bezier(.16,1,.3,1) .3s,rotate 1.1s cubic-bezier(.16,1,.3,1) .3s;translate:60% 70%;rotate:14deg}.js-animatie .binnenkomen[data-ph^=l] .ph{translate:-60% 70%;rotate:-14deg}.js-animatie .binnenkomen.in-beeld .lp{opacity:1;scale:1}.js-animatie .binnenkomen.in-beeld .ph{opacity:1;translate:0;rotate:0deg}}}@keyframes lp-in{0%{opacity:0;scale:.7}}@keyframes lp-zweef{0%{translate:0 28px}to{translate:0 -28px}}@keyframes ph-in{0%{opacity:0;translate:60% 70%;rotate:14deg}}@keyframes ph-in-links{0%{opacity:0;translate:-60% 70%;rotate:-14deg}}
