/* EdifyKids welcome door (own code) - premium + playful.
   Two lacquered orange doors with brass handles and a light seam; a slow gloss sweeps over them, sparkles float up, the pointer lights the doors and tilts the welcome block.
   The name is made of single letters: they bob in a wave, shine, and hop when touched. The first scroll / touch / key press slides the doors apart (light floods out of the seam). */
#ek-door{--mx:0;--my:0;position:fixed;inset:0;z-index:100000;overflow:hidden;transition:opacity .25s,visibility .25s;font-family:var(--ek-font-head,"Fredoka",system-ui,sans-serif)}
#ek-door.hide{opacity:0;visibility:hidden;pointer-events:none}

/* doors: the early kids door (stripes, inset panel line, brown handle bars) */
.ek-gate{position:absolute;top:0;bottom:0;width:50.5%;background:repeating-linear-gradient(#F28C28 0 38px,#EE8420 38px 76px);box-shadow:inset 0 0 120px rgba(0,0,0,.22);transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.ek-gate::before{content:"";position:absolute;inset:9% 11%;border:3px solid rgba(255,255,255,.2);border-radius:18px;box-shadow:inset 0 0 40px rgba(0,0,0,.12)}
.ek-gate::after{content:"";position:absolute;top:50%;width:26px;height:96px;border-radius:14px;background:linear-gradient(90deg,#6B3E1E,#3E2312 60%,#6B3E1E);box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18);transform:translateY(-50%);transition:box-shadow .5s}
.ek-gate-l{left:0;border-right:4px solid #C96F12}.ek-gate-l::after{right:14px}
.ek-gate-r{right:0;border-left:4px solid #C96F12}.ek-gate-r::after{left:14px}
#ek-door.enter .ek-gate{transition:transform 1.35s cubic-bezier(.55,0,.2,1)}
#ek-door.enter .ek-gate-l{transform:translateX(-100%)}#ek-door.enter .ek-gate-r{transform:translateX(100%)}

/* light seam between the doors */
.ek-door__glow{position:absolute;z-index:1;top:0;bottom:0;left:50%;width:34px;margin-left:-17px;background:linear-gradient(90deg,transparent,rgba(255,246,214,.95) 50%,transparent);opacity:0;pointer-events:none}
#ek-door.enter .ek-door__glow{display:none}

/* welcome block */
.ek-door__center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18px;perspective:1000px;transition:transform 1.35s cubic-bezier(.55,0,.2,1),opacity .9s}
#ek-door.enter .ek-door__center{transform:scale(2.4);opacity:0}
.ek-door__tilt{display:flex;flex-direction:column;align-items:center;transform:rotateY(calc(var(--mx)*7deg)) rotateX(calc(var(--my)*-5deg));transition:transform .3s ease-out}
.ek-door__logowrap{display:block;animation:ek-bob 4.8s ease-in-out 1.3s infinite}
.ek-door__logo{display:block;width:min(260px,62vw);height:auto;padding:16px 26px;background:#fff;border-radius:26px;box-shadow:0 18px 44px rgba(120,60,0,.38),0 0 0 0 rgba(255,226,150,0);animation:ek-door-pop 1s cubic-bezier(.2,1.4,.4,1) backwards;transition:transform .5s cubic-bezier(.2,1.5,.4,1),box-shadow .5s}
.ek-door__logowrap:hover .ek-door__logo{transform:scale(1.08) rotate(-3deg);box-shadow:0 24px 54px rgba(120,60,0,.42),0 0 0 8px rgba(255,226,150,.45)}
.ek-door__hi{margin-top:26px;letter-spacing:6px;font-size:14px;text-transform:uppercase;font-weight:600;color:#fff;animation:ek-rise .8s ease .35s backwards,ek-track 5.4s ease-in-out 1.6s infinite}

/* the name: a wave of bobbing, shining letters that hop when touched */
.ek-door__name{margin:6px 0 0;display:flex;justify-content:center;font-weight:600;font-size:clamp(44px,8.4vw,104px);line-height:1;letter-spacing:-.015em;position:relative}
.ek-door__name::before{content:attr(aria-label);position:absolute;z-index:-1;color:transparent;text-shadow:0 8px 24px rgba(110,45,0,.5);pointer-events:none;animation:ek-fade 1s ease 1.1s backwards}
.ek-door__name .l{display:inline-block;font-weight:inherit;cursor:pointer;
  background:linear-gradient(105deg,#fff 0 42%,#FFF3C2 50%,#fff 58% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:ek-drop .9s cubic-bezier(.2,1.5,.4,1) calc(.5s + var(--i)*.08s) backwards,ek-wave 3.6s ease-in-out calc(1.8s + var(--i)*.13s) infinite,ek-shine 5s linear calc(1.5s + var(--i)*.1s) infinite}
.ek-door__name .l.k{background-image:linear-gradient(105deg,#FFD35F 0 42%,#FFFBE8 50%,#FFD35F 58% 100%)}
/* after the intro (class .live, set by the door script) the letters only wave + shine, so a hop never replays the drop-in */
#ek-door.live .ek-door__name .l{animation:ek-wave 3.6s ease-in-out calc(var(--i)*.13s) infinite,ek-shine 5s linear calc(var(--i)*.1s) infinite}
#ek-door.live .ek-door__name .l.pop{animation:ek-hop .85s cubic-bezier(.3,1.4,.5,1),ek-shine 5s linear infinite}

/* the motto is written by hand, then underlined with a squiggle */
.ek-door__motto{position:relative;display:inline-block;margin-top:16px;animation:ek-mt-float 4.2s ease-in-out 3.4s infinite}
.ek-door__mt{display:block;color:#FFF1DC;font:700 clamp(28px,3.6vw,44px)/1.1 Caveat,"Fredoka",cursive;text-shadow:0 4px 18px rgba(120,60,0,.35);clip-path:inset(-12% 100% -24% 0);animation:ek-write 1.7s cubic-bezier(.5,0,.2,1) 1.4s forwards;transition:transform .45s cubic-bezier(.2,1.5,.4,1),text-shadow .45s}
.ek-door__motto:hover .ek-door__mt{transform:scale(1.07) rotate(-1.6deg);text-shadow:0 4px 22px rgba(255,226,150,.9)}
.ek-door__squig{display:block;width:64%;height:14px;margin:2px auto 0;overflow:visible}
.ek-door__squig path{fill:none;stroke:#FFE29A;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:ek-draw 1s ease 2.9s forwards}

/* scroll cue */
.ek-door__cue{position:absolute;z-index:3;left:0;right:0;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:12px;border:0;background:none;color:#fff;font:600 12px/1 var(--ek-font-head,"Fredoka",system-ui,sans-serif);letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:opacity .5s,transform .3s;animation:ek-rise .8s ease 2.4s backwards}
#ek-door.enter .ek-door__cue{opacity:0}
.ek-door__cue .ek-door__txt{transition:letter-spacing .35s}
.ek-door__cue:hover .ek-door__txt{letter-spacing:5px}
.ek-door__cue .ek-door__mouse{display:block;position:relative;box-sizing:border-box;width:24px;height:38px;border:2px solid #fff;border-radius:14px;animation:ek-ring 2.2s ease-out infinite}
.ek-door__cue .ek-door__mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:#fff;animation:ek-door-wheel 1.6s ease-in-out infinite}

@media (hover:hover){
  #ek-door:not(.enter):hover .ek-gate-l{transform:translateX(-1.1%)}
  #ek-door:not(.enter):hover .ek-gate-r{transform:translateX(1.1%)}
  #ek-door:not(.enter):hover .ek-gate::after{box-shadow:0 8px 18px rgba(0,0,0,.35),0 0 26px 5px rgba(255,214,120,.7),inset 0 2px 0 rgba(255,255,255,.18)}
}
@media (max-width:640px){.ek-door__hi{letter-spacing:4px;font-size:12px}}

@keyframes ek-door-pop{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes ek-door-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes ek-fade{from{opacity:0}to{opacity:1}}
@keyframes ek-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ek-drop{0%{opacity:0;transform:translateY(-70px) rotate(-14deg) scale(.6)}100%{opacity:1;transform:none}}
@keyframes ek-wave{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(calc((var(--i) - 4)*.7deg))}}
@keyframes ek-hop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-30px) scale(1.18,.9) rotate(-7deg)}65%{transform:translateY(0) scale(.92,1.1)}85%{transform:translateY(-5px)}100%{transform:none}}
@keyframes ek-shine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ek-bob{0%,100%{transform:translate3d(0,0,0) rotate(-1.2deg)}50%{transform:translate3d(0,-10px,0) rotate(1.2deg)}}
@keyframes ek-track{0%,100%{letter-spacing:6px}50%{letter-spacing:9px}}
@keyframes ek-write{to{clip-path:inset(-12% -4% -24% 0)}}
@keyframes ek-draw{to{stroke-dashoffset:0}}
@keyframes ek-mt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ek-sheen{0%{left:-40%}55%,100%{left:140%}}
@keyframes ek-glint{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ek-seam{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes ek-flood{0%{transform:scaleX(1);opacity:.95}45%{transform:scaleX(7);opacity:.95}100%{transform:scaleX(15);opacity:0}}
@keyframes ek-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
@keyframes ek-float{0%{opacity:0;transform:translate3d(0,24px,0) rotate(0) scale(.7)}20%{opacity:.85}80%{opacity:.85}100%{opacity:0;transform:translate3d(var(--dx),-130px,0) rotate(var(--r)) scale(1.1)}}

/* nothing scrolls behind the closed door, and the hero intro waits until the doors are opening */
html.ek-door-on,html.ek-door-on body{overflow:hidden!important}
html.ek-door-wait .ek-h3d,html.ek-door-wait .ek-h3d *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#ek-door{display:none!important}html.ek-door-on,html.ek-door-on body{overflow:auto!important}}
/* the theme styles every <button> (pink border, pink text): neutralise it for the cue */
#ek-door .ek-door__cue,#ek-door .ek-door__cue:hover,#ek-door .ek-door__cue:focus{border:0!important;background:none!important;color:#fff!important;box-shadow:none!important;outline:0;padding:0;border-radius:0;text-decoration:none}
#ek-door .ek-door__cue:focus-visible{outline:2px solid #fff;outline-offset:6px}
#ek-door .ek-door__cue{display:flex!important;flex-direction:column!important;align-items:center!important;height:auto}
#ek-door .ek-door__txt{display:block;line-height:1}

/* smooth opening: own GPU layers for the moving parts, and every idle loop (text-clip shine, wave, bob, ring) stops the moment the doors start to move, so the main thread only has the slide to do */
.ek-gate,.ek-door__center{will-change:transform;backface-visibility:hidden}
#ek-door.enter .ek-door__name .l,#ek-door.enter .ek-door__logowrap,#ek-door.enter .ek-door__hi,#ek-door.enter .ek-door__motto,#ek-door.enter .ek-door__squig path,#ek-door.enter .ek-door__mouse,#ek-door.enter .ek-door__mouse::after{animation:none!important}
#ek-door.enter .ek-door__name .l{background:none;-webkit-text-fill-color:#fff;color:#fff}
#ek-door.enter .ek-door__name .l.k{-webkit-text-fill-color:#FFD35F;color:#FFD35F}
#ek-door.enter .ek-door__tilt{transition:none;transform:none}
#ek-door.enter .ek-door__squig path{stroke-dashoffset:0}
#ek-door.enter .ek-door__mt{clip-path:none;animation:none}