/* ═══════════════════════════════════════════════════════════════════════
   Lucia Orbit — the brand-cycle tail orbiting a circular anchor (Lucia's
   round headshot). Named by the founder (FILD-85, 2026-08-17). Reference:
   docs/lucia-orbit.md. External + parser-blocking so the cold-open splash
   can paint it before the app module; in-app consumers use the same sheet.

   Contract: SPINNING from its first frame (never a static ring; starts
   mid-arc), accelerates to fast laps, HOLDS spinning while loading (the
   orbit IS the loader — never parks), then on release one faster KICK lap
   and a soft ease-out over ~300° while the whole thing (anchor + tail +
   halo) fades out as content rises in. Never a seal-into-ring, never a
   morph. Reduced motion → single soft ring + crossfade.

   Markup:
     <div class="lucia-orbit" data-orbit="spinning" style="--orbit-size:132px">
       <div class="lucia-orbit__halo"></div>
       <div class="lucia-orbit__tail"></div>
       <img class="lucia-orbit__anchor" src="…" alt="">
     </div>
   States (data-orbit): spinning → releasing → gone (src/lib/luciaOrbit.js).
   ═══════════════════════════════════════════════════════════════════════ */
.lucia-orbit {
  /* tokens — the founder-final motion (FILD-85 02) */
  --orbit-size: 132px;
  --orbit-lap-windup: 0.7s;
  --orbit-lap-fast: 0.45s;
  --orbit-lap-kick: 0.3s;
  --orbit-release: 0.9s;
  --orbit-fade-delay: 0.22s;
  --orbit-fade: 0.55s;
  --orbit-tail-sweep: 120deg;
  --orbit-start: 140deg;
  --orbit-c1: #ffbc17; /* yellowish-gold      (hellolucia.ai golds) */
  --orbit-c2: #ffd976; /* golden-sunshine     (hellolucia.ai golds) */
  --orbit-c3: #b34d79; /* goldish-magenta     (hellolucia.ai arrival rose gold) */
  --orbit-c4: #8a3ffc; /* magenta-purple      (hellolucia.ai concierge violet) */
  --orbit-halo: 207, 151, 47;
  --orbit-ease-release: cubic-bezier(0.2, 0.8, 0.2, 1);
  --orbit-ease-windup: cubic-bezier(0.5, 0, 0.9, 0.55);
  /* derived geometry — scales with --orbit-size (7 / 132, 3 / 132, 26 / 132) */
  --orbit-tail-inset: calc(var(--orbit-size) * -0.053);
  --orbit-tail-thickness: max(2px, calc(var(--orbit-size) * 0.0227));
  --orbit-halo-inset: calc(var(--orbit-size) * -0.197);

  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
  border-radius: 50%;
  flex: 0 0 auto;
}
.lucia-orbit__anchor {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}
.lucia-orbit__tail,
.lucia-orbit__halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lucia-orbit__tail {
  inset: var(--orbit-tail-inset);
  /* the tail: transparent → c1 → c2 → c3 → c4 → c1 → transparent over
     --orbit-tail-sweep degrees, ending at 360 */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent calc(360deg - var(--orbit-tail-sweep)),
    color-mix(in srgb, var(--orbit-c1) 55%, transparent) calc(360deg - var(--orbit-tail-sweep) * 0.82),
    color-mix(in srgb, var(--orbit-c2) 85%, transparent) calc(360deg - var(--orbit-tail-sweep) * 0.6),
    color-mix(in srgb, var(--orbit-c3) 92%, transparent) calc(360deg - var(--orbit-tail-sweep) * 0.38),
    color-mix(in srgb, var(--orbit-c4) 95%, transparent) calc(360deg - var(--orbit-tail-sweep) * 0.17),
    color-mix(in srgb, var(--orbit-c1) 90%, transparent) calc(360deg - var(--orbit-tail-sweep) * 0.03),
    transparent 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--orbit-tail-thickness)), #000 calc(100% - var(--orbit-tail-thickness) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--orbit-tail-thickness)), #000 calc(100% - var(--orbit-tail-thickness) + 0.5px));
  opacity: 1;
}
.lucia-orbit__halo {
  inset: var(--orbit-halo-inset);
  background: radial-gradient(circle, rgba(var(--orbit-halo), 0.14), rgba(var(--orbit-halo), 0) 66%);
  opacity: 0;
}

/* ── spinning: turning from frame one at the wind-up pace, then fast laps
   from the same offset (no seam), forever until released. ── */
.lucia-orbit[data-orbit="spinning"] .lucia-orbit__tail {
  animation:
    lucia-orbit-windup var(--orbit-lap-windup) var(--orbit-ease-windup) 0s 1,
    lucia-orbit-fast var(--orbit-lap-fast) linear var(--orbit-lap-windup) infinite;
}
.lucia-orbit[data-orbit="spinning"] .lucia-orbit__halo {
  animation: lucia-orbit-halo-in 1s var(--orbit-ease-release) 1.2s forwards;
}
@keyframes lucia-orbit-windup {
  from { transform: rotate(var(--orbit-start)); }
  to { transform: rotate(calc(var(--orbit-start) + 360deg)); }
}
@keyframes lucia-orbit-fast {
  from { transform: rotate(var(--orbit-start)); }
  to { transform: rotate(calc(var(--orbit-start) + 360deg)); }
}
@keyframes lucia-orbit-halo-in { to { opacity: 1; } }

/* ── releasing: from the live angle (--orbit-from, set by the helper) one
   kick lap, then the soft release over ~300°; the whole orbit fades out
   --orbit-fade-delay into the release. ── */
.lucia-orbit[data-orbit="releasing"] .lucia-orbit__tail {
  animation: lucia-orbit-kick-release calc(var(--orbit-lap-kick) + var(--orbit-release)) linear forwards;
}
.lucia-orbit[data-orbit="releasing"] .lucia-orbit__halo { opacity: 1; }
.lucia-orbit[data-orbit="releasing"] {
  animation: lucia-orbit-out var(--orbit-fade) var(--orbit-ease-release) calc(var(--orbit-lap-kick) + var(--orbit-fade-delay)) forwards;
}
@keyframes lucia-orbit-kick-release {
  0%   { transform: rotate(var(--orbit-from, 0deg)); animation-timing-function: linear; }
  25%  { transform: rotate(var(--orbit-kick, 360deg)); animation-timing-function: var(--orbit-ease-release); }
  100% { transform: rotate(var(--orbit-to, 660deg)); }
}
@keyframes lucia-orbit-out { to { opacity: 0; } }
.lucia-orbit[data-orbit="gone"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lucia-orbit .lucia-orbit__tail,
  .lucia-orbit[data-orbit="spinning"] .lucia-orbit__tail,
  .lucia-orbit[data-orbit="releasing"] .lucia-orbit__tail {
    animation: none;
    background: conic-gradient(rgba(var(--orbit-halo), 0.7), rgba(var(--orbit-halo), 0.7));
    opacity: 0.9;
  }
  .lucia-orbit .lucia-orbit__halo { animation: none; opacity: 1; }
  .lucia-orbit[data-orbit="releasing"] { animation: none; opacity: 0; }
}