/* Losse site: overrides op new.css (dat voor de video geschreven is) + echte interacties. */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-opsz-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:#F3EEE6}
body{background:#F3EEE6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
.newsite{position:relative;max-width:1440px;margin:0 auto}
.newsite>section,.newsite>footer{max-width:100%}

/* sticky nav met blur zodra je scrollt */
.n-nav{position:sticky;top:0;transition:background .3s,box-shadow .3s;backdrop-filter:blur(0)}
.n-nav.scrolled{background:rgba(243,238,230,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(27,22,19,.08)}
.n-links a{position:relative;padding:6px 0}
.n-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.n-links a:hover::after{transform:scaleX(1)}
.n-ico,.n-cart,.n-burger{cursor:pointer;transition:transform .2s}
.n-ico:hover{background:var(--paper)}
.n-cart b{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.n-cart b.bump{transform:scale(1.5)}

/* knoppen */
.n-btn{cursor:pointer;transition:background .3s,color .3s,transform .3s,box-shadow .3s,border-color .3s}
.n-btn.primary:hover{background:var(--clay);transform:translateY(-2px);box-shadow:0 14px 30px rgba(194,88,43,.35)}
.n-btn.primary .n-arr svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.n-btn.primary:hover .n-arr svg{transform:translateX(4px)}
.n-btn.ghost:hover{border-color:var(--ink);background:var(--paper)}
.n-btn.clay:hover{filter:brightness(1.07);transform:translateY(-2px)}
.n-shead a{transition:gap .3s}.n-shead a:hover{gap:14px}

/* hero-details */
.n-live{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,88,43,.35)}100%{box-shadow:0 0 0 12px rgba(194,88,43,0)}}
.n-stamp svg{animation:spin 24s linear infinite}
.n-stamp b svg{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.n-media>img{animation:kenburns 14s ease-out both}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.n-prog i{animation:roast 30s linear infinite alternate}
@keyframes roast{from{width:35%}to{width:88%}}

/* productkaarten */
.n-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.n-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(27,22,19,.13)}
.n-cimg img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.n-card:hover .n-cimg img{transform:scale(1.07)}
.n-add{cursor:pointer;transition:background .25s,width .45s cubic-bezier(.2,.8,.2,1),transform .15s;width:46px}
.n-add:hover{background:var(--clay)}
.n-add:active{transform:scale(.9)}
.n-cfoot .n-add-p,.n-cfoot .n-add-t{transition:opacity .2s}
.n-add.added{width:138px;background:var(--clay)}
.n-add.added .n-add-p{opacity:0}
.n-add.added .n-add-t{opacity:1}

/* abonnement-schakelaar */
.n-seg span{cursor:pointer;transition:background .3s,color .3s}
.n-subcta span b{color:#E8A57C;font-weight:600}

/* scroll-reveal */
.rv{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* mobiel menu */
.n-menu{position:fixed;inset:0;height:100dvh;display:flex;clip-path:circle(0 at calc(100% - 43px) 38px);transition:clip-path .55s cubic-bezier(.7,0,.2,1);pointer-events:none;z-index:20}
body.menu-open .n-menu{clip-path:circle(150% at calc(100% - 43px) 38px);pointer-events:auto}
body.menu-open{overflow:hidden}
body.menu-open .n-nav{z-index:30;background:transparent;box-shadow:none;backdrop-filter:none}
.n-menu a{opacity:0;transform:translateY(24px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
body.menu-open .n-menu a{opacity:1;transform:none}
body.menu-open .n-menu a:nth-child(2){transition-delay:.05s}body.menu-open .n-menu a:nth-child(3){transition-delay:.1s}
body.menu-open .n-menu a:nth-child(4){transition-delay:.15s}body.menu-open .n-menu a:nth-child(5){transition-delay:.2s}
.n-burger i{transition:transform .35s}
body.menu-open .n-burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .n-burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.n-demo{margin-top:34px;font:400 13px/1.4 Inter;color:rgba(243,238,230,.45)}
.n-demo a{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.n-card.rv{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.n-card.rv.in:hover{transform:translateY(-10px)}