/* ─────────────────────────────────────────────────────────────
   particle-text.css — vanilla port of the React Bits ParticleText
   styles + the "orbit" section that hosts it (after the hero).
   ───────────────────────────────────────────────────────────── */

/* section: opaque black — content stacks above the fixed canvas.
   Faint static aura. */
.orbit {
  position: relative;
  z-index: 2;
  overflow: hidden;
  text-align: center;
  padding: clamp(72px, 10vw, 140px) 20px clamp(64px, 8vw, 110px);
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(139, 92, 246, 0.09), transparent 70%),
    radial-gradient(ellipse 45% 40% at 62% 55%, rgba(59, 130, 246, 0.07), transparent 70%),
    #000;
}
/* fixed solid black — no blend, no fade on scroll */

.orbit .particle-text {
  height: clamp(240px, 36vw, 400px);
  max-width: 1200px;
  margin: 0 auto;
  cursor: crosshair;
}

/* 2-line seller subcopy — plain text, centred */
.orbit-sub {
  margin: clamp(18px, 3vw, 30px) auto 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  text-wrap: balance;
}

/* ── ParticleText port ── */
.particle-text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  touch-action: pan-y;
  isolation: isolate;
}

.particle-text__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.particle-text__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .orbit .particle-text {
    cursor: default;
  }
}