/* EdifyKids hero v3 in the K-12 (Medchal) pattern: photo backdrop -> 3D world canvas -> text, side rail, photo band. Layers (root stacking context):
   body gradient < hero photo (z0) < #ek-world canvas (z2) < page content / hero text (z3) < rail (z70) < header (z80). */
@font-face{font-family:"Caveat";src:url("../fonts/caveat-700.woff2") format("woff2");font-weight:700;font-display:swap}
#ek-world{z-index:2!important}
body.ek-home .site-main,body.ek-home #content{position:static!important;z-index:auto!important;background:transparent!important}
.ek-h3d__wrap,.ek-h3d__cue,.ek-h3d__fade,.ek-band,.ek-ribbon,.ek-intro,.ek-counters,.ek-legacy,.ek-continuum,.ek-cta,.ek-fr,.ek-voices,.ek-ftr{position:relative;z-index:3}
.ek-h3d__cue{position:absolute}.ek-h3d__fade{position:absolute}
.ek-ftr__wave{z-index:3}

/* ---------- hero ---------- */
.ek-h3d{position:relative;overflow:hidden;display:flex;align-items:center;color:#fff;font-family:var(--ek-font-body);min-height:max(620px,100vh);min-height:max(620px,100svh);padding:clamp(120px,17vh,170px) 0 clamp(90px,13vh,130px);width:100%;background:#1c2a52}
.ek-h3d *,.ek-h3d *::before,.ek-h3d *::after{box-sizing:border-box}
.ek-h3d p,.ek-h3d h1{margin:0;padding:0}
.ek-h3d__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1c2a52}
.ek-h3d__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;max-width:none;transform:scale(1.04);animation:ek-kenburns 26s ease-in-out infinite alternate}
@keyframes ek-kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}}
.ek-h3d__overlay{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(15,25,55,.9) 0%,rgba(20,34,72,.74) 36%,rgba(24,42,88,.3) 68%,rgba(24,42,88,.22) 100%),
  linear-gradient(180deg,rgba(15,25,55,.5) 0%,rgba(15,25,55,0) 30%,rgba(15,25,55,.35) 100%)}
.ek-h3d__bg::after{content:"";position:absolute;right:0;top:50%;width:min(58vw,820px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;background:radial-gradient(circle,rgba(255,196,110,.32) 0%,rgba(255,196,110,.1) 40%,transparent 66%)}
.ek-hero__stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.ek-hero__fallback{filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.ek-h3d__wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px);width:100%}
.ek-h3d__copy{max-width:640px}
.ek-h3d .ek-h3d__welcome{font:600 clamp(20px,2.2vw,28px)/1.3 var(--ek-font-head);letter-spacing:.03em;margin:0 0 4px;color:#fff;opacity:.96}
.ek-h3d .ek-h3d__name{font:600 clamp(54px,8.2vw,118px)/.98 var(--ek-font-head);letter-spacing:-.02em;margin:0 0 4px;text-shadow:0 8px 40px rgba(0,0,0,.35)}
.ek-h3d .ek-w1{color:var(--ek-orange);display:inline-block;margin-right:.04em}
.ek-h3d .ek-w2{display:inline-block;color:#fff}
.ek-ch{display:inline-block;animation:ek-pop .9s var(--ek-ease) backwards;animation-delay:calc(var(--i,0) * 70ms + 250ms);transition:transform .35s var(--ek-ease)}
.ek-ch:hover{transform:translateY(-10px) rotate(var(--r,0deg)) scale(1.06)}
.ek-w2 .ek-ch{transform:rotate(var(--r,0deg))}
.ek-w2 .ek-ch:nth-child(1){color:#FF6A55}.ek-w2 .ek-ch:nth-child(2){color:#FFD04D}.ek-w2 .ek-ch:nth-child(3){color:#8BDB68}.ek-w2 .ek-ch:nth-child(4){color:#5CC6F2}
@keyframes ek-pop{0%{opacity:0;translate:0 46px;scale:.55;rotate:-14deg}60%{opacity:1;translate:0 -8px;scale:1.08;rotate:3deg}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
.ek-h3d .ek-h3d__tagline{font:700 clamp(34px,4.2vw,56px)/1.1 Caveat,"Fredoka",cursive;color:#fff;margin:6px 0 16px;animation:ek-rise .9s var(--ek-ease) .9s backwards}
.ek-h3d .ek-h3d__lead{font:500 clamp(16px,1.4vw,19px)/1.7 var(--ek-font-body);color:rgba(255,255,255,.9);max-width:500px;margin:0 0 24px;animation:ek-rise .9s var(--ek-ease) 1.05s backwards}
.ek-h3d__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;animation:ek-rise .9s var(--ek-ease) 1.2s backwards}
.ek-h3d .ek-h3d__badge{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ek-ink)!important;font:600 17px/1.2 var(--ek-font-head);padding:13px 22px;border-radius:999px;position:relative;overflow:hidden;text-decoration:none!important;cursor:pointer;box-shadow:0 12px 30px -12px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.9);transition:transform .22s var(--ek-ease),box-shadow .22s}
.ek-h3d .ek-h3d__badge:hover{transform:translateY(-3px);box-shadow:0 16px 34px -10px rgba(242,140,40,.7)}
.ek-h3d .ek-h3d__badge:focus-visible,.ek-h3d .ek-h3d__ghost:focus-visible{outline:3px solid var(--ek-yellow);outline-offset:3px}
.ek-h3d__badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(242,140,40,.32) 50%,transparent 70%);transform:translateX(-130%);animation:ek-sheen 4.8s ease-in-out 3.2s infinite;pointer-events:none}
@keyframes ek-sheen{0%{transform:translateX(-130%)}38%,100%{transform:translateX(130%)}}
.ek-h3d__dot{width:10px;height:10px;border-radius:50%;background:var(--ek-green);box-shadow:0 0 0 0 rgba(109,190,75,.6);animation:ek-pulse 2s infinite;flex:none}
@keyframes ek-pulse{70%{box-shadow:0 0 0 11px rgba(109,190,75,0)}100%{box-shadow:0 0 0 0 rgba(109,190,75,0)}}
.ek-h3d__go{flex:none;width:19px;height:19px;fill:none;stroke:var(--ek-orange);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}.ek-h3d__badge:hover .ek-h3d__go{transform:translateX(4px)}
.ek-h3d .ek-h3d__ghost{display:inline-block;color:#fff!important;font:600 17px/1.2 var(--ek-font-head);padding:12px 22px;border-radius:999px;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);text-decoration:none!important;cursor:pointer;transition:background .2s,transform .22s var(--ek-ease)}
.ek-h3d .ek-h3d__ghost:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}
.ek-h3d__cue{left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px var(--ek-font-head);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.88);transition:opacity .3s}
.ek-h3d__cue i{width:1px;height:44px;background:linear-gradient(var(--ek-orange),transparent);animation:ek-drip 2.2s ease-in-out infinite;transform-origin:top}
@keyframes ek-drip{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.ek-h3d__fade{left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,rgba(228,243,252,0),rgba(228,243,252,.92));pointer-events:none}
@media(prefers-reduced-motion:reduce){.ek-h3d__bg img{animation:none}.ek-ch,.ek-h3d__tagline,.ek-h3d__lead,.ek-h3d__actions{animation:none}.ek-h3d__badge::after,.ek-h3d__dot,.ek-h3d__cue i{animation:none}}

/* ---------- quick-action rail (right edge) ---------- */
.ek-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;border-radius:20px 0 0 20px;overflow:hidden;box-shadow:-10px 14px 34px rgba(31,42,68,.25);font-family:var(--ek-font-head)}
.ek-rail__item{width:72px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff!important;font:600 11px/1.2 var(--ek-font-head);text-align:center;text-decoration:none!important;cursor:pointer;transition:transform .22s var(--ek-ease),filter .2s}
.ek-rail__item:hover{transform:translateX(-8px);filter:brightness(1.1)}
.ek-rail__item:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.ek-rail__item--green{background:#3E9B2F}.ek-rail__item--navy{background:#1F2A44}.ek-rail__item--orange{background:#DD7510}.ek-rail__item--blue{background:#2487B3}.ek-rail__item--red{background:#D13A28}
@media(max-width:1024px){
  .ek-rail{left:0;right:0;top:auto;bottom:0;transform:none;flex-direction:row;border-radius:22px 22px 0 0;background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-top:1px solid rgba(255,255,255,.8);box-shadow:0 -8px 26px rgba(31,42,68,.14);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));overflow:visible}
  .ek-rail__item{flex:1 1 0;width:auto;min-width:0;background:transparent!important;color:var(--ek-ink)!important;padding:2px;gap:5px;font-size:11px;font-weight:600;text-shadow:0 0 6px rgba(255,255,255,.9)}
  .ek-rail__item:hover{transform:none;filter:none}.ek-rail__item:active{transform:scale(.94)}
  .ek-rail__item svg{width:42px;height:42px;padding:10px;border-radius:15px;color:#fff;box-shadow:0 6px 12px rgba(31,42,68,.22)}
  .ek-rail__item--green svg{background:#3E9B2F}.ek-rail__item--navy svg{background:#1F2A44}.ek-rail__item--orange svg{background:#DD7510}.ek-rail__item--blue svg{background:#2487B3}.ek-rail__item--red svg{background:#D13A28}
  body.ek-home{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .ek-hdr.ek-menu-open~.ek-rail{opacity:0;pointer-events:none}
}

/* ---------- photo band ---------- */
.ek-band{padding:40px 0 30px}
.ek-band__strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ek-band__track{display:flex;gap:16px;width:max-content;animation:ek-band 48s linear infinite}
.ek-band__strip:hover .ek-band__track{animation-play-state:paused}
.ek-band__item{margin:0;position:relative;flex:0 0 176px;width:176px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#dfeaf5;border:4px solid #fff;box-shadow:0 14px 30px rgba(31,42,68,.16);transition:transform .35s var(--ek-ease),box-shadow .35s var(--ek-ease)}
.ek-band__item:nth-child(odd){transform:translateY(10px)}.ek-band__item:nth-child(even){transform:translateY(-6px)}
.ek-band__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ek-ease)}
.ek-band__item:hover{transform:translateY(-14px) scale(1.05);box-shadow:0 24px 40px rgba(31,42,68,.26);z-index:2}.ek-band__item:hover img{transform:scale(1.07)}
@keyframes ek-band{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
@media(prefers-reduced-motion:reduce){.ek-band__track{animation:none}}
@media(max-width:560px){.ek-band__item{flex-basis:132px;width:132px;border-radius:18px}.ek-band__track{animation-duration:38s}}
.ek-ribbon{margin-top:10px!important}

/* ---------- phone + portrait tablet: scene block on top of the text, photo behind everything ---------- */
@media(max-width:767px),(max-width:1024px) and (orientation:portrait){
  .ek-h3d{display:block;min-height:0;padding:96px 0 90px}
  .ek-hero__stage{position:relative;inset:auto;height:min(76vw,360px);margin:0 0 6px}
  .ek-h3d__copy{max-width:none}
  .ek-h3d .ek-h3d__name{font-size:clamp(54px,17vw,96px)}
  .ek-h3d__overlay{background:linear-gradient(180deg,rgba(15,25,55,.55) 0%,rgba(20,34,72,.78) 55%,rgba(15,25,55,.9) 100%)}
  .ek-h3d__cue{display:none}
}

/* big screens (1500px and up): keep the laptop composition. The page container grows with the screen (small side gaps, like the laptop) instead of staying a fixed 1240 px column with big empty gaps left and right; the hero toy cluster keeps its original place against the right edge. */
@media(min-width:1500px){
  .ek-wrap,.ek-h3d__wrap,.ek-hero__inner,.ek-ftr__inner{max-width:min(1760px,calc(100vw - 70px))}
  html body .ek-hdr .ek-hdr__bar{max-width:min(1780px,calc(100vw - 60px))}
  .ek-ribbon__card{max-width:min(1320px,calc(100vw - 200px))}
}

/* like Medchal: after scrolling past the hero the 3D layer is dimmed to 28% (eased); inner pages keep their earlier 45% */
html.ek-3d-on.ek-soft #ek-world{opacity:.28;transition:opacity .8s ease}
html.ek-3d-on.ek-soft body.ek-inner #ek-world{opacity:.45}
