/* FXDX cinematic product scenes. All movement is progressive enhancement. */
:root {
  --scene-ease: cubic-bezier(.22, .68, .2, 1);
  --scene-lift: -9px;
  --scene-drift: 5px;
}

/* Content settles once, while decorative objects keep moving independently. */
.motion-ready .motion-reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .85s var(--scene-ease), translate .85s var(--scene-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
.motion-ready .motion-tilt {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotate(var(--card-rest-rotate, 0deg));
  transition: transform .3s var(--scene-ease), border-color .3s, box-shadow .3s, opacity .85s var(--scene-ease), translate .85s var(--scene-ease);
  transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0ms), var(--reveal-delay, 0ms);
}
.motion-ready .motion-tilt:focus-within {
  border-color: #8297e4;
}

/* Market instruments float over the six product surfaces. */
.market-tabs > button {
  isolation: isolate;
  overflow: hidden;
}
.market-tabs > button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 10%), #ffffffa8, transparent 65%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: -1;
}
.market-tabs > button:hover::before,
.market-tabs > button:focus-visible::before {
  opacity: .9;
}
.motion-ready .market-tabs .asset-icon {
  animation: scene-instrument-float 6.5s ease-in-out infinite;
}
.motion-ready .market-tabs > button:nth-child(2) .asset-icon { animation-delay: -1.6s; animation-duration: 7.2s; }
.motion-ready .market-tabs > button:nth-child(3) .asset-icon { animation-delay: -3.1s; animation-duration: 6s; }
.motion-ready .market-tabs > button:nth-child(4) .asset-icon { animation-delay: -2.2s; animation-duration: 7.8s; }
.motion-ready .market-tabs > button:nth-child(5) .asset-icon { animation-delay: -4.5s; animation-duration: 6.8s; }
.motion-ready .market-tabs > button:nth-child(6) .asset-icon { animation-delay: -.7s; animation-duration: 7.4s; }
.motion-ready .market-tabs > button:hover {
  translate: 0 -5px;
  box-shadow: 0 22px 46px #405b9124;
}
.market-tabs .tab-arrow {
  transition: translate .3s, color .3s;
}
.market-tabs > button:hover .tab-arrow { translate: 3px -3px; color: #536de2; }

/* The terminal rises with the scroll; its decorative chart draws on entry. */
.platform-stage { perspective: 1500px; }
.motion-ready .terminal {
  position: relative;
  translate: 0 var(--terminal-rise, 0px);
  transform: perspective(1500px) rotateX(3deg);
  transform-origin: 50% 100%;
  transition: max-width .55s var(--scene-ease), border-radius .55s var(--scene-ease), border-color .4s;
}
.chart-panel { position: relative; overflow: hidden; }
.motion-ready .chart-panel::after {
  content: '';
  position: absolute;
  width: 14%;
  inset: 0 auto 0 -16%;
  background: linear-gradient(90deg, transparent, #88e9ff0c 60%, #7df5ff26 99%, transparent);
  border-right: 1px solid #b5ffff2b;
  animation: scene-chart-scan 9s linear infinite;
  pointer-events: none;
}
.motion-ready .motion-in-view .price-line {
  animation: scene-chart-draw 3.2s cubic-bezier(.22, .5, .3, 1) both;
}
.motion-ready .platform-float { animation: scene-float 7s ease-in-out infinite; }
.motion-ready .terminal-bottom i { animation: scene-status-glow 3.8s ease-in-out infinite; }
.device-tabs button {
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.device-tabs button.active { box-shadow: 0 0 22px #7fe8ff16; }

/* Copy trading: an active network around a stable, readable card. */
.copy-card { position: relative; }
.copy-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--shine-x, 50%) var(--shine-y, 20%), #ffffff80, transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}
.copy-card:hover::before { opacity: .8; }
.copy-card > * { position: relative; }
.motion-ready .copy-core { animation: scene-float 6.8s ease-in-out infinite; }
.motion-ready .copy-core::before,
.motion-ready .copy-core::after {
  content: '';
  position: absolute;
  inset: -13px;
  border: 1px solid #5b95c44d;
  border-radius: 34px;
  pointer-events: none;
  animation: scene-network-pulse 4.6s ease-out infinite;
}
.motion-ready .copy-core::after { animation-delay: -2.3s; }
.motion-ready .copy-satellite { animation: scene-satellite-float 5.8s ease-in-out infinite; }
.motion-ready .sat-two { animation-duration: 6.7s; animation-delay: -2.4s; }
.motion-ready .sat-three { animation-duration: 5.3s; animation-delay: -3.6s; }
.copy-art > i::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  left: 0;
  top: -2px;
  border-radius: 50%;
  background: #97a6ff;
  box-shadow: 0 0 9px #8a88ff88;
  opacity: 0;
}
.motion-ready .copy-art > i::after { animation: scene-network-flow 3.8s ease-in-out infinite; }
.motion-ready .copy-art > i:nth-of-type(2)::after { animation-delay: -1.3s; }
.motion-ready .copy-art > i:nth-of-type(3)::after { animation-delay: -2.6s; }
.motion-ready .strategy-sheet { animation: scene-float 7.5s ease-in-out infinite; }
.motion-ready .provider-star { animation: scene-satellite-float 6s ease-in-out infinite reverse; }
.motion-ready .motion-in-view .strategy-sheet svg path { animation: scene-strategy-draw 2.8s ease-out both; }

/* Automation: rotating orbital tracks and suspended components. */
.automation-art { isolation: isolate; }
.motion-ready .automation-orbit::before {
  border-top-color: #7588d0;
  border-right-color: #7bcfdba8;
  animation: scene-orbit-turn 12s linear infinite;
}
.motion-ready .automation-orbit::after {
  border-bottom-color: #9a87d9b3;
  border-left-color: #b8ebf5;
  animation: scene-orbit-turn 18s linear infinite reverse;
}
.motion-ready .ea-chip { animation: scene-chip-hover 8s ease-in-out infinite; }
.ea-chip::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #b4d7ff1f;
  border-radius: 27px;
  pointer-events: none;
}
.motion-ready .code-pill { animation: scene-float 6s ease-in-out infinite; }
.motion-ready .code-pill-two { animation-duration: 7.3s; animation-delay: -2s; }
.motion-ready .code-pill-three { animation-duration: 6.5s; animation-delay: -4s; }

/* Order routing: light travels toward the liquidity side. */
.motion-ready .routing-line i {
  right: auto;
  left: 0;
  animation: scene-routing-flow 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.motion-ready .routing-line:nth-of-type(4) i { animation-delay: -1.8s; }
.routing-brand { position: relative; }
.motion-ready .routing-brand::after {
  content: '';
  position: absolute;
  inset: -15px;
  border: 1px solid #74a9e22b;
  border-radius: 50%;
  animation: scene-network-pulse 5s ease-out infinite;
  pointer-events: none;
}
.motion-ready .routing-node > svg { animation: scene-float 7s ease-in-out infinite; }
.motion-ready .liquidity-node > svg { animation-delay: -3s; }

/* A soft moving reflection adds depth to the payments surface. */
.payment-card { position: relative; overflow: hidden; isolation: isolate; }
.payment-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--shine-x, 75%) var(--shine-y, 15%), #dce8ff78, transparent 65%);
  z-index: -1;
}
.motion-ready .payment-card::after {
  content: '';
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 32%;
  background: linear-gradient(90deg, transparent, #c7c4ff24, #7de8f322, transparent);
  transform: skewX(-24deg);
  animation: scene-card-shimmer 9s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Account card and step controls respond without moving the reading area. */
.motion-ready .account-card {
  --card-rest-rotate: -9deg;
  animation: scene-account-hover 8s ease-in-out infinite;
}
.account-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--shine-x, 25%) var(--shine-y, 10%), #6fe4ff2e, transparent 70%);
  pointer-events: none;
}
.account-symbol {
  transition: color .6s, text-shadow .6s;
}
.motion-ready .account-seal { animation: scene-float 6.4s ease-in-out infinite reverse; }
.access-visual[data-step="1"] .account-card { border-color: #a1a4ed; }
.access-visual[data-step="1"] .account-symbol { color: #c4b5fd; text-shadow: 0 0 28px #a78bfa6b; }
.access-visual[data-step="2"] .account-card { border-color: #89dbdc; }
.access-visual[data-step="2"] .account-symbol { color: #9ef1e9; text-shadow: 0 0 28px #67e8f96b; }
.step-controls > button {
  position: relative;
  transition: color .35s, border-color .35s, background .35s;
}
.step-controls > button::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #54c6d4, #656fe4, #a08cda);
  scale: 0 1;
  transform-origin: left;
  transition: scale .55s var(--scene-ease);
}
.step-controls > button.active::after { scale: 1 1; }
.step-controls > button > b { transition: opacity .3s, translate .3s; }
.step-controls > button.active > b { translate: 3px -3px; }
.step-controls > button:hover { color: #425d9c; }

/* Partner globe: two independent elliptical satellite paths. */
.motion-ready .partner-orbits > span { animation: scene-float 8s ease-in-out infinite; }
.motion-ready .partner-orbits > i { animation: scene-partner-orbit 16s linear infinite; }
.motion-ready .partner-orbits > i:last-child { animation-direction: reverse; animation-duration: 21s; }
.partner-orbits > i::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  top: -4px;
  left: 49%;
  border-radius: 50%;
  background: #a3d9ed;
  box-shadow: 0 0 13px #7edaff88;
}
.partner-orbits > i:last-child::after { background: #c0a4f2; box-shadow: 0 0 13px #bb9bff88; }

/* The final scene uses layered light, with motion confined behind the copy. */
.final-cta { position: relative; isolation: isolate; overflow: hidden; }
.final-cta > .container { position: relative; z-index: 1; }
.final-cta::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 26% 75%, #146a8e38, transparent 38%), radial-gradient(ellipse at 75% 55%, #6651b74d, transparent 37%), radial-gradient(ellipse at 45% 100%, #487ceb38, transparent 42%);
  pointer-events: none;
  z-index: -1;
}
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 12% 28%, #c7efffcc 0 1px, transparent 1.7px), radial-gradient(circle at 84% 23%, #cfc0efaa 0 1px, transparent 1.7px), radial-gradient(circle at 92% 74%, #8ca8d899 0 1px, transparent 1.7px), radial-gradient(circle at 23% 78%, #81bcdaaa 0 1px, transparent 1.7px), radial-gradient(circle at 62% 13%, #d5e9ff88 0 1px, transparent 1.7px), radial-gradient(circle at 74% 85%, #b3ace288 0 1px, transparent 1.7px);
  opacity: .65;
  z-index: -1;
}
.motion-ready .final-cta::before { animation: scene-aurora-drift 16s ease-in-out infinite alternate; }
.motion-ready .final-cta::after { animation: scene-stars-drift 12s ease-in-out infinite alternate; }

@keyframes scene-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--scene-lift); }
}
@keyframes scene-instrument-float {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 var(--scene-lift); rotate: 3deg; }
}
@keyframes scene-satellite-float {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: var(--scene-drift) var(--scene-lift); rotate: 3deg; }
}
@keyframes scene-chip-hover {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 calc(var(--scene-lift) * 1.35); rotate: 3deg; }
}
@keyframes scene-account-hover {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 var(--scene-lift); rotate: 2deg; }
}
@keyframes scene-orbit-turn { to { rotate: 360deg; } }
@keyframes scene-partner-orbit { to { rotate: 360deg; } }
@keyframes scene-network-pulse {
  0% { scale: .95; opacity: 0; }
  25% { opacity: .7; }
  100% { scale: 1.3; opacity: 0; }
}
@keyframes scene-network-flow {
  0% { left: 0; opacity: 0; }
  15%, 80% { opacity: .85; }
  100% { left: calc(100% - 5px); opacity: 0; }
}
@keyframes scene-routing-flow {
  0% { left: 0; opacity: .2; }
  15%, 80% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: .2; }
}
@keyframes scene-status-glow {
  0%, 100% { opacity: .6; box-shadow: 0 0 0 3px #53c9b700; }
  50% { opacity: 1; box-shadow: 0 0 0 3px #53c9b71a; }
}
@keyframes scene-chart-draw {
  from { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
  to { stroke-dasharray: 1600; stroke-dashoffset: 0; }
}
@keyframes scene-strategy-draw {
  from { stroke-dasharray: 500; stroke-dashoffset: 500; }
  to { stroke-dasharray: 500; stroke-dashoffset: 0; }
}
@keyframes scene-chart-scan {
  0%, 12% { translate: 0 0; opacity: 0; }
  20%, 75% { opacity: .9; }
  90%, 100% { translate: 850% 0; opacity: 0; }
}
@keyframes scene-card-shimmer {
  0%, 15% { translate: 0 0; opacity: 0; }
  30%, 55% { opacity: 1; }
  75%, 100% { translate: 550% 0; opacity: 0; }
}
@keyframes scene-aurora-drift {
  from { translate: -3% 1%; rotate: -4deg; }
  to { translate: 3% -2%; rotate: 5deg; }
}
@keyframes scene-stars-drift {
  from { translate: 0 0; opacity: .4; }
  to { translate: 0 -9px; opacity: .8; }
}

/* Offscreen sections and the explicit pause mode do no animation work. */
.motion-ready main > section:not(.motion-in-view),
.motion-ready main > section:not(.motion-in-view)::before,
.motion-ready main > section:not(.motion-in-view)::after,
.motion-ready main > section:not(.motion-in-view) *,
.motion-ready main > section:not(.motion-in-view) *::before,
.motion-ready main > section:not(.motion-in-view) *::after,
.motion-paused main *,
.motion-paused main *::before,
.motion-paused main *::after {
  animation-play-state: paused !important;
}
.motion-ready.motion-paused .motion-reveal {
  opacity: 1;
  translate: 0 0;
  transition: none;
}
.motion-paused .motion-tilt { --tilt-x: 0deg; --tilt-y: 0deg; }
.motion-paused .terminal { translate: 0 0; }
.motion-paused .price-line,
.motion-paused .strategy-sheet svg path { animation: none !important; stroke-dashoffset: 0; }

@media (max-width: 700px) {
  :root { --scene-lift: -5px; --scene-drift: 3px; }
  .motion-ready .motion-reveal { translate: 0 16px; }
  .motion-ready .motion-reveal.is-visible { translate: 0 0; }
  .motion-ready .terminal { transform: none; }
  .motion-ready .partner-orbits > i { animation-duration: 23s; }
  .motion-ready .partner-orbits > i:last-child { animation-duration: 29s; }
  .final-cta::before { opacity: .8; }
}

@media (hover: none) {
  .motion-ready .motion-tilt { transform: rotate(var(--card-rest-rotate, 0deg)); }
  .motion-ready .market-tabs > button:hover { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
  .motion-ready main *,
  .motion-ready main *::before,
  .motion-ready main *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .motion-ready .motion-tilt { transform: rotate(var(--card-rest-rotate, 0deg)); }
  .motion-ready .terminal { translate: 0 0; transform: none; }
  .motion-ready .market-tabs > button:hover { translate: 0 0; }
  .motion-ready .price-line,
  .motion-ready .strategy-sheet svg path { stroke-dashoffset: 0; }
  .motion-ready .chart-panel::after,
  .motion-ready .payment-card::after,
  .motion-ready .copy-core::before,
  .motion-ready .copy-core::after,
  .motion-ready .routing-brand::after { display: none; }
}