.klaasje-intro{display:none}html.klaasje-intro-open .klaasje-intro{--klaasje-intro-gate-top: 44%;--klaasje-intro-gap: 48px;--klaasje-intro-logo-h: clamp(53.4px, 9.43vw, 94.3px);display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;overflow:hidden}html.klaasje-intro-open:not(.klaasje-intro-leaving),html.klaasje-intro-open:not(.klaasje-intro-leaving) body{overflow:hidden}html.klaasje-intro-open{background-color:var(--klaasje-navy);transition:background-color .6s ease}html.klaasje-intro-open.klaasje-intro-leaving{background-color:transparent;transition:none}html.klaasje-intro-open .klaasje-intro.is-los{position:absolute;top:0;right:auto;bottom:auto;left:0;width:100%;height:100lvh}.klaasje-intro.is-los .klaasje-intro__wordmark{animation:none}html.klaasje-intro-open #shopify-pc__banner{display:none!important}.klaasje-intro__sheet{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--klaasje-navy);transition:opacity .6s ease}div.klaasje-intro__rand{display:block;position:absolute;left:0;right:0;z-index:5;height:12px;opacity:.04;transform:translateZ(0);pointer-events:auto}div.klaasje-intro__rand--boven{top:0}div.klaasje-intro__rand--onder{bottom:0}.klaasje-intro.is-out,.klaasje-intro.is-fading{pointer-events:none}.klaasje-intro.is-out .klaasje-intro__sheet{opacity:0;pointer-events:none}.klaasje-intro__sheet{background-color:var(--klaasje-navy-light);background-image:radial-gradient(circle at 50% 50%,#0000 52%,#00000014),linear-gradient(132deg,var(--klaasje-navy) 0%,var(--klaasje-navy) 28.5%,var(--klaasje-navy-light) 69.3%,var(--klaasje-navy-light) 100%)}.klaasje-intro__ribbon{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s ease}.klaasje-intro__ribbon.is-drawn{opacity:1}.klaasje-intro__wave{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s ease}.klaasje-intro.is-waving .klaasje-intro__wave{opacity:1}.klaasje-intro.is-fading{opacity:0;transition:opacity .4s ease}.klaasje-intro__logo-pos{position:absolute;left:50%;top:calc(var(--klaasje-intro-gate-top) - var(--klaasje-intro-gap) - var(--klaasje-intro-logo-h));transform:translate(-50%);transition:top .45s cubic-bezier(.65,0,.35,1),transform .45s cubic-bezier(.65,0,.35,1)}.klaasje-intro__logo{width:clamp(170px,30vw,300px);color:var(--klaasje-white);transform-origin:50% 50%;transition:transform .45s cubic-bezier(.6,0,.2,1),color .25s ease,opacity .4s ease}.klaasje-intro__wordmark{display:block;width:100%;height:auto;overflow:visible}html.klaasje-intro-open .klaasje-intro__wordmark{animation:klaasjeIntroLogoIn .7s cubic-bezier(.22,1,.36,1)}@keyframes klaasjeIntroLogoIn{0%{opacity:0;transform:translateY(14px) scale(.96)}}.klaasje-intro.is-coloring .klaasje-intro__logo{transition:transform .45s cubic-bezier(.6,0,.2,1),opacity .4s ease}.klaasje-intro.is-out:not(.is-flying) .klaasje-intro__logo{opacity:0;transform:scale(.94)}.klaasje-intro.is-landed .klaasje-intro__logo{opacity:0;transition:opacity .16s linear}.klaasje-intro__gate{position:absolute;left:50%;top:var(--klaasje-intro-gate-top);transform:translate(-50%);box-sizing:border-box;width:100%;max-width:420px;margin:0;padding:0 24px;display:flex;flex-direction:column;align-items:center;transition:opacity .25s ease}.klaasje-intro__fields{display:flex;align-items:stretch;justify-content:center;gap:10px}.klaasje-intro__input{box-sizing:border-box;width:58px;margin:0;padding:14px 0;background:transparent;border:1.5px solid rgba(255,255,255,.65);border-radius:var(--klaasje-r-box);color:var(--klaasje-white);text-align:center;font:500 18px var(--klaasje-body);letter-spacing:.06em;outline:none;box-shadow:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}.klaasje-intro__input--year{width:86px}.klaasje-intro__input::placeholder{color:#fff6;letter-spacing:.14em}.klaasje-intro__input:focus,.klaasje-intro__input:focus-visible{border-color:var(--klaasje-white);outline:none;box-shadow:none}.klaasje-intro__submit{box-sizing:border-box;margin:0;padding:0 22px;background:transparent;border:1.5px solid rgba(255,255,255,.65);border-radius:var(--klaasje-r-box);color:var(--klaasje-white);font:700 14px var(--klaasje-body);text-transform:lowercase;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}.klaasje-intro__submit:hover,.klaasje-intro__submit:focus-visible{background:var(--klaasje-white);color:var(--klaasje-navy);border-color:var(--klaasje-white);outline:none}.klaasje-intro__note{margin-top:24px;text-align:center}.klaasje-intro__note p{max-width:320px;margin:0 auto;color:#fffc;font:400 14px/1.55 var(--klaasje-body);letter-spacing:normal;text-wrap:balance}.klaasje-intro__badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:46px;height:46px;margin-top:16px;border:2px solid var(--klaasje-white);border-radius:50%;color:var(--klaasje-white);font:700 14px var(--klaasje-body)}.klaasje-intro__error{min-height:1.5em;max-width:15em;margin:16px auto 0;color:var(--klaasje-red);text-align:center;text-wrap:balance;font:400 14px/1.5 var(--klaasje-body);letter-spacing:normal;opacity:0;transition:opacity .2s ease}.klaasje-intro__error.is-visible{opacity:1}@keyframes klaasjeIntroShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.klaasje-intro__fields.is-shaking{animation:klaasjeIntroShake .4s ease}.klaasje-intro.is-submitting .klaasje-intro__gate{opacity:0;pointer-events:none}.klaasje-intro{--klaasje-intro-midden: 0px}@supports (height: 100svh){.klaasje-intro{--klaasje-intro-midden: max(0px, (100lvh - 100svh - 50px) / 2)}}.klaasje-intro.is-submitting .klaasje-intro__logo-pos{top:calc(50% + var(--klaasje-intro-midden));transform:translate(-50%,-50%)}@media(max-width:600px){html.klaasje-intro-open .klaasje-intro{--klaasje-intro-gate-top: 50%;--klaasje-intro-gap: 36px}}@media(max-width:359px){.klaasje-intro__fields{gap:8px}.klaasje-intro__input{width:50px}.klaasje-intro__input--year{width:74px}.klaasje-intro__submit{padding:0 16px}}@media(prefers-reduced-motion:reduce){html.klaasje-intro-open .klaasje-intro__wordmark,.klaasje-intro__fields.is-shaking{animation:none}html.klaasje-intro-open,.klaasje-intro__sheet,.klaasje-intro__logo-pos,.klaasje-intro__logo,.klaasje-intro__gate{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/klaasje-intro.css.map */