/* SPDX-License-Identifier: LicenseRef-PolyForm-Shield-1.0.0 */
/*
 * lsd-orbs.css — rotating-sphere primitives.
 *
 * CSS-only globe and icon-cloud alternatives — a rotating gradient orb plus
 * an optional ring of orbiting icons. Since LSD ships no 3D engine, these
 * classes are the lightweight stylized take on the pattern.
 *
 * Tokens consumed: --accent, --accent-2, --accent-3, --bg
 */

.lsd-orb {
  --orb-size: 260px;
  position: relative;
  width: var(--orb-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in oklch, white 30%, transparent),
      transparent 50%),
    conic-gradient(from 0deg,
      var(--accent, #6af),
      var(--accent-2, #f6c),
      var(--accent-3, #fc6),
      var(--accent, #6af));
  box-shadow:
    inset -20px -20px 60px color-mix(in oklch, black 60%, transparent),
    0 30px 80px -20px color-mix(in oklch, var(--accent, #6af) 60%, transparent);
  animation: lsd-orb-spin 18s linear infinite;
}

@keyframes lsd-orb-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lsd-orb { animation: none; }
}

/* Globe variant — meridian/parallel grid lines overlay. */
.lsd-orb--globe::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg,
      color-mix(in oklch, white 20%, transparent) 0 1px,
      transparent 1px 28px),
    repeating-linear-gradient(90deg,
      color-mix(in oklch, white 20%, transparent) 0 1px,
      transparent 1px 28px);
  mask-image: radial-gradient(circle, black 50%, transparent 75%);
}

/* Icon-cloud variant — orbiting icon ring.
 * Author places 6-12 children inside; each is positioned along an orbit
 * via :nth-child rotation, then the parent rotates. */
.lsd-orb--icon-cloud {
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklch, var(--accent, #6af) 30%, transparent),
    transparent 70%);
  box-shadow: none;
  display: grid;
  place-items: center;
}
.lsd-orb--icon-cloud > * {
  position: absolute;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, white 92%, transparent);
  color: var(--ink, #111);
  font-size: 18px;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}
.lsd-orb--icon-cloud > *:nth-child(1)  { transform: rotate(0deg)   translateX(110px) rotate(0deg); }
.lsd-orb--icon-cloud > *:nth-child(2)  { transform: rotate(45deg)  translateX(110px) rotate(-45deg); }
.lsd-orb--icon-cloud > *:nth-child(3)  { transform: rotate(90deg)  translateX(110px) rotate(-90deg); }
.lsd-orb--icon-cloud > *:nth-child(4)  { transform: rotate(135deg) translateX(110px) rotate(-135deg); }
.lsd-orb--icon-cloud > *:nth-child(5)  { transform: rotate(180deg) translateX(110px) rotate(-180deg); }
.lsd-orb--icon-cloud > *:nth-child(6)  { transform: rotate(225deg) translateX(110px) rotate(-225deg); }
.lsd-orb--icon-cloud > *:nth-child(7)  { transform: rotate(270deg) translateX(110px) rotate(-270deg); }
.lsd-orb--icon-cloud > *:nth-child(8)  { transform: rotate(315deg) translateX(110px) rotate(-315deg); }