/* Die Buehne ist ein Quadrat, das mit seinem Container skaliert. Alle Patches
   sitzen prozentual auf dem Basisbild, damit jede Groesse ohne Rechnung passt. */

.nelrik-buehne {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.nelrik-buehne .nelrik-basis {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nelrik-buehne .nelrik-ohr {
  position: absolute;
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  will-change: transform;
}

.nelrik-ohren-wackeln .nelrik-ohr-left {
  animation: nelrik-ohr-links 720ms cubic-bezier(.22,.75,.25,1);
}

.nelrik-ohren-wackeln .nelrik-ohr-right {
  animation: nelrik-ohr-rechts 720ms cubic-bezier(.22,.75,.25,1);
}

.nelrik-buehne .nelrik-patch {
  position: absolute;
  z-index: 2;
  /* Die Groesse steht im Stilattribut, weil sie aus dem Manifest kommt. */
  object-fit: fill;
  pointer-events: none;
}

@keyframes nelrik-ohr-links {
  0%, 100% { transform: rotate(0deg); }
  24% { transform: rotate(-3deg); }
  52% { transform: rotate(2deg); }
  76% { transform: rotate(-1deg); }
}

@keyframes nelrik-ohr-rechts {
  0%, 100% { transform: rotate(0deg); }
  24% { transform: rotate(3deg); }
  52% { transform: rotate(-2deg); }
  76% { transform: rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nelrik-ohren-wackeln .nelrik-ohr { animation: none; }
}

.nelrik-buehne .nelrik-patch[hidden] {
  display: none;
}