/* ==========================================================================
   WAVE 231 - DAS INSTRUMENT
   ==========================================================================
   Ein Bauteil, drei Konsolen: Assessment (Vorlage 4a), Template Library
   (Vorlage 6a) und Decision Signal Lab (Vorlage 7a) benutzen dieselbe
   Skala. Der Fuellstand kommt ueber --p, die Waerme ueber --heat; beide
   werden von der jeweiligen Konsole gesetzt, hier wird nichts gerechnet.

   Flaechensprache Welle 230: kein Schatten, kein Radius ausserhalb des
   Kreises selbst, Gold als Grenze, Cyan nur als Zustand.
   ========================================================================== */

/* ---------- Instrument ---------------------------------------------------- */
.ka-w231i {
  --p: 0%;
  position: relative;
  width: min(268px, 76vw);
  aspect-ratio: 1;
  margin: 0 auto clamp(.8rem, 1.6vw, 1.15rem);
  display: block;
  flex: none;
}
.ka-w231i > span,
.ka-w231i > img { position: absolute; border-radius: 50%; display: block; }

.ka-w231i__glow {
  inset: -14%;
  background: radial-gradient(circle closest-side, rgba(222, 235, 245, .55) 34%, rgba(210, 228, 241, .22) 54%, rgba(200, 222, 238, 0) 76%);
  filter: blur(7px);
  opacity: calc(.16 + var(--heat, 0) * .5);
  transition: opacity 1.1s ease;
}
.ka-w231i__body {
  inset: 2%;
  background: radial-gradient(circle at 36% 28%, #17293d, #0a1626 56%, #04101c);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .7);
}
.ka-w231i__ticks {
  inset: 2%;
  background: repeating-conic-gradient(from 0deg, rgba(247, 244, 234, .9) 0deg .55deg, rgba(247, 244, 234, 0) .55deg 3.4deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 66%, #000 67%, #000 92%, transparent 93%);
  mask: radial-gradient(circle closest-side, transparent 0 66%, #000 67%, #000 92%, transparent 93%);
  opacity: calc(.2 + var(--heat, 0) * .74);
  transition: opacity .9s ease;
  animation: kaW231Spin 260s linear infinite;
}
.ka-w231i__ring {
  inset: 20%;
  border: 1px solid rgba(216, 172, 92, .9);
  opacity: calc(.3 + var(--heat, 0) * .7);
  transition: opacity .9s ease;
}
.ka-w231i__arc {
  inset: 20%;
  -webkit-mask: conic-gradient(from -90deg, #000 0 var(--p), transparent var(--p) 100%);
  mask: conic-gradient(from -90deg, #000 0 var(--p), transparent var(--p) 100%);
}
.ka-w231i__arc > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(247, 244, 234, .96) 0deg 1deg, rgba(247, 244, 234, 0) 1deg 2.1deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 57%, #000 58%, #000 96%, transparent 97%);
  mask: radial-gradient(circle closest-side, transparent 0 57%, #000 58%, #000 96%, transparent 97%);
  animation: kaW231Spin calc(70s - var(--heat, 0) * 44s) linear infinite;
}
.ka-w231i__orbit { inset: 20%; }
.ka-w231i__orbit > i {
  position: absolute;
  top: -4px;
  left: 50%;
  border-radius: 50%;
  display: block;
}
.ka-w231i__orbit--cyan { animation: kaW231Spin 34s linear infinite; animation-delay: -6s; }
.ka-w231i__orbit--cyan > i { width: 10px; height: 10px; margin-left: -5px; background: #47a7d8; box-shadow: 0 0 14px 3px rgba(71, 167, 216, .65); }
.ka-w231i__orbit--gold { animation: kaW231Spin calc(46s - var(--heat, 0) * 24s) linear infinite; animation-delay: -19s; }
.ka-w231i__orbit--gold > i { width: 9px; height: 9px; margin-left: -4.5px; background: var(--w231-gold-lit); box-shadow: 0 0 13px 3px rgba(245, 217, 130, .7); }
.ka-w231i__orbit--pale { animation: kaW231Spin 58s linear infinite reverse; animation-delay: -31s; }
.ka-w231i__orbit--pale > i { width: 8px; height: 8px; margin-left: -4px; background: #f6f1e7; box-shadow: 0 0 12px 3px rgba(246, 241, 231, .5); }
.ka-w231i__orbit > i { opacity: calc(.25 + var(--heat, 0) * .75); transition: opacity .9s ease; }

.ka-w231i__pupil {
  inset: 33%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 32%, #0b1118, #000 68%);
  box-shadow: inset 0 1px 12px rgba(247, 244, 234, .07);
}
.ka-w231i__pupil > span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--p);
  background: linear-gradient(to top, rgba(216, 172, 92, .22), rgba(216, 172, 92, .07) 66%, rgba(247, 244, 234, .16));
  transition: height .85s cubic-bezier(.3, .8, .3, 1);
}
.ka-w231i__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: auto;
  border-radius: 0;
  transform: translate(-50%, -50%);
  -webkit-mask: linear-gradient(to top, #000 0 calc(var(--p) - 6%), rgba(0, 0, 0, .5) var(--p), transparent calc(var(--p) + 5%));
  mask: linear-gradient(to top, #000 0 calc(var(--p) - 6%), rgba(0, 0, 0, .5) var(--p), transparent calc(var(--p) + 5%));
  filter: brightness(1.25) drop-shadow(0 0 calc(5px + var(--heat, 0) * 14px) rgba(245, 217, 130, calc(.25 + var(--heat, 0) * .45)));
  transition: filter .8s ease;
  pointer-events: none;
}
.ka-w231i__lock {
  inset: 0;
  border: 2px solid var(--w231-gold-lit);
  opacity: 0;
}
.ka-w231i[data-state="locked"] .ka-w231i__lock { animation: kaW231Lock 1.05s ease-out both; }
.ka-w231i[data-state="computing"] .ka-w231i__body { animation: kaW231Breathe 1.1s ease-in-out infinite; }

@keyframes kaW231Spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes kaW231Lock { 0% { opacity: 0; transform: scale(.86); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes kaW231Breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes kaW231Rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes kaW231Scan { from { transform: translateX(-120%); } to { transform: translateX(420%); } }


/* ---------- Ruhe ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ka-w231i__ticks,
  .ka-w231i__arc > span,
  .ka-w231i__orbit,
  .ka-w231i[data-state="computing"] .ka-w231i__body,
  .ka-w231i[data-state="locked"] .ka-w231i__lock { animation: none; }
  .ka-w231i__pupil > span,
  .ka-w231i__glow,
  .ka-w231i__ring,
  .ka-w231i__ticks,
  .ka-w231i__mark { transition: none; }
}