/* SolvTechX motion layer — Cryptor-inspired patterns, restrained to the brand
 * (black 75 / white 15 / lime 10; minimal over decorative).
 *
 * Everything here is gated on `html.stx-motion`, which site-motion.js adds only
 * when JS runs AND the user has not asked for reduced motion. Without that
 * class this file is inert, so no-JS and reduced-motion visitors get the
 * static site unchanged. */

/* ---------------------------------------------------------------------------
 * 1. Reveal-on-scroll, re-enabled.
 * The build ships a .reveal system (opacity/translate/blur -> .is-visible via
 * an IntersectionObserver that already runs) but a trailing override forces
 * everything visible, so the entrance animation never fires. Restore the
 * hidden initial state — only under .stx-motion, and only until observed.
 * ------------------------------------------------------------------------- */
html.stx-motion .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
}

html.stx-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------------------------------------------------------------------------
 * 2. CTA glow border (Cryptor "Glow Border", recoloured).
 * A conic lime segment orbiting the pill's edge. Implemented as an oversized
 * rotating pseudo-element clipped behind the button face, so the label and
 * background are untouched.
 * ------------------------------------------------------------------------- */
html.stx-motion .stx-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html.stx-motion .stx-glow::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 220%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    transparent 0deg,
    transparent 300deg,
    rgba(195, 216, 46, 0.9) 330deg,
    transparent 360deg
  );
  animation: stx-orbit 4.5s linear infinite;
}

html.stx-motion .stx-glow::after {
  /* button face sits above the ring, inset by the border width */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5px;
  border-radius: inherit;
  background: inherit;
}

@keyframes stx-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * 3. Marquees (trust row + module ticker).
 * Track holds two copies of its content; animating -50% loops seamlessly.
 * Duration set per-instance via --stx-marquee-s. Pauses on hover.
 * ------------------------------------------------------------------------- */
.stx-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.stx-marquee__track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
}

html.stx-motion .stx-marquee__track {
  animation: stx-slide var(--stx-marquee-s, 30s) linear infinite;
}

html.stx-motion .stx-marquee:hover .stx-marquee__track {
  animation-play-state: paused;
}

@keyframes stx-slide {
  to { transform: translateX(-50%); }
}

/* module ticker chip */
.stx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
}

.stx-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: #c3d82e;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * 4. Hero halo — one soft lime glow breathing behind the H1. The only ambient
 * decoration; everything else must be earned by content.
 * ------------------------------------------------------------------------- */
.stx-halo {
  position: absolute;
  left: 50%;
  top: 8rem;
  width: min(640px, 80vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(195, 216, 46, 0.14), transparent 65%);
  filter: blur(52px);
}

html.stx-motion .stx-halo {
  animation: stx-breathe 9s ease-in-out infinite;
}

@keyframes stx-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}