/* Light travelling along the supplied template's surfaces, without changing layout. */
:root { --motion-ink: #b5a5ff; --motion-glint: #fff; --motion-wash: rgba(139, 108, 255, .14); }
html[data-theme="light"] { --motion-ink: #7561d9; --motion-glint: #b7a5ff; --motion-wash: rgba(117, 97, 217, .10); }

.hero-product { isolation: isolate; }
.edge-light { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; overflow: hidden; z-index: 2; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; }
.edge-light::before { content: ""; position: absolute; width: 160%; aspect-ratio: 1; left: 50%; top: 50%; background: conic-gradient(from 0deg, transparent 0 66%, var(--motion-ink) 76%, var(--motion-glint) 79%, transparent 83%); transform: translate(-50%, -50%) rotate(0turn); animation: edge-orbit 9s linear infinite; }
@keyframes edge-orbit { to { transform: translate(-50%, -50%) rotate(1turn); } }
@media (max-width: 639px) { .hero-product .edge-light::before { width: 550%; } }

.motion-ready:not(.intro-complete) .hero-intro { animation: hero-arrive .72s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--intro-delay, 0ms); }
@keyframes hero-arrive { from { opacity: .15; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.motion-ready:not(.intro-complete) .hero-product { animation: product-arrive .85s cubic-bezier(.16, 1, .3, 1) .24s both; }
@keyframes product-arrive { from { opacity: .3; transform: translateY(32px) scale(.985); } to { opacity: 1; transform: none; } }
.hero-horizon-arc { animation: horizon-breathe 9s ease-in-out infinite; }
@keyframes horizon-breathe { 50% { opacity: .55; transform: translateX(-50%) scaleX(1.035); } }

.btn-primary-glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); transition: transform .65s cubic-bezier(.16,1,.3,1); }
.btn-primary-glow:is(:hover, :focus-visible)::before { transform: translateX(130%); }
.wf-slot-btn:focus-visible .wf-slot-wrap > span, .wf-slot-link:focus-visible .wf-slot-wrap > span { transform: translateY(-100%); }
.wf-slot-btn:active { scale: .98; }

.card-light { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.card-light::before { content: ""; position: absolute; width: 340px; height: 340px; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, var(--motion-wash), transparent 68%); opacity: 0; transform: translate(calc(var(--light-x, 50%) - 170px), calc(var(--light-y, 50%) - 170px)); transition: opacity .35s ease; }
@media (hover: hover) and (pointer: fine) {
  [data-spotlight].pointer-active > .card-light::before { opacity: 1; }
  #features [data-spotlight].pointer-active .bento-over-graphic { transform: translate(var(--graphic-x, 0px), var(--graphic-y, -4px)); }
}
/* Touch devices keep the light within the illustration, instead of requiring hover. */
.feature-light { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.feature-light::before { content: ""; position: absolute; width: 65%; height: 95%; top: 5%; left: 0; background: radial-gradient(ellipse, var(--motion-wash), transparent 70%); animation: feature-drift 10s ease-in-out infinite alternate; }
#features .cosmic-card:nth-child(2n) .feature-light::before { animation-delay: -5s; }
@keyframes feature-drift { to { transform: translateX(55%) translateY(-8%); } }
#features .bento-over-graphic { animation: graphic-float 7s ease-in-out infinite; }
#features .cosmic-card:nth-child(2n) .bento-over-graphic { animation-delay: -3.5s; }
@keyframes graphic-float { 50% { translate: 0 -4px; } }

#heroChartLine { stroke-dasharray: 1; }
.motion-ready:not(.intro-complete) #heroChartLine { animation: chart-trace 1.15s cubic-bezier(.16,1,.3,1) .5s both; }
@keyframes chart-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chart-traveller { fill: var(--motion-glint); stroke: var(--motion-ink); stroke-width: 2; offset-path: path('M0,145 C90,135 150,95 230,90 C310,85 370,45 460,38 C520,33 560,15 600,10'); animation: chart-travel 5s linear 1.2s infinite; opacity: 0; }
@keyframes chart-travel { 0% { offset-distance: 0%; opacity: 0; } 10%, 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.inventory-bars > div { transform-origin: bottom; }
.motion-ready .is-visible .inventory-bars > div { animation: bar-arrive .8s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--bar-index) * 55ms); }
@keyframes bar-arrive { from { transform: scaleY(.12); opacity: .35; } to { transform: scaleY(1); opacity: 1; } }

.flow-traveller { stroke: var(--motion-ink); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: .045 .955; stroke-dashoffset: .05; animation: flow-travel 3.6s linear infinite; pointer-events: none; }
@keyframes flow-travel { 0% { stroke-dashoffset: .05; opacity: 0; } 12%, 85% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
[id^="scalexPath"] { transition: stroke .25s ease, stroke-width .25s ease; }
#scalex [data-flow] rect { transition: stroke .25s ease, fill .25s ease; }
#scalex [data-flow]:is(:hover, :focus-visible) rect { stroke: var(--motion-ink); }
.hub-core { position: relative; isolation: isolate; }
.hub-core .edge-light::before { width: 160%; animation-duration: 12s; }

/* Three copies; compensate for the track's existing outer padding and gaps. */
.animate-marquee-logos, .animate-marquee-cards { animation-name: seamless-marquee; }
.animate-marquee-cards { --marquee-adjust: 8px; }
@keyframes seamless-marquee { to { transform: translateX(calc(-100% / 3 + var(--marquee-adjust, 0px))); } }
.animate-marquee-logos:hover, .animate-marquee-cards:focus-within { animation-play-state: paused; }

.motion-paused .hero-intro, .motion-paused .hero-product { animation: none; }
.motion-paused #heroChartLine, .motion-paused .inventory-bars > div { animation: none; stroke-dashoffset: 0; }
.motion-paused .chart-traveller, .motion-paused .flow-traveller { opacity: 0 !important; }
.motion-paused .bento-over-graphic { transform: none !important; }
.motion-paused .card-light::before { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) .chart-traveller, html:not(.motion-enabled) .flow-traveller { opacity: 0; }
  html:not(.motion-enabled) .bento-over-graphic { transform: none !important; }
  html:not(.motion-enabled) .btn-primary-glow::before { display: none; }
  html:not(.motion-enabled) .wf-slot-wrap > span { transform: none !important; }
}