/* =========================================================
   KremerProductions — animaties & beleving
   Alleen actief met JavaScript aan (html.js) en zonder
   "verminderde beweging" in de systeeminstellingen.
   ========================================================= */
:root{--ease:cubic-bezier(.22,1,.36,1)}
html,body{overflow-x:clip}

/* scroll-voortgang bovenin */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--btn),#e8a06f);z-index:70;pointer-events:none}

/* header wordt compacter bij scrollen */
.site-header{transition:background .3s,border-color .3s}
.site-header .wrap{transition:height .3s var(--ease)}
.site-header .logo img{transition:height .3s var(--ease)}
.site-header.scrolled{background:rgba(11,12,14,.94)}
.site-header.scrolled .wrap{height:68px}
.site-header.scrolled .logo img{height:36px}

/* subtiele filmkorrel */
.grain{position:fixed;inset:-50%;z-index:65;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* hero: één georkestreerde intro */
html.js .hero .tagline,html.js .hero .eyebrows,html.js .hero>.wrap>.eyebrow,html.js .hero .lead,html.js .hero .btns,html.js .hero .back,html.js .hero .place,html.js .hero .trust{opacity:0;transform:translateY(18px)}
html.js .hero.in .tagline,html.js .hero.in .eyebrows,html.js .hero.in>.wrap>.eyebrow,html.js .hero.in .lead,html.js .hero.in .btns,html.js .hero.in .back,html.js .hero.in .place,html.js .hero.in .trust{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .hero.in .place{transition-delay:.3s}
html.js .hero.in .lead{transition-delay:.35s}
html.js .hero.in .btns{transition-delay:.5s}
html.js .hero.in .trust{transition-delay:1.1s}
/* kop woord voor woord */
html.js .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}
html.js .hero.in h1 .w{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(.12s + var(--i) * .055s)}

/* showreel en hero-beeld openen als een filmdoek */
html.js .showreel .video,html.js .hero-split .video,html.js .hero-split .media{clip-path:inset(14% 0 14% 0 round 12px);opacity:.25;transform:scale(1.04)}
html.js .hero.in .showreel .video,html.js .hero.in .hero-split .video,html.js .hero.in .hero-split .media{clip-path:inset(0 0 0 0 round 12px);opacity:1;transform:none;transition:clip-path 1.4s var(--ease) .55s,opacity 1s ease .55s,transform 1.6s var(--ease) .55s}
html.js .hero .videos .video{opacity:0;transform:translateY(24px)}
html.js .hero.in .videos .video{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(.5s + var(--d,0s))}

/* scroll-reveal */
html.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js [data-reveal="left"]{transform:translateX(-36px)}
html.js [data-reveal="right"]{transform:translateX(36px)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js .media[data-reveal] img{transform:scale(1.15);transition:transform 1.6s var(--ease)}
html.js .media[data-reveal].in img{transform:scale(1)}
.parallax{overflow:hidden}

/* kaarten: lift, gloed en zoom */
.card,.pcard,.quote,.stat{transition:border-color .3s,transform .45s var(--ease),box-shadow .45s var(--ease),opacity .9s var(--ease)}
.card:hover,.pcard:hover,.quote:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(192,107,62,.28)}
.pcard .media img{transition:transform 1s var(--ease)}
.pcard:hover .media img{transform:scale(1.06)!important}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(192,107,62,.13),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before{opacity:1}
.step .num{transition:letter-spacing .4s var(--ease)}
.step:hover .num{letter-spacing:.14em}

/* knoppen */
.btn{position:relative;overflow:hidden;transition:background .2s,border-color .2s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .8s var(--ease)}

/* speelknop pulseert zacht */
.video .play{transition:transform .3s var(--ease),background .3s,color .3s}
.video .play::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:1px solid rgba(242,241,237,.35);animation:pulse 2.4s var(--ease) infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.video button:hover .play{transform:translate(-50%,-50%) scale(1.06);background:var(--btn);color:var(--btn-text)}
.video button:hover .play::before{border-left-color:var(--btn-text)}
.video img{transition:opacity .3s,transform 1.2s var(--ease)}
.video button:hover img{transform:scale(1.03)}

/* klantenbalk als doorlopende band */
.marquee{overflow:hidden;flex-basis:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 28s linear infinite}
.marquee-track b{white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* faq klapt vloeiend open */
.faq details .answer{display:grid;grid-template-rows:0fr;padding-bottom:0;transition:grid-template-rows .45s var(--ease),padding .45s var(--ease)}
.faq details .answer>p{overflow:hidden}
.faq details.open .answer{grid-template-rows:1fr;padding-bottom:22px}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--accent)}

/* streepjes tekenen zich uit */
html.js .dash li::before{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) var(--d,0s)}
html.js .dash.in li::before{transform:scaleX(1)}

/* onderstreping in de footer */
.site-footer a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .2s}
.site-footer a:hover{background-size:100% 1px}

@media (hover:none){.card:hover,.pcard:hover,.quote:hover,.btn:hover{transform:none;box-shadow:none}}
@media (prefers-reduced-motion:reduce){
  .grain,.marquee-track,.video .play::after{animation:none}
  html.js [data-reveal],html.js .hero *,html.js .hero h1 .w,html.js .media[data-reveal] img,html.js .dash li::before{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
}

/* ---- extra beleving ---- */
/* zachte overgang tussen pagina's (Chrome/Edge/Safari) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
/* koppen onthullen achter een masker */
html.js h2[data-reveal]{clip-path:inset(0 0 100% 0);transform:translateY(.4em);transition:clip-path 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),opacity .6s ease var(--d,0s)}
html.js h2[data-reveal].in{clip-path:inset(0 0 -.2em 0)}
/* showreel: opname-badge met lopende tijdcode */
.showreel{position:relative}
.rec{position:absolute;left:16px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:rgba(11,12,14,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--text);pointer-events:none}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#e5484d;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.video.playing~.rec,.showreel.playing .rec{display:none}
/* hoekmarkeringen als in een camerazoeker */
.showreel::before,.showreel::after{content:"";position:absolute;width:26px;height:26px;z-index:3;pointer-events:none;border-color:rgba(242,241,237,.55);border-style:solid;opacity:0;transition:opacity .6s ease 1.6s}
.showreel::before{right:14px;top:14px;border-width:2px 2px 0 0;border-top-right-radius:4px}
.showreel::after{left:14px;bottom:14px;border-width:0 0 2px 2px;border-bottom-left-radius:4px}
.hero.in .showreel::before,.hero.in .showreel::after{opacity:1}
.showreel.playing::before,.showreel.playing::after{display:none}
/* licht dat de muis volgt in de hero */
.hero{position:relative;isolation:isolate}
.hero .spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--hx,50%) var(--hy,20%),rgba(192,107,62,.12),transparent 60%);opacity:0;transition:opacity .6s}
.hero:hover .spot{opacity:1}
/* magnetische knoppen */
.btn.mag{transition:transform .35s var(--ease),background .2s,border-color .2s}
@media (prefers-reduced-motion:reduce){html.js h2[data-reveal]{clip-path:none!important}.rec::before{animation:none}}