/* ==========================================================================
   Option C motion for internal pages — companion to hero-c.
   Banner: the title streams in like an AI reply (same rhythm as the home
   headline), its rule draws in and glints, a pulse of light runs along the
   signal curve, the photo drifts very slowly. Service heroes get the same
   orbit arc as the home photo. Closing bands get the travelling pulse.
   Loaded only on pages that carry <meta name="azha-motion" content="c">.
   ========================================================================== */

/* Signal curve drawn as live SVG so light can travel along it */
.cv{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none;overflow:visible}
.banner .cv{height:70%;z-index:-1}
.close .cv{height:60%;z-index:0}
.banner.has-cv::after,.close.has-cv::before{background:none}
.cv-line{fill:none;stroke:#8BB9E8;stroke-width:1.4;opacity:.5}
.cv-pulse,.cv-glow{fill:none;stroke-linecap:round;stroke-dasharray:70 1000;stroke-dashoffset:70;
  animation:comet 7s cubic-bezier(.45,0,.25,1) 1.4s infinite}
.cv-pulse{stroke:#D6E8FB;stroke-width:2.4}
.cv-glow{stroke:#8BB9E8;stroke-width:9;opacity:.35}
.close .cv-pulse,.close .cv-glow{animation-duration:9s;animation-delay:3s}
@keyframes comet{0%{stroke-dashoffset:70}50%,100%{stroke-dashoffset:-1000}}
[dir=rtl] .cv-pulse,[dir=rtl] .cv-glow{animation-direction:reverse}

/* Photo behind the banner drifts, barely */
.banner-photo{animation:drift-photo 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes drift-photo{from{transform:scale(1)}to{transform:scale(1.07) translateX(-1.2%)}}

/* Title streams in; the cursor takes no space so the centred title never shifts */
.banner .crumb{animation:fadein .6s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.banner .tk{opacity:0;filter:blur(6px);transition:opacity .35s ease,filter .35s ease}
.banner .tk.in{opacity:1;filter:none}
.banner .cur{display:inline-block;width:.42em;height:.85em;margin-inline-end:-.42em;vertical-align:-.06em;background:var(--baby);border-radius:2px;animation:blink 1s steps(1) infinite}
.banner .cur.out{transition:opacity .5s;opacity:0;animation:none}

/* The rule under the title draws in, then a glint passes along it */
.banner.streaming .banner-t::after{width:0;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.banner.typed .banner-t::after{width:72px;
  background:linear-gradient(90deg,var(--baby) 0 35%,#fff 50%,var(--baby) 65% 100%);background-size:300% 100%;
  animation:glint 5s ease-in-out 1s infinite}
@keyframes glint{0%{background-position:100% 0}40%,100%{background-position:0 0}}

/* Service heroes: the same orbit arc as the home photo, tuned for the light background */
.hero .hero-art{isolation:isolate}
.hero .halo{position:absolute;inset:4%;z-index:-1;border-radius:50%;pointer-events:none;box-shadow:0 0 60px 12px rgba(139,185,232,.35)}
.hero .track{position:absolute;inset:-5%;z-index:3;border-radius:50%;pointer-events:none;border:1px solid rgba(16,31,80,.1)}
.hero .arc{position:absolute;inset:-5%;z-index:3;border-radius:50%;pointer-events:none;animation:spin 18s linear infinite}
.hero .arc::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 64%,rgba(74,109,167,.15) 74%,rgba(74,109,167,.9) 99.6%,transparent 99.7%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
.hero .arc::after{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(139,185,232,.35),0 0 14px 3px rgba(139,185,232,.8)}
[dir=rtl] .hero .arc{animation-direction:reverse}
[dir=rtl] .hero .arc::before{transform:scaleX(-1)}
.hero .orb-img{animation:zoomin 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes zoomin{from{transform:scale(1.18);filter:saturate(.4) brightness(.8)}to{transform:scale(1);filter:none}}
/* hero text rises in, line after line */
.hero-txt>*{animation:fadein .7s cubic-bezier(.2,.7,.2,1) both}
.hero-txt>:nth-child(2){animation-delay:.12s}.hero-txt>:nth-child(3){animation-delay:.24s}
.hero-txt>:nth-child(4){animation-delay:.36s}.hero-txt>:nth-child(5){animation-delay:.48s}

@media (prefers-reduced-motion:reduce){
  .cv-pulse,.cv-glow{display:none}
  .banner-photo,.banner .crumb,.banner .cur,.banner.typed .banner-t::after,.hero .arc,.hero .orb-img,.hero-txt>*{animation:none!important}
  .banner .tk{opacity:1;filter:none}
}