/* Specimen hero card — the petri-dish frame + organism drift loop.
 *
 * Used by components/specimen_card.py (/inventory, /shop/digital,
 * /admin/specimens). All colors resolve from Mantine's scheme-aware
 * custom properties so the dish adapts to light/dark without a single
 * hard-coded shade (the theme-guardian rule). The drift animation is
 * parameterized per card via CSS custom properties set inline by the
 * component (--sp-dur / --sp-delay / --sp-spin) — deterministic per
 * asset id, so re-renders never twitch.
 */

.sp-card {
  overflow: visible;
}

.sp-dish {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* The dish rim: a double ring reading as glass under lab light. */
  border: 4px solid var(--mantine-color-default-border);
  box-shadow:
    inset 0 0 0 6px color-mix(in srgb, var(--mantine-color-body) 65%, transparent),
    inset 0 10px 24px color-mix(in srgb, var(--mantine-color-text) 12%, transparent),
    0 2px 10px color-mix(in srgb, var(--mantine-color-text) 10%, transparent);
  overflow: hidden;
}

/* The agar fill — a faint scheme-aware culture-medium gradient. */
.sp-agar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      color-mix(in srgb, var(--mantine-color-tidal-4) 18%, transparent),
      transparent 55%),
    radial-gradient(circle at 70% 75%,
      color-mix(in srgb, var(--mantine-color-harbor-4) 12%, transparent),
      transparent 60%),
    color-mix(in srgb, var(--mantine-color-default-hover) 60%, transparent);
}

.sp-organism {
  position: absolute;
  top: 27%;
  left: 27%;
  width: 46%;
  height: 46%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--mantine-color-text) 25%, transparent));
  animation:
    var(--sp-dur, 12s) ease-in-out infinite alternate,
    sp-spin calc(var(--sp-dur, 12s) * 3) linear infinite var(--sp-spin, normal);
  animation-delay: var(--sp-delay, 0s), var(--sp-delay, 0s);
  user-select: none;
  -webkit-user-drag: none;
}

/* Three drift paths — the component hashes the asset id onto one of them.
 * The first animation slot in .sp-organism takes its name from the class. */
.sp-drift-a { animation-name: sp-drift-a, sp-spin; }
.sp-drift-b { animation-name: sp-drift-b, sp-spin; }
.sp-drift-c { animation-name: sp-drift-c, sp-spin; }

@keyframes sp-drift-a {
  0%   { transform: translate(0%, 0%) rotate(0deg); }
  30%  { transform: translate(16%, -10%) rotate(8deg); }
  65%  { transform: translate(-12%, 14%) rotate(-6deg); }
  100% { transform: translate(8%, -16%) rotate(4deg); }
}

@keyframes sp-drift-b {
  0%   { transform: translate(0%, 0%) rotate(0deg); }
  35%  { transform: translate(-18%, 8%) rotate(-9deg); }
  70%  { transform: translate(10%, -14%) rotate(5deg); }
  100% { transform: translate(-6%, 16%) rotate(-3deg); }
}

@keyframes sp-drift-c {
  0%   { transform: translate(0%, 0%) rotate(0deg); }
  25%  { transform: translate(12%, 12%) rotate(6deg); }
  55%  { transform: translate(-14%, -8%) rotate(-8deg); }
  100% { transform: translate(14%, -6%) rotate(7deg); }
}

/* The slow whole-body spin layered under the drift. */
@keyframes sp-spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

.sp-organism-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-dimmed);
  border: 2px dashed var(--mantine-color-default-border);
  border-radius: 50%;
}

/* Respect reduced-motion: the dish renders, the culture rests. */
@media (prefers-reduced-motion: reduce) {
  .sp-organism { animation: none; }
}