/* ==================================================================
   MogamiSoft — MOTION LAYER (premium animations)
   Loaded after mogami.css. Animations run for everyone (see motion.js note).
   ================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- Ambient glows drift slowly ---- */
.glow { animation: drift 16s ease-in-out infinite alternate; }
.glow-violet { animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.12); } 100% { transform: translate(-30px, 50px) scale(.95); } }

/* ---- Hero cursor light ---- */
.hero-light { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s;
    background: radial-gradient(600px circle at var(--hx, 50%) var(--hy, 40%), rgba(150, 215, 0, .09), transparent 60%); }
.hero:hover .hero-light, .page-hero:hover .hero-light { opacity: 1; }

/* ---- Split headline (word reveal) ---- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
[data-split] .wi { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 70ms + 120ms); }
[data-split].split-in .wi { transform: none; }
.hl, .wi.hl {
    background: linear-gradient(100deg, var(--lime) 0%, var(--lime-2) 40%, #eaffb8 50%, var(--lime-2) 60%, var(--lime) 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmer 6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---- Pill sheen ---- */
.pill { position: relative; overflow: hidden; }
.pill::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); animation: sheen 4.5s ease-in-out infinite 1.5s; }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---- Hero orbit (canvas + core + cards) ---- */
.orbit-canvas { position: absolute; inset: -14%; width: 128%; height: 128%; pointer-events: none; z-index: 0; }
.orbit-core { z-index: 2; transition: transform .4s var(--ease), box-shadow .4s; translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 6px); }
.orbit-core img { animation: float 6s ease-in-out infinite, wobble 9s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: -8deg; } }
.orbit-core.hit { box-shadow: 0 0 120px rgba(150, 215, 0, .5), inset 0 0 30px rgba(0, 0, 0, .5); transform: scale(1.06); }
.core-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 1px solid rgba(150, 215, 0, .55); animation: corePulse 3.2s cubic-bezier(.2, .6, .3, 1) infinite; pointer-events: none; }
.core-pulse.p2 { animation-delay: 1.6s; }
@keyframes corePulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.orbit-card { z-index: 3; translate: calc(var(--mx, 0) * var(--d, 16) * 1px) calc(var(--my, 0) * var(--d, 16) * 1px); transition: translate .5s var(--ease), border-color .3s, box-shadow .3s; }
.orbit-card.ping { border-color: var(--lime-line); box-shadow: 0 0 0 1px rgba(150, 215, 0, .25), 0 0 34px rgba(150, 215, 0, .28), var(--shadow); }
.orbit-card .ic { transition: background .3s, color .3s; }
.orbit-card.ping .ic { background: var(--lime); color: #0b0a14; }
.orbit-card .live { animation: livePing 1.8s ease-out infinite; }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.oc-4 { top: auto; bottom: 22%; inset-inline-end: -4%; animation-delay: -1.2s; }
@media (max-width: 520px) { .oc-4 { display: none; } }
.rot { display: inline-block; transition: opacity .35s, transform .35s var(--ease); }
.rot.out { opacity: 0; transform: translateY(-6px); }

/* ---- Card spotlight (follows cursor) + 3D tilt ---- */
.card { isolation: isolate; }
.card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: -1;
    background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(150, 215, 0, .11), transparent 45%);
}
.card:hover::before { opacity: 1; }
[data-tilt] { transform-style: preserve-3d; }
[data-tilt].tilting { transition: transform .15s ease-out, border-color .3s, background .3s !important; }
[data-tilt] .ic-box { transition: transform .4s var(--ease), background .3s, color .3s; }
[data-tilt]:hover .ic-box { transform: translateZ(30px) scale(1.06); }

/* ---- Magnetic + sheen buttons ---- */
[data-magnetic] { translate: var(--bx, 0px) var(--by, 0px); transition: translate .3s var(--ease), transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s; }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-110%); background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%); transition: transform .7s var(--ease); }
.btn-primary:hover::after { transform: translateX(110%); }

/* ---- Animated gradient borders ---- */
.cta-band, .spotlight, .chart-card { border: 1px solid transparent; animation: spinBorder 7s linear infinite; }
.cta-band {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(150, 215, 0, .22), transparent 50%) padding-box,
        radial-gradient(100% 120% at 100% 100%, rgba(124, 108, 255, .18), transparent 55%) padding-box,
        linear-gradient(var(--surface), var(--surface)) padding-box,
        conic-gradient(from var(--ang), rgba(255, 255, 255, .08) 0 60%, rgba(150, 215, 0, .9) 75%, rgba(124, 108, 255, .7) 85%, rgba(255, 255, 255, .08) 95%) border-box;
}
.spotlight, .chart-card {
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        conic-gradient(from var(--ang), rgba(255, 255, 255, .08) 0 65%, rgba(150, 215, 0, .8) 80%, rgba(255, 255, 255, .08) 92%) border-box;
}
@keyframes spinBorder { to { --ang: 360deg; } }

/* ---- Terminal typewriter ---- */
.js [data-typer] > div { clip-path: inset(0 100% 0 0); }
.js [data-typer] > div.on { animation: typeLine .55s steps(28, end) forwards; }
@keyframes typeLine { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Stagger children ---- */
.js .stagger > * { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .stagger.in > * { opacity: 1; transform: none; }
.js .stagger.in > *:nth-child(1) { transition-delay: .05s; } .js .stagger.in > *:nth-child(2) { transition-delay: .1s; }
.js .stagger.in > *:nth-child(3) { transition-delay: .15s; } .js .stagger.in > *:nth-child(4) { transition-delay: .2s; }
.js .stagger.in > *:nth-child(5) { transition-delay: .25s; } .js .stagger.in > *:nth-child(6) { transition-delay: .3s; }
.js .stagger.in > *:nth-child(7) { transition-delay: .35s; } .js .stagger.in > *:nth-child(8) { transition-delay: .4s; }
.js .stagger.in > *:nth-child(9) { transition-delay: .45s; } .js .stagger.in > *:nth-child(n+10) { transition-delay: .5s; }
.chip { transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease); }
.chip:hover { transform: translateY(-3px); }
.chip-lg { padding: .7rem 1.15rem; font-size: .92rem; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 55s; }

/* ---- Process steps light up in sequence ---- */
.step { overflow: hidden; transition: border-color .5s, transform .4s var(--ease); }
.step::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--lime), var(--lime-2)); transition: width .9s var(--ease); }
.step::before { transition: color .6s, -webkit-text-stroke-color .6s, text-shadow .6s; }
.steps.run .step::after { width: 100%; }
.steps.run .step::before { color: var(--lime); -webkit-text-stroke-color: var(--lime); text-shadow: 0 0 24px rgba(150, 215, 0, .45); }
.steps.run .step { border-color: rgba(150, 215, 0, .25); }
.steps .step:nth-child(1)::after, .steps .step:nth-child(1)::before { transition-delay: .1s; }
.steps .step:nth-child(2)::after, .steps .step:nth-child(2)::before { transition-delay: .6s; }
.steps .step:nth-child(3)::after, .steps .step:nth-child(3)::before { transition-delay: 1.1s; }
.steps .step:nth-child(4)::after, .steps .step:nth-child(4)::before { transition-delay: 1.6s; }
.step:hover { transform: translateY(-4px); }

/* ---- Pipeline flow (data packet travels across) ---- */
.flow-item { transition: border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.flow-item .ic-box { transition: background .4s, color .4s, transform .4s var(--ease); }
.flow-item.lit { border-color: var(--lime-line); box-shadow: 0 0 40px -10px rgba(150, 215, 0, .5); transform: translateY(-4px); }
.flow-item.lit .ic-box { background: var(--lime); color: #0b0a14; transform: scale(1.08); }
.flow-item.lit::after { background: var(--lime) !important; color: #0b0a14 !important; box-shadow: 0 0 16px var(--lime); }
.flow-item.done .ic-box { background: rgba(150, 215, 0, .24); }

/* ---- Page hero with a visual ---- */
.hero-split { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero-split { grid-template-columns: 1.1fr .9fr; } }

/* ---- Live chart card ---- */
.chart-card { position: relative; border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); text-align: start; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.chart-head b { font-size: .95rem; }
.live-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(61, 220, 151, .1); color: var(--ok); font-size: .75rem; font-weight: 600; border: 1px solid rgba(61, 220, 151, .3); }
.live-pill .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: livePing 1.8s ease-out infinite; }
.live-chart { width: 100%; height: 240px; display: block; border-radius: 14px; background: #0a0913; border: 1px solid var(--line); }
.chart-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .9rem; }
.chart-foot > div { padding: .6rem .75rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.chart-foot b { display: block; font-size: .86rem; margin-top: .15rem; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.chart-foot b.buy { color: var(--ok); } .chart-foot b.sell { color: #ff7a7a; }

/* ---- Stats shine sweep ---- */
.stats { position: relative; }
.stats::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(150, 215, 0, .08) 50%, transparent 65%); transform: translateX(-100%); }
.stats.in::after { animation: statSweep 2.2s var(--ease) .4s 1 forwards; }
@keyframes statSweep { to { transform: translateX(100%); } }

/* ---- Eyebrow line grows ---- */
.js .reveal.eyebrow::before, .js .reveal .eyebrow::before { width: 0; transition: width .8s var(--ease) .2s; }
.js .reveal.in.eyebrow::before, .js .reveal.in .eyebrow::before { width: 22px; }