/*
 * kb-upload.css — drag-drop "file-eater" overlay starring the LIFE-bot.
 *
 * Loaded by index.html alongside kb-upload.js. On-brand: cream background,
 * beige surfaces, orange accent — no plain-white cards. Respects
 * prefers-reduced-motion (all keyframe motion is disabled there).
 *
 * Three sprite frames (/sprites/robot-{idle,open,happy}.png) cross-fade. While a
 * file is dragged and held over the page the bot "lures": mouth opens, a suction
 * vortex spins up and orange sparks spiral inward (Vampire-Survivors pickup
 * magnet). On a valid drop it chews (wiggle + glow) then swallows with a juicy
 * pop + spark burst + "Nom!" (Balatro juice); a wrong-format drop is spat back
 * with a reason.
 *
 * Colors mirror index.html's :root tokens; redeclared here so the stylesheet is
 * self-contained (it loads as an external file, not inside index.html's <style>).
 */

.kb-eater-overlay {
  --kb-bg: rgba(250, 250, 247, 0.94); /* #FAFAF7 */
  --kb-surface: #F5F0EB;
  --kb-surface-2: #EDE7DF;
  --kb-accent: #E8773A;
  --kb-accent-2: #FBBF7F;
  --kb-border: #E0DCD5;
  --kb-text: #2D2D2D;
  --kb-text-secondary: #6B6B6B;
  --kb-reject: #C27D7D;

  position: fixed;
  inset: 0;
  z-index: 2000; /* above the guided tour (1100/1200) so a drop is never blocked */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kb-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}

.kb-eater-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 140ms ease;
}

.kb-eater-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 64px 38px;
  background: var(--kb-surface);
  border: 2px dashed var(--kb-accent);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
  max-width: calc(100vw - 48px);
  text-align: center;
}

.kb-eater-prompt {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kb-text);
}

.kb-eater-hint {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.85rem;
  color: var(--kb-text-secondary);
}

/* ---------- The LIFE-bot ---------- */

.kb-eater-bot-wrap {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-bot {
  position: relative;
  width: 200px;
  height: 200px;
}

/* Sprite frames (idle / mouth-open / happy), cross-faded by state. */
.kb-bot-frames { position: absolute; inset: 0; animation: kb-bob 3.2s ease-in-out infinite; }
.kb-bot-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transition: opacity 110ms ease;
}
.kb-bot-idle { opacity: 1; }
.kb-bot.is-luring .kb-bot-idle,
.kb-bot.is-spitting .kb-bot-idle,
.kb-bot.is-happy .kb-bot-idle { opacity: 0; }
.kb-bot.is-luring .kb-bot-open,
.kb-bot.is-spitting .kb-bot-open { opacity: 1; }
.kb-bot.is-happy .kb-bot-happy { opacity: 1; }

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

/* Lure: a file is held over the page. Mouth open + pulse + glow. */
.kb-bot.is-luring .kb-bot-frames { animation: kb-lure 1s ease-in-out infinite; }
@keyframes kb-lure {
  0%, 100% { transform: translateY(0) scale(1);    filter: drop-shadow(0 0 3px rgba(232,119,58,.25)); }
  50%      { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 0 16px rgba(232,119,58,.85)); }
}

/* Chomp: squash-and-stretch as the jaws snap on the morsel. */
.kb-bot.is-chomping { animation: kb-chomp 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@keyframes kb-chomp {
  0% { transform: scale(1); }
  35% { transform: scale(1.16, 0.86); }
  60% { transform: scale(0.95, 1.06); }
  100% { transform: scale(1); }
}

/* Chewing/digesting while the upload is in flight: quick wiggle + warm glow. */
.kb-bot.is-processing .kb-bot-frames { animation: kb-chew 0.26s ease-in-out infinite; }
@keyframes kb-chew { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.kb-bot.is-processing { animation: kb-glow 1s ease-in-out infinite; }
@keyframes kb-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232,119,58,0)); }
  50%      { filter: drop-shadow(0 0 16px rgba(232,119,58,.8)); }
}

/* Happy: a juicy over-shoot pop on the satisfied swallow. */
.kb-bot.is-happy { animation: kb-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 1; }
@keyframes kb-pop {
  0% { transform: scale(0.9); }
  40% { transform: scale(1.22); }
  70% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Spit: recoil shake + angry red tint on reject. */
.kb-bot.is-spitting { animation: kb-shake 0.5s ease-in-out 1; }
.kb-bot.is-spitting .kb-bot-frame {
  filter: drop-shadow(0 0 9px rgba(194,125,125,.9)) saturate(1.3) hue-rotate(-12deg);
}
@keyframes kb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-2deg); }
  40% { transform: translateX(7px) rotate(2deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ---------- Suction vortex (two counter-rotating rings) ---------- */

.kb-bot-vortex {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 224px;
  height: 224px;
  margin: -112px 0 0 -112px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: conic-gradient(from 0deg, transparent 0 52%, rgba(232,119,58,.45) 76%, rgba(251,191,127,.95) 92%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 64%, #000 97%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 60%, #000 64%, #000 97%, transparent 100%);
}
.kb-bot-vortex2 { width: 192px; height: 192px; margin: -96px 0 0 -96px; filter: hue-rotate(10deg); }
.kb-bot.is-luring .kb-bot-vortex  { opacity: 0.9; animation: kb-spin 2.2s linear infinite; }
.kb-bot.is-luring .kb-bot-vortex2 { opacity: 0.6; animation: kb-spin-rev 3.1s linear infinite; }
@keyframes kb-spin     { to { transform: rotate(360deg); } }
@keyframes kb-spin-rev { to { transform: rotate(-360deg); } }

/* ---------- Inward-spiralling lure sparks ---------- */

.kb-bot-sparks { position: absolute; inset: 0; pointer-events: none; }
.kb-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFD9A8, var(--kb-accent) 70%);
  opacity: 0;
  transform: rotate(var(--a)) translateX(130px) scale(0.3);
}
.kb-bot.is-luring .kb-spark { animation: kb-suck 1.1s ease-in infinite; animation-delay: var(--delay); }
@keyframes kb-suck {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(132px) scale(0.25); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--a) + 120deg)) translateX(8px) scale(1.1); }
}

/* ---------- FX layer: swallow burst + "Nom!" floater ---------- */

.kb-bot-fx { position: absolute; inset: 0; pointer-events: none; }
.kb-burst {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD9A8, var(--kb-accent) 70%);
  opacity: 0;
  animation: kb-burst 0.65s ease-out forwards;
}
@keyframes kb-burst {
  0%   { opacity: 1; transform: rotate(var(--a)) translateX(6px) scale(0.5); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--dist)) scale(1); }
}
.kb-nom {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--kb-accent);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: kb-nom 0.9s ease-out forwards;
}
@keyframes kb-nom {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -2px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}

/* ---------- Flying file-card (sucked in, spun) ---------- */

.kb-eater-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.kb-eater-card {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 92px;
  height: 116px;
  margin-left: -46px;
  background: var(--kb-surface-2);
  border: 1px solid var(--kb-border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px;
  background-image: linear-gradient(135deg, transparent 78%, var(--kb-border) 78%, var(--kb-border) 82%, transparent 82%);
}
.kb-eater-card-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--kb-text-secondary);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sucked toward the mouth — spirals in as it shrinks. */
.kb-eater-card.is-flying {
  transition: transform 0.44s cubic-bezier(0.5, 0, 0.7, 0), opacity 0.44s ease;
  transform: translateY(30vh) scale(0.42) rotate(140deg);
}
.kb-eater-card.is-held {
  transition: transform 0.22s ease-in, opacity 0.22s ease-in;
  transform: translateY(32vh) scale(0.1) rotate(220deg);
  opacity: 0;
}
.kb-eater-card.is-eaten {
  transition: transform 0.34s ease-in, opacity 0.34s ease-in;
  transform: translateY(33vh) scale(0.03) rotate(260deg);
  opacity: 0;
}
.kb-eater-card.is-spat {
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.62s ease;
  transform: translateY(-10vh) scale(0.95) rotate(-14deg);
  opacity: 0;
}

/* ---------- Spit reason bubble ---------- */

.kb-eater-reason {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
  max-width: 320px;
  padding: 10px 16px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-reject);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kb-reject);
  animation: kb-reason-in 0.25s ease-out 1;
}
@keyframes kb-reason-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .kb-eater-overlay,
  .kb-eater-overlay.is-visible { transition: opacity 1ms linear; }
  .kb-bot-frames,
  .kb-bot.is-luring .kb-bot-frames,
  .kb-bot.is-processing .kb-bot-frames,
  .kb-bot.is-processing,
  .kb-bot.is-chomping,
  .kb-bot.is-happy,
  .kb-bot.is-spitting,
  .kb-bot-frame,
  .kb-bot.is-luring .kb-bot-vortex,
  .kb-bot.is-luring .kb-bot-vortex2,
  .kb-bot.is-luring .kb-spark,
  .kb-burst, .kb-nom,
  .kb-eater-card, .kb-eater-card.is-flying, .kb-eater-card.is-held,
  .kb-eater-card.is-eaten, .kb-eater-card.is-spat,
  .kb-eater-reason {
    animation: none !important;
    transition: none !important;
  }
  /* Convey state statically. */
  .kb-bot.is-luring .kb-bot-idle, .kb-bot.is-spitting .kb-bot-idle { opacity: 0; }
  .kb-bot.is-luring .kb-bot-open, .kb-bot.is-spitting .kb-bot-open { opacity: 1; }
  .kb-bot.is-happy .kb-bot-idle { opacity: 0; }
  .kb-bot.is-happy .kb-bot-happy { opacity: 1; }
  .kb-bot-vortex { opacity: 0 !important; }
}