/* =========================================================
   MobiFin — animations.css
   Reveal states, keyframes, GPU-friendly motion utilities
   ========================================================= */

/* ---------- 1. Page load ---------- */
body.is-loading .site-header,
body.is-loading .hero__inner{opacity:0}

.site-header{animation:headerIn .9s var(--ease-out) .1s both}
body.is-loading .site-header{animation:none}

@keyframes headerIn{
  from{opacity:0;transform:translate3d(0,-14px,0)}
  to{opacity:1;transform:none}
}

/* ---------- 2. Scroll reveal (IntersectionObserver driven) ---------- */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:
    opacity .95s var(--ease-out) var(--reveal-delay,0s),
    transform .95s var(--ease-out) var(--reveal-delay,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.eyebrow.reveal{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Hero headline: word-by-word mask reveal */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word > span{
  display:inline-block;
  transform:translate3d(0,110%,0) rotate(3deg);
  opacity:0;
  transition:transform 1.05s var(--ease-out) var(--w-delay,0s), opacity .7s ease var(--w-delay,0s);
  will-change:transform;
}
.is-ready .word > span{transform:none;opacity:1}

/* ---------- Institution-to-institution data paths ---------- */
@keyframes institutionFlow{to{stroke-dashoffset:-1}}

/* ---------- Ambient section motion ---------- */
@keyframes logoMarquee{to{transform:translate3d(calc(-50% - var(--logo-gap)/2),0,0)}}
@keyframes ambientSheen{
  0%,100%{transform:translate3d(-1.2%,0,0) scale(1.08);opacity:.82}
  50%{transform:translate3d(1.4%,1%,0) scale(1.13);opacity:1}
}
@keyframes deployStreak{
  0%,8%{transform:translate3d(0,-15vh,0);opacity:0}
  14%{opacity:.45}
  32%{opacity:0}
  42%,100%{transform:translate3d(0,120vh,0);opacity:0}
}
.serve__sheen{animation:ambientSheen 24s ease-in-out infinite}

/* ---------- 4. Globe pin ---------- */
.globe__pin-icon{animation:pinFloat 5.5s var(--ease) infinite}
.globe__pin--fintech .globe__pin-icon{animation-delay:-1.1s}
.globe__pin--switch .globe__pin-icon{animation-delay:-2.3s}
.globe__pin--wallet .globe__pin-icon{animation-delay:-3.5s}
.globe__pin--telco .globe__pin-icon{animation-delay:-4.4s}
@keyframes pinFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.globe__pin-icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(38,128,235,.42);
  animation:pinPulse 3.2s var(--ease-out) infinite;
}
.globe__pin-icon{position:relative}
@keyframes pinPulse{
  0%{box-shadow:0 0 0 0 rgba(38,128,235,.42)}
  70%{box-shadow:0 0 0 22px rgba(38,128,235,0)}
  100%{box-shadow:0 0 0 0 rgba(38,128,235,0)}
}

/* ---------- 5. Architecture diagram ---------- */
.arch-node{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.tabs__panel.is-active .arch.is-built .arch-node{opacity:1;transform:none}
.arch.is-built .arch-node{opacity:1;transform:none}

.arch-links .flow-path{
  stroke-dashoffset:0;
  animation:dashDrift 1.6s linear infinite;
}
@keyframes dashDrift{to{stroke-dashoffset:-14}}

.flow-dot{fill:#8FD4FF;filter:url(#fGlow)}
.arch-node.is-hot rect:first-of-type{filter:brightness(1.12)}

/* pulse ring used on the currently energised node */
.node-pulse{fill:none;stroke:#8FD4FF;stroke-width:1.2;opacity:0}

/* ---------- 6. Tapestry slider ---------- */
@keyframes slideIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}
.tap-comet{filter:drop-shadow(0 0 6px rgba(150,230,255,.95))}
.tap-node.is-hit{filter:drop-shadow(0 0 7px rgba(125,240,255,.9))}

/* typing caret in the composer prompt */
.composer__prompt.is-typing::after{
  content:"";display:inline-block;width:6px;height:1em;
  background:#8FC2FF;margin-left:2px;translate:0 2px;
  animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* ---------- 7. Solution panel swap ---------- */
.sol-panel__body{transition:opacity .32s var(--ease), transform .32s var(--ease)}
.sol-panel.is-swapping .sol-panel__body{opacity:0;transform:translate3d(0,8px,0)}

/* ---------- 8. Tab panel swap ---------- */
.tabs__panel{animation:panelIn .75s var(--ease-out) both}
@keyframes panelIn{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:none}
}

/* ---------- 9. Counter shimmer while running ---------- */
.stat__num.is-counting{color:var(--blue)}

/* ---------- 10. Mobile nav ---------- */
@media (max-width:1023px){
  .nav{
    transform:translate3d(0,-8px,0);
    opacity:0;
    pointer-events:none;
    transition:opacity .4s var(--ease), transform .5s var(--ease-out), visibility .4s;
    visibility:hidden;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .nav.is-open .nav__list li{animation:navItemIn .5s var(--ease-out) both}
  .nav.is-open .nav__list li:nth-child(1){animation-delay:.05s}
  .nav.is-open .nav__list li:nth-child(2){animation-delay:.1s}
  .nav.is-open .nav__list li:nth-child(3){animation-delay:.15s}
  .nav.is-open .nav__list li:nth-child(4){animation-delay:.2s}
  .nav.is-open .nav__list li:nth-child(5){animation-delay:.25s}
}
@keyframes navItemIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .word > span{transform:none;opacity:1}
  .arch-node{opacity:1;transform:none}
  .blob{animation:none}
  .institution-flow{animation:none;stroke-dashoffset:0}
}