/* Motion / tech presence — Scale·Sierra inspired, FDE-toned */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
  animation: gridDrift 48s linear infinite;
}

.ambient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.35;
}
.ambient-orb.a {
  width: 420px;
  height: 420px;
  top: -80px;
  right: -60px;
  background: rgba(91, 79, 232, 0.16);
  animation: orbFloat 18s ease-in-out infinite;
}
.ambient-orb.b {
  width: 360px;
  height: 360px;
  bottom: 10%;
  left: -100px;
  background: rgba(255, 150, 110, 0.12);
  animation: orbFloat 22s ease-in-out infinite reverse;
}

@keyframes gridDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(56px, 56px, 0); }
}
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-24px, 18px, 0); }
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-motion .hx {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.hero-motion.is-ready .hx {
  animation: heroIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 85ms);
}
@keyframes heroIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-motion .hero-bg img {
  transform: scale(1.06);
  transition: transform 8s ease-out, opacity 1.2s ease;
}
.hero-motion.is-ready .hero-bg img {
  transform: scale(1);
}

.eyebrow .dot {
  box-shadow: 0 0 0 0 rgba(95, 208, 214, 0.45);
  animation: pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(91, 79, 232, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(91, 79, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 79, 232, 0); }
}

a.btn-gold,
button.btn-gold,
.btn-gold {
  position: relative;
  overflow: hidden;
}
a.btn-gold::after,
button.btn-gold::after,
.btn-gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
a.btn-gold:hover::after,
button.btn-gold:hover::after,
.btn-gold:hover::after {
  animation: btnShine 0.85s ease;
}
@keyframes btnShine {
  from { left: -40%; }
  to { left: 120%; }
}

.app-card,
.sol-card,
.cap-card,
.case-card,
.stage-card {
  position: relative;
}
.app-card::before,
.sol-card::before,
.cap-card::before,
.case-card::before,
.stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 0 0 1px rgba(200, 160, 74, 0.35),
    0 0 28px rgba(95, 208, 214, 0.08);
  transition: opacity 0.3s ease;
}
.app-card:hover::before,
.sol-card:hover::before,
.cap-card:hover::before,
.case-card:hover::before,
.stage-card:hover::before {
  opacity: 1;
}
.case-card img,
.hero-proof img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-card:hover img,
.hero-proof:hover img {
  transform: scale(1.04);
}

.step {
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.step.is-active {
  border-color: rgba(200, 160, 74, 0.45);
  background: rgba(200, 160, 74, 0.06);
  transform: translateX(4px);
}
.step.is-active .step-no {
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(200, 160, 74, 0.35);
}

.cadence-fill {
  width: 0 !important;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cadence.is-live .cadence-fill {
  width: var(--bar, 60%) !important;
}
.cadence.is-live .cadence-live {
  animation: liveBlink 1.6s ease-in-out infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.marquee-blk {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  white-space: nowrap;
  text-transform: uppercase;
}
.marquee-item span {
  color: var(--cyan);
  margin-right: 10px;
  opacity: 0.7;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -30%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(200, 160, 74, 0.08), transparent);
  transform: skewX(-18deg);
  animation: ctaSweep 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSweep {
  0%, 100% { left: -30%; opacity: 0; }
  30% { opacity: 1; }
  70% { left: 110%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .ambient-orb,
  .eyebrow .dot,
  .marquee-track,
  .cta-band::after,
  .cadence.is-live .cadence-live {
    animation: none !important;
  }
  .reveal,
  .hero-motion .hx {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .cadence-fill {
    transition: none !important;
  }
  .case-card img,
  .hero-proof img {
    transition: none !important;
  }
}