/* ═══════════════════════════════════════════════════════
   HERO DEMO — animierte Produkt-Sequenz im Browser-Mockup
   Nachempfunden der echten KiwiLoop-Review-UI
═══════════════════════════════════════════════════════ */

.demo-caption {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 12px;
}
.demo-caption-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: demoLiveDot 2s ease-in-out infinite;
}
@keyframes demoLiveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* Stage + Pause-Overlay */
.demo-stage { position: relative; }
.demo-stage::after {
  content: 'Pausiert'; position: absolute; z-index: 30;
  top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9);
  background: rgba(15,15,15,.82); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.demo-stage.is-paused::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.demo-stage.is-paused *, .demo-stage.is-paused { animation-play-state: paused !important; }

/* ─── Presence avatars ─── */
.demo-presence { display: flex; align-items: center; gap: 0; margin-left: 10px; }
.demo-presence .demo-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--sans); font-size: 8px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--dark-mid); margin-left: -6px;
  opacity: 0; transform: scale(.4) translateX(6px);
  transition: opacity .4s cubic-bezier(.22,1.2,.4,1), transform .4s cubic-bezier(.22,1.2,.4,1);
}
.demo-presence .demo-avatar:first-child { margin-left: 0; }
.demo-presence .demo-avatar.in { opacity: 1; transform: scale(1) translateX(0); }
.demo-avatar-maria  { background: linear-gradient(135deg,#8B5CF6,#6D28D9); }
.demo-avatar-thomas { background: linear-gradient(135deg,#0EA5E9,#0891B2); }

/* ─── Inner toolbar ─── */
.mock-inner-toolbar { gap: 8px; }
.demo-status {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  color: rgba(255,255,255,.65); letter-spacing: .04em; transition: color .3s;
}
.demo-status-icon {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.3); transition: background .3s, box-shadow .3s;
}
.demo-status.is-rec    { color: #FCA5A5; }
.demo-status.is-rec    .demo-status-icon { background: #EF4444; animation: blink 1s step-end infinite; }
.demo-status.is-save   { color: #86EFAC; }
.demo-status.is-save   .demo-status-icon { background: #22C55E; }
.demo-status.is-replay { color: var(--violet-dim); }
.demo-status.is-replay .demo-status-icon { background: var(--violet); box-shadow: 0 0 8px rgba(109,40,217,.8); }

.demo-anzeige {
  font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 5px;
}
.demo-anzeige::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,.7);
}

/* ─── Doc + Cursor ─── */
#demoDoc { position: relative; }
.mock-doc-line { transition: opacity .5s, background .3s; }
#demoDoc.warming .mock-doc-line, #demoDoc.warming .demo-region { opacity: .12; }

.demo-region {
  position: relative; border-radius: 6px; padding: 6px 8px; margin: 0 -8px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid transparent;
  transition: background .35s, border-color .35s, box-shadow .35s, opacity .5s;
}
.demo-region.is-focus {
  background: rgba(109,40,217,.12); border-color: rgba(109,40,217,.45);
  box-shadow: 0 0 0 4px rgba(109,40,217,.10);
}
.demo-region.annotated {
  background: rgba(109,40,217,.06); border-color: rgba(109,40,217,.22);
}
.demo-region.replaying {
  background: rgba(109,40,217,.16); border-color: rgba(109,40,217,.6);
  box-shadow: 0 0 0 4px rgba(109,40,217,.14), 0 8px 28px rgba(109,40,217,.25);
}

/* Avatar-Pin (statt Nummer) */
.demo-pin {
  position: absolute; top: -8px; right: -8px;
  width: 19px; height: 19px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45);
  font-family: var(--sans); font-size: 7px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: opacity .3s, transform .4s cubic-bezier(.22,1.5,.4,1);
}
.demo-region.is-focus .demo-pin, .demo-region.annotated .demo-pin,
.demo-region.replaying .demo-pin { opacity: 1; transform: scale(1); }
.demo-region.replaying .demo-pin { animation: demoPinPulse 1s ease-in-out infinite; }
@keyframes demoPinPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 0 0 rgba(109,40,217,.6); }
  50%     { box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 0 7px rgba(109,40,217,0); }
}

/* Live cursor */
.demo-cursor {
  position: absolute; top: 0; left: 0; z-index: 20;
  width: 16px; height: 16px; pointer-events: none;
  opacity: 0; transform: translate(40px, 14px);
  transition: opacity .35s, transform 1.1s cubic-bezier(.5,.05,.2,1);
  will-change: transform;
}
.demo-cursor.in { opacity: 1; }
.demo-cursor svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.demo-cursor-label {
  position: absolute; top: 15px; left: 12px;
  background: var(--violet); color: #fff;
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.demo-cursor.clicking::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--violet); transform: translate(-50%,-50%) scale(0); opacity: .8;
  animation: demoClickRing .5s ease-out;
}
@keyframes demoClickRing { to { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } }

/* ─── Recording popover ─── */
.demo-rec-pop {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 15;
  background: rgba(15,15,15,.94); border: 1px solid rgba(109,40,217,.4);
  border-radius: 10px; padding: 11px 13px; backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.22,1,.4,1);
}
.demo-rec-pop.in { opacity: 1; transform: translateY(0) scale(1); }
.demo-rec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.demo-rec-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--violet-dim);
}
.demo-rec-label .rec-dot { width: 6px; height: 6px; }
.demo-rec-time { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.6); }
.demo-wave { display: flex; align-items: center; gap: 2px; height: 16px; margin-bottom: 8px; }
.demo-wave span { display: block; width: 2px; border-radius: 1px; background: var(--violet-dim); height: 30%; }
.demo-rec-pop.recording .demo-wave span { animation: demoWave 1s ease-in-out infinite; }
.demo-wave span:nth-child(1){animation-delay:0s}.demo-wave span:nth-child(2){animation-delay:.08s}
.demo-wave span:nth-child(3){animation-delay:.16s}.demo-wave span:nth-child(4){animation-delay:.24s}
.demo-wave span:nth-child(5){animation-delay:.32s}.demo-wave span:nth-child(6){animation-delay:.40s}
.demo-wave span:nth-child(7){animation-delay:.48s}.demo-wave span:nth-child(8){animation-delay:.56s}
.demo-wave span:nth-child(9){animation-delay:.64s}.demo-wave span:nth-child(10){animation-delay:.72s}
.demo-wave span:nth-child(11){animation-delay:.80s}.demo-wave span:nth-child(12){animation-delay:.88s}
@keyframes demoWave { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.demo-rec-text {
  font-size: 11px; color: rgba(255,255,255,.7); line-height: 1.45; font-style: italic;
  border-left: 2px solid var(--violet); padding-left: 9px; min-height: 14px;
}
.demo-rec-text .demo-caret {
  display: inline-block; width: 1px; height: 11px; background: var(--violet-dim);
  margin-left: 1px; vertical-align: -1px; animation: blink .8s step-end infinite;
}

/* ═══ FEED PANEL (right) ═══ */
.demo-feed { display: flex; flex-direction: column; padding: 0 !important; }
.demo-feed-tabs {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.dft-left { display: flex; gap: 4px; }
.dft {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.32); padding: 3px 8px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 4px;
}
.dft.active { color: #fff; background: rgba(255,255,255,.07); }
.dft .dft-count {
  background: rgba(109,40,217,.4); color: var(--violet-dim);
  border-radius: 8px; padding: 0 4px; font-size: 8px;
}
.demo-replay-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 4px 9px; border-radius: 6px; cursor: default;
  transition: background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.demo-replay-btn.is-active {
  background: var(--violet); color: #fff; border-color: var(--violet);
  box-shadow: 0 0 14px rgba(109,40,217,.55);
}

/* Replay player bar */
.demo-replay-bar {
  display: none; align-items: center; gap: 7px;
  padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(109,40,217,.06);
}
.demo-feed.is-replay .demo-replay-bar { display: flex; }
.drb-play {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--violet); border: none; color: #fff;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(109,40,217,.5);
}
.drb-scrub { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.drb-scrub-fill { height: 100%; width: 0; background: var(--grad-brand); border-radius: 2px; }
.drb-time, .drb-speed { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,.5); }
.drb-speed { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }

.demo-replay-modes { display: none; gap: 5px; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.demo-feed.is-replay .demo-replay-modes { display: flex; }
.drm {
  font-family: var(--mono); font-size: 8px; font-weight: 700; color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  padding: 3px 8px; border-radius: 5px;
}
.drm.active { background: var(--violet); color: #fff; border-color: var(--violet); }

#demoFeedList { padding: 8px; overflow: hidden; flex: 1; }
.demo-feed-empty {
  font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.22);
  text-align: center; padding: 22px 0;
}

/* Feed card */
.demo-feed-item {
  background: rgba(255,255,255,.03); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07); padding: 9px;
  opacity: 0; transform: translateX(14px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1), border-color .3s, background .3s;
}
.demo-feed-item.in { opacity: 1; transform: translateX(0); }
.demo-feed-item + .demo-feed-item { margin-top: 7px; }
.demo-feed-item.now-playing {
  border-color: rgba(109,40,217,.5); background: rgba(109,40,217,.10);
  box-shadow: 0 0 0 1px rgba(109,40,217,.35);
}
.demo-feed-item.played { opacity: .5; }

.dfi-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.dfi-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  font-family: var(--sans); font-size: 7px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dfi-headinfo { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.dfi-name { font-family: var(--sans); font-size: 10px; font-weight: 700; }
.dfi-name.n-maria  { color: #C4B5FD; }
.dfi-name.n-thomas { color: #7DD3FC; }
.dfi-sub { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,.3); }
.dfi-kind {
  display: inline-flex; align-items: center; gap: 3px; color: rgba(255,255,255,.45);
}
.dfi-kind::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border: 1.4px solid currentColor; border-radius: 50%;
}
.dfi-title {
  font-family: var(--sans); font-size: 11px; font-weight: 700; color: #fff;
  line-height: 1.25; margin-bottom: 4px; letter-spacing: -.005em;
}
.dfi-selector {
  font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,.32);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.04); border-radius: 4px; padding: 3px 6px; margin-bottom: 7px;
}
.dfi-selector b { color: #93C5FD; font-weight: 700; }

.dfi-player {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border-radius: 6px; padding: 5px 7px; margin-bottom: 7px;
}
.dfi-play {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--violet); color: #fff; font-size: 7px;
  display: flex; align-items: center; justify-content: center;
}
.dfi-wave { flex: 1; display: flex; align-items: center; gap: 1.5px; height: 16px; overflow: hidden; }
.dfi-wave i { display: block; width: 2px; border-radius: 1px; background: rgba(196,181,253,.55); flex-shrink: 0; }
.demo-feed-item.now-playing .dfi-wave i { background: var(--violet-dim); animation: demoWave 1s ease-in-out infinite; }
.demo-feed-item.now-playing .dfi-play { box-shadow: 0 0 10px rgba(109,40,217,.7); }
.dfi-dur, .dfi-speed { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,.4); }
.dfi-speed { background: rgba(255,255,255,.07); padding: 1px 4px; border-radius: 3px; }

.dfi-trans-label {
  font-family: var(--mono); font-size: 7px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,.3); margin-bottom: 3px; display: flex; align-items: center; gap: 4px;
}
.dfi-trans-label::before { content: '\201C'; font-size: 11px; line-height: 0; color: var(--violet-dim); }
.dfi-quote {
  font-size: 10px; color: rgba(255,255,255,.6); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .demo-caption-dot, .demo-status-icon, .demo-pin, .demo-wave span,
  .dfi-wave i, .demo-cursor { animation: none !important; }
  .demo-stage::after { display: none; }
}