/* ============================================================
   Office SVG Animations — Modern vector style
   Rounded agents, smooth transitions, glass effects
   ============================================================ */

/* ---- Office SVG container ---- */
#office-svg {
  width: 100%;
  height: 100%;
  display: block;
  background: #12151c;
}

/* ---- Agent base styles ---- */
.agent {
  cursor: pointer;
  transition: filter 0.2s ease;
}

.agent:hover {
  filter: brightness(1.15);
}

.agent-head, .agent-torso {
  transition: fill 0.5s ease;
}

.agent:hover .agent-label {
  fill: #58a6ff;
}

.agent-shadow {
  transition: rx 0.3s ease;
}

.agent:hover .agent-shadow {
  rx: 6;
}

/* ---- Status dot pulse ---- */
.agent-status-dot {
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ---- IDLE: Gentle bob ---- */
.agent[data-state="idle"] .agent-body-group {
  animation: idle-bob 2.5s ease-in-out infinite;
}

@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* ---- THINKING: Pulse scale + glow ---- */
.agent[data-state="thinking"] .agent-body-group {
  animation: think-pulse 1.2s ease-in-out infinite;
}

.agent[data-state="thinking"] .agent-status-dot {
  fill: #e3b341;
}

@keyframes think-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ---- WALKING: Leg swing + body tilt ---- */
.agent[data-state="walking"] .agent-leg-l {
  animation: walk-leg-l 0.3s ease-in-out infinite;
}
.agent[data-state="walking"] .agent-leg-r {
  animation: walk-leg-r 0.3s ease-in-out infinite;
}
.agent[data-state="walking"] .agent-body-group {
  animation: walk-bounce 0.3s ease-in-out infinite;
}

@keyframes walk-leg-l {
  0%, 100% { transform: translateX(-1px); }
  50%      { transform: translateX(1px); }
}
@keyframes walk-leg-r {
  0%, 100% { transform: translateX(1px); }
  50%      { transform: translateX(-1px); }
}
@keyframes walk-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.5px); }
}

/* ---- TALKING: Gentle sway ---- */
.agent[data-state="talking"] .agent-body-group {
  animation: talk-sway 1.5s ease-in-out infinite;
}

@keyframes talk-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-0.5px) rotate(1deg); }
  75%      { transform: translateY(-0.5px) rotate(-1deg); }
}

/* ---- SCOUTING: Typing motion ---- */
.agent[data-state="scouting"] .agent-body-group {
  animation: scout-typing 0.5s ease-in-out infinite;
}

.agent[data-state="scouting"] .agent-status-dot {
  fill: #58a6ff;
}

@keyframes scout-typing {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(0.5px) translateY(-0.3px); }
  75%      { transform: translateX(-0.5px) translateY(-0.3px); }
}

/* ---- VOTING: Deliberation pulse ---- */
.agent[data-state="voting"] .agent-body-group {
  animation: vote-pulse 2.5s ease-in-out infinite;
}

.agent[data-state="voting"] .agent-status-dot {
  fill: #bc8cff;
}

@keyframes vote-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ---- MEETING: Attentive bob ---- */
.agent[data-state="meeting"] .agent-body-group {
  animation: meeting-bob 3s ease-in-out infinite;
}

.agent[data-state="meeting"] .agent-status-dot {
  fill: #e3b341;
}

@keyframes meeting-bob {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-0.4px); }
  60%      { transform: translateY(0); }
}

/* ---- Mood speed modifiers ---- */
.agent[data-mood="stressed"] .agent-body-group,
.agent[data-mood="frustrated"] .agent-body-group {
  animation-duration: 0.6s !important;
}

.agent[data-mood="excited"] .agent-body-group {
  animation-duration: 0.75s !important;
}

/* Mood-based status dot color */
.agent[data-mood="stressed"] .agent-status-dot,
.agent[data-mood="frustrated"] .agent-status-dot {
  fill: #f85149;
}

.agent[data-mood="excited"] .agent-status-dot {
  fill: #e3b341;
  animation: status-pulse-fast 0.8s ease-in-out infinite;
}

@keyframes status-pulse-fast {
  0%, 100% { opacity: 1; r: 1.5; }
  50%      { opacity: 0.7; r: 2; }
}

/* ---- Speech Bubble ---- */
.speech-bubble {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(2px);
}

.speech-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

.speech-bubble.hiding {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.bubble-bg {
  filter: url(#bubble-shadow);
}

/* ---- Expression Float ---- */
.expression {
  opacity: 0;
  pointer-events: none;
}

.expression.visible {
  opacity: 1;
  animation: expr-float 5s ease-out forwards;
}

.expr-bg {
  transition: opacity 0.3s ease;
}

@keyframes expr-float {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  8%   { transform: translateY(-2px) scale(1.15); opacity: 1; }
  15%  { transform: translateY(-3px) scale(1); opacity: 1; }
  75%  { transform: translateY(-4px) scale(1); opacity: 1; }
  100% { transform: translateY(-8px) scale(0.95); opacity: 0; }
}

/* ---- LED Ticker Scroll ---- */
.ticker-text {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 5px;
  fill: #3fb950;
  letter-spacing: 0.8px;
}

/* ---- Outside: Car scroll animations ---- */
.car-east {
  animation: car-scroll-east 18s linear infinite;
}
.car-west {
  animation: car-scroll-west 22s linear infinite;
}

@keyframes car-scroll-east {
  0%   { transform: translateX(-200px); }
  100% { transform: translateX(2200px); }
}
@keyframes car-scroll-west {
  0%   { transform: translateX(200px); }
  100% { transform: translateX(-2200px); }
}

/* Stagger cars so they don't all start at the same position */
.car-east:nth-child(2n)  { animation-delay: -4s; }
.car-east:nth-child(3n)  { animation-delay: -9s; }
.car-west:nth-child(2n)  { animation-delay: -6s; }
.car-west:nth-child(3n)  { animation-delay: -12s; }

/* ---- Outside: Civilian walk animations ---- */
.civilian {
  animation: civ-walk 2s ease-in-out infinite;
}

@keyframes civ-walk {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* Civilians drift along sidewalk */
.civilian-drift {
  animation: civ-drift 30s linear infinite;
}

@keyframes civ-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(80px); }
  100% { transform: translateX(0); }
}

/* ---- Outside: Tree sway ---- */
.tree-canopy {
  transform-origin: center bottom;
  animation: tree-sway 6s ease-in-out infinite;
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(0.5deg); }
  75%      { transform: rotate(-0.5deg); }
}

/* Stagger tree sway */
.tree-canopy:nth-child(2n) { animation-delay: -2s; }
.tree-canopy:nth-child(3n) { animation-delay: -4s; }

/* ---- Lobby: Receptionist idle animation ---- */
.receptionist {
  animation: recep-idle 3s ease-in-out infinite;
}

@keyframes recep-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.5px); }
}

/* ---- Lobby: Statue shine ---- */
.statue-shine {
  animation: statue-gleam 4s ease-in-out infinite;
}

@keyframes statue-gleam {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.35; }
}

/* ---- Room glass shimmer (ambient) ---- */
#room-voting, #room-scout, #room-meeting {
  transition: filter 0.3s ease;
}

/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .agent, .agent-head, .agent-torso,
  #room-voting, #room-scout, #room-meeting {
    transition: none !important;
  }

  .agent-idle, .agent-thinking, .agent-walking,
  .agent-talking, .agent-scouting, .agent-voting,
  .agent-meeting, .status-icon, .expression-icon,
  .outdoor-car, .outdoor-civilian, .outdoor-tree,
  .receptionist, .statue-highlight {
    animation: none !important;
  }
}