/* Marketing motion uses separate layers so the original card rotations stay intact. */
:root { --flow-ease: cubic-bezier(.16, 1, .3, 1); }
.partners { padding-top: 55px; }
.wordmarks { margin: 20px 0 5px; }
.capability h3 { margin-top: 28px; }
.dashboard-section { padding-bottom: 90px; perspective: 1500px; }
.dashboard-section::after {
  inset: 0;
  background: url('./assets/sky.png') center bottom / cover no-repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #0005 26%, #000 68%);
  mask-image: linear-gradient(to bottom, transparent 0%, #0005 26%, #000 68%);
}
.flow-experience { padding-bottom: 54px; }
.footer-bottom { border-top: 0; }

/* Content stays visible without JS, or when reduced motion is requested. */
.motion-reveal {
  transition: opacity .8s var(--flow-ease), translate .9s var(--flow-ease), scale .9s var(--flow-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-reveal:not(.is-revealed) { opacity: 0; translate: 0 36px; }
.motion-reveal.is-revealed { opacity: 1; translate: 0 0; }
.motion-reveal.revealed-by-focus { transition: none !important; }
.motion-reveal[data-motion="dashboard"] { transform-origin: 50% 85%; transition-duration: 1.15s; }
.motion-reveal[data-motion="dashboard"]:not(.is-revealed) { translate: 0 65px; scale: .94; }
.motion-reveal[data-motion="surface"]:not(.is-revealed) { translate: 0 42px; scale: .975; }
.motion-reveal[data-motion="flow"]:not(.is-revealed) { translate: -18px 12px; scale: .93; }
.section-heading h2 .blue-text { display: inline-block; }

.page-hero h1.motion-reveal, .article h1.motion-reveal { animation: none; }

/* Decorative illustrations breathe only while their section is on screen. */
.motion-scene .tiny-card,
.motion-scene .balance-mini,
.motion-scene .invoice-mini,
.motion-scene .received-notification,
.motion-scene .orbit-dot,
.motion-scene .balance-bubble,
.motion-scene .shield-orb,
.motion-scene .security-tag,
.motion-scene .scenario-receipt,
.motion-scene .cta-currency {
  animation: fp-levitate 5.8s ease-in-out infinite;
  animation-play-state: paused;
}
.motion-scene .received-notification { animation-duration: 4.6s; animation-delay: -.8s; }
.motion-scene .invoice-mini { animation-delay: -2.7s; animation-duration: 7s; }
.motion-scene .balance-mini { animation-delay: -1.6s; }
.motion-scene .orbit-dot { animation-delay: -3.2s; animation-duration: 4.4s; }
.motion-scene .balance-bubble { animation-delay: -2.1s; animation-duration: 4.8s; }
.motion-scene .security-tag.two { animation-delay: -2.6s; }
.motion-scene .scenario-receipt { animation-duration: 6.5s; }
.motion-scene .cta-currency.dollar { animation-delay: -2.9s; }
.motion-scene.is-in-view .tiny-card,
.motion-scene.is-in-view .balance-mini,
.motion-scene.is-in-view .invoice-mini,
.motion-scene.is-in-view .received-notification,
.motion-scene.is-in-view .orbit-dot,
.motion-scene.is-in-view .balance-bubble,
.motion-scene.is-in-view .shield-orb,
.motion-scene.is-in-view .security-tag,
.motion-scene.is-in-view .scenario-receipt,
.motion-scene.is-in-view .cta-currency { animation-play-state: running; }
@keyframes fp-levitate { 0%, 100% { translate: 0 4px; } 50% { translate: 0 -9px; } }

.dash-preview .chart-income { animation: none; stroke-dasharray: none; }
.dash-preview.motion-reveal:not(.is-revealed) .chart-income { stroke-dasharray: var(--stroke-length, 1100); stroke-dashoffset: var(--stroke-length, 1100); }
.dash-preview.is-revealed .chart-income { stroke-dasharray: var(--stroke-length, 1100); animation: fp-chart 1.8s .35s var(--flow-ease) both; }
.capability .balance-mini path { stroke-dasharray: var(--stroke-length, 300); }
.capability.is-revealed .balance-mini path { animation: fp-chart 1.8s .4s var(--flow-ease) both; }
@keyframes fp-chart { from { stroke-dashoffset: var(--stroke-length, 1100); } to { stroke-dashoffset: 0; } }
.flow-experience.motion-scene .flow-line i { animation-play-state: paused; }
.flow-experience.motion-scene.is-in-view .flow-line i { animation-play-state: running; }
.flow-experience .core { position: relative; isolation: isolate; }
.flow-experience .core::after {
  content: ''; position: absolute; inset: -9px; border: 1px solid #148ff12e; border-radius: 35px;
  z-index: -1; pointer-events: none; animation: fp-core-ring 3.4s 1s ease-out infinite; animation-play-state: paused;
}
.flow-experience.is-in-view .core::after { animation-play-state: running; }
@keyframes fp-core-ring { 0% { scale: .92; opacity: 0; } 25% { opacity: .8; } 100% { scale: 1.13; opacity: 0; } }
.security-ring { position: relative; }
.security-ring::before {
  content: ''; position: absolute; inset: -17px; border: 1px solid #d7eae1; border-radius: 50%;
  animation: fp-security-ring 5s ease-in-out infinite; animation-play-state: paused;
}
.security-art.is-in-view .security-ring::before { animation-play-state: running; }
@keyframes fp-security-ring { 0%, 100% { scale: .94; opacity: .25; } 50% { scale: 1.07; opacity: .85; } }
.feature { transition: background .3s ease, border-color .3s ease, opacity .8s var(--flow-ease); }
.feature.motion-reveal { transition-delay: var(--reveal-delay, 0ms); }
.feature-icon, .feature-plus { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .capability .text-link:hover { translate: 3px 0; }
}
.capability .text-link { display: inline-flex; transition: translate .3s ease; }
@media (max-width: 680px) {
  .partners { padding-top: 35px; }
  .dashboard-section { padding-bottom: 48px; }
  .dashboard-section::after { background-position: center; }
  .flow-experience { padding-bottom: 35px; }
  .motion-reveal:not(.is-revealed) { translate: 0 26px; }
  .motion-reveal[data-motion="dashboard"]:not(.is-revealed) { translate: 0 35px; scale: .96; }
  .motion-reveal[data-motion="flow"]:not(.is-revealed) { translate: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal, .motion-reveal:not(.is-revealed), .motion-reveal.is-revealed { opacity: 1; translate: none; scale: none; transition: none; }
  .motion-scene *, .motion-scene *::before, .motion-scene *::after,
  .dash-preview.is-revealed .chart-income, .capability.is-revealed .balance-mini path { animation: none !important; }
  .dash-preview .chart-income, .capability .balance-mini path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .feature, .feature-icon, .feature-plus { transition: none; }
}