/* ============================================================
   Keyframe Animations
   ============================================================ */

@keyframes loaderPulse {
  from { opacity: 0.5; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1); }
}

@keyframes loaderFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

@keyframes shapeFloat {
  0%,  100% { transform: translate(0px,   0px)  scale(1); }
  33%        { transform: translate(28px, -22px) scale(1.04); }
  66%        { transform: translate(-18px, 26px) scale(0.96); }
}

@keyframes scrollBob {
  0%,  100% { transform: translateX(-50%) translateY(0px);  opacity: 0.5; }
  50%        { transform: translateX(-50%) translateY(9px);  opacity: 0.85; }
}

@keyframes scrollDot {
  0%   { transform: translateY(0);   opacity: 1; }
  65%  { transform: translateY(13px); opacity: 0; }
  66%  { transform: translateY(0);   opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

@keyframes ringPulse {
  0%,  100% { transform: scale(1);    opacity: 1;   }
  50%        { transform: scale(1.06); opacity: 0.65; }
}

/* Page transition fade-in (applied to body after load) */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Subtle glow pulse on accent elements */
@keyframes glowPulse {
  0%,  100% { text-shadow: 0 0 20px rgba(0, 212, 255, 0.2); }
  50%        { text-shadow: 0 0 40px rgba(0, 212, 255, 0.5), 0 0 80px rgba(0, 212, 255, 0.15); }
}

/* Card shimmer on hover */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* Staggered reveal for hero children */
@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ============================================================
   Hero Accent Glow
   ============================================================ */
.hero-name .accent {
  animation: glowPulse 3.5s ease infinite 2s;
}

/* ============================================================
   Word morph character transition
   ============================================================ */
.morph-char {
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Skill card glow on hover (per icon color)
   ============================================================ */
.skill-card:hover .icon-rn   { box-shadow: 0 0 20px rgba(97,218,251,0.25); }
.skill-card:hover .icon-php  { box-shadow: 0 0 20px rgba(119,123,179,0.25); }
.skill-card:hover .icon-py   { box-shadow: 0 0 20px rgba(55,118,171,0.25); }
.skill-card:hover .icon-node { box-shadow: 0 0 20px rgba(51,153,51,0.25); }
.skill-card:hover .icon-java { box-shadow: 0 0 20px rgba(248,152,32,0.25); }
.skill-card:hover .icon-js   { box-shadow: 0 0 20px rgba(247,223,30,0.25); }
.skill-card:hover .icon-html { box-shadow: 0 0 20px rgba(227,76,38,0.25); }
.skill-card:hover .icon-css  { box-shadow: 0 0 20px rgba(38,77,228,0.25); }
.skill-card:hover .icon-server { box-shadow: 0 0 20px rgba(0,212,255,0.25); }
.skill-card:hover .icon-vm   { box-shadow: 0 0 20px rgba(189,147,249,0.25); }
.skill-card:hover .icon-raid { box-shadow: 0 0 20px rgba(0,255,136,0.25); }
.skill-card:hover .icon-nvr  { box-shadow: 0 0 20px rgba(255,107,107,0.25); }

/* ============================================================
   Reveal stagger delays (applied by JS data-delay)
   ============================================================ */
.reveal[data-delay="100"] { transition-delay: 0.1s; }
.reveal[data-delay="200"] { transition-delay: 0.2s; }
.reveal[data-delay="300"] { transition-delay: 0.3s; }
.reveal[data-delay="400"] { transition-delay: 0.4s; }
.reveal[data-delay="500"] { transition-delay: 0.5s; }

/* ============================================================
   Page transition overlay
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 8000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}