/* Overlay Studio – Renderer-Styles (Overlay + Editor-Vorschau) */
.ov-root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ov-layer { position: absolute; inset: 0; }
.ov-el { position: absolute; box-sizing: border-box; transform-origin: 50% 50%; }
.ov-fx, .ov-anim, .ov-box { position: absolute; inset: 0; box-sizing: border-box; }
.ov-anim {
  animation-duration: var(--ov-speed, 3s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.ov-box { overflow: visible; }
.ov-box.clip { overflow: hidden; }
.ov-box img, .ov-box video { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.ov-text {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ov-text > span { display: block; }
.ov-ticker-track {
  display: inline-flex; height: 100%; align-items: center;
  white-space: pre; will-change: transform;
}
.ov-particles, .ov-fxcanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ov-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; z-index: 100001; }

/* Ziel (Follow-Goal usw.) */
.ov-goal { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ov-goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: nowrap; }
.ov-goal-head .ov-goal-title { overflow: hidden; text-overflow: ellipsis; }
.ov-goal-head .ov-goal-num { margin-left: auto; font-variant-numeric: tabular-nums; }
.ov-goal-track { position: relative; width: 100%; overflow: hidden; flex: none; }
.ov-goal-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.ov-goal-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8em; white-space: nowrap; }
.ov-goal-ring { position: relative; align-items: center; }
.ov-goal-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ov-goal-svg circle { fill: none; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.ov-goal-center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.ov-goal-center .ov-goal-title { font-size: .55em; opacity: .85; }

/* Musik */
.ov-music { width: 100%; height: 100%; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ov-music-cover { height: 100%; aspect-ratio: 1; object-fit: cover; flex: none; }
.ov-music-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ov-music-title, .ov-music-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.ov-music-artist { font-size: .75em; font-weight: 500; opacity: .75; }
.ov-music-bar { height: 4px; border-radius: 4px; overflow: hidden; margin-top: 5px; }
.ov-music-fill { height: 100%; width: 0; transition: width .25s linear; }
.ov-music-textonly .ov-music-info { flex: 1; }

/* Platzhalter im Editor */
.ov-empty::after {
  content: attr(data-empty);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 3px dashed rgba(255, 255, 255, .4); border-radius: inherit;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .7); font: 600 22px/1.3 Inter, "Segoe UI", sans-serif;
}

/* Dauerschleifen-Animationen */
@keyframes ov-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ov-loop-pulse  { animation-name: ov-pulse; }
.ov-loop-float  { animation-name: ov-float; }
.ov-loop-spin   { animation-name: ov-spin; animation-timing-function: linear; }
.ov-loop-wobble { animation-name: ov-wobble; }
.ov-loop-bounce { animation-name: ov-bounce; }
.ov-loop-glow   { animation-name: ov-glow; }
.ov-loop-shake  { animation-name: ov-shake; }
.ov-loop-swing  { animation-name: ov-swing; transform-origin: 50% 0; }
.ov-loop-blink  { animation-name: ov-blink; }
@keyframes ov-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes ov-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ov-spin   { to { transform: rotate(360deg); } }
@keyframes ov-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ov-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-24px); } 50% { transform: translateY(0); } 65% { transform: translateY(-8px); } 80% { transform: translateY(0); } }
@keyframes ov-glow   { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45) drop-shadow(0 0 18px rgba(255,255,255,.6)); } }
@keyframes ov-shake  { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes ov-swing  { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ov-blink  { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }