/* The affect rig's own styles: the body, the sphere, the face plane and
 * the colours its SVG reads. Everything themeable is a --rig-* property, set
 * on the rig or any ancestor, so one rig wears the widget's charcoal in the
 * mockup and the field's ultramarine and butter on the landing.
 *
 *   --rig-body   sphere colour          --rig-eye    the lit eye
 *   --rig-hi     sphere highlight       --rig-glow   eye glow
 *   --rig-lo     sphere shadow side     --rig-blush  cheeks
 *   --rig-rim    rim light              --rig-floor  contact shadow
 *   --rig-drop   tears and sweat        --rig-star   twinkles */

.rig {
  position: relative;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
}

.rig-body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 92%;
  perspective: calc(240px * var(--k));
  will-change: transform;
}

.rig-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%,
    var(--rig-hi, color-mix(in srgb, var(--rig-body, #15120e) 80%, #fff)) 0%,
    var(--rig-body, #15120e) 42%,
    var(--rig-lo, color-mix(in srgb, var(--rig-body, #15120e) 70%, #000)) 100%);
  box-shadow:
    inset 0 calc(-5px * var(--k)) calc(10px * var(--k)) rgba(0, 0, 0, 0.14),
    inset 0 calc(2px * var(--k)) calc(3px * var(--k)) var(--rig-rim, rgba(255, 255, 255, 0.07)),
    0 calc(6px * var(--k)) calc(24px * var(--k)) rgba(0, 0, 0, 0.22);
}

.rig-plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
}

.rig-shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -14%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rig-floor, rgba(0, 0, 0, 0.6)), transparent);
  filter: blur(calc(1.5px * var(--k)));
  transform-origin: 50% 50%;
}

.rig-ring { display: none; }
.rig-with-ring .rig-ring {
  display: block;
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--rig-glow, #5b67ff);
  opacity: 0;
  animation: rig-ring 8s ease-out infinite;
}
@keyframes rig-ring {
  0%   { opacity: 0.55; transform: scale(0.92); }
  70%  { opacity: 0;    transform: scale(1.32); }
  100% { opacity: 0;    transform: scale(1.32); }
}

.rig .s-eye       { stop-color: var(--rig-eye, #8a93ff); }
.rig .s-eye-dark  { stop-color: color-mix(in srgb, var(--rig-eye, #8a93ff) 80%, #000); }
.rig .s-eye-light { stop-color: color-mix(in srgb, var(--rig-eye, #8a93ff) 78%, #fff); }
.rig .s-blush     { stop-color: var(--rig-blush, #ff7f96); }
.rig .s-drop      { stop-color: var(--rig-drop, #b9cdfb); stop-opacity: 0.9; }
.rig .glow-flood  { flood-color: var(--rig-glow, #5b67ff); }
.rig .mouth       { fill: var(--rig-eye, #8a93ff); stroke: var(--rig-eye, #8a93ff); }
.rig .star        { fill: var(--rig-star, #e6e8ff); }

/* The juice (liquid.js): over the sphere, under the face. --rig-liquid
 * tints it; deep and dim, so the eyes stay the brightest thing on it. */
.rig-liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rig .s-liq-hi      { stop-color: color-mix(in srgb, var(--rig-liquid, #6f78ff) 85%, #fff); stop-opacity: var(--rig-liquid-hi, 0.09); }
.rig .s-liq-deep    { stop-color: color-mix(in srgb, var(--rig-liquid, #6f78ff) 88%, #000); stop-opacity: var(--rig-liquid-deep, 0.34); }
.rig .s-liq-caustic { stop-color: color-mix(in srgb, var(--rig-liquid, #6f78ff) 55%, #fff); }
.rig .s-liq-top     { stop-color: color-mix(in srgb, var(--rig-liquid, #6f78ff) 62%, #fff); }
.rig .s-liq-lip     { stop-color: color-mix(in srgb, var(--rig-liquid, #6f78ff) 22%, #fff); }
.rig .liq-lip       { stroke-width: 0.42; }
.rig .liq-front     { stroke-width: 0.3; stroke-opacity: 0.22; }
.rig .liq-rim       { stroke: color-mix(in srgb, var(--rig-liquid, #6f78ff) 45%, #fff); stroke-opacity: 0.2; stroke-width: 1.1; }
.rig .liq-film      { fill: color-mix(in srgb, var(--rig-liquid, #6f78ff) 60%, transparent); fill-opacity: 0.45; }
.rig .liq-ripple    { stroke: color-mix(in srgb, var(--rig-liquid, #6f78ff) 35%, #fff); stroke-width: 0.5; }
.rig .liq-drop      { fill: color-mix(in srgb, var(--rig-liquid, #6f78ff) 40%, #fff); }
.rig .glass-rim     { stroke: var(--rig-glass-rim, rgba(255, 255, 255, 0.1)); stroke-width: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .rig-with-ring .rig-ring { animation: none; }
}