/* Openingsscherm Bij Chantal Kindercoaching */
@font-face{font-family:"Sacramento";src:url(../fonts/sacramento-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{--ink:#3f434c;--blush:#f3e0d9;--blush-2:#e8c4b8;--blush-3:#d6a493;--cream:#fbf8f5;--muted:#6f727a}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.g{min-height:100vh;min-height:100svh;background:var(--cream);color:var(--ink);font-family:"Jost",system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center}
body.g::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;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%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .26 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.g-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* Achtergrond */
.g-bg{position:fixed;inset:-30px;pointer-events:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.g-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.75;background:var(--blush);animation:gFloat 16s ease-in-out infinite}
.g-blob--1{width:46vw;height:46vw;left:-12vw;top:-14vw}
.g-blob--2{width:38vw;height:38vw;right:-10vw;bottom:-12vw;animation-delay:-5s;background:#f5e6df}
.g-blob--3{width:20vw;height:20vw;right:16vw;top:8vh;opacity:.45;animation-delay:-9s}
@keyframes gFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(3vw,2vh) scale(1.06)}66%{transform:translate(-2vw,3vh) scale(.95)}}

.g-spark{position:absolute;width:18px;height:18px;fill:var(--ink);opacity:0;animation:gTwinkle 4s ease-in-out infinite}
.g-spark--1{left:12%;top:18%;width:22px;height:22px}
.g-spark--2{left:20%;top:72%;animation-delay:-1s}
.g-spark--3{left:82%;top:22%;width:26px;height:26px;animation-delay:-2s}
.g-spark--4{left:88%;top:64%;animation-delay:-.5s;width:14px;height:14px}
.g-spark--5{left:6%;top:46%;width:12px;height:12px;animation-delay:-3s}
.g-spark--6{left:70%;top:86%;animation-delay:-1.6s}
.g-spark--7{left:34%;top:9%;width:12px;height:12px;animation-delay:-2.6s}
.g-spark--8{left:94%;top:40%;width:12px;height:12px;animation-delay:-3.4s}
.g-spark--9{left:58%;top:6%;width:16px;height:16px;animation-delay:-.8s;fill:var(--blush-3)}
.g-spark--10{left:28%;top:88%;width:14px;height:14px;animation-delay:-2.2s;fill:var(--blush-3)}
.g-spark--11{left:4%;top:84%;width:20px;height:20px;animation-delay:-1.3s}
.g-spark--12{left:76%;top:52%;width:10px;height:10px;animation-delay:-3.8s;fill:var(--blush-3)}
@keyframes gTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.85;transform:scale(1) rotate(45deg)}}

/* Podium */
.g-stage{position:relative;z-index:5;width:100%;max-width:760px;padding:40px 20px;text-align:center}
.g-intro{transition:opacity .7s ease,transform .9s cubic-bezier(.6,0,.3,1),max-height .9s ease;max-height:800px}
.g-intro.is-away{opacity:0;transform:translateY(-30px) scale(.96);max-height:0;overflow:hidden;pointer-events:none}
.g-logo{width:190px;height:auto;display:block;margin:0 auto 18px;opacity:0;transform:scale(.85) rotate(-6deg)}
.is-ready .g-logo{animation:gLogo 1.3s cubic-bezier(.2,.8,.2,1) .15s forwards}
@keyframes gLogo{to{opacity:1;transform:none}}
.g-label{margin:0 0 6px;text-transform:uppercase;letter-spacing:.32em;font-size:12.5px;font-weight:500;color:var(--muted)}
.g-title,.g-open__title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(36px,6vw,62px);line-height:1.08;margin:0 0 14px;letter-spacing:-.01em}
.bc-script{font-family:"Sacramento",cursive;font-weight:400;font-size:1.45em;line-height:.8;letter-spacing:0;color:var(--ink);position:relative;display:inline-block;padding:0 .08em}
.bc-script::after{content:"";position:absolute;left:4%;right:2%;bottom:.08em;height:.32em;background:var(--blush);z-index:-1;border-radius:40% 60% 50% 50%;transform-origin:left;transform:scaleX(0);animation:gUnder 1s cubic-bezier(.2,.8,.2,1) 1.4s forwards}
@keyframes gUnder{to{transform:scaleX(1)}}
.g-text{max-width:540px;margin:0 auto;color:#55585f}
.g-intro .g-label,.g-intro .g-title,.g-intro .g-text{opacity:0;transform:translateY(16px)}
.is-ready .g-intro .g-label{animation:gUp .9s cubic-bezier(.2,.8,.2,1) .45s forwards}
.is-ready .g-intro .g-title{animation:gUp .9s cubic-bezier(.2,.8,.2,1) .6s forwards}
.is-ready .g-intro .g-text{animation:gUp .9s cubic-bezier(.2,.8,.2,1) .75s forwards}
@keyframes gUp{to{opacity:1;transform:none}}

/* Het lint */
.g-ribbon{position:relative;width:100vw;left:50%;margin-left:-50vw;height:62px;margin-top:64px;margin-bottom:34px;transition:opacity .8s ease .9s}
.g-ribbon__half{position:absolute;top:0;height:100%;width:50.5%;background:linear-gradient(180deg,#f9ece7 0%,#f0d6cc 38%,#e7c1b3 70%,#dcae9e 100%);box-shadow:0 10px 24px -12px rgba(150,95,80,.55);overflow:hidden}
.g-ribbon__half::before{content:"";position:absolute;inset:7px 0;border-top:1.5px dashed rgba(255,255,255,.8);border-bottom:1.5px dashed rgba(255,255,255,.65)}
.g-ribbon__half::after{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:gShine 4.5s ease-in-out 2.4s infinite;transform:translateX(-120%)}
.g-ribbon__half--l{left:0;transform-origin:0 50%;transform:scaleX(0)}
.g-ribbon__half--r{right:0;transform-origin:100% 50%;transform:scaleX(0)}
.g-ribbon__half--r::after{animation-delay:3.1s}
.is-ready .g-ribbon__half{animation:gRibbonIn 1.1s cubic-bezier(.7,0,.2,1) .9s forwards}
@keyframes gRibbonIn{to{transform:scaleX(1)}}
@keyframes gShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(420%)}}
.g-bow{position:absolute;left:50%;top:50%;width:210px;height:auto;margin-left:-105px;margin-top:-82px;filter:drop-shadow(0 10px 14px rgba(150,95,80,.35));opacity:0;transform:scale(.3) rotate(-20deg);transform-origin:50% 50%}
.is-ready .g-bow{animation:gBowIn .9s cubic-bezier(.3,1.6,.5,1) 1.8s forwards,gSway 5s ease-in-out 2.8s infinite}
@keyframes gBowIn{to{opacity:1;transform:none}}
@keyframes gSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg) translateY(-2px)}}

/* Na het knippen */
.g-ribbon.is-cut .g-ribbon__half--l{animation:gFallL 1.6s cubic-bezier(.45,0,.3,1) forwards}
.g-ribbon.is-cut .g-ribbon__half--r{animation:gFallR 1.6s cubic-bezier(.45,0,.3,1) forwards}
@keyframes gFallL{0%{transform:scaleX(1) rotate(0)}55%{transform:scaleX(1) rotate(78deg)}72%{transform:scaleX(1) rotate(66deg)}86%{transform:scaleX(1) rotate(73deg)}100%{transform:scaleX(1) rotate(70deg)}}
@keyframes gFallR{0%{transform:scaleX(1) rotate(0)}55%{transform:scaleX(1) rotate(-78deg)}72%{transform:scaleX(1) rotate(-66deg)}86%{transform:scaleX(1) rotate(-73deg)}100%{transform:scaleX(1) rotate(-70deg)}}
.g-ribbon.is-cut .g-bow{animation:gBowDrop 1.3s cubic-bezier(.55,0,.8,.3) forwards}
@keyframes gBowDrop{0%{opacity:1;transform:none}20%{transform:translateY(-24px) rotate(-12deg)}100%{opacity:0;transform:translateY(70vh) rotate(200deg) scale(.8)}}
body.is-cut .g-ribbon{opacity:0}
body.is-cut::after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);pointer-events:none;z-index:4;animation:gFlash 1.1s ease-out forwards}
@keyframes gFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

/* Formulier */
.g-form-wrap{transition:opacity .45s ease,transform .45s ease}
.g-form-wrap.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
.g-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;opacity:0;transform:translateY(16px)}
.is-ready .g-form{animation:gUp .9s cubic-bezier(.2,.8,.2,1) 2.1s forwards}
.g-field{position:relative;flex:1 1 260px;max-width:330px}
.g-field input{width:100%;height:58px;border-radius:999px;border:1.5px solid #e3d3cc;background:rgba(255,255,255,.85);padding:0 56px 0 26px;font:inherit;font-size:17px;color:var(--ink);letter-spacing:.06em;outline:none;transition:border-color .25s,box-shadow .25s,background .25s;backdrop-filter:blur(4px)}
.g-field input::placeholder{color:#9c9ea4;letter-spacing:.02em}
.g-field input:focus{border-color:var(--blush-3);box-shadow:0 0 0 6px rgba(243,224,217,.75);background:#fff}
.g-eye{position:absolute;right:10px;top:50%;width:40px;height:40px;margin-top:-20px;border:0;background:transparent;border-radius:50%;cursor:pointer;color:#8b8e95;display:grid;place-items:center}
.g-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.g-eye.is-on{color:var(--ink);background:var(--blush)}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 30px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:500;font-size:16.5px;letter-spacing:.03em;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.g-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.g-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(63,67,76,.6)}
.g-btn:hover::before{transform:translateX(100%)}
.g-btn:focus-visible{outline:3px solid var(--blush-3);outline-offset:3px}
.g-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;flex:none}
.g-btn__icon{transition:transform .4s}
.g-btn:hover .g-btn__icon{transform:rotate(-14deg)}
.g-btn.is-loading{pointer-events:none;opacity:.8}
.g-btn.is-loading .g-btn__icon{animation:gSpin 1s linear infinite}
@keyframes gSpin{to{transform:rotate(360deg)}}
.g-error{flex-basis:100%;min-height:1.6em;margin:4px 0 0;color:#b06450;font-size:15px}
.g-form.is-error .g-field{animation:gShake .5s cubic-bezier(.36,.07,.19,.97)}
.g-form.is-error .g-field input{border-color:#d99b88}
@keyframes gShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* Geopend */
.g-open{position:relative;opacity:0;transform:translateY(30px) scale(.94);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.9,.2,1)}
.g-open.is-in{opacity:1;transform:none}
.g-open__title{font-size:clamp(44px,8vw,86px);margin-bottom:38px}
.g-open .bc-script{font-size:1.5em}
.g-open .g-text{margin-bottom:30px;font-size:18px}
.g-btn--enter{padding:0 34px;background:var(--ink);box-shadow:0 0 0 0 rgba(232,196,184,.9);animation:gPulse 2.2s ease-out 1.4s infinite}
@keyframes gPulse{0%{box-shadow:0 0 0 0 rgba(232,196,184,.9)}100%{box-shadow:0 0 0 22px rgba(232,196,184,0)}}
.g-btn--enter svg{stroke-width:3;transition:transform .3s}
.g-btn--enter:hover svg{transform:translateX(4px)}

/* Schaar */
.g-scissors{position:fixed;left:0;top:0;width:156px;height:156px;z-index:70;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(63,67,76,.25))}
.g-scissors__blade{transform-box:view-box;transform-origin:60px 60px;transition:transform .14s ease}
.g-scissors.is-open .g-scissors__blade--a{transform:rotate(-10deg)}
.g-scissors.is-open .g-scissors__blade--b{transform:rotate(10deg)}
.g-scissors.is-snip .g-scissors__blade--a{transform:rotate(20deg)}
.g-scissors.is-snip .g-scissors__blade--b{transform:rotate(-20deg)}

/* Overgang naar de site */
.g-wipe{position:fixed;left:50%;top:50%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;border-radius:50%;background:radial-gradient(circle,var(--cream) 0 55%,var(--blush) 70%);transform:scale(0);z-index:90;pointer-events:none;transition:transform .8s cubic-bezier(.7,0,.3,1)}
.g-wipe.is-in{transform:scale(1)}

@media (max-width:600px){
	body.g{font-size:16px}
	.g-logo{width:150px}
	.g-ribbon{height:48px;margin-top:54px}
	.g-bow{width:160px;margin-left:-80px;margin-top:-64px}
	.g-field{max-width:none}
	.g-btn{width:100%}
	.g-form{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}