/* ═══════════════════════════════════════════════════════════════
 * HOHL.ROCKS – ATTRACT-MODE (Stile)
 * Gehört zu js/attract.js. Greift nur, solange die Vorführung läuft
 * (.attract-mode / .attract-typing); sonst ohne Wirkung.
 * ═══════════════════════════════════════════════════════════════ */

/* Der eingetippte Text ist ein Platzhalter – soll aber wie Text aussehen */
.attract-typing::placeholder {
  color: var(--text-primary, #fff);
  opacity: 1;
}

/* Hinweis über den Karten: das hier ist aufgezeichnet, nicht live */
.attract-caption {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: -0.5rem 0 1.1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.attract-caption::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: attract-pulse 1.8s ease-out infinite;
}
@keyframes attract-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Während der Vorführung: kein "Neue Frage"-Knopf, keine wachsenden Karten */
.ki-battle-inline.attract-mode .battle-reset-btn {
  visibility: hidden;
}
.ki-battle-inline.attract-mode .battle-card-content {
  max-height: 240px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
.ki-battle-inline.attract-mode .battle-card-content p,
.ki-battle-inline.attract-mode .battle-card-content ul {
  margin: 0 0 0.6em;
}
.ki-battle-inline.attract-mode .battle-card-content ul {
  padding-left: 1.1em;
}

/* Sanft raus, bevor die nächste Frage kommt */
.battle-results,
.klartext-ergebnis {
  transition: opacity 0.5s ease;
}
.attract-fade {
  opacity: 0;
}

/* Reduzierte Bewegung: das Skript startet dann gar nicht – zur Sicherheit
   bleibt auch der Puls still. */
@media (prefers-reduced-motion: reduce) {
  .attract-caption::before { animation: none; }
}