/*
  Oak Days animated icon sets (v37) for the module cards.

  Based on icon-sets.css from the v37 export, scoped to .iconset so it
  doesn't set global variables or box-sizing on the rest of the page.
  Pure CSS: a slow orbit of five icons around a central one; the icons
  stay upright and float gently. Stops for prefers-reduced-motion.
*/

.iconset {
  --iconset-bg: transparent; /* the white card shows through */
  --iconset-disc: white; /* white discs on the sand top of the card */
  --iconset-ring: #cbc0aa; /* dashed orbit ring */
  --iconset-ripple: rgba(47, 93, 80, 0.75); /* pine; the ripple fades out from here */
  --orbit-speed: 120s; /* seconds per full turn (higher = slower) */
  --orbit-radius: 30; /* outer icons' distance from the centre, % of width (max ~37) */
  --bob-speed: 7s;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  background: var(--iconset-bg);
  overflow: hidden;
}

.iconset *,
.iconset *::after {
  box-sizing: border-box;
}

.iconset .orbit {
  position: absolute;
  inset: 0;
  animation: is-spin var(--orbit-speed) linear infinite;
}

.iconset .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--orbit-radius) * 2cqw);
  height: calc(var(--orbit-radius) * 2cqw);
  transform: translate(-50%, -50%);
  border: 0.25cqw dashed var(--iconset-ring);
  border-radius: 50%;
  opacity: 0.8;
}

.iconset .node {
  position: absolute;
}

.iconset .node.o {
  left: 50%;
  top: 50%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, -50%) rotate(var(--a))
    translateY(calc(var(--orbit-radius) * -1cqw)) rotate(calc(var(--a) * -1));
}

.iconset .node > .upright {
  width: 100%;
  height: 100%;
  animation: is-unspin var(--orbit-speed) linear infinite;
}

.iconset .disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--iconset-disc);
  box-shadow:
    0 0.6cqw 1.8cqw rgba(60, 40, 20, 0.08),
    0 0 0 0.15cqw rgba(120, 95, 60, 0.06);
  animation: is-breathe 9s ease-in-out infinite;
  animation-delay: var(--d);
}

.iconset .node.c {
  left: 50%;
  top: 50%;
  width: 40%;
  height: 40%;
  transform: translate(-50%, -50%);
}

.iconset .art {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: is-bob var(--bob-speed) ease-in-out infinite;
  animation-delay: var(--d);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.iconset .node.c::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.25cqw solid var(--iconset-ripple);
  animation: is-ripple 7s ease-out infinite;
  pointer-events: none;
}

@keyframes is-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes is-unspin {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes is-bob {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(1.2%) rotate(-1.2deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-1.8%) rotate(1.2deg);
  }
}

@keyframes is-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

@keyframes is-ripple {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iconset *,
  .iconset *::after {
    animation: none !important;
  }
}

.iconset.paused *,
.iconset.paused *::after {
  animation: none !important;
}

/* In the module cards: fill the fixed-height visual slot, centred */
.card-visual > .iconset {
  width: min(100%, 300px); /* the slot is 300px tall */
  margin: auto;
}