/* ==========================================================================
   CodeKudos by PixelSetu - Global Stylesheet
   Pure Vanilla CSS compatible with static hosting (Cloudflare Pages, etc.)
   ========================================================================== */

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s ease-out forwards;
  opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Custom Hover Effects */
.hover-underline-animation {
  position: relative;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #2563eb;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Base Dark Mode background for entire HTML to avoid FOUC flash */
html.dark {
  background-color: #09090b; /* zinc-950 */
  color: #f4f4f5; /* zinc-50 */
}

/* Robot Mascot Animated SVG Styles */
@keyframes robotHeadgearWobble {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
    transform-origin: 24px 14px;
  }
  20% {
    transform: rotate(-14deg) translateY(-1.5px);
    transform-origin: 24px 14px;
  }
  40% {
    transform: rotate(12deg) translateY(-1px);
    transform-origin: 24px 14px;
  }
  60% {
    transform: rotate(-8deg) translateY(-1px);
    transform-origin: 24px 14px;
  }
  80% {
    transform: rotate(8deg) translateY(0);
    transform-origin: 24px 14px;
  }
}

@keyframes robotEyeBlink {
  0%, 45%, 55%, 100% {
    transform: scaleY(1);
    transform-origin: center;
  }
  48%, 52% {
    transform: scaleY(0.12);
    transform-origin: center;
  }
}

@keyframes robotSmilePulse {
  0%, 100% {
    transform: scale(1);
    transform-origin: 24px 34px;
    opacity: 0.95;
  }
  50% {
    transform: scale(1.15) translateY(-0.5px);
    transform-origin: 24px 34px;
    opacity: 1;
  }
}

@keyframes robotCheekGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}

.anim-robot-headgear {
  animation: robotHeadgearWobble 2.4s ease-in-out infinite;
}

.anim-robot-eyes {
  animation: robotEyeBlink 3.2s ease-in-out infinite;
}

.anim-robot-smile {
  animation: robotSmilePulse 2s ease-in-out infinite;
}

.anim-robot-cheeks {
  animation: robotCheekGlow 2s ease-in-out infinite;
}

@keyframes robotBracketGlow {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(56, 189, 248, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 3.5px rgba(56, 189, 248, 0.95));
  }
}

.anim-robot-bracket {
  animation: robotBracketGlow 2.4s ease-in-out infinite;
}