/* Robot animation — the K-robot face with sliding doors and a glowing eye.
   The whole assembly is rendered with pure CSS so it works offline. */

.robot { perspective: 600px; }

.robot-shell {
  position: absolute; inset: 0;
  border-radius: 28%;
  overflow: hidden;
  transform-style: preserve-3d;
}

.robot-glow {
  position: absolute; inset: -30%;
  background: radial-gradient(closest-side, rgba(77,150,255,0.55), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: pulse 4s ease-in-out infinite;
}

.robot-door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(135deg, #1a2030 0%, #0e131c 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  z-index: 2;
  transform-origin: center;
  animation: doors 6s ease-in-out infinite;
}
.robot-door-l { left: 0;   animation-name: door-left; }
.robot-door-r { right: 0;  animation-name: door-right; }

.robot-eye {
  position: absolute; top: 50%; left: 50%;
  width: 38%; height: 38%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #aed1ff 0%, #4d96ff 45%, #1d4cb0 100%);
  box-shadow:
    0 0 22px rgba(77,150,255,0.65),
    inset 0 0 18px rgba(255,255,255,0.25);
  animation: eye-pulse 3.2s ease-in-out infinite;
}
.robot-pupil {
  position: absolute; top: 38%; left: 38%;
  width: 24%; height: 24%; border-radius: 50%;
  background: #06080d;
  box-shadow: inset 0 0 4px rgba(255,255,255,0.3);
}

.robot-sparkle {
  position: absolute; color: #f5d27a;
  text-shadow: 0 0 8px rgba(245,210,122,0.7);
  font-size: 14px; opacity: 0;
  animation: sparkle 4.5s ease-in-out infinite;
}
.robot-sparkle-1 { top: 6%;  left: 18%; animation-delay: 0.6s; }
.robot-sparkle-2 { top: 14%; right: 8%; animation-delay: 1.8s; }
.robot-sparkle-3 { bottom: 8%; right: 22%; animation-delay: 3.0s; }

@keyframes door-left {
  0%, 35%  { transform: translateX(0); }
  60%, 90% { transform: translateX(-110%); }
  100%     { transform: translateX(0); }
}
@keyframes door-right {
  0%, 35%  { transform: translateX(0); }
  60%, 90% { transform: translateX(110%); }
  100%     { transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes eye-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(77,150,255,0.65), inset 0 0 18px rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 0 38px rgba(77,150,255,0.95), inset 0 0 26px rgba(255,255,255,0.45); }
}
@keyframes sparkle {
  0%, 100%  { opacity: 0; transform: scale(0.6) rotate(0deg); }
  40%, 60%  { opacity: 1; transform: scale(1.1) rotate(20deg); }
}

/* Tiny prose polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }