/* GENERATED from shared/mascot/saucer.css by `npm run sync:mascot`.
   Do not edit this copy — edit the source and re-run the sync. */

/* The saucer's poses (see saucer.js). One `data-pose` on the <svg> decides which
   eyes and extras show and how the craft sits; nothing else needs to know.

   Transforms use the SVG's own units (`transform-box: view-box`), so origins are
   points on the drawing: 77 78 is the middle of the craft, 77 113 the bottom of
   its face, which is where a squash should push from. */

.saucer {
  display: block;
  overflow: visible;
}

.saucer .sc-dir,
.saucer .sc-pose,
.saucer .sc-motion,
.saucer .sc-shadow {
  transform-box: view-box;
  transform-origin: 77px 78px;
}

.saucer .sc-pose {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.saucer .sc-shadow {
  transform-origin: 73px 130px;
  transition: transform 220ms ease, opacity 180ms ease;
}

/* Compact (the dock's pill): the extras draw outside the cropped viewBox, into
   the button around the saucer, and with thicker lines and bigger dots so they
   still read at a quarter of a pixel per unit. */
.saucer--compact [data-extra] path {
  stroke-width: 7px;
}
.saucer--compact [data-extra="dots"] > :nth-child(1) {
  r: 5px;
}
.saucer--compact [data-extra="dots"] > :nth-child(2) {
  r: 6.5px;
}
.saucer--compact [data-extra="dots"] > :nth-child(3) {
  r: 8px;
}

.saucer.facing-left .sc-dir {
  transform: scaleX(-1);
}

/* --- eyes: one set at a time ---------------------------------------------------- */

.saucer .sc-eyes,
.saucer .sc-extra {
  display: none;
}

.saucer[data-pose="idle"] .sc-eyes[data-eyes="normal"],
.saucer[data-pose="flying"] .sc-eyes[data-eyes="normal"],
.saucer[data-pose="listening"] .sc-eyes[data-eyes="wide"],
.saucer[data-pose="arriving"] .sc-eyes[data-eyes="wide"],
.saucer[data-pose="thinking"] .sc-eyes[data-eyes="up"],
.saucer[data-pose="speaking"] .sc-eyes[data-eyes="squint"],
.saucer[data-pose="off"] .sc-eyes[data-eyes="closed"],
.saucer[data-pose="error"] .sc-eyes[data-eyes="x"],
.saucer[data-pose="happy"] .sc-eyes[data-eyes="happy"] {
  display: inline;
}

/* --- extras: one per pose ------------------------------------------------------- */

.saucer[data-pose="listening"] [data-extra="waves"],
.saucer[data-pose="thinking"] [data-extra="dots"],
.saucer[data-pose="flying"] [data-extra="speed"],
.saucer[data-pose="arriving"] [data-extra="puffs"],
.saucer[data-pose="off"] [data-extra="zzz"],
.saucer[data-pose="error"] [data-extra="alert"],
.saucer[data-pose="happy"] [data-extra="sparkles"] {
  display: inline;
}

/* --- how the craft sits --------------------------------------------------------- */

.saucer[data-pose="thinking"] .sc-pose {
  transform: rotate(-4deg);
}

.saucer[data-pose="flying"] .sc-pose {
  transform: rotate(-14deg) scale(1.08, 0.94);
}
.saucer[data-pose="flying"] .sc-shadow {
  opacity: 0;
}

.saucer[data-pose="arriving"] .sc-pose {
  transform-origin: 77px 113px;
  transform: rotate(9deg) scale(1.08, 0.9);
}
.saucer[data-pose="arriving"] .sc-shadow {
  transform: scaleX(1.15);
}

.saucer[data-pose="off"] .sc-pose {
  transform-origin: 77px 113px;
  transform: rotate(7deg);
}

.saucer[data-pose="error"] .sc-pose {
  transform: rotate(-3deg);
}

.saucer[data-pose="happy"] .sc-pose {
  transform: translateY(-4px);
}

/* --- what keeps moving ---------------------------------------------------------- */

/* Hovering. Only where the caller asks for it (the pointer); the dock is still. */
.saucer.is-bobbing[data-pose="idle"] .sc-motion {
  animation: sc-bob 2.4s ease-in-out infinite;
}
.saucer.is-bobbing[data-pose="idle"] .sc-shadow {
  animation: sc-shadow 2.4s ease-in-out infinite;
}

.saucer[data-pose="speaking"] .sc-motion {
  transform-origin: 77px 113px;
  animation: sc-hop 0.9s ease-in-out infinite;
}

.saucer[data-pose="listening"] [data-extra="waves"] {
  animation: sc-blink 1.1s ease-in-out infinite;
}

.saucer[data-pose="thinking"] [data-extra="dots"] > * {
  animation: sc-blink 1.4s ease-in-out infinite;
}
.saucer[data-pose="thinking"] [data-extra="dots"] > :nth-child(2) {
  animation-delay: 0.2s;
}
.saucer[data-pose="thinking"] [data-extra="dots"] > :nth-child(3) {
  animation-delay: 0.4s;
}

.saucer[data-pose="off"] [data-extra="zzz"] {
  opacity: 0.6;
}

@keyframes sc-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes sc-shadow {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.82);
    opacity: 0.7;
  }
}

@keyframes sc-hop {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  45% {
    transform: translateY(-7px) scale(0.95, 1.06);
  }
}

@keyframes sc-blink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saucer *,
  .saucer .sc-pose {
    animation: none !important;
    transition: none !important;
  }
}