/* ==========================================================================
   StockX Capital — motion layer
   Optional. Delete this file's <link> and js/motion.js's <script> in index.html
   to remove all animation. Fully disabled under prefers-reduced-motion.
   ========================================================================== */

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, #7D8794, var(--brass), #FFFFFF);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* ---------- Hero canvas (constellation field) ---------- */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-canvas.is-ready { opacity: 1; }
.hero .hero-copy, .hero .process-card { will-change: transform; }

/* ---------- Headline word reveal ---------- */
.split-text .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.split-text .w > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; }
.split-text.is-in .w > span { animation: word-rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 85ms + 150ms); }
@keyframes word-rise { to { transform: none; } }

/* Shimmer on the accent line */
.hero h1 em .w > span {
  background: linear-gradient(100deg, var(--brass) 0%, var(--brass) 40%, #FFFFFF 50%, var(--brass) 60%, var(--brass) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.split-text.is-in em .w > span { animation: word-rise 1s var(--ease) forwards, shimmer 7s ease-in-out 1.6s infinite; animation-delay: calc(var(--i) * 85ms + 150ms), calc(var(--i) * 85ms + 1.6s); }
@keyframes shimmer { 0%, 55% { background-position: 100% 0; } 100% { background-position: -150% 0; } }

/* ---------- Process card: travelling border + sequential steps ---------- */
.process-card { position: relative; }
.process-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgb(201 209 220 / .95) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 7s linear infinite;
}
@keyframes spin-border { to { --ang: 360deg; } }
.process-list li { transition: background-color .5s, transform .5s var(--ease); border-radius: 8px; }
.process-list .step { transition: color .4s, text-shadow .4s, transform .5s var(--ease); display: inline-block; }
.process-list li.is-lit { transform: translateX(4px); }
.process-list li.is-lit .step { color: #FFFFFF; text-shadow: 0 0 18px rgb(201 209 220 / .8); transform: scale(1.12); }
.process-list li.is-lit strong { color: #fff; }

/* ---------- Marquee band ---------- */
.marquee {
  position: relative; overflow: hidden; background: var(--ink-2); color: #C6CFDA;
  border-block: 1px solid rgb(255 255 255 / .06); padding-block: 1.1rem;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 10%; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--ink-2), transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; margin: 0; list-style: none; }
.marquee-group li { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); white-space: nowrap; letter-spacing: -0.01em; }
.marquee-group li::after { content: "✦"; color: var(--brass); font-size: .7em; margin-left: 2.5rem; vertical-align: .15em; }
.marquee-group li:nth-child(even) { font-style: italic; color: var(--brass); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Staggered reveals ---------- */
.js .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal .eyebrow::before { transition: width .8s var(--ease) .2s; }
.js .reveal:not(.is-visible) .eyebrow::before { width: 0; }

/* ---------- Card spotlight + tilt ---------- */
.card, .person { position: relative; overflow: hidden; transform-style: preserve-3d; }
.card::before, .person::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(201 209 220 / .16), transparent 45%);
}
.card:hover::before, .person:hover::before { opacity: 1; }
.card.is-tilting { transition: transform .12s linear, box-shadow .3s, border-color .3s; }
.card-icon { transition: transform .5s var(--ease); }
.card:hover .card-icon { transform: rotate(-8deg) scale(1.08); }

/* Team avatar orbit ring */
.avatar { position: relative; }
.person .avatar::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px dashed rgb(31 74 138 / .55); opacity: 0; transition: opacity .4s;
  animation: orbit 14s linear infinite;
}
.person:hover .avatar::after { opacity: 1; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ---------- Philosophy ---------- */
.principles .num { transition: transform .8s var(--ease), color .4s; display: inline-block; }
.principles li:hover .num { transform: translateX(4px) scale(1.15); color: var(--brass); }
.principles li { position: relative; }
.principles li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease);
}
.principles li:hover::after { transform: scaleX(1); }
.risk-panel { position: relative; overflow: hidden; }
.risk-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(201 209 220 / .10) 50%, transparent 60%);
  transform: translateX(-100%);
}
.risk-panel.is-visible::after { animation: sweep 2.4s var(--ease) .6s 1 forwards; }
@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- Contact: drifting aurora ---------- */
.section-dark { position: relative; overflow: hidden; isolation: isolate; }
.section-dark::before, .section-dark::after {
  content: ""; position: absolute; z-index: -1; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(60px); opacity: .35; pointer-events: none;
}
.section-dark::before { background: radial-gradient(circle, rgb(201 209 220 / .35), transparent 60%); top: -30vmax; left: -15vmax; animation: drift-a 22s ease-in-out infinite alternate; }
.section-dark::after { background: radial-gradient(circle, rgb(60 110 190 / .45), transparent 60%); bottom: -35vmax; right: -20vmax; animation: drift-b 26s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-16vmax, -10vmax) scale(1.1); } }
.contact-form .field input, .contact-form .field textarea, .contact-form .field select { transition: border-color .25s, background-color .25s, box-shadow .25s, transform .25s var(--ease); }
.contact-form .field input:focus, .contact-form .field textarea:focus, .contact-form .field select:focus { transform: translateY(-1px); }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgb(255 255 255 / .35), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.btn:hover::after { opacity: 1; }
.btn.is-magnetic { transition: transform .18s ease-out, background-color .2s, color .2s, box-shadow .2s; }

/* ---------- Cursor follower (fine pointers only; native cursor kept) ---------- */
.cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 90; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgb(201 209 220 / .7); border-radius: 50%; pointer-events: none;
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background-color .25s, opacity .3s;
  opacity: 0; mix-blend-mode: normal;
}
.cursor-ring.is-on { opacity: 1; }
.cursor-ring.is-hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgb(201 209 220 / .12); }

/* ---------- Back to top with progress ring ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 55;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--brass); box-shadow: 0 8px 24px rgb(12 38 73 / .25);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s, transform .4s var(--ease);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 2; }
.to-top .track { stroke: rgb(255 255 255 / .1); }
.to-top .bar { stroke: var(--brass); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--p, 0))); }
.to-top .arrow { position: relative; width: 18px; height: 18px; transform: none; }

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .cursor-ring { display: none; }
  .split-text .w > span { transform: none; }
  .marquee-track, .process-card::before, .section-dark::before, .section-dark::after, .person .avatar::after { animation: none !important; }
  .hero h1 em .w > span { color: var(--brass); background: none; }
}
@media (pointer: coarse) { .cursor-ring { display: none; } }