/* ── KEYFRAMES ── */

@keyframes heroUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: .6; }
}

@keyframes floatSkull {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-14px) rotate(4deg); }
}

@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}

@keyframes goldPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(240,192,64,.2); }
  50%       { text-shadow: 0 0 60px rgba(240,192,64,.6), 0 0 100px rgba(240,192,64,.2); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(200,149,46,.2); }
  50%       { border-color: rgba(200,149,46,.5); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── APPLIED ANIMATIONS ── */

/* Skull pulse on hover */
.hero-skull-top:hover {
  animation: floatSkull .5s ease-in-out infinite, goldPulse 1s ease-in-out infinite;
}

/* Gold shimmer on logo */
.logo {
  background: linear-gradient(
    90deg,
    var(--g2) 0%,
    var(--g3) 40%,
    var(--g2) 60%,
    var(--g)  100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* Sec titles pulse when in view */
.sec-title.on {
  animation: goldPulse 4s 1s ease-in-out infinite;
}

/* Staggered card entries */
.proj-card:nth-child(1)  { transition-delay: 0.02s; }
.proj-card:nth-child(2)  { transition-delay: 0.05s; }
.proj-card:nth-child(3)  { transition-delay: 0.08s; }
.proj-card:nth-child(4)  { transition-delay: 0.11s; }
.proj-card:nth-child(5)  { transition-delay: 0.14s; }
.proj-card:nth-child(6)  { transition-delay: 0.17s; }
.proj-card:nth-child(7)  { transition-delay: 0.20s; }
.proj-card:nth-child(8)  { transition-delay: 0.23s; }
.proj-card:nth-child(9)  { transition-delay: 0.26s; }
.proj-card:nth-child(10) { transition-delay: 0.29s; }
.proj-card:nth-child(11) { transition-delay: 0.32s; }
.proj-card:nth-child(12) { transition-delay: 0.35s; }

/* Skill pill stagger */
.skill:nth-child(odd)  { animation: borderGlow 3s ease-in-out infinite; }
.skill:nth-child(even) { animation: borderGlow 3s 1.5s ease-in-out infinite; }

/* Stat number glow */
.stat-num {
  transition: text-shadow .3s;
}
.stat-item:hover .stat-num {
  text-shadow: 0 0 40px rgba(240,192,64,.6), 0 0 80px rgba(240,192,64,.2);
}

/* Footer skull continuous */
.footer-skull {
  display: inline-block;
}