/* ===== Motion ===== */
a:hover{opacity:1}
.btn{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background-color .25s ease,color .25s ease}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:none;pointer-events:none}
.btn:active{transform:translateY(0) scale(.97)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:3px;background:var(--blue);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav a.on::after{transform:scaleX(1)}
.nav a.cta::after{display:none}
.site-header{transition:box-shadow .3s ease,background-color .3s ease}
.site-header.scrolled{box-shadow:0 4px 22px rgba(18,48,107,.16)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:linear-gradient(90deg,var(--blue),var(--yellow));transform:scaleX(0);transform-origin:left;pointer-events:none}
.mbar a{transition:transform .15s ease}
.mbar a:active{transform:scale(.96)}
.card,.course,.why>div,.core>div,.info,.memo,.step i,.reserve-in,.banner{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.card>img,.blog-card img,.card .ph{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.photo{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.core svg,.why svg{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.hero-box{background-size:180% 180%;animation:heroshift 18s ease-in-out infinite}
.hero-photo{box-shadow:0 18px 40px rgba(18,48,107,.18);animation:float 7s ease-in-out infinite}

@media (hover:hover){
  .btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(18,48,107,.22)}
  .btn:hover::after{left:130%;transition:left .7s ease}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a:hover{color:var(--navy)}
  .nav a.cta:hover{color:#fff}
  .card:hover,.course:hover,.why>div:hover,.info:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(18,48,107,.16)}
  .memo:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(18,48,107,.16)}
  .core>div:hover{transform:translateY(-3px)}
  .core>div:hover svg,.why>div:hover svg{transform:scale(1.15) rotate(-5deg)}
  .step:hover i{transform:translateY(-6px) scale(1.06);box-shadow:0 12px 24px rgba(47,111,228,.25)}
  .card:hover>img,.blog-card:hover img,.card:hover .ph{transform:scale(1.07)}
  .photo:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 18px 38px rgba(18,48,107,.22)}
  .hero-photo:hover{animation-play-state:paused}
  .logo{transition:transform .25s ease}
  .logo:hover{transform:translateY(-1px) scale(1.02)}
  .footer-links a,.footer-legal a{transition:color .2s ease,transform .2s ease}
  .footer-links a:hover,.footer-legal a:hover{color:#fff;transform:translateX(3px)}
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes heroshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes pop{from{opacity:0;scale:.96}to{opacity:1;scale:1}}

.js .hero-txt>*{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*.1s + .1s)}
.hero-txt>*:nth-child(1){--i:0}.hero-txt>*:nth-child(2){--i:1}.hero-txt>*:nth-child(3){--i:2}.hero-txt>*:nth-child(4){--i:3}.hero-txt>*:nth-child(5){--i:4}
.js .hero-img{opacity:0;animation:pop .9s cubic-bezier(.2,.7,.2,1) .35s forwards}

.js .reveal{opacity:0;translate:0 26px;transition:opacity .75s ease var(--d,0s),translate .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.js .reveal.in{opacity:1;translate:0 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .hero-txt>*,.js .hero-img{opacity:1!important;translate:none!important}
  .progress{display:none}
}