/* ==========================================================================
   AZHA motion layer — "intelligence in motion".
   Calm, purposeful, brand-coloured. Everything here switches off for visitors
   who ask their system for reduced motion.
   ========================================================================== */

/* Scroll progress line under the header */
.scroll-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none;background:transparent}
.scroll-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--baby))}
[dir=rtl] .scroll-progress i{transform-origin:right}

/* Neural network canvas in the hero and page banners */
.net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.hslider>.wrap,.banner-in{position:relative;z-index:1}
.banner .net{z-index:-1;opacity:.75}

/* Signal lines flow like data */
.signal path{stroke-dasharray:6 10;animation:flow 6s linear infinite}
.banner::after,.close::before{animation:drift 14s ease-in-out infinite alternate}
@keyframes flow{to{stroke-dashoffset:-160}}
@keyframes drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}

/* The photo circle: a slow orbit with two "satellite" nodes */
.orbit{position:absolute;inset:-5%;border-radius:50%;border:1px dashed rgba(139,185,232,.45);animation:spin 40s linear infinite;pointer-events:none;z-index:3}
.orbit::before,.orbit::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--baby);box-shadow:0 0 0 6px rgba(139,185,232,.18)}
.orbit::before{top:-6px;left:calc(50% - 6px)}
.orbit::after{bottom:14%;right:3%;width:8px;height:8px;background:var(--accent);box-shadow:0 0 0 5px rgba(74,109,167,.18)}
.orb .ring{animation:spin 60s linear infinite reverse}
.orb-img{animation:breathe 14s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.06)}}
.pill-stat{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Headlines arrive word by word */
.w{display:inline-block;white-space:pre}
.js .words .w{opacity:0;transform:translateY(.45em);filter:blur(4px)}
.js .words.go .w{animation:wordUp .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes wordUp{to{opacity:1;transform:none;filter:none}}

/* Typewriter: AI that works for … */
.rotator{margin-top:18px;font:600 17px var(--f-body);color:var(--baby);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.rotator .rot{color:#fff;border-bottom:2px solid var(--baby);min-width:1ch}
.rotator .caret{display:inline-block;width:2px;height:1.1em;background:var(--baby);margin-inline-start:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Scroll reveals, staggered */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal .tog{width:0;transition:width .6s ease .2s}
.js .reveal.in .tog{width:32px}

/* Partner marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .logos{display:flex;gap:16px;width:max-content;animation:marquee 32s linear infinite}
.marquee .logo-slot{width:180px;flex:none}
.marquee:hover .logos{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
[dir=rtl] .marquee .logos{animation-name:marquee-rtl}
@keyframes marquee-rtl{to{transform:translateX(50%)}}

/* Cards: light sweeps across on hover, like a scan */
.hub-card,.ck-t,.card,.course,.icard,.tier{position:relative;overflow:hidden}
.hub-card::after,.ck-t::after,.card::after,.course::after,.icard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(139,185,232,.22) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s ease}
.hub-card:hover::after,.ck-t:hover::after,.card:hover::after,.course:hover::after,.icard:hover::after{transform:translateX(120%)}
.card,.icard,.vcard{transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.card:hover,.icard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--navy)}

/* Buttons: the arrow nudges, a soft shine passes */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.btn:hover::after{left:120%}
.btn .bi{transition:transform .2s}
.btn:hover .bi{transform:translateX(4px)}
[dir=rtl] .btn:hover .bi{transform:translateX(-4px)}

/* Journey bar: the active step pulses once to say "you are here" */
.jstep.on .jn{animation:ping 2.4s ease-out 1s 2}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(139,185,232,.7)}100%{box-shadow:0 0 0 14px rgba(139,185,232,0)}}

/* Icons in cards draw a gentle "think" bounce when revealed */
.reveal.in .icon svg{animation:pop .6s ease .25s both}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* Count-up numbers use tabular figures so they don't jiggle */
.stat b,.ps-n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .signal path,.banner::after,.close::before,.orbit,.orb .ring,.orb-img,.pill-stat,.marquee .logos,.rotator .caret,.jstep.on .jn{animation:none!important}
  .js .words .w,.js .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .scroll-progress{display:none}
}

/* Timelines (.steps): when the section scrolls into view a solid line draws along the dashed path,
   each step box fills as the line reaches it, then a soft signal keeps travelling the whole path. */
.steps.tl li::after{content:"";position:absolute;top:21px;left:44px;right:-28px;height:3px;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;pointer-events:none}
[dir=rtl] .steps.tl li::after{left:-28px;right:44px;transform-origin:right}
.steps.tl li:last-child::after{display:none}
.steps.tl .sn{transition:none}
.steps.tl:not(.run) li:first-child .sn{background:var(--white);color:var(--teal)}
.steps.run li::after{animation:tlDraw .55s cubic-bezier(.5,0,.3,1) forwards;animation-delay:calc(var(--i) * .6s + .35s)}
.steps.run .sn{animation:tlFill .45s ease forwards;animation-delay:calc(var(--i) * .6s + .2s)}
.steps.run li:first-child .sn{animation-delay:.1s}
@keyframes tlDraw{to{transform:scaleX(1)}}
@keyframes tlFill{0%{background:var(--white);color:var(--teal);box-shadow:0 0 0 0 rgba(29,122,117,.45)}
  60%{scale:1.12;box-shadow:0 0 0 10px rgba(29,122,117,0)}
  100%{background:var(--teal);color:#fff;scale:1}}
.steps .tl-dot{position:absolute;top:16px;left:var(--x0,22px);width:13px;height:13px;margin-left:-6.5px;border-radius:50%;pointer-events:none;opacity:0;z-index:1;
  background:#fff;box-shadow:0 0 0 3px var(--teal),0 0 14px 4px rgba(29,122,117,.45)}
.steps.run .tl-dot{animation:tlRun 4.2s cubic-bezier(.45,0,.25,1) infinite;animation-delay:var(--dd,3s)}
@keyframes tlRun{0%{opacity:0;transform:translateX(0)}8%{opacity:1}62%{opacity:1;transform:translateX(var(--len,0px))}72%,100%{opacity:0;transform:translateX(var(--len,0px))}}
.steps{position:relative}
@media (max-width:900px){.steps.tl li::after,.steps .tl-dot{display:none}}
@media (prefers-reduced-motion:reduce){
  .steps.tl li::after,.steps .tl-dot{display:none}
  .steps.tl .sn{animation:none!important}
  .steps.tl:not(.run) li:first-child .sn,.steps.tl li:first-child .sn{background:var(--teal);color:#fff}
}

/* Hover / keyboard focus on step numbers.
   Journey bar: the box fills navy, turns and pops, a ring ripples out, the label nudges forward,
   and the connector to the next step lights up. Timeline numbers: the box flips to teal and lifts. */
.jn{position:relative;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.jn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--accent);opacity:0;pointer-events:none}
.jstep b,.jstep small{transition:transform .3s ease,color .2s ease}
.jline{position:relative;overflow:hidden}
.jline::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
[dir=rtl] .jline::after{transform-origin:right}
.jstep:not(.on):hover .jn,.jstep:not(.on):focus-visible .jn{background:var(--navy);color:#fff;border-color:var(--navy);transform:rotate(-8deg) scale(1.15)}
.jstep:hover .jn::after,.jstep:focus-visible .jn::after{animation:jnRipple .7s ease-out}
.jstep.on:hover .jn{transform:scale(1.15)}
.jstep:hover b,.jstep:focus-visible b{transform:translateX(3px)}
[dir=rtl] .jstep:hover b,[dir=rtl] .jstep:focus-visible b{transform:translateX(-3px)}
.jstep:hover+.jline::after,.jstep:focus-visible+.jline::after{transform:scaleX(1)}
@keyframes jnRipple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

.steps .sn{transition:background-color .25s ease,color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.steps li:hover .sn{transform:translateY(-4px) rotate(-6deg);box-shadow:0 10px 22px -8px rgba(29,122,117,.55)}
.steps li:not(:first-child):hover .sn{background:var(--teal);color:#fff}
.steps li h3{transition:color .2s ease}
.steps li:hover h3{color:var(--teal)}

@media (hover:none){.jstep:hover .jn,.steps li:hover .sn{transform:none}}
@media (prefers-reduced-motion:reduce){
  .jn,.steps .sn,.jline::after,.jstep b{transition:none!important}
  .jstep:hover .jn,.steps li:hover .sn,.jstep:hover b{transform:none!important}
  .jstep:hover .jn::after{animation:none!important}
}