// NICO landing — the protagonist orbital. Layered iridescent core + orbit rings.
// Pure markup (uses .orbit CSS in nico.css) so it scales and animates cheaply.
function BigOrbit({ size = 520, idPrefix = "o" }) {
  const ringDefs = [
    { rx: 0.50, ry: 0.20, rot: 0,   tilt: 0,  color: "rgba(123,92,255,0.55)", spin: "spin-a", dot: "#7B5CFF", dotAt: { top: "50%", left: "0%" }, ds: 0.052 },
    { rx: 0.46, ry: 0.46, rot: 0,   tilt: 0,  color: "rgba(120,110,255,0.18)", spin: "spin-c", dot: null, ds: 0 },
    { rx: 0.50, ry: 0.20, rot: 60,  tilt: 0,  color: "rgba(255,94,203,0.5)",  spin: "spin-b", dot: "#FF5ECB", dotAt: { top: "0%", left: "50%" }, ds: 0.05 },
    { rx: 0.50, ry: 0.20, rot: 120, tilt: 0,  color: "rgba(255,138,122,0.5)", spin: "spin-a", dot: "#FF8A7A", dotAt: { top: "50%", left: "100%" }, ds: 0.048 },
    { rx: 0.50, ry: 0.32, rot: 25,  tilt: 0,  color: "rgba(78,107,255,0.32)",  spin: "spin-b", dot: "#4E6BFF", dotAt: { top: "100%", left: "50%" }, ds: 0.04 },
  ];
  const coreSize = size * 0.26;
  return (
    <span className="orbit" style={{ width: size, height: size }}>
      <span className="halo" style={{ width: size * 0.92, height: size * 0.92 }} />
      {ringDefs.map((r, i) => {
        const w = size * r.rx * 2 * (r.rx === r.ry ? 0.5 : 1);
        const ww = r.rx === r.ry ? size * r.rx * 2 : size * r.rx * 2;
        const hh = size * r.ry * 2;
        return (
          <span key={i} className={"ring " + r.spin}
            style={{
              width: ww, height: hh,
              borderColor: r.color,
              borderWidth: Math.max(1, size * 0.0026),
              transform: `rotate(${r.rot}deg)`,
            }}>
            {r.dot && (
              <span className="dot" style={{
                top: r.dotAt.top, left: r.dotAt.left,
                width: size * r.ds, height: size * r.ds,
                background: r.dot, boxShadow: `0 0 ${size * 0.05}px ${r.dot}`,
              }} />
            )}
          </span>
        );
      })}
      <span className="core" style={{ width: coreSize, height: coreSize }} />
    </span>
  );
}
Object.assign(window, { BigOrbit });