/* ============================================================
   CHARACTER PEEK SYSTEM — living character layer
   Works with character-peek.js. No template changes required:
   JS decorates .dialogue-box and .character-dialogue elements.
   Colors match site palette:
   Vector #3b82f6 · Kai #10b981 · Recurse #8b5cf6 · Bounce #f59e0b
   ============================================================ */

/* ---------- shared ---------- */
.cp-avatar,
.cp-peek,
.cp-room {
  --cp-vector: #3b82f6;
  --cp-kai: #10b981;
  --cp-recurse: #8b5cf6;
  --cp-bounce: #f59e0b;
}

.cp-avatar svg,
.cp-peek svg,
.cp-room svg {
  display: block;
  overflow: visible;
}

/* ============================================================
   1. AVATARS PERCHED ON DIALOGUE BOXES
   ============================================================ */
.cp-has-avatar {
  position: relative;
  /* room for the head peeking over the top edge */
  margin-top: 2.6rem !important;
}

.cp-avatar {
  position: absolute;
  top: -2.35rem;
  left: 0.9rem;
  width: 3rem;
  height: 3rem;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translateY(1.2rem) scale(0.6);
}

.cp-avatar.cp-in {
  animation: cp-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.5, 1) forwards;
}

@keyframes cp-pop-in {
  0%   { opacity: 0; transform: translateY(1.4rem) scale(0.5); }
  70%  { opacity: 1; transform: translateY(-0.25rem) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* inline mini avatar for legacy .character-dialogue rows */
.cp-avatar-inline {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.35em;
  margin-right: 0.35em;
}

/* ---------- per-character idle motion ---------- */

/* VECTOR: rapid, precise, occasionally glitches sideways */
.cp-char-vector .cp-body { animation: cp-vector-idle 5.5s steps(2, end) infinite; }
@keyframes cp-vector-idle {
  0%, 88%, 100% { transform: translate(0, 0); }
  90%           { transform: translate(-2px, 0); }
  92%           { transform: translate(2px, -1px); }
  94%           { transform: translate(0, 0); }
}
.cp-char-vector .cp-glitch-layer {
  animation: cp-vector-glitch 7s linear infinite;
  opacity: 0;
}
@keyframes cp-vector-glitch {
  0%, 86%, 100% { opacity: 0; transform: translate(0, 0); }
  87%           { opacity: 0.7; transform: translate(2.5px, 0); }
  89%           { opacity: 0.5; transform: translate(-2px, 1px); }
  91%           { opacity: 0; }
}
.cp-char-vector .cp-wire {
  transform-origin: bottom center;
  animation: cp-wire-sway 2.2s ease-in-out infinite alternate;
}
.cp-char-vector .cp-wire:nth-of-type(2) { animation-delay: 0.4s; }
.cp-char-vector .cp-wire:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes cp-wire-sway {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(5deg); }
}
.cp-char-vector .cp-spark {
  animation: cp-spark 3.1s linear infinite;
  opacity: 0;
}
@keyframes cp-spark {
  0%, 78%, 100% { opacity: 0; }
  80%, 86%      { opacity: 1; }
}

/* KAI: scanning sweep, visor dot tracks, alert blink */
.cp-char-kai .cp-scanline {
  animation: cp-kai-scan 3.4s ease-in-out infinite;
}
@keyframes cp-kai-scan {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(26px); opacity: 0.85; }
}
.cp-char-kai .cp-visor-dot {
  animation: cp-kai-look 4.6s ease-in-out infinite;
}
@keyframes cp-kai-look {
  0%, 20%, 100% { transform: translateX(0); }
  35%, 55%      { transform: translateX(9px); }
  70%, 85%      { transform: translateX(-9px); }
}
.cp-char-kai .cp-alert {
  animation: cp-kai-alert 8s linear infinite;
  opacity: 0;
  transform-origin: center;
}
@keyframes cp-kai-alert {
  0%, 88%, 100% { opacity: 0; transform: scale(0.6); }
  90%, 96%      { opacity: 1; transform: scale(1); }
}

/* RECURSE: slow skeptical tilt, question mark surfaces */
.cp-char-recurse .cp-body {
  transform-origin: 50% 90%;
  animation: cp-recurse-tilt 7s ease-in-out infinite;
}
@keyframes cp-recurse-tilt {
  0%, 30%, 100% { transform: rotate(0deg); }
  45%, 70%      { transform: rotate(-6deg); }
}
.cp-char-recurse .cp-qmark {
  animation: cp-recurse-q 9s ease-in-out infinite;
  opacity: 0;
}
@keyframes cp-recurse-q {
  0%, 55%, 100% { opacity: 0; transform: translateY(3px); }
  62%, 82%      { opacity: 0.9; transform: translateY(-2px); }
}
.cp-char-recurse .cp-shades {
  animation: cp-recurse-shades 7s ease-in-out infinite;
}
@keyframes cp-recurse-shades {
  0%, 30%, 100% { transform: translateY(0); }
  45%, 70%      { transform: translateY(-1px) rotate(-1deg); }
}
.cp-char-recurse .cp-shade-glint {
  animation: cp-recurse-glint 5s ease-in-out infinite;
}
.cp-char-recurse .cp-shade-glint:nth-of-type(2) { animation-delay: 0.6s; }
@keyframes cp-recurse-glint {
  0%, 40%, 100% { opacity: 0.25; }
  55%, 75%      { opacity: 0.85; }
}

/* BOUNCE: squash & stretch, sparkles */
.cp-char-bounce .cp-body {
  transform-origin: 50% 100%;
  animation: cp-bounce-idle 1.5s cubic-bezier(0.36, 0, 0.64, 1) infinite;
}
@keyframes cp-bounce-idle {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12%      { transform: translateY(1px) scale(1.08, 0.9); }
  40%      { transform: translateY(-7px) scale(0.94, 1.07); }
  70%      { transform: translateY(0) scale(1.05, 0.95); }
  85%      { transform: translateY(0) scale(0.99, 1.01); }
}
.cp-char-bounce .cp-sparkle {
  animation: cp-sparkle 2.4s linear infinite;
  transform-origin: center;
  opacity: 0;
}
.cp-char-bounce .cp-sparkle:nth-of-type(2) { animation-delay: 1.1s; }
@keyframes cp-sparkle {
  0%, 60%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  70%           { opacity: 1; transform: scale(1.1) rotate(40deg); }
  85%           { opacity: 0.6; transform: scale(0.8) rotate(80deg); }
}

/* ============================================================
   2. EDGE PEEK-INS (characters lean into the viewport)
   ============================================================ */
.cp-peek {
  position: fixed;
  z-index: 900;
  width: 4.5rem;
  height: 4.5rem;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.34, 1.45, 0.45, 1);
}
.cp-peek--right { right: 0; transform: translateX(110%); }
.cp-peek--right.cp-peeking { transform: translateX(24%) rotate(-8deg); }
.cp-peek--left { left: 0; transform: translateX(-110%); }
.cp-peek--left.cp-peeking { transform: translateX(-24%) rotate(8deg); }
.cp-peek--bottom { transform: translateY(110%); }
.cp-peek--bottom.cp-peeking { transform: translateY(38%) rotate(-4deg); }

/* ============================================================
   3. THE WORKSHOP WINDOW (mini screen, bottom-right)
   ============================================================ */
.cp-room {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 232px;
  z-index: 950;
  font-family: 'VT323', 'Courier New', monospace;
  border: 2px solid rgba(139, 92, 246, 0.5);
  border-radius: 8px;
  background: #0a0a12;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 12px rgba(59, 130, 246, 0.12);
  overflow: hidden;
}

.cp-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: #131322;
  border-bottom: 1px solid rgba(139, 92, 246, 0.35);
  color: #94a3b8;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}
.cp-room-header .cp-live {
  color: #ef4444;
  animation: cp-live-blink 1.6s steps(1) infinite;
}
@keyframes cp-live-blink { 50% { opacity: 0.25; } }

.cp-room-stage {
  position: relative;
  height: 96px;
  background:
    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px) 0 0 / 100% 8px,
    radial-gradient(ellipse at 50% 120%, rgba(139, 92, 246, 0.14), transparent 70%),
    #0a0a12;
}
/* CRT scanline sheen */
.cp-room-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.cp-room-stage .cp-standee {
  position: absolute;
  bottom: 6px;
  width: 44px;
  height: 44px;
}
.cp-standee--vector  { left: 8%; }
.cp-standee--kai     { left: 32%; }
.cp-standee--recurse { left: 56%; }
.cp-standee--bounce  { left: 78%; }

.cp-room-typing {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 5px 9px;
  border-top: 1px solid rgba(139, 92, 246, 0.35);
  color: #cbd5e1;
  font-size: 14px;
  min-height: 26px;
}
.cp-typing-line {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-typing-line .cp-typing-name { font-weight: bold; }
.cp-typing-line .cp-typing-verb::before { content: ' '; }
.cp-dots {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.cp-room-typing .cp-typing-name { font-weight: bold; }
.cp-dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 2px;
  border-radius: 50%;
  background: currentColor;
  animation: cp-dot 1.2s ease-in-out infinite;
}
.cp-dots span:nth-child(2) { animation-delay: 0.18s; }
.cp-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cp-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.cp-room.cp-room--closed .cp-room-stage,
.cp-room.cp-room--closed .cp-room-typing { display: none; }
.cp-room.cp-room--closed { width: auto; }
.cp-room-toggle { color: #64748b; }

/* small screens: start collapsed, stay out of the way */
@media (max-width: 760px) {
  .cp-room { right: 0.5rem; bottom: 0.5rem; width: 200px; }
  .cp-room-typing { font-size: 13px; }
  .cp-peek { display: none; }
}

/* ============================================================
   Workshop standees — gentle bob only (full SVG motion on dialogue avatars)
   ============================================================ */
.cp-room-stage .cp-char-vector .cp-body,
.cp-room-stage .cp-char-vector .cp-glitch-layer,
.cp-room-stage .cp-char-vector .cp-wire,
.cp-room-stage .cp-char-vector .cp-spark,
.cp-room-stage .cp-char-kai .cp-scanline,
.cp-room-stage .cp-char-kai .cp-visor-dot,
.cp-room-stage .cp-char-kai .cp-alert,
.cp-room-stage .cp-char-recurse .cp-body,
.cp-room-stage .cp-char-recurse .cp-qmark,
.cp-room-stage .cp-char-recurse .cp-shades,
.cp-room-stage .cp-char-bounce .cp-body,
.cp-room-stage .cp-char-bounce .cp-sparkle {
  animation: none !important;
}
/* Kai scanline bobs with .cp-body now; hide sweep in Workshop anyway */
.cp-room-stage .cp-char-kai .cp-scanline {
  opacity: 0 !important;
  transform: none !important;
}
.cp-room-stage .cp-standee svg .cp-body {
  transform-origin: 50% 100%;
  animation: cp-room-bob 3.2s ease-in-out infinite;
}
.cp-room-stage .cp-standee--vector svg .cp-body { animation-delay: 0s; }
.cp-room-stage .cp-standee--kai svg .cp-body { animation-delay: 0.4s; }
.cp-room-stage .cp-standee--recurse svg .cp-body { animation-delay: 0.8s; }
.cp-room-stage .cp-standee--bounce svg .cp-body { animation-delay: 1.2s; }
@keyframes cp-room-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Bounce perched avatar sits above the box */
.cp-has-avatar.dialogue-box.bounce .cp-avatar {
  z-index: 4;
}
.broadcast-minisode .dialogue-box.bounce {
  clip-path: none;
}

/* ============================================================
   accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cp-avatar, .cp-peek, .cp-room *,
  .cp-avatar svg *, .cp-peek svg *, .cp-room svg * {
    animation: none !important;
    transition: none !important;
  }
  .cp-char-kai .cp-scanline {
    opacity: 0 !important;
    transform: none !important;
  }
  .cp-avatar { opacity: 1; transform: none; }
  .cp-peek { display: none; }
}