/* =====================================================================
   ISLETS MAP — animation vocabulary for the isometric islet art
   (#isv on the islets page). The same keyframes are reused by the
   Inceptia City map and the sponsor lighthouses (sponsors.css, .spx).
   ===================================================================== */

#isv .en {
  stroke-dasharray: 7 11;
  animation: wn-dash 1.2s steps(14) infinite;
}
#isv .rd {
  animation: wn-rd 7s steps(70) infinite;
}
#isv .rd.rv {
  animation-direction: reverse;
}
#isv .pl {
  animation: wn-pl 2.4s steps(12) infinite;
}
#isv .bob {
  animation: wn-bob 4.2s steps(28) infinite;
}
#isv .cn {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-coin 3.4s steps(28) infinite;
}
#isv .sp {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-spin 9s steps(180) infinite;
}
#isv .bm {
  animation: wn-bm 5s steps(20) infinite;
}
#isv .cr {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-cr 3.2s steps(24) infinite;
}
#isv .ecg {
  stroke-dasharray: 0.2 1;
  animation: wn-ecg 3.2s steps(40) infinite;
}
#isv .sc {
  animation: wn-pl 1.8s steps(3) infinite;
}
#isv .rp {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-rp 5.5s steps(36) infinite;
}
#isv .in {
  animation: wn-in 2.4s steps(24) infinite;
  opacity: 0;
}
@keyframes wn-dash {
  to {
    stroke-dashoffset: -36;
  }
}
@keyframes wn-rd {
  to {
    stroke-dashoffset: -140;
  }
}
@keyframes wn-pl {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes wn-coin {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.18);
  }
}
@keyframes wn-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wn-sig {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes wn-bm {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-cr {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.08);
  }
}
@keyframes wn-ecg {
  to {
    stroke-dashoffset: -1.2;
  }
}
@keyframes wn-rp {
  0% {
    transform: scale(0.55);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes wn-in {
  0% {
    transform: translateY(34px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(-84px);
    opacity: 0;
  }
}
@keyframes wn-ne {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-launch {
  to {
    transform: translateY(-14px);
    filter: brightness(2) saturate(1.4);
    opacity: 0.9;
  }
}
@keyframes wn-dust {
  0% {
    transform: translate(0, 30px);
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(40px, -160px);
    opacity: 0;
  }
}

#isv .ne {
  animation: wn-ne 4s steps(16) infinite;
}
#isv .ne,
#isv .nx {
  vector-effect: non-scaling-stroke;
}
#isv .pstem {
  stroke: var(--bc);
  stroke-width: 1.4;
  stroke-dasharray: 2 3;
  fill: none;
}
#isv .pd .pdh {
  fill-opacity: 0.92;
}
#isv .isem .em-t {
  font: 700 9px var(--mo);
  fill: var(--bc);
  letter-spacing: 0.3em;
  text-anchor: middle;
}
#isv .isem .em-g {
  font:
    italic 400 34px Georgia,
    serif;
  fill: var(--bc);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 3px;
}
html[data-theme="light"] #isv .isem .em-g {
  stroke: rgba(255, 255, 255, 0.8);
}
#isv .i-halo {
  opacity: 0.35;
}
#isv .is:hover .lift,
#isv .is.on .lift {
  transform: translateY(-8px);
}
@media (prefers-reduced-motion: reduce) {
  #isv * {
    animation: none !important;
  }
}

/* ---------- compact page header ----------
   The islet chooser sits beside the map, so the title row is kept slim and
   the map and chooser both start on the first screen. */
body[data-p="islets"] .pg {
  min-height: 0;
  padding-top: clamp(76px, 7.5vw, 104px);
  padding-bottom: 48px;
}
body[data-p="islets"] .pg > .hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  width: min(100%, 1300px);
  max-width: 1300px;
  margin: 0 auto 12px;
}
body[data-p="islets"] .pg > .hd h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
}
body[data-p="islets"] .pg > .hd p {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
}
@media (max-width: 600px) {
  body[data-p="islets"] .pg > .hd p {
    font-size: 13px;
  }
  body[data-p="islets"] .ichips {
    gap: 6px;
  }
  body[data-p="islets"] .ichips .lb {
    padding: 8px 10px;
    font-size: 13px;
  }
  body[data-p="islets"] .ichips .lb b {
    font-size: 20px !important;
  }
}