/* Home hero v5: a story slider of bright learner photos, words that rise with each slide, then the film. */
.hx{position:relative;isolation:isolate;overflow:hidden;max-width:100vw;color:#fff;background:#071d4f;min-height:clamp(560px,calc(100svh - 128px),780px);display:flex;flex-direction:column;justify-content:flex-end}
.hx-glow{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.hx-glow i{position:absolute;border-radius:50%;filter:blur(70px)}
.hx-glow i:first-child{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(21,97,214,.55),transparent 65%);animation:hxOrb 18s ease-in-out infinite alternate}
.hx-glow i:last-child{width:420px;height:420px;right:-120px;bottom:-140px;background:radial-gradient(circle,rgba(245,185,37,.35),transparent 65%);animation:hxOrb 22s ease-in-out infinite alternate-reverse}
@keyframes hxOrb{to{transform:translate(120px,60px) scale(1.15)}}

.hx-slide{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s 1.1s}
.hx-slide.on{opacity:1;visibility:visible;z-index:2;transition:opacity 1.1s ease,visibility 0s}
.hx-slide.out{visibility:visible}
.hx-bg{position:absolute;inset:0;overflow:hidden}
.hx-bg picture,.hx-bg img,.hx-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hx-bg picture img{position:static}
.hx-bg video{opacity:0;transition:opacity .9s ease}
.hx-bg video.playing{opacity:1}
.hx-bg>picture,.hx-bg>img{transform:scale(1.14) translate3d(-1.5%,0,0);transform-origin:60% 50%}
.hx-bg.rev>picture,.hx-bg.rev>img{transform:scale(1.14) translate3d(1.5%,0,0)}
.hx-slide.on .hx-bg>picture,.hx-slide.on .hx-bg>img{animation:hxKen var(--d,6s) linear forwards}
.hx-slide.on .hx-bg.rev>picture,.hx-slide.on .hx-bg.rev>img{animation-name:hxKenR}
@keyframes hxKen{from{transform:scale(1.14) translate3d(-1.5%,0,0)}to{transform:scale(1.02) translate3d(1.5%,-1%,0)}}
@keyframes hxKenR{from{transform:scale(1.02) translate3d(1.5%,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
.hx-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,29,79,.92) 0,rgba(7,29,79,.7) 38%,rgba(7,29,79,.15) 72%,rgba(7,29,79,0) 100%),
             linear-gradient(0deg,rgba(7,29,79,.85) 0,rgba(7,29,79,0) 45%)}

.hx-copy{position:absolute;left:0;right:0;box-sizing:border-box;bottom:206px;z-index:4;margin:0 auto}
.hx-copy>*{max-width:660px}
.hx-kick{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:700 .8rem/1.2 "Roboto Condensed",var(--d,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#f5b925}
.hx-kick span{display:block;width:34px;height:3px;border-radius:2px;background:#f5b925;transform-origin:left}
.hx .hx-title{margin:0 0 16px;max-width:700px;font:700 clamp(2rem,4.1vw,3.5rem)/1.06 "Roboto Condensed",sans-serif;letter-spacing:-.005em;color:#fff;text-wrap:balance}
.hx .hx-title.big{font-size:clamp(2.3rem,4.8vw,4.1rem)}
.hx .hx-title .w,.hx .hx-title .w>span{color:inherit}
.hx .hx-title em{font-style:normal;color:#f5b925}
.hx .hx-lead{margin:0;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.6;color:#dbe5f7;max-width:560px}

/* words rise in, and leave upwards (JS splits the title into .w) */
.hx.ready .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hx.ready .w>span{display:inline-block;transform:translate3d(0,108%,0);transition:transform .95s cubic-bezier(.2,.75,.15,1) calc(var(--i)*60ms + .25s)}
.hx.ready .hx-slide.on .w>span{transform:none}
.hx.ready .hx-slide.out .w>span{transform:translate3d(0,-108%,0);transition-duration:.6s;transition-delay:calc(var(--i)*25ms)}
.hx.ready .hx-kick,.hx.ready .hx-lead{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease .15s,transform .9s cubic-bezier(.2,.75,.15,1) .15s}
.hx.ready .hx-lead{transition-delay:.75s}
.hx.ready .hx-kick span{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.75,.15,1) .3s}
.hx.ready .hx-slide.on .hx-kick,.hx.ready .hx-slide.on .hx-lead{opacity:1;transform:none}
.hx.ready .hx-slide.on .hx-kick span{transform:none}
.hx.ready .hx-slide.out .hx-kick,.hx.ready .hx-slide.out .hx-lead{opacity:0;transform:translate3d(0,-10px,0);transition-delay:0s}

/* floating glass cards */
.hx-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;
  background:rgba(7,29,79,.5);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);font-size:.82rem;color:#eaf1ff;opacity:0;transform:translate3d(0,24px,0) scale(.92);
  transition:opacity .6s ease .9s,transform .9s cubic-bezier(.2,.9,.2,1.15) .9s}
.hx-chip b{display:block;font:700 1rem "Roboto Condensed",sans-serif;color:#fff;letter-spacing:.02em}
.hx-chip i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f5b925;color:#1b1300;flex:none}
.hx-chip i svg{width:20px;height:20px}
.hx-chip.c1 b{font-size:1.6rem;color:#f5b925}
.hx-slide.on .hx-chip{opacity:1;transform:none;animation:hxFloat 5s ease-in-out 1.8s infinite alternate}
@keyframes hxFloat{to{transform:translate3d(0,-10px,0)}}
.hx-chip.c1{right:9%;top:22%}.hx-chip.c2{right:12%;top:30%}.hx-chip.c3{right:8%;top:26%}.hx-chip.c4{right:10%;top:20%}

/* buttons, story segments, pause */
.hx-ui{position:relative;z-index:5;align-self:stretch;box-sizing:border-box;width:100%;max-width:var(--wrapw,1240px);margin-left:auto;margin-right:auto;padding-bottom:92px}
.hx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hx-cta .x-btn svg{width:18px;height:18px}
.hx-nav{display:flex;align-items:center;gap:14px;max-width:760px}
.hx-segs{flex:1;display:flex;gap:10px}
.hx-seg{flex:1;min-width:0;background:none;border:0;padding:8px 0 0;cursor:pointer;text-align:left;color:rgba(255,255,255,.62);font:600 .74rem "Poppins",sans-serif;letter-spacing:.04em}
.hx-seg i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;margin-bottom:8px}
.hx-seg i b{display:block;height:100%;width:0;background:#f5b925;border-radius:3px}
.hx-seg.done i b{width:100%}
.hx-seg.on{color:#fff}
.hx-seg.on i b{animation:hxFill var(--d,6s) linear forwards}
.hx.paused .hx-seg.on i b,.hx.paused .hx-slide.on .hx-bg>*{animation-play-state:paused}
@keyframes hxFill{to{width:100%}}
.hx-seg:focus-visible{outline:2px solid #f5b925;outline-offset:4px;border-radius:4px}
.hx-pause{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.hx-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.hx-pause .g{display:none;fill:currentColor;stroke:none}
.hx.paused .hx-pause .p{display:none}.hx.paused .hx-pause .g{display:block}
.hx .x-stripe{position:absolute;left:0;right:0;bottom:0;z-index:6}

@media (max-width:900px){
  .hx{min-height:max(700px,100svh)}
  .hx-slide::after{background:linear-gradient(0deg,rgba(7,29,79,.97) 0,rgba(7,29,79,.88) 48%,rgba(7,29,79,.25) 80%,rgba(7,29,79,.1) 100%)}
  .hx-copy{bottom:262px}
  .hx-chip{display:none}
  .hx .hx-title,.hx .hx-title.big{font-size:clamp(1.85rem,8.4vw,2.4rem)}
  .hx .hx-lead{font-size:.95rem}
  .hx-kick{font-size:.7rem;letter-spacing:.14em;margin-bottom:12px}
  .hx-ui{padding-bottom:84px}
  .hx-cta{gap:10px;margin-bottom:22px}
  .hx-cta .x-btn{flex:1 1 100%;width:100%;max-width:none;margin:0;justify-content:center}
  .hx-seg{font-size:0;padding-top:0}.hx-seg i{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .hx-glow,.hx-chip{animation:none!important}
  .hx-slide.on .hx-bg>*{animation:none!important}
  .hx.ready .w>span,.hx.ready .hx-kick,.hx.ready .hx-lead{transition:none!important}
}