/* Motion is an enhancement. Content stays visible without JavaScript. */
:root { --motion-ease: cubic-bezier(.16,1,.3,1); --scene-blue: #237bff; --scene-purple: #8548e8; }
.nav-toolbar { display: flex; align-items: center; gap: 24px; }
.nav-toolbar .section-nav { flex: 1; min-width: 0; }
.reading-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,var(--scene-blue),var(--scene-purple)); transform: scaleX(var(--read-progress,0)); transform-origin: left; pointer-events: none; z-index: 1; }
.section-nav a { transition: color .2s, border-color .2s; }
/* The logo and wordmark remain completely still, including on hover. */
.brand,.brand-mark,.brand-name,.brand-mark img,.brand-name .zain,.footer-name { animation: none; transition: none; transform: none; }

/* Independent layers combine entrance, pointer depth and idle motion. */
.hero-grid { grid-template-columns: minmax(0,1fr) 340px; gap: 60px; }
.hero-art { width: 340px; isolation: isolate; overflow: clip; overflow-clip-margin: 8px; }
.dollar-stage { position: relative; width: 100%; aspect-ratio: 1; perspective: 900px; }
.dollar-depth { position: absolute; inset: 0; transform-style: preserve-3d; }
.dollar-float { position: absolute; inset: 5%; }
.dollar-float img { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.dollar-ambient { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse at 30% 36%,#237bff12,transparent 58%),radial-gradient(ellipse at 76% 67%,#8548e814,transparent 62%); }
.dollar-shadow { position: absolute; width: 52%; height: 7%; bottom: 0; left: 24%; background: radial-gradient(ellipse,#15182322,transparent 70%); opacity: .5; }
.dollar-orbit { position: absolute; inset: 5%; border: 1px solid #777c8c20; border-radius: 50%; transform: rotate(-28deg) scaleY(.64); }
.dollar-orbit--second { inset: 1%; transform: rotate(57deg) scaleY(.69); border-color: #777c8c16; }
.orbit-track { position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: #6356dc42; border-radius: 50%; }
.orbit-track::after { content: ''; position: absolute; top: 14%; right: 14%; width: 5px; height: 5px; border-radius: 50%; background: var(--scene-blue); box-shadow: 0 0 12px #237bff50; }
.dollar-orbit--second .orbit-track::after { width: 4px; height: 4px; background: var(--scene-purple); box-shadow: 0 0 12px #8548e855; }
.dollar-glint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg,transparent 38%,#fff8 46%,#e1e7ffbb 50%,transparent 58%); background-size: 300% 100%; background-position: 150% 0; -webkit-mask: url('./assets/robotic-dollar.webp') center/contain no-repeat; mask: url('./assets/robotic-dollar.webp') center/contain no-repeat; mix-blend-mode: screen; }
.title-line { display: block; overflow: clip; padding-bottom: .065em; margin-bottom: -.065em; }
.title-line > span { display: block; }

.motion-on .dollar-depth { transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0); transition: transform .7s var(--motion-ease); }
.motion-on .dollar-float { animation: dollar-float 7.5s ease-in-out infinite; }
.motion-on .dollar-shadow { animation: dollar-shadow 7.5s ease-in-out infinite; }
.motion-on .dollar-ambient { animation: ambient-breathe 9s ease-in-out infinite; }
.motion-on .orbit-track { animation: orbit-turn 24s linear infinite; }
.motion-on .dollar-orbit--second .orbit-track { animation-duration: 32s; animation-direction: reverse; }
.motion-on .dollar-glint { animation: metal-glint 9s ease-in-out infinite; }
.motion-on .hero:not(.scene-active) .dollar-stage * { animation-play-state: paused; }
.motion-on .title-line > span { animation: title-arrive 1.1s var(--motion-ease) both; }
.motion-on .title-line:nth-child(2) > span { animation-delay: .12s; }
.motion-on .hero-art { animation: scene-arrive 1.5s .08s var(--motion-ease) both; }
.motion-on .hero .kicker { animation: soft-arrive .9s .05s var(--motion-ease) both; }
.motion-on .hero .value { animation: soft-arrive 1s .25s var(--motion-ease) both; }
.motion-on .chips { animation: soft-arrive 1s .38s var(--motion-ease) both; }

/* Scroll reveals happen once. Moving signals run only in visible sections. */
.motion-on .reveal { opacity: 0; transform: translate3d(var(--reveal-x,0px),22px,0); transition: opacity .8s var(--motion-ease), transform .9s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-on .reveal.is-revealed { opacity: 1; transform: translateY(0); }
.motion-on tr.reveal { transform: none; transition-duration: .7s; }
.motion-on main section:not(.hero) > .wrap::before { transform: scaleX(.04); transform-origin: left; opacity: .15; transition: transform 1.1s var(--motion-ease), opacity .7s; }
.motion-on main section.section-revealed > .wrap::before { transform: scaleX(1); opacity: 1; }
.flow-signal { display: none; pointer-events: none; }
.motion-on .hero-line > div { position: relative; }
.motion-on .hero-line > div:not(:last-child) .flow-signal { display: block; position: absolute; width: 5px; height: 5px; border-radius: 50%; right: -5px; top: calc(50% - 2px); background: #675ae3; animation: signal-across 4.8s linear infinite; animation-delay: var(--signal-delay,0s); opacity: 0; }
.motion-on .hero:not(.scene-active) .flow-signal { animation-play-state: paused; }
.motion-on .arrow::before { content: ''; position: absolute; width: 3px; height: 6px; left: -2px; top: 0; background: #6356dc; animation: signal-down 3.8s ease-in-out infinite; animation-delay: var(--signal-delay,0s); opacity: 0; animation-play-state: paused; }
.motion-on .scene-active .arrow::before { animation-play-state: running; }
.motion-on .card,.motion-on .ar-card,.motion-on .agent,.motion-on .mini { transition: transform .8s var(--motion-ease),border-color .4s,background-color .4s,opacity .8s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-on .reveal:not(.is-revealed) { transition-delay: var(--reveal-delay,0ms); }
.tbl tbody tr { transition: background-color .25s; }
.tbl tbody tr:hover { background: #f5f5f8; }
.step { transition: background-color .25s; }
.step:not(.gate):hover { background: #f6f6f8; }

/* Each content section gets its own motion, while text settles for reading. */
.heading-word { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .09em; margin-bottom: -.09em; }
.heading-word-inner { display: inline-block; }
.motion-on h2 .heading-word-inner { opacity: 0; transform: translateY(110%); transition: transform .9s var(--motion-ease),opacity .8s; transition-delay: var(--word-delay,0ms); }
.motion-on h2.is-revealed .heading-word-inner { opacity: 1; transform: none; }
.motion-on .tbl tbody tr.row-reveal { opacity: 0; transition: opacity .65s var(--motion-ease),background-color .35s; }
.motion-on .tbl tbody tr.row-reveal.is-revealed { opacity: 1; }
.flow-beam { display: none; }
.motion-on .flow-beam { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--scene-blue),var(--scene-purple)); transform-origin: left; animation: flow-beam 6.4s var(--signal-delay,0s) ease-in-out infinite; animation-play-state: paused; opacity: 0; pointer-events: none; }
.motion-on .scene-active .flow-beam { animation-play-state: running; }
.loop .mini { position: relative; }
.steps { position: relative; }
.workflow-progress { display: none; }
.motion-on .workflow-progress { display: block; position: absolute; top: 0; bottom: 0; left: -1px; width: 3px; transform: scaleY(var(--workflow-progress,0)); transform-origin: top; background: linear-gradient(var(--scene-blue),var(--scene-purple)); z-index: 1; pointer-events: none; transition: transform .18s linear; }
.card,.ar-card { position: relative; }
.card::after,.ar-card::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(250px circle at var(--spotlight-x,50%) var(--spotlight-y,50%),#6356dc0c,transparent 75%); transition: opacity .4s; }
.motion-on .ar-card.is-revealed .route { animation: route-reveal 1s .2s var(--motion-ease) both; }
.layer.jev { position: relative; overflow: clip; }
.layer.jev::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(110deg,transparent 30%,#6356dc08 48%,transparent 66%); }
.motion-on .layer.jev::after { animation: layer-sweep 8s ease-in-out infinite; animation-play-state: paused; }
.motion-on .scene-active .layer.jev::after { animation-play-state: running; }
@media (hover:hover) and (pointer:fine) {
  .motion-on .card.is-revealed:hover,.motion-on .ar-card.is-revealed:hover,.motion-on .agent.is-revealed:hover,.motion-on .mini.is-revealed:hover { transform: translateY(-4px); border-color: #6356dc; }
  .motion-on .reveal.is-revealed:hover { transition-delay: 0ms; }
  .motion-on .card:hover::after,.motion-on .ar-card:hover::after { opacity: 1; }
}
.motion-paused .reading-progress { display: none; }
.motion-paused .dollar-depth { transform: none; }
.motion-paused .dollar-glint { opacity: 0; }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation: none !important; transition: none !important; }
.motion-paused { scroll-behavior: auto; }
.page-away *,.page-away *::before,.page-away *::after { animation-play-state: paused !important; }

@keyframes dollar-float { 0%,100% { transform: translate3d(0,5px,22px) rotate(-1.3deg); } 50% { transform: translate3d(0,-9px,22px) rotate(1.3deg); } }
@keyframes dollar-shadow { 0%,100% { transform: scaleX(1); opacity: .5; } 50% { transform: scaleX(.8); opacity: .28; } }
@keyframes ambient-breathe { 0%,100% { transform: scale(.93); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes metal-glint { 0%,52%,100% { opacity: 0; background-position: 150% 0; } 56% { opacity: .5; } 72% { opacity: .5; background-position: -50% 0; } 77% { opacity: 0; background-position: -50% 0; } }
@keyframes title-arrive { from { transform: translateY(108%); opacity: .15; } to { transform: translateY(0); opacity: 1; } }
@keyframes soft-arrive { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scene-arrive { from { transform: translateY(20px) scale(.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes signal-across { 0%,18% { opacity: 0; transform: translateX(0); } 23% { opacity: .8; } 40% { opacity: .8; transform: translateX(32px); } 45%,100% { opacity: 0; transform: translateX(32px); } }
@keyframes signal-down { 0%,18% { transform: translateY(0); opacity: 0; } 28% { opacity: .8; } 66% { transform: translateY(14px); opacity: .8; } 78%,100% { transform: translateY(14px); opacity: 0; } }
@keyframes flow-beam { 0%,12% { transform: scaleX(0); opacity: 0; } 17% { opacity: .8; } 38% { transform: scaleX(1); opacity: .8; } 52%,100% { transform: scaleX(1); opacity: 0; } }
@keyframes route-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes layer-sweep { 0%,18% { transform: translateX(-100%); opacity: 0; } 30% { opacity: 1; } 72% { transform: translateX(100%); opacity: 1; } 78%,100% { transform: translateX(100%); opacity: 0; } }

@media (max-width:1050px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) 220px; gap: 24px; }
  .hero-art { width: 220px; }
  .motion-on .hero-line > div:not(:last-child) .flow-signal { display: none; }
}
@media (max-width:760px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) 150px; gap: 16px; }
  .hero-art { width: 150px; }
  .nav-toolbar { gap: 12px; }
}
@media (max-width:520px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { width: 110px; }
  .dollar-orbit { border-color: #777c8c30; }
  .orbit-track::after { width: 3px; height: 3px; }
  .motion-on .reveal { transform: translateY(14px); }
  .motion-on .reveal.is-revealed { transform: none; }
}
@media print {
  .reading-progress,.dollar-orbit,.dollar-glint,.dollar-ambient,.dollar-shadow { display: none; }
  html *,html *::before,html *::after { animation: none !important; transition: none !important; }
  html .reveal,html .row-reveal,html .heading-word-inner,html .hero-art,html .title-line > span { opacity: 1 !important; transform: none !important; }
  .flow-beam,.workflow-progress { display: none !important; }
  html main section > .wrap::before { opacity: 1 !important; transform: none !important; }
}