/*
  sprite.css
  #character-stage / #character-sprite — a CSS-only "desk with a glowing
  monitor" scene. No image assets: gradients, box-shadow and pseudo-elements
  only. Hard edges throughout (no border-radius on the stage or sprite).
  Distinct visual treatment per [data-state] for all six states.
*/

#character-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-none);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;

  background:
    /* desk surface */
    linear-gradient(to top, #05070c 0%, #05070c 22%, transparent 22%),
    /* ambient room tint driven by state */
    radial-gradient(ellipse at 50% 38%, var(--scene-tint), transparent 65%),
    var(--color-bg-alt);

  transition: background-color var(--transition-slow) ease, box-shadow var(--transition-slow) ease;
}

/* "Monitor glow" cast onto the scene — a pseudo-element behind the sprite */
#character-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, var(--scene-glow) 0%, transparent 60%);
  opacity: 0.8;
  mix-blend-mode: screen;
  transition: background var(--transition-slow) ease;
}

/* Scanline / CRT texture overlay for terminal vibe */
#character-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.35;
}

#character-sprite,
#character-speech,
#character-state-label {
  position: relative;
  z-index: 3;
}

#character-sprite {
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 1;
  border-radius: var(--radius-none);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 12px var(--monitor-glow));
  transition: filter var(--transition-medium) ease, transform var(--transition-medium) ease;
  animation: sprite-idle-bob 3.2s ease-in-out infinite;
}

#character-speech {
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--color-text-dim);
  max-width: 32ch;
}

#character-speech:empty {
  visibility: hidden;
}

#character-state-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  background: rgba(0, 0, 0, 0.35);
  color: var(--scene-accent);
}

/* Idle animation — subtle bob, respects reduced motion globally via reset.css
   but we also explicitly disable here to keep intent obvious/local. */
@keyframes sprite-idle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  #character-sprite {
    animation: none;
  }
}

/* ==================================================================
   Per-state sprite/scene treatments
   ================================================================== */

/* NORMAL — steady, low-key monitor glow, default bob only */
[data-state="NORMAL"] #character-sprite {
  filter: drop-shadow(0 0 10px var(--monitor-glow));
}

/* IN_THE_ZONE — calm focused blue/green, faster confident bob + gentle glow pulse */
[data-state="IN_THE_ZONE"] #character-stage {
  box-shadow: inset 0 0 60px rgba(57, 255, 136, 0.12);
}

[data-state="IN_THE_ZONE"] #character-sprite {
  animation-name: sprite-idle-bob, zone-glow-pulse;
  animation-duration: 2.4s, 2.4s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  filter: drop-shadow(0 0 16px var(--monitor-glow)) saturate(1.15);
}

@keyframes zone-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px var(--monitor-glow)) saturate(1.1); }
  50%      { filter: drop-shadow(0 0 22px var(--monitor-glow)) saturate(1.3); }
}

/* BURNOUT — flashing/pulsing red, urgent shake */
[data-state="BURNOUT"] #character-stage {
  animation: burnout-flash 1.1s steps(2, jump-none) infinite;
}

[data-state="BURNOUT"] #character-sprite {
  animation-name: sprite-idle-bob, burnout-shake;
  animation-duration: 3.2s, 0.35s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  filter: drop-shadow(0 0 18px var(--monitor-glow)) saturate(1.4) hue-rotate(-6deg);
}

@keyframes burnout-flash {
  0%, 100% { background-color: var(--color-bg-alt); }
  50%      { background-color: rgba(255, 40, 60, 0.16); }
}

@keyframes burnout-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-state="BURNOUT"] #character-stage {
    animation: none;
    background-color: rgba(255, 40, 60, 0.12);
  }

  [data-state="BURNOUT"] #character-sprite {
    animation: none;
  }
}

/* LINKEDIN — eerie yellow, "browsing job listings" flicker */
[data-state="LINKEDIN"] #character-stage {
  box-shadow: inset 0 0 50px rgba(255, 214, 10, 0.15);
}

[data-state="LINKEDIN"] #character-sprite {
  animation-name: sprite-idle-bob, linkedin-flicker;
  animation-duration: 3.2s, 2.6s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  filter: drop-shadow(0 0 14px var(--monitor-glow)) sepia(0.3) hue-rotate(-10deg);
}

@keyframes linkedin-flicker {
  0%, 92%, 100% { opacity: 1; }
  94%           { opacity: 0.55; }
  96%           { opacity: 1; }
}

/* ZOMBIE — drained grey, slow heavy droop */
[data-state="ZOMBIE"] #character-sprite {
  animation: zombie-droop 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--monitor-glow)) grayscale(0.75) brightness(0.85);
}

@keyframes zombie-droop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(2px) rotate(-2deg); }
}

/* RESIGNED — still, cold, monitor basically off */
[data-state="RESIGNED"] #character-stage {
  box-shadow: none;
}

[data-state="RESIGNED"] #character-sprite {
  animation: none;
  filter: grayscale(1) brightness(0.6);
  opacity: 0.8;
}

[data-state="RESIGNED"] #character-stage::after {
  opacity: 0.5;
}

/* ==================================================================
   Active effect badges (AirPods / MacBook / Quiet hour countdowns)
   ================================================================== */
.active-effects {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.effect-badge {
  font-size: 0.65rem;
  padding: 2px var(--space-1);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==================================================================
   Per-action visual effects (one-shot icon pop triggered from
   ui/actionFx.js). Positioned above the sprite, brief and self-removing.
   ================================================================== */
.action-fx {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: 4;
  pointer-events: none;
  transform: translateX(-50%);
  animation: action-fx-pop 1.1s ease-out forwards;
}

.action-fx__icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

@keyframes action-fx-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.7); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.05); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.9); }
}

/* orderPizza: a bite-sized shrink instead of a float, to read as "eaten" */
.action-fx--orderPizza {
  animation-name: action-fx-eaten;
}

@keyframes action-fx-eaten {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  25%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
  60%  { opacity: 1; transform: translateX(-50%) scale(0.85) rotate(-8deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(8deg); }
}

/* sendToSleep: drifting zzz bubble */
.action-fx--sendToSleep {
  animation-name: action-fx-drift;
  animation-duration: 1.5s;
}

@keyframes action-fx-drift {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-30%) translateY(-30px); }
}

.action-fx--no-motion {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .action-fx {
    animation-duration: 0.4s;
  }
}

/* ==================================================================
   Screen shake (major incidents) / sparkle burst (golden incidents)
   Toggled transiently on #character-stage by ui/renderer.js.
   ================================================================== */
.stage-shake {
  animation: stage-shake 0.42s ease-in-out;
}

@keyframes stage-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px) rotate(-0.5deg); }
  40%      { transform: translateX(5px) rotate(0.5deg); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

.stage-sparkle::before {
  animation: stage-sparkle-pulse 0.9s ease-out;
}

@keyframes stage-sparkle-pulse {
  0%   { background: radial-gradient(circle at 50% 40%, rgba(255, 215, 0, 0.9) 0%, transparent 55%); opacity: 1; }
  100% { background: radial-gradient(circle at 50% 40%, var(--scene-glow) 0%, transparent 60%); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-shake,
  .stage-sparkle::before {
    animation: none;
  }
}