/* Rana Capital Advisory — motion layer
   Everything here is decorative: with JavaScript off or "reduce motion" on,
   the site shows all content immediately. */

/* ---------- Keyframes ---------- */
@keyframes kenburns{from{scale:1}to{scale:1.12}}
@keyframes heroIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes heroInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes lineGrow{from{width:0}to{width:28px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatRot{from{transform:rotate(0) translateX(0)}50%{transform:rotate(180deg) translateX(14px)}to{transform:rotate(360deg) translateX(0)}}
@keyframes dotsMove{to{background-position:44px 44px}}
@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(13,71,181,.55)}100%{box-shadow:0 0 0 16px rgba(13,71,181,0)}}
@keyframes shine{from{left:-80%}to{left:130%}}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:none}}
@keyframes megaItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes progress{from{width:0}to{width:100%}}

/* ---------- Hero ---------- */
.hero:before{animation:kenburns 24s ease-out infinite alternate;translate:0 var(--py,0)}
.js .hero:not(.hero-slider) .content>*{opacity:0}
.loaded .hero:not(.hero-slider) .content>*{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.loaded .hero .content>*:nth-child(1){animation-delay:.1s}
.loaded .hero .content>*:nth-child(2){animation-delay:.25s}
.loaded .hero .content>*:nth-child(3){animation-delay:.4s}
.loaded .hero .content>*:nth-child(4){animation-delay:.55s}
.loaded .hero .content>*:nth-child(5){animation-delay:.7s}
.js .hero .ey:before{width:0}
.loaded .hero .ey:before{animation:lineGrow .8s .5s ease forwards}
/* gold underline that draws under highlighted words */
h1 em,.h1 em{background:linear-gradient(var(--gold-2),var(--gold-2)) 0 94%/0 4px no-repeat;padding-bottom:2px}
.loaded .hero h1 em{transition:background-size 1s 1.1s ease;background-size:100% 4px}

/* Home slider */
.slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide-bg{position:absolute;inset:0;background:var(--hero-img,none) center/cover no-repeat;opacity:0;transition:opacity 1.2s ease;translate:0 var(--py,0)}
.slide-bg.is-active{opacity:1;animation:kenburns 9s ease-out forwards}
.slide-texts{display:grid}
.slide-text{grid-area:1/1;visibility:hidden}
.slide-text.is-active{visibility:visible}
.slide-text>*{opacity:0}
.no-js .slide-text.is-active>*,.slide-text.is-active.show>*{animation:heroInLeft .9s cubic-bezier(.2,.7,.2,1) forwards}
.slide-text.is-active.show>*:nth-child(2){animation-name:heroIn;animation-delay:.18s}
.slide-text.is-active.show>*:nth-child(3){animation-name:heroIn;animation-delay:.36s}
.slide-text.is-active.show>*:nth-child(4){animation-name:heroIn;animation-delay:.54s}
.slide-text.show .ey:before{animation:lineGrow .8s .3s ease forwards}
.slide-text.show em{transition:background-size 1s .8s ease;background-size:100% 4px}
html:not(.js) .slide-text:first-child{visibility:visible}
html:not(.js) .slide-text:first-child>*{opacity:1}
.hero-badge{opacity:0}
.loaded .hero-badge{animation:heroIn 1s .8s cubic-bezier(.2,.7,.2,1) forwards,floatY 6s 2s ease-in-out infinite}
html:not(.js) .hero-badge{opacity:1}
.slider-nav{position:absolute;z-index:3;left:50%;bottom:90px;transform:translateX(-50%);width:min(1180px,92%);display:flex;align-items:center;justify-content:flex-end;gap:14px}
.slider-nav>button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.04);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .3s,border-color .3s}
.slider-nav>button:hover{background:var(--gold);border-color:var(--gold)}
.sl-dots{display:flex;gap:8px}
.sl-dots button{width:30px;height:4px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;position:relative;overflow:hidden}
.sl-dots button.is-active:after{content:"";position:absolute;inset:0 auto 0 0;background:var(--gold);animation:progress 7s linear forwards}
.hero-slider.paused .sl-dots button.is-active:after{animation-play-state:paused}

/* ---------- Scroll reveal ---------- */
.js [data-anim]{opacity:0;transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.js [data-anim=up]{transform:translateY(46px)}
.js [data-anim=left]{transform:translateX(-60px)}
.js [data-anim=right]{transform:translateX(60px)}
.js [data-anim=zoom]{transform:scale(.88)}
.js [data-anim=flip]{transform:perspective(900px) rotateX(-25deg) translateY(30px);transform-origin:top}
.js [data-anim].in{opacity:1;transform:none}
.js .ey[data-anim]:before{width:0;transition:width .8s calc(var(--d,0s) + .35s) ease}
.js .ey[data-anim].in:before{width:28px}
/* image reveal: a navy curtain slides away */
.js .visual[data-anim],.js .image-card[data-anim]{opacity:1;transform:none}
.js .visual[data-anim]:after,.js .image-card[data-anim]:after{content:"";position:absolute;inset:0;background:var(--navy);z-index:3;transform-origin:right;transition:transform 1.1s cubic-bezier(.77,0,.18,1) var(--d,0s);border-radius:inherit}
.js .visual[data-anim].in:after,.js .image-card[data-anim].in:after{transform:scaleX(0)}
.js .visual[data-anim]:before,.js .image-card[data-anim] .img-clip:before{scale:1.25;transition:scale 1.6s cubic-bezier(.2,.65,.3,1) var(--d,0s),transform 1.2s ease}
.js .visual[data-anim].in:before,.js .image-card[data-anim].in .img-clip:before{scale:1}

/* ---------- Header ---------- */
.site-header{transition:box-shadow .3s}
.site-header .nav{transition:padding .3s}
.site-header .logo img{transition:width .3s}
.site-header.scrolled{box-shadow:0 8px 30px rgba(17,21,27,.14)}
.site-header.scrolled .nav{padding:6px 0}
.site-header.scrolled .logo img{width:200px}
.site-header.scrolled.drop{animation:slideDown .45s ease}
.menu>li>a,.menu>li>button{position:relative}
.menu>li>a:after,.menu>li>button:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.menu>li>a:hover:after,.menu>li>button:hover:after,.menu a.active:after,.menu button.active:after{transform:scaleX(1);transform-origin:left}
.has-mega:hover .mega>div,.has-mega.open .mega>div{animation:megaItem .45s ease both}
.has-mega:hover .mega>div:nth-child(2),.has-mega.open .mega>div:nth-child(2){animation-delay:.05s}
.has-mega:hover .mega>div:nth-child(3),.has-mega.open .mega>div:nth-child(3){animation-delay:.1s}
.has-mega:hover .mega>div:nth-child(4),.has-mega.open .mega>div:nth-child(4){animation-delay:.15s}
.has-mega:hover .mega>div:nth-child(5),.has-mega.open .mega>div:nth-child(5){animation-delay:.2s}

/* ---------- Buttons: colour sweep + shine ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .4s,transform .25s,box-shadow .25s,border-color .4s}
.btn:before{content:"";position:absolute;inset:0;background:var(--navy);z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn:hover:before{transform:scaleX(1);transform-origin:left}
.btn:after{content:"";position:absolute;top:0;left:-80%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover:after{animation:shine .8s ease}
.btn.navy:before,.dark .btn:before,.cta .btn:before,.people .btn:before,.office .btn:before,.hero .btn:not(.ghost):before{background:#fff}
.btn.navy:hover,.dark .btn:hover,.cta .btn:hover,.hero .btn:not(.ghost):hover{color:var(--navy)}
.btn.ghost:before{background:var(--gold)}
.btn.ghost:hover{border-color:var(--gold)}

/* ---------- Cards & hovers ---------- */
.card,.svc,.benefit,.contactcard,.mini-card,.child,.step,.check,.focus,.aud,.info-card{position:relative;transition:transform .4s cubic-bezier(.2,.65,.3,1),box-shadow .4s,border-color .4s,background .4s}
.card:after,.svc:after,.benefit:after,.contactcard:after,.mini-card:after,.child:after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:linear-gradient(90deg,var(--gold),var(--navy));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.card:hover:after,.svc:hover:after,.benefit:hover:after,.contactcard:hover:after,.mini-card:hover:after,.child:hover:after{transform:scaleX(1)}
.card:hover,.svc:hover,.benefit:hover,.contactcard:hover,.mini-card:hover{transform:translateY(-8px);box-shadow:0 22px 45px rgba(17,21,27,.12);border-color:#c5d4f3}
.child:hover{background:#f3f6fd}
.ico,.parenticon,.num{transition:transform .7s cubic-bezier(.2,.65,.3,1),background .4s,color .4s}
.card:hover .ico,.benefit:hover .ico,.contactcard:hover .ico,.mini-row .service-card:hover .ico,.parent:hover .parenticon{transform:rotateY(360deg);background:var(--gold);color:#fff}
.step:hover{transform:translateY(-8px);box-shadow:0 22px 45px rgba(0,0,0,.18)}
.step:hover .num{transform:rotate(360deg) scale(1.08);animation:ripple 1.2s ease-out infinite}
.check:hover{border-color:var(--gold);transform:translateX(6px)}
.focus:hover{background:rgba(255,255,255,.12);transform:translateY(-6px);border-color:rgba(13,71,181,.5)}
.aud:hover{background:rgba(13,71,181,.12);border-color:rgba(13,71,181,.45);transform:translateY(-6px)}
.aud i{transition:transform .6s}
.aud:hover i{transform:rotateY(360deg) scale(1.15)}
.info-card:hover{transform:translateX(-10px)}
.service-card{transition:transform .45s cubic-bezier(.2,.65,.3,1),box-shadow .45s}
.service-card:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(17,21,27,.2)}
.service-card .thumb-img:before,.thumb:before,.visual:before,.image-card .img-clip:before{transition:transform 1.2s cubic-bezier(.2,.65,.3,1)}
.service-card:hover .thumb-img:before,.article:hover .thumb:before,.visual:hover:before,.image-card:hover .img-clip:before{transform:scale(1.1)}
.link{display:inline-flex;gap:4px;transition:gap .3s,color .3s}
.link:hover{gap:10px;text-decoration:none}
.article h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s,color .3s}
.article:hover h3 a{background-size:100% 1px;color:var(--gold-ink)}
.parent{transition:box-shadow .4s}
.parent:hover{box-shadow:0 22px 50px rgba(17,21,27,.1)}
.contactcard .ico,.ci{position:relative}
.contactcard:hover .ico{animation:ripple 1.2s ease-out infinite}
.side li a{transition:color .3s,padding .3s}
.side li a:hover{padding-left:6px}
.role{transition:background .3s,border-color .3s,transform .3s}
.role:hover{transform:translateY(-3px)}
.tab{transition:background .3s,color .3s,border-color .3s,transform .3s}
.tab:hover{transform:translateY(-3px)}
.service-feature[role=tabpanel]:not([hidden]){animation:heroIn .6s cubic-bezier(.2,.7,.2,1)}
.filter{transition:background .3s,color .3s,border-color .3s}
.footer-logo{transition:transform .4s}
.footer-logo:hover{transform:translateY(-4px)}
.fg li a{transition:color .3s,padding .3s}
.fg li a:hover{padding-left:6px}

/* ---------- Decorative moving shapes ---------- */
.dark,.stats,.audience,.cta,.office,.people{position:relative;overflow:hidden}
.dark>.container,.stats>.container,.audience>.container,.cta>.container,.people>.container{position:relative;z-index:1}
.dark:before,.cta:before,.audience:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;border:2px dashed rgba(13,71,181,.22);right:-90px;top:-110px;animation:floatRot 30s linear infinite}
.dark:after,.stats:after{content:"";position:absolute;width:220px;height:220px;left:-40px;bottom:-60px;background-image:radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.6px);background-size:22px 22px;animation:dotsMove 6s linear infinite;opacity:.8}
.audience:after{content:"";position:absolute;width:120px;height:120px;left:6%;bottom:-40px;border-radius:50%;background:radial-gradient(circle,rgba(91,141,239,.22),transparent 70%);animation:floatY 7s ease-in-out infinite}
.section.alt{position:relative;overflow:clip}
.section.alt:before{content:"";position:absolute;width:180px;height:180px;right:3%;top:40px;background-image:radial-gradient(rgba(13,71,181,.28) 1.5px,transparent 1.6px);background-size:18px 18px;animation:floatY 8s ease-in-out infinite;pointer-events:none}
.section.alt>.container{position:relative;z-index:1}

/* ---------- FAQ smooth open ---------- */
.faq{overflow:hidden}
.faq summary:after{transition:transform .35s}
.faq[open] summary:after{transform:rotate(180deg)}

/* ---------- Back to top with scroll progress ---------- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:50px;height:50px;border-radius:50%;border:0;background:#fff;box-shadow:0 10px 26px rgba(17,21,27,.22);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .35s,transform .35s,visibility .35s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top svg{position:absolute;inset:0;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke-width:3}
.to-top .track{stroke:#eef1f5}
.to-top .bar{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.to-top span{color:var(--navy);font-size:20px;font-weight:800;line-height:1;transition:transform .3s}
.to-top:hover span{transform:translateY(-4px)}

/* ---------- Modal ---------- */
.modal.show{animation:fadeIn .35s ease}
.modal.show .modal-box{animation:heroIn .5s .1s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Stats ---------- */
.stat strong{font-variant-numeric:tabular-nums}

@media(max-width:980px){
  .slider-nav{bottom:40px;justify-content:flex-start}
  .dark:before,.cta:before,.audience:before{width:220px;height:220px}
  .js [data-anim=left],.js [data-anim=right]{transform:translateY(40px)}
}
@media(max-width:620px){
  .slider-nav{bottom:28px}
  .hero-home .content{padding-bottom:110px}
  .to-top{right:14px;bottom:14px;width:46px;height:46px}
  .section.alt:before{display:none}
}

/* Respect users who ask for less motion */
@media(prefers-reduced-motion:reduce){
  .hero:before,.slide-bg.is-active{animation:none}
  .js [data-anim]{opacity:1 !important;transform:none !important;transition:none}
  .js .visual[data-anim]:after,.js .image-card[data-anim]:after{display:none}
  .js .hero .content>*,.slide-text.is-active>*,.hero-badge{opacity:1 !important;animation:none !important}
  .dark:before,.dark:after,.stats:after,.cta:before,.audience:before,.audience:after,.section.alt:before{animation:none}
}

/* ---------- Logo-blue accent band (call-to-action strip) ---------- */
.cta{background:linear-gradient(100deg,#0d47b5,#0a3585)}
.cta .ctain p{color:#dbe5fb}
.cta .btn{background:#fff;color:#0d47b5;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.cta .btn:before{background:var(--navy)}
.cta .btn:hover{color:#fff}
.cta:before{border-color:rgba(255,255,255,.22)}