/* Baustein „Overlay-Karussell“ der Regie-Wand, gehört zu assets/motion/regie.js.
   Nur Zustände und Elemente, die das Skript setzt (Präfix rg-); ohne Skript greift hier nichts.
   Farben und Schriften aus site.css. Animiert werden nur transform und opacity. */

/* ---------- Programm-Monitor: Ebenen und Stinger-Band ---------- */
[data-program-screen] > .rg-layer { position: absolute; inset: 0; }
[data-program-screen] > .rg-incoming { visibility: hidden; }

/* Schräges Band, 170 % breit: Kante Cyan, Lücke, Pink, dann ein Kern in Flächen-Navy, der das ganze Bild deckt.
   Ruhezustand links außerhalb; das Skript fährt es per Web Animations durch (240 ms rein, 40 ms stehen, 180 ms raus). */
.rg-sting {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: -35%; width: 170%;
  visibility: hidden; pointer-events: none; container-type: size;
  transform: translateX(-100%) skewX(-14deg);
  background: linear-gradient(90deg,
    var(--cyan) 0 2.5%, transparent 2.5% 4.5%, var(--pink) 4.5% 13%,
    var(--surface) 13% 87%,
    var(--pink) 87% 95.5%, transparent 95.5% 97.5%, var(--cyan) 97.5% 100%);
}
.rg-sting.is-run { visibility: visible; will-change: transform; }
.rg-sting b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -64%); padding-left: 0.14em;
  font: 700 13cqh/1 var(--font-display); letter-spacing: 0.14em; color: var(--text); white-space: nowrap; }
/* Linie wie im Kopf der Broadcast-Grafiken: Cyan, dann Pink */
.rg-sting i { position: absolute; left: 50%; top: calc(50% + 7cqh); width: 34cqh; height: max(2px, 0.7cqh); transform: translateX(-50%);
  background: linear-gradient(90deg, var(--cyan) 0 77%, var(--pink) 77% 100%); }

/* ---------- Tally in der Spur: PGM (auf Sendung) und PVW (als Nächstes) ---------- */
.rg-tl { position: absolute; z-index: 1; top: 12px; left: 12px; display: none; height: 18px; padding: 0 5px 0 6.5px; border-radius: 3px;
  font: 700 12px/18px var(--font-display); letter-spacing: 0.12em; pointer-events: none; transform-origin: 0 50%; }
[data-source].rg-pgm > .rg-tl { display: block; background: var(--pink); color: var(--bg); }
[data-source].rg-pvw > .rg-tl { display: block; background: rgba(5, 8, 15, 0.88); color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan-border); }
[data-source].rg-pvw { border-color: var(--cyan-border); }

/* Drücken einer Quelle: kurze Rückmeldung wie eine Taste am Bildmischer */
@media (prefers-reduced-motion: no-preference) {
  [data-carousel] > [data-source] { transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }
  [data-carousel] > [data-source]:active { transform: scale(0.985); transition-duration: 100ms; }
  [data-carousel].rg-dragging > [data-source] { transform: none; }
}

/* Ziehen mit der Maus: Einrasten erst nach dem Loslassen */
[data-carousel].rg-dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
[data-carousel].rg-dragging, [data-carousel].rg-dragging * { cursor: grabbing; }

/* Pfeile am Anfang/Ende der Spur: bleiben fokussierbar, tun aber nichts */
[data-regie] [data-carousel-prev][aria-disabled="true"],
[data-regie] [data-carousel-next][aria-disabled="true"] { opacity: 0.4; cursor: default; }
[data-regie] [data-carousel-prev][aria-disabled="true"]:hover,
[data-regie] [data-carousel-next][aria-disabled="true"]:hover { border-color: var(--line-strong); color: var(--text); }

/* ---------- Knopf für den automatischen Durchlauf (setzt das Skript vor die Pfeile) ---------- */
.rg-auto { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 5px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.rg-auto:hover { border-color: var(--cyan-border); color: var(--cyan); }
.rg-auto::before, .rg-auto-bar { position: absolute; left: 11px; right: 11px; bottom: 8px; height: 2px; border-radius: 1px; }
.rg-auto::before { content: ""; background: var(--line-strong); }
.rg-auto-bar { display: block; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; }
.rg-auto.is-held .rg-auto-bar { opacity: 0.45; }
.rg-auto.is-off { padding-bottom: 0; }
.rg-auto.is-off::before, .rg-auto.is-off .rg-auto-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rg-auto { display: none; }
}