/* ===========================================================================
   landing-motion.css — the stronger animation layer for the landing page.
   ---------------------------------------------------------------------------
   Driven by landing-motion.js. Every moving thing here animates transform,
   translate or opacity (compositor-only), except a few one-off SVG stroke
   draws. Pointer-only and wide-screen effects are switched on by classes the
   script adds, and everything stops under prefers-reduced-motion.
   Numbers below match the list agreed with the owner (1-18).
   =========================================================================== */

/* 18 · scroll progress bar ---------------------------------------------------- */
.progress {
    position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 40;
    background: var(--brand-grad); transform: scaleX(0); transform-origin: left; will-change: transform;
}
html[dir="rtl"] .progress { transform-origin: right; }

/* 8 · parallax glows, 7 · light beams on the grid ---------------------------- */
.glow { position: absolute; border-radius: 50%; will-change: translate; }
.glow--a { width: 680px; height: 680px; top: -160px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(114, 147, 255, 0.20), transparent 62%); }
.glow--b { width: 560px; height: 560px; top: 55%; inset-inline-start: -180px; background: radial-gradient(circle, rgba(60, 210, 131, 0.10), transparent 62%); }
.beams i {
    position: absolute; left: 0; height: 1px; width: 160px;
    background: linear-gradient(90deg, transparent, rgba(147, 171, 255, 0.85), transparent);
    animation: beam 9s linear infinite; opacity: 0; will-change: transform;
}
.beams i:nth-child(1) { top: 112px; animation-delay: 0s; }
.beams i:nth-child(2) { top: 280px; animation-delay: 2.2s; animation-duration: 11s; }
.beams i:nth-child(3) { top: 448px; animation-delay: 4.5s; }
.beams i:nth-child(4) { top: 616px; animation-delay: 1.3s; animation-duration: 12s; }
.beams i:nth-child(5) { top: 168px; animation-delay: 6s; animation-duration: 10s; }
.beams i:nth-child(6) { top: 728px; animation-delay: 3.4s; }
@keyframes beam {
    0% { transform: translateX(-20vw); opacity: 0; }
    10% { opacity: 1; } 85% { opacity: 1; }
    100% { transform: translateX(120vw); opacity: 0; }
}

/* 6 · cursor spotlight --------------------------------------------------------- */
.spot {
    position: fixed; left: 0; top: 0; width: 720px; height: 720px; z-index: 0; pointer-events: none;
    border-radius: 50%; background: radial-gradient(circle, rgba(114, 147, 255, 0.14), transparent 60%);
    opacity: 0; transition: opacity 0.6s; will-change: transform;
}
.spot.on { opacity: 1; }

/* 1 · headline word by word, with a light sweep on the last word -------------- */
.hero__title.split .line.reveal { opacity: 1; transform: none; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: 0.06em 0.14em; margin-block: -0.06em -0.14em; }
.hero__title .w > span { display: inline-block; transform: translateY(115%); transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--wd, 0s); will-change: transform; }
.hero__title.words-in .w > span { transform: none; }
.hero__title .shine { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.hero__title .shine .w > span {
    background: linear-gradient(100deg, #3cd283 0%, #7293ff 35%, #e6ecff 50%, #7293ff 65%, #3cd283 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title.words-in .shine .w > span { animation: sweep 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* 2 · candles growing under the line ------------------------------------------ */
#heroCandles rect { transform-box: fill-box; transform-origin: center; transform: scaleY(0); transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: var(--cd, 0s); }
#heroCandles.grown rect { transform: none; }
#heroCandles .cu { fill: rgba(60, 210, 131, 0.42); }
#heroCandles .cd { fill: rgba(255, 107, 123, 0.42); }

/* 3 · rolling digits ----------------------------------------------------------- */
.odo { display: inline-flex; direction: ltr; }
.odo-d { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; }
.odo-s { display: flex; flex-direction: column; transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.odo-s > span { height: 1.2em; }
.odo-c { line-height: 1.2em; }
.terminal__px b { line-height: 1.2; transition: text-shadow 0.4s; }
.terminal__px b.flash-up { text-shadow: 0 0 22px rgba(60, 210, 131, 0.7); }
.terminal__px b.flash-down { text-shadow: 0 0 22px rgba(255, 107, 123, 0.7); }

/* 4 · floating cards fly in, then float ----------------------------------------- */
.hero__visual .float { opacity: 0; }
.hero__visual.in .f1 { animation: fly-a 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both, bob 7s ease-in-out 1.7s infinite; }
.hero__visual.in .f2 { animation: fly-b 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s both, bob 7s ease-in-out 1.95s infinite; }
.hero__visual.in .f3 { animation: fly-c 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both, bob 7s ease-in-out 2.2s infinite; }
@keyframes fly-a { from { opacity: 0; transform: translate(70px, -50px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes fly-b { from { opacity: 0; transform: translate(-70px, 50px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes fly-c { from { opacity: 0; transform: translateY(70px) scale(0.6); } to { opacity: 1; transform: none; } }

/* 5 · coins orbiting in depth (positions set by the script) -------------------- */
.terminal { z-index: 2; }
.float { z-index: 4; }
.has-3d .orbit { animation: none; width: 92%; height: 92%; transform: scaleY(0.32); border-color: rgba(114, 147, 255, 0.22); }
.has-3d .orbit .coin { display: none; }
.coins3d { position: absolute; inset: 0; pointer-events: none; }
.coins3d .coin3d {
    position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface-overlay) center/66% no-repeat; border: 1px solid var(--border-strong);
    box-shadow: 0 0 18px -4px var(--accent-glow); will-change: transform, opacity;
}

/* 9 · section titles revealed with a light sweep ------------------------------ */
.section__head h2, .security h2 { position: relative; overflow: hidden; }
.section__head h2::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 25%, rgba(147, 171, 255, 0.35) 50%, transparent 75%);
    transform: translateX(-110%);
}
.section__head.in h2::after { transform: translateX(110%); transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; }

/* 10 · rings around the figures ------------------------------------------------- */
.stat { position: relative; overflow: hidden; }
.stat > b, .stat > span { position: relative; z-index: 1; }
.ring-svg { position: absolute; width: 132px; height: 132px; top: 50%; left: 50%; translate: -50% -50%; transform: rotate(-90deg); pointer-events: none; }
.ring-bg { fill: none; stroke: rgba(114, 147, 255, 0.08); stroke-width: 2.5; }
.ring-fg { fill: none; stroke: url(#none) var(--accent); stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.65; }
.stat.in .ring-fg { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }

/* 11 · "why" cards flip in -------------------------------------------------------- */
.reveal.flip { transform: perspective(900px) rotateY(-38deg) translateY(24px); transform-origin: right center; }
html[dir="ltr"] .reveal.flip { transform: perspective(900px) rotateY(38deg) translateY(24px); transform-origin: left center; }
.reveal.flip.in { transform: none; transition-duration: 0.9s; }

/* 12 · the example plays ---------------------------------------------------------- */
.demo { position: relative; margin: 18px 0 20px; height: 120px; border-radius: var(--radius-lg); background: var(--canvas-alt); border: 1px solid var(--border); overflow: hidden; }
.demo__chart { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; }
.demo__base { stroke: rgba(147, 171, 255, 0.25); stroke-dasharray: 4 5; }
#demoLine { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
#demoArea { opacity: 0.22; }
#demoDot { fill: #e6ecff; }
.demo__pnl { position: absolute; top: 10px; inset-inline-start: 14px; font-size: 26px; font-weight: 800; transition: color 0.3s; }
.demo.is-up #demoLine { stroke: var(--up); } .demo.is-up #demoArea { fill: var(--up); } .demo.is-up .demo__pnl { color: var(--up); }
.demo.is-down #demoLine { stroke: var(--down); } .demo.is-down #demoArea { fill: var(--down); } .demo.is-down .demo__pnl { color: var(--down); }
.out { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, opacity 0.4s; }
.example.playing .out { opacity: 0.55; }
.example.playing .out.active { opacity: 1; transform: scale(1.04); }
.example.playing .out--up.active { box-shadow: 0 0 34px -8px rgba(60, 210, 131, 0.6); }
.example.playing .out--down.active { box-shadow: 0 0 34px -8px rgba(255, 107, 123, 0.6); }

/* 13 · living arrows --------------------------------------------------------------- */
.way--up .way__icon { animation: hop-up 1.6s ease-in-out infinite; }
.way--down .way__icon { animation: hop-down 1.6s ease-in-out infinite 0.4s; }
.way--lev .way__icon { animation: throb 2s ease-in-out infinite 0.8s; }
@keyframes hop-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hop-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* 14 · market sparklines draw themselves -------------------------------------- */
.mcard.spark-prep .sp-l { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.mcard.spark-prep .sp-a { opacity: 0; }
.mcard.drawn .sp-l { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
.mcard.drawn .sp-a { opacity: 1; transition: opacity 1s ease calc(var(--d, 0s) + 0.8s); }

/* 15 · steps: numbers pop, a light travels the line --------------------------- */
.steps__dot {
    position: absolute; top: 28px; inset-inline-start: 16%; width: 12px; height: 12px; border-radius: 50%;
    background: #e6ecff; box-shadow: 0 0 16px 5px rgba(114, 147, 255, 0.75); opacity: 0; z-index: 2; list-style: none;
}
.steps.in .steps__dot { animation: travel 3.4s cubic-bezier(0.65, 0, 0.35, 1) 1.6s infinite; }
@keyframes travel {
    0% { opacity: 0; transform: translateX(0); }
    12% { opacity: 1; } 88% { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(var(--track, 600px) * var(--dir, -1))); }
}
.step .step__n { transform: scale(0.3); opacity: 0; }
.step.in .step__n { animation: pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.2s) both; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* 16 · rotating border around the final call ------------------------------------ */
.cta--live { isolation: isolate; border-color: transparent; }
.cta--live::before {
    content: ""; position: absolute; inset: -60%; z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 62%, #7293ff 78%, #3cd283 88%, transparent 100%);
    animation: spin 7s linear infinite; will-change: transform;
}
.cta--live::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: calc(var(--radius-xl) - 2px); background: linear-gradient(135deg, var(--surface-overlay), var(--canvas-alt)); }

/* 17 · buttons: periodic shimmer, ripple on press ---------------------------- */
.btn { position: relative; overflow: hidden; }
.btn--gold, .btn--primary, .cta .btn--dark { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after, .btn--primary::after, .cta .btn--dark::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg); animation: shimmer 5s ease-in-out infinite;
}
@keyframes shimmer { 0%, 62% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
.btn-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: btn-ripple 0.65s ease-out forwards; pointer-events: none; }
@keyframes btn-ripple { to { transform: scale(2.6); opacity: 0; } }

/* phones: no pointer effects, no parallax, no beams, no 3D coins ------------- */
@media (max-width: 760px) {
    .spot, .beams, .coins3d { display: none; }
    .ring-svg { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__title .w > span, #heroCandles rect, .step .step__n, .hero__visual .float { transform: none !important; opacity: 1 !important; }
    .ring-fg, .mcard .sp-l { stroke-dashoffset: 0 !important; }
    .spot, .beams, .progress { display: none; }
}