/* Ebankome v1 — motion layer (no content/layout changes) */
@keyframes ebk-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ebk-fade{from{opacity:0}to{opacity:1}}
@keyframes ebk-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes ebk-clip{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ebk-mask{from{transform:translateY(105%)}to{transform:none}}
@keyframes ebk-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes ebk-pan{from{transform:scale(1.08) translateX(0)}to{transform:scale(1.08) translateX(-3%)}}
@keyframes ebk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ebk-shine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes ebk-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes ebk-pulse{0%{r:4;opacity:1}70%{r:14;opacity:0}100%{r:14;opacity:0}}
@keyframes ebk-dash{to{stroke-dashoffset:0}}
@keyframes ebk-spin{to{transform:rotate(360deg)}}
@keyframes ebk-line{from{width:0}to{width:40px}}

@media (prefers-reduced-motion:no-preference){
  /* Header: entrance + compact on scroll */
  .js-anim .topbar{animation:ebk-fade .6s ease both}
  .js-anim .header{animation:ebk-fade .6s .1s ease both;transition:box-shadow .3s ease}
  .js-anim .header .wrap{transition:min-height .3s ease}
  .header.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(2,45,115,.06)}
  .header.is-scrolled .wrap{min-height:70px}
  .nav>ul>li>a{transition:border-color .25s ease,color .25s ease}
  .sub{transform-origin:top;animation:none}
  .nav li:hover>.sub,.nav li:focus-within>.sub{animation:ebk-up .25s ease both}

  /* Generic reveal */
  .rv{opacity:0}
  .rv.in{animation:ebk-up .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  .rv-l{opacity:0}
  .rv-l.in{animation:ebk-left .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}

  /* Eyebrow gold line draws in */
  .js-anim .eyebrow::before{width:0}
  .eyebrow.in::before,.in .eyebrow::before{animation:ebk-line .7s .2s cubic-bezier(.2,.7,.2,1) forwards}

  /* Hero image curtain + corner */
  .js-anim .hero .media.in img{animation:ebk-clip 1.2s .15s cubic-bezier(.7,0,.2,1) both}
  .js-anim .hero .media::after{opacity:0;transition:opacity .6s 1.1s ease,transform .6s 1.1s ease;transform:translate(10px,-10px)}
  .hero .media.in::after{opacity:1;transform:none}
  .js-anim .hero .media:not(.in) img{clip-path:inset(0 0 0 100%)}
  .hero .media img{transition:transform 1.2s ease}
  .hero .media:hover img{transform:scale(1.02)}

  /* Rules that draw */
  .js-anim .rule-top{border-top-color:transparent;position:relative}
  .rule-top::before{content:"";position:absolute;left:0;top:-3px;height:3px;width:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.7,0,.2,1)}
  .rule-top.in::before{transform:scaleX(1)}

  /* Service cards */
  .svc{position:relative;overflow:hidden}
  .svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
  .svc:hover::before{transform:scaleX(1)}
  .svc .ico{transition:background .25s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  .svc:hover .ico{transform:translateY(-4px)}

  /* Buttons */
  .btn{position:relative;overflow:hidden}
  .btn svg{transition:transform .25s ease}
  .btn:hover svg{transform:translateX(4px)}
  .btn-gold::after{content:"";position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:ebk-shine 4.5s 1.5s ease-in-out infinite;pointer-events:none}

  /* Projects globe */
  .worldwide svg g:first-child{transform-origin:450px 90px}
  .worldwide .pulse{fill:none;stroke:var(--gold);stroke-width:1.2;animation:ebk-pulse 2.4s ease-out infinite}
  .js-anim .worldwide svg g:last-child path{stroke-dasharray:400;stroke-dashoffset:400}
  .worldwide.in svg g:last-child path{animation:ebk-dash 2.2s .4s ease forwards}
  .js-anim .worldwide p{letter-spacing:.6em;opacity:0;transition:letter-spacing 1.4s cubic-bezier(.2,.7,.2,1),opacity 1.2s ease}
  .worldwide.in p{letter-spacing:.34em;opacity:1}

  /* Get Started gold rule grows */
  .js-anim .start .r{border-left-color:transparent;position:relative}
  .start .r::before{content:"";position:absolute;left:-3px;top:0;width:3px;height:100%;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .9s .2s cubic-bezier(.7,0,.2,1)}
  .start .r.in::before{transform:scaleY(1)}

  /* Join Our Hub */
  .joinhub .bg{animation:ebk-zoom 22s ease-in-out infinite alternate;transform-origin:70% 40%}
  .joinhub h2 .ln{display:block;clip-path:inset(-.1em -100vw 0 -20px)}
  .joinhub h2 .ln>span{display:block;transform:translateY(105%)}
  .joinhub h2.in .ln>span{animation:ebk-mask 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
  .js-anim .joinhub .kicker{border-bottom-color:transparent;position:relative}
  .joinhub .kicker::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1s .3s cubic-bezier(.7,0,.2,1)}
  .joinhub .kicker.in::after{transform:scaleX(1)}
  .features .ic{transition:background .3s ease,color .3s ease,transform .3s ease}
  .features li:hover .ic{background:var(--gold);color:var(--navy-950);transform:scale(1.06)}
  .joinhub .btn svg{animation:ebk-nudge 1.8s ease-in-out infinite}

  /* Partner */
  .js-anim .partner .side::after{transform:scaleY(0);transform-origin:top;transition:transform 1s .3s cubic-bezier(.7,0,.2,1)}
  .partner .panel.in .side::after{transform:scaleY(1)}
  .partner .side .mark{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .partner .panel:hover .side .mark{transform:rotate(-8deg) scale(1.05)}

  /* Hub section */
  .hub .bg{animation:ebk-pan 30s ease-in-out infinite alternate}
  .hubcard{animation:ebk-float 6s ease-in-out infinite;overflow:hidden}
  .hubcard:hover{animation-play-state:paused}
  .hubcard::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(211,176,102,.18),transparent);animation:ebk-shine 6s 1s ease-in-out infinite;pointer-events:none}
  .hub h4.hublink a svg{transition:transform .25s ease}
  .hub h4.hublink a:hover svg{transform:translateX(4px)}

  /* Profile doc icon */
  .profile .doc{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .profile .box:hover .doc{transform:translateY(-4px)}

  /* Footer social */
  .social a{transition:background .2s,color .2s,border-color .2s,transform .2s}
  .social a:hover{transform:translateY(-3px)}
}

/* ===== Motion for inner-page components ===== */
@keyframes ebk-kb{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes ebk-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .phero .bg{animation:ebk-kb 9s cubic-bezier(.2,.7,.2,1) both}
  .js-anim .phero .crumbs,.js-anim .phero .kick,.js-anim .phero h1,.js-anim .phero .psub,.js-anim .phero .intro,.js-anim .phero .actions,.js-anim .phero .side{opacity:0;animation:ebk-up .9s cubic-bezier(.2,.7,.2,1) forwards}
  .js-anim .phero .crumbs{animation-delay:.05s}
  .js-anim .phero .kick{animation-delay:.15s}
  .js-anim .phero h1{animation-delay:.25s}
  .js-anim .phero .psub{animation-delay:.35s}
  .js-anim .phero .intro{animation-delay:.45s}
  .js-anim .phero .actions{animation-delay:.55s}
  .js-anim .phero .side{animation-delay:.6s}
  .js-anim .phero{border-bottom-color:transparent}
  .phero::after{content:"";position:absolute;left:0;bottom:0;z-index:2;height:3px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:ebk-bar 1.2s .5s cubic-bezier(.7,0,.2,1) forwards}
  @keyframes ebk-bar{to{transform:scaleX(1)}}

  .js-anim .pic:not(.in) img{clip-path:inset(0 0 0 100%)}
  .js-anim .pic.in img{animation:ebk-clip 1.2s .1s cubic-bezier(.7,0,.2,1) both}
  .js-anim .pic::after{opacity:0;transform:translate(-10px,-10px);transition:opacity .6s 1s ease,transform .6s 1s ease}
  .js-anim .pic.l::after{transform:translate(10px,-10px)}
  .js-anim .pic.in::after{opacity:1;transform:none}
  .pic img{transition:transform 1.2s ease}
  .pic:hover img{transform:scale(1.02)}

  .acc details[open] .ans{animation:ebk-open .4s cubic-bezier(.2,.7,.2,1)}
  .band .bg{animation:ebk-zoom 24s ease-in-out infinite alternate}
  .js-anim .steps{border-top-color:transparent;position:relative}
  .steps::before{content:"";position:absolute;left:0;top:-3px;height:3px;width:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
  .steps.in::before{transform:scaleX(1)}
  .step .num{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .step:hover .num{transform:translateY(-4px)}
  .js-anim .statement em{background:linear-gradient(var(--gold),var(--gold)) left 92%/0 3px no-repeat;transition:background-size 1.2s .4s cubic-bezier(.7,0,.2,1)}
  .js-anim .statement.in em{background-size:100% 3px}
  .quote .mark{transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
  .js-anim .quote:not(.in) .mark{transform:translateY(20px);opacity:0}
  .cinfo .ci .ico{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .cinfo .ci:hover .ico{transform:translateY(-3px)}
  .flag img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .flag:hover img{transform:scale(1.1) rotate(-4deg)}
}