/* ThreeUI Community adaptations (MIT, Copyright (c) 2026 Meng To).
   Source: THIRD_PARTY_NOTICES.md. License: assets/licenses/threeui-MIT.txt. */

/* Constellation Field: scoped to the illustration so the text stays clear. */
.threeui-constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 30px; mask-image: radial-gradient(ellipse, #000 35%, transparent 74%); }
.server-scene .scene-grid { opacity: .45; }

/* Spinning Border Button: original conic beam, adapted to existing controls.
   The inset surface keeps the moving gradient outside the readable label. */
:where(.hero-buttons .button-primary, .nav-cta, .pricing-card.featured .plan-button, .final-actions .button-primary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --beam-surface: linear-gradient(145deg, #3779ff, #2563eb 70%);
  --beam-color: #fff;
}
:where(.hero-buttons .button-primary, .nav-cta, .pricing-card.featured .plan-button, .final-actions .button-primary)::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 125%;
  aspect-ratio: 1;
  background: conic-gradient(from 90deg, transparent 0%, transparent 75%, var(--beam-color) 100%);
  opacity: 0;
  animation: threeui-border-spin 3s linear infinite;
  animation-play-state: paused;
  transition: opacity .3s;
  pointer-events: none;
}
:where(.hero-buttons .button-primary, .nav-cta, .pricing-card.featured .plan-button, .final-actions .button-primary)::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: inherit;
  background: var(--beam-surface);
  box-shadow: inset 0 1px 0 #ffffff35;
  pointer-events: none;
}
:where(.hero-buttons .button-primary, .nav-cta, .pricing-card.featured .plan-button, .final-actions .button-primary):is(:hover, :focus-visible)::before { opacity: 1; animation-play-state: running; }
.final-actions .button-primary { --beam-surface: linear-gradient(#fff, #eff6ff); --beam-color: #2563eb; }
@keyframes threeui-border-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Uplink Loader: segmented, skewed signal ticks from the original component.
   Indeterminate activity only; no invented completion percentage. */
.threeui-uplink { display: flex; direction: ltr; align-items: center; gap: 4px; height: 23px; width: fit-content; max-width: 100%; padding: 3px 9px; border-inline: 1px solid #2563eb35; }
.threeui-uplink i { display: block; width: 4px; height: 11px; background: #2563eb26; transform: skewX(12deg); animation: threeui-uplink-ignite 1.4s ease-in-out infinite; animation-delay: calc(var(--tick) * 70ms); }
.threeui-uplink i:nth-child(4n + 1) { height: 16px; }
@keyframes threeui-uplink-ignite { 0%, 65%, 100% { background: #2563eb26; box-shadow: none; } 30% { background: #2563eb; box-shadow: 0 0 4px #2563eb70, 0 0 11px #2563eb30; } }
.motion-paused .threeui-uplink i,
.motion-paused :is(.button-primary, .nav-cta, .plan-button)::before,
.scene-sleeping .threeui-uplink i,
.scene-sleeping :is(.button-primary, .nav-cta, .plan-button)::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .threeui-uplink i { animation: none !important; background: #2563eb; }
  :is(.button-primary, .nav-cta, .plan-button)::before { animation: none !important; }
}