/* ============================================================
   DAV-9000 TERMINAL - Living Empty State
   CRT retro terminal with scanlines, glow, vignette
   ============================================================ */

/* ---------- wrapper (sits inside viewerContainer grid) ---------- */
.dav9000-wrapper {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6vh;
  animation: dav9000-fadeIn 0.6s ease-out;
  user-select: none;
}

@keyframes dav9000-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- terminal window ---------- */
.dav9000-terminal {
  width: 100%;
  background: #0a0e0a;
  border: 1px solid #1a3a1a;
  border-radius: 6px;
  box-shadow:
    0 0 15px rgba(0, 255, 65, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  animation: dav9000-glowPulse 4s ease-in-out infinite;
}

@keyframes dav9000-glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 65, 0.08), 0 4px 24px rgba(0, 0, 0, 0.6); }
  50%      { box-shadow: 0 0 25px rgba(0, 255, 65, 0.15), 0 4px 24px rgba(0, 0, 0, 0.6); }
}

/* ---------- title bar ---------- */
.dav9000-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #0d120d;
  border-bottom: 1px solid #1a3a1a;
  font-size: 11px;
  color: #4a7a4a;
  letter-spacing: 0.5px;
}

.dav9000-status-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dave-green);
  box-shadow: 0 0 4px var(--dave-green);
  animation: dav9000-blink 3s ease-in-out infinite;
}

@keyframes dav9000-blink {
  0%, 90%, 100% { opacity: 1; }
  95%           { opacity: 0.3; }
}

.dav9000-titlebar-text {
  flex: 1;
  text-transform: uppercase;
}

.dav9000-session-id {
  color: #2a5a2a;
  font-size: 10px;
}

/* ---------- CRT screen ---------- */
.dav9000-screen {
  position: relative;
  padding: 16px;
  min-height: 260px;
  max-height: 380px;
  overflow: hidden;
  background: #050805;
}

/* Scanlines */
.dav9000-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* Vignette */
.dav9000-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ---------- output area ---------- */
.dav9000-output {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  max-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: #1a3a1a transparent;
}

.dav9000-output::-webkit-scrollbar {
  width: 4px;
}
.dav9000-output::-webkit-scrollbar-track {
  background: transparent;
}
.dav9000-output::-webkit-scrollbar-thumb {
  background: #1a3a1a;
  border-radius: 2px;
}

/* ---------- lines ---------- */
.dav9000-line {
  color: var(--dave-green);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 2px;
  word-wrap: break-word;
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
}

.dav9000-line.dav9000-system {
  color: #2a6a2a;
  text-shadow: none;
}

.dav9000-line.dav9000-reaction {
  color: #55ff88;
  font-style: italic;
}

.dav9000-line.dav9000-ascii {
  color: #00cc33;
  white-space: pre;
  line-height: 1.25;
  margin-bottom: 0;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(0, 204, 51, 0.4);
}

/* ---------- cursor ---------- */
.dav9000-cursor {
  display: inline;
  color: var(--dave-green);
  font-size: 13px;
  font-family: 'Courier New', Courier, monospace;
  animation: dav9000-cursorBlink 0.8s step-end infinite;
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.5);
}

@keyframes dav9000-cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---------- status bar ---------- */
.dav9000-statusbar {
  display: flex;
  gap: 16px;
  padding: 4px 12px;
  background: #0d120d;
  border-top: 1px solid #1a3a1a;
  font-size: 10px;
  color: #2a5a2a;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ---------- glitch effect ---------- */
@keyframes dav9000-glitch {
  0%   { transform: translate(0); filter: hue-rotate(0deg); }
  20%  { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  40%  { transform: translate(2px, -1px); filter: hue-rotate(-90deg); }
  60%  { transform: translate(-1px, -1px); filter: hue-rotate(45deg); }
  80%  { transform: translate(1px, 2px); filter: hue-rotate(-45deg); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

.dav9000-glitch {
  animation: dav9000-glitch 0.3s linear;
}

/* ---------- takeover transition (welcome -> terminal) ---------- */
.dav9000-takeover-glitch {
  animation: dav9000-takeoverGlitch 0.8s ease-out;
}

@keyframes dav9000-takeoverGlitch {
  0%   { opacity: 1; transform: scale(1); filter: none; }
  15%  { opacity: 0.6; transform: scale(1.02) skewX(-2deg); filter: hue-rotate(90deg) brightness(2); }
  30%  { opacity: 0.3; transform: scale(0.98) skewX(3deg); filter: hue-rotate(-90deg) brightness(3); }
  45%  { opacity: 0; transform: scale(0.95) skewX(-1deg); filter: hue-rotate(180deg) brightness(4); }
  50%  { opacity: 0; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(0.95); }
}

.dav9000-wrapper.dav9000-takeover-enter {
  animation: dav9000-takeoverEnter 0.6s ease-out;
}

@keyframes dav9000-takeoverEnter {
  0%   { opacity: 0; transform: translateY(8px) scale(0.97); filter: brightness(2) hue-rotate(40deg); }
  40%  { opacity: 0.7; transform: translateY(-2px) scale(1.01); filter: brightness(1.3) hue-rotate(10deg); }
  70%  { opacity: 0.9; transform: translateY(1px) scale(1); filter: brightness(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

/* ============================================================
   ALIVE TERMINAL - Movement, Drag, Animations
   ============================================================ */

/* ---------- mover layer (position via translate) ---------- */
.dav9000-mover {
  position: relative;
  width: 100%;
  max-width: 640px;
  transform: translate(var(--dav-x, 0px), var(--dav-y, 0px));
  will-change: transform;
  transition: none;
}

/* Ground shadow (only visible when alive) */
.dav9000-mover::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 10%;
  right: 10%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0, 255, 65, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dav9000-alive .dav9000-mover::after {
  opacity: 1;
}

/* ---------- drag cursors ---------- */
.dav9000-draggable .dav9000-titlebar {
  cursor: grab;
}
.dav9000-dragging .dav9000-titlebar {
  cursor: grabbing;
}
.dav9000-dragging .dav9000-terminal {
  box-shadow:
    0 0 30px rgba(0, 255, 65, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.7);
}

/* ---------- secondary effects during animation ---------- */
.dav9000-animating .dav9000-terminal {
  box-shadow:
    0 0 35px rgba(0, 255, 65, 0.25),
    0 4px 24px rgba(0, 0, 0, 0.6);
}
.dav9000-animating .dav9000-status-light {
  animation: dav9000-blink 0.5s ease-in-out infinite;
}
.dav9000-animating .dav9000-screen::before {
  animation: dav9000-scanlineFlicker 0.15s steps(2) 3;
}

@keyframes dav9000-scanlineFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ---------- bouncy easing variable ---------- */
/* Used by JS: cubic-bezier(0.34, 1.56, 0.64, 1) */

/* ---------- animation: fidget ---------- */
@keyframes dav9000-fidget {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(0.3deg); }
  50%      { transform: rotate(-0.25deg); }
  75%      { transform: rotate(0.15deg); }
}
.dav9000-anim-fidget .dav9000-terminal {
  animation: dav9000-fidget 0.6s ease-in-out;
  transform-origin: center bottom;
}

/* ---------- animation: hop ---------- */
@keyframes dav9000-hop-move {
  0%   { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  15%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) + 4px)); }
  40%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) - 25px)); }
  65%  { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  75%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) - 6px)); }
  90%  { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  100% { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
}
@keyframes dav9000-hop-shape {
  0%   { transform: scaleX(1) scaleY(1); }
  15%  { transform: scaleX(1.06) scaleY(0.92); }
  30%  { transform: scaleX(0.94) scaleY(1.08); }
  65%  { transform: scaleX(1.04) scaleY(0.95); }
  80%  { transform: scaleX(1) scaleY(1); }
  100% { transform: scaleX(1) scaleY(1); }
}
.dav9000-anim-hop .dav9000-mover {
  animation: dav9000-hop-move 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dav9000-anim-hop .dav9000-terminal {
  animation: dav9000-hop-shape 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
}

/* ---------- animation: shake ---------- */
@keyframes dav9000-shake {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(-3deg); }
  30%      { transform: rotate(3deg); }
  45%      { transform: rotate(-2.5deg); }
  60%      { transform: rotate(2deg); }
  75%      { transform: rotate(-1deg); }
  90%      { transform: rotate(0.5deg); }
}
.dav9000-anim-shake .dav9000-terminal {
  animation: dav9000-shake 0.6s ease-out;
  transform-origin: center bottom;
}

/* ---------- animation: lean ---------- */
@keyframes dav9000-lean {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(var(--dav-lean-deg, 4deg)); }
  70%      { transform: rotate(var(--dav-lean-deg, 4deg)); }
}
.dav9000-anim-lean .dav9000-terminal {
  animation: dav9000-lean 1.8s ease-in-out;
  transform-origin: center bottom;
}

/* ---------- animation: sink ---------- */
@keyframes dav9000-sink-move {
  0%   { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  100% { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) + 20px)); }
}
@keyframes dav9000-sink-shape {
  0%   { transform: rotate(0deg) scaleX(1) scaleY(1); }
  100% { transform: rotate(-1deg) scaleX(1.01) scaleY(0.99); }
}
.dav9000-anim-sink .dav9000-mover {
  animation: dav9000-sink-move 2.5s ease-in-out forwards;
}
.dav9000-anim-sink .dav9000-terminal {
  animation: dav9000-sink-shape 2.5s ease-in-out forwards;
  transform-origin: center bottom;
}

/* ---------- animation: peek ---------- */
@keyframes dav9000-peek-move {
  0%   { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  25%  { transform: translate(calc(var(--dav-x, 0px) + var(--dav-peek-dist, 300px)), var(--dav-y, 0px)); }
  35%  { transform: translate(calc(var(--dav-x, 0px) + var(--dav-peek-dist, 300px)), var(--dav-y, 0px)); }
  55%  { transform: translate(calc(var(--dav-x, 0px) + var(--dav-peek-back, 240px)), var(--dav-y, 0px)); }
  70%  { transform: translate(calc(var(--dav-x, 0px) + var(--dav-peek-back, 240px)), var(--dav-y, 0px)); }
  100% { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
}
@keyframes dav9000-peek-shape {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(var(--dav-peek-tilt, -3deg)); }
  55%      { transform: rotate(var(--dav-peek-tilt-back, 2deg)); }
}
.dav9000-anim-peek .dav9000-mover {
  animation: dav9000-peek-move 3.0s ease-in-out;
}
.dav9000-anim-peek .dav9000-terminal {
  animation: dav9000-peek-shape 3.0s ease-in-out;
  transform-origin: center bottom;
}

/* ---------- animation: nudge ---------- */
@keyframes dav9000-nudge-move {
  0%   { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  15%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) + 5px)); }
  50%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) - 40px)); }
  70%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) - 40px)); }
  100% { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
}
@keyframes dav9000-nudge-shape {
  0%   { transform: scaleX(1) scaleY(1); }
  15%  { transform: scaleX(1.02) scaleY(0.97); }
  50%  { transform: scaleX(0.97) scaleY(1.04); }
  100% { transform: scaleX(1) scaleY(1); }
}
.dav9000-anim-nudge .dav9000-mover {
  animation: dav9000-nudge-move 2.0s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dav9000-anim-nudge .dav9000-terminal {
  animation: dav9000-nudge-shape 2.0s ease-in-out;
  transform-origin: center bottom;
}

/* ---------- animation: spin ---------- */
@keyframes dav9000-spin {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(0.95); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}
.dav9000-anim-spin .dav9000-terminal {
  animation: dav9000-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

/* ---------- animation: stretch ---------- */
@keyframes dav9000-stretch {
  0%   { transform: scaleX(1) scaleY(1); }
  20%  { transform: scaleX(1.05) scaleY(0.92); }
  50%  { transform: scaleX(0.94) scaleY(1.12); }
  70%  { transform: scaleX(1.02) scaleY(0.97); }
  100% { transform: scaleX(1) scaleY(1); }
}
.dav9000-anim-stretch .dav9000-terminal {
  animation: dav9000-stretch 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
}

/* ---------- animation: bounce-settle (after drag drop) ---------- */
@keyframes dav9000-bounce-settle-move {
  0%   { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  30%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) + 6px)); }
  50%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) - 3px)); }
  70%  { transform: translate(var(--dav-x, 0px), calc(var(--dav-y, 0px) + 1px)); }
  100% { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
}
@keyframes dav9000-bounce-settle-shape {
  0%   { transform: scaleX(1.06) scaleY(0.92); }
  30%  { transform: scaleX(0.97) scaleY(1.04); }
  50%  { transform: scaleX(1.02) scaleY(0.98); }
  100% { transform: scaleX(1) scaleY(1); }
}
.dav9000-anim-bounce-settle .dav9000-mover {
  animation: dav9000-bounce-settle-move 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dav9000-anim-bounce-settle .dav9000-terminal {
  animation: dav9000-bounce-settle-shape 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
}

/* ---------- animation: wiggle ---------- */
@keyframes dav9000-wiggle-move {
  0%, 100% { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  15%      { transform: translate(calc(var(--dav-x, 0px) + 6px), var(--dav-y, 0px)); }
  30%      { transform: translate(calc(var(--dav-x, 0px) - 6px), var(--dav-y, 0px)); }
  45%      { transform: translate(calc(var(--dav-x, 0px) + 4px), var(--dav-y, 0px)); }
  60%      { transform: translate(calc(var(--dav-x, 0px) - 4px), var(--dav-y, 0px)); }
  75%      { transform: translate(calc(var(--dav-x, 0px) + 2px), var(--dav-y, 0px)); }
  90%      { transform: translate(calc(var(--dav-x, 0px) - 1px), var(--dav-y, 0px)); }
}
@keyframes dav9000-wiggle-shape {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(2deg); }
  30%      { transform: rotate(-2deg); }
  45%      { transform: rotate(1.5deg); }
  60%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(0.5deg); }
}
.dav9000-anim-wiggle .dav9000-mover {
  animation: dav9000-wiggle-move 0.7s ease-out;
}
.dav9000-anim-wiggle .dav9000-terminal {
  animation: dav9000-wiggle-shape 0.7s ease-out;
  transform-origin: center bottom;
}

/* ---------- animation: dramatic-slide ---------- */
@keyframes dav9000-slide-move {
  0%   { transform: translate(var(--dav-x, 0px), var(--dav-y, 0px)); }
  100% { transform: translate(calc(var(--dav-x, 0px) + var(--dav-slide-x, 80px)), calc(var(--dav-y, 0px) + var(--dav-slide-y, 0px))); }
}
@keyframes dav9000-slide-shape {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(var(--dav-slide-tilt, 1.5deg)); }
}
.dav9000-anim-dramatic-slide .dav9000-mover {
  animation: dav9000-slide-move 3.0s ease-in-out forwards;
}
.dav9000-anim-dramatic-slide .dav9000-terminal {
  animation: dav9000-slide-shape 3.0s ease-in-out;
  transform-origin: center bottom;
}

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .dav9000-mover {
    max-width: 95vw;
  }
  .dav9000-screen {
    min-height: 200px;
    padding: 12px;
  }
  .dav9000-line {
    font-size: 12px;
  }
}