@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============ Base global styling (matches original index.css) ============ */
html {
  scroll-behavior: smooth;
  background-color: #0a0a0a;
}

body {
  color: #f3f4f6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: #0a0a0a;
  margin: 0;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  border: 2px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

::selection {
  background-color: rgba(168, 85, 247, 0.35);
  color: #fff;
}

.perspective-\[1000px\] {
  perspective: 1000px;
}

/* ============ Entrance / fade animations (replace framer-motion "initial/animate") ============ */
@keyframes smooth-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-up-el {
  opacity: 0;
  transform: translateY(15px);
  animation: fade-up-kf 0.8s ease-out forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes fade-up-kf {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-el {
  opacity: 0;
  animation: fade-in-kf 0.5s ease-out forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes fade-in-kf {
  to {
    opacity: 1;
  }
}

.hero-avatar-el {
  opacity: 0;
  transform: translateX(30px) scale(0.95);
  animation: hero-avatar-kf 1.2s ease-out forwards;
  animation-delay: 0.2s;
}
@keyframes hero-avatar-kf {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.avatar-bob {
  animation: avatar-bob-kf 5s ease-in-out infinite;
}
@keyframes avatar-bob-kf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

#topbar-inner.topbar-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scroll-hint {
  animation: scroll-hint-pulse 3s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes scroll-hint-pulse {
  0%, 100% { opacity: 0; }
  15% { opacity: 0.4; }
  50% { opacity: 0.4; }
  65% { opacity: 0; }
}

/* Scroll-reveal utility (replaces whileInView) */
.reveal-el {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.reveal-el.revealed {
  opacity: 1;
  transform: translateY(0);
}

.skill-card-el {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.skill-card-el.shown {
  opacity: 1;
  transform: scale(1);
}

.project-card-el {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.project-card-el.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Cinematic floating stardust particles ============ */
@keyframes float-particle {
  0% {
    transform: translateY(100vh) scale(0.8) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-20vh) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}

/* ============ Desktop circuit-trace corner accents (replaces the two spinning gears) ============ */
.circuit-node {
  animation: circuit-node-pulse 3s ease-in-out infinite;
}
@keyframes circuit-node-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ============ Robot thruster pulse ============ */
.thruster-pulse {
  animation: thruster-pulse-kf 0.35s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes thruster-pulse-kf {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.6); opacity: 1; }
}

/* ============ Skill tab active / inactive states ============ */
.skill-tab {
  background: rgba(9, 9, 11, 0.2);
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.05);
}
.skill-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.skill-tab.active {
  background: rgba(147, 51, 234, 0.1);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
  transform: scale(1.02);
}

/* ============ Spotlight card glow (replaces mousemove React state) ============ */
.spotlight-card .spotlight-bg,
.spotlight-card .spotlight-border {
  opacity: 0;
}
.spotlight-card:hover .spotlight-bg,
.spotlight-card:hover .spotlight-border {
  opacity: 1;
}
.spotlight-card .spotlight-border {
  -webkit-mask-image: linear-gradient(black, black) content-box, linear-gradient(black, black);
  mask-image: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

/* ============ Project card 3D tilt ============ */
.project-tilt-wrapper {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ============ Loader exit transition ============ */
#main-animated-loader.loader-exit {
  opacity: 0;
  transform: translateY(-20px);
  filter: blur(20px);
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out, filter 1.2s ease-in-out;
  pointer-events: none;
}

/* ============ Robot bubble / hint visibility helpers ============ */
.robot-visible {
  display: block !important;
  opacity: 1 !important;
  transform: scale(1) translateY(0) translateX(0) !important;
}

#robot-hover-hint.robot-visible {
  transform: scale(1) !important;
}

#robot-bob-wrapper {
  animation: robot-idle-y 3s ease-in-out infinite;
}
#robot-swing {
  animation: robot-idle-rotate 3.2s ease-in-out infinite;
}
#robot-swing.robot-hovered {
  animation: robot-hover-rotate 1.8s ease-in-out infinite;
}
@keyframes robot-idle-rotate {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes robot-hover-rotate {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}
@keyframes robot-idle-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

#robot-antenna {
  animation: antenna-glow 1.5s ease-in-out infinite;
}
@keyframes antenna-glow {
  0%, 100% { filter: drop-shadow(0 0 1px #a855f7); }
  50% { filter: drop-shadow(0 0 6px #3b82f6); }
}

#robot-core {
  animation: core-pulse 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes core-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

#robot-leg-left {
  animation: leg-left-idle 2.8s ease-in-out infinite;
}
#robot-leg-right {
  animation: leg-right-idle 2.8s ease-in-out infinite 0.3s;
}
@keyframes leg-left-idle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(1.2px); }
}
@keyframes leg-right-idle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(1.2px); }
}
#robot-arm-left.action-dancing {
  animation: arm-left-dance 0.6s ease-in-out infinite;
}
#robot-arm-right.action-dancing {
  animation: arm-right-dance 0.6s ease-in-out infinite;
}
@keyframes arm-left-dance {
  0%, 100% { transform: rotate(15deg); }
  50% { transform: rotate(65deg); }
}
@keyframes arm-right-dance {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(-65deg); }
}

#robot-leg-left.action-dancing {
  animation: leg-left-dance 0.55s ease-in-out infinite;
}
#robot-leg-right.action-dancing {
  animation: leg-right-dance 0.55s ease-in-out infinite;
}
@keyframes leg-left-dance {
  0%, 100% { transform: rotate(-20deg) translateY(0); }
  50% { transform: rotate(20deg) translateY(-3px); }
}
@keyframes leg-right-dance {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50% { transform: rotate(-20deg) translateY(-3px); }
}
#robot-leg-left.action-excited {
  animation: leg-left-excited 2.8s ease-in-out infinite;
}
#robot-leg-right.action-excited {
  animation: leg-right-excited 2.8s ease-in-out infinite;
}
@keyframes leg-left-excited {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50% { transform: rotate(-15deg) translateY(-1px); }
}
@keyframes leg-right-excited {
  0%, 100% { transform: rotate(-15deg) translateY(0); }
  50% { transform: rotate(15deg) translateY(-1px); }
}

#robot-hand-left.action-waving {
  animation: hand-wave 1s ease-in-out infinite;
}
@keyframes hand-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(30deg); }
  40% { transform: rotate(-30deg); }
  60% { transform: rotate(30deg); }
  80% { transform: rotate(-30deg); }
}
#robot-hand-right.action-excited-hand {
  animation: hand-excited 1s ease-in-out infinite;
}
@keyframes hand-excited {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-15deg); }
  80% { transform: rotate(15deg); }
}

#robot-mouth.action-excited-mouth {
  animation: mouth-pulse 0.35s ease-in-out infinite;
}
@keyframes mouth-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.6); }
}

#robot-thruster-left,
#robot-thruster-right {
  animation: thruster-pulse-kf 0.35s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
#robot-thruster-left.action-excited,
#robot-thruster-right.action-excited {
  animation-name: thruster-pulse-excited-kf;
}
@keyframes thruster-pulse-excited-kf {
  0%, 100% { transform: scale(1.5); opacity: 0.6; }
  50% { transform: scale(2.2); opacity: 1; }
}

/* ============ Speech bubble show/hide (matches original framer-motion values) ============ */
.robot-bubble-top,
.robot-bubble-side {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.robot-bubble-top {
  transform: scale(0.8) translateY(15px);
}
.robot-bubble-top.shown {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
/* On md+ screens the bubble is horizontally centered via left:50% +
   translateX(-50%); that translateX must be preserved in every state
   here, otherwise the entrance transform below would overwrite it and
   the bubble would drift off to the wrong side of the screen. */
@media (min-width: 768px) {
  .robot-bubble-top {
    transform: translateX(-50%) scale(0.8) translateY(15px);
  }
  .robot-bubble-top.shown {
    transform: translateX(-50%) scale(1) translateY(0);
  }
}
.robot-bubble-side {
  transform: scale(0.8) translateX(-15px);
}
.robot-bubble-side.shown {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
}
.robot-bubble-top:not(.shown),
.robot-bubble-side:not(.shown) {
  pointer-events: none;
}