/* ══════════════════════════════════════════════════════════
   animations.css — LightRays + keyframes (Rombak Total)
   ══════════════════════════════════════════════════════════ */

/* ─── LightRays WebGL Container ─────────────────────────── */
.light-rays-container {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.light-rays-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ─── Hero gradient overlay (on top of LightRays) ────────── */
.hero-rays-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 40%, var(--clr-bg) 100%),
    linear-gradient(to right, var(--clr-bg) 0%, transparent 30%, transparent 70%, var(--clr-bg) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ─── Glow Pulse ─────────────────────────────────────────── */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px rgba(99,102,241,0.2); }
  50%      { box-shadow: 0 0 40px rgba(99,102,241,0.5); }
}

/* ─── Holo / sheen movement for card ────────────────────── */
@keyframes holo-bg {
  0%   { background-position: 0 0, 0 0, center; }
  100% { background-position: 0 100%, 100% 100%, center; }
}
@keyframes glow-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Float animation for scroll indicator ──────────────── */
@keyframes floatUpDown {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ─── Fade utilities ─────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Shimmer for CTA buttons ────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.btn-shimmer {
  background: linear-gradient(
    90deg,
    var(--clr-primary) 0%,
    var(--clr-purple) 40%,
    var(--clr-accent) 60%,
    var(--clr-primary) 100%
  );
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ─── Particle glow (MagicBento) ─────────────────────────── */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}
.particle::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(3px);
  z-index: -1;
}

/* ─── Ripple ─────────────────────────────────────────────── */
.ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: scale(0);
  opacity: 1;
  animation: rippleOut 0.75s ease-out forwards;
}
@keyframes rippleOut {
  to { transform: scale(1); opacity: 0; }
}

/* ─── Skill bar fill animation ───────────────────────────── */
.skill-bar-fill.animated {
  animation: barFill var(--bar-duration, 1.2s) cubic-bezier(0.25,1,0.5,1) var(--bar-delay, 0s) both;
}
@keyframes barFill {
  from { width: 0 !important; }
}

/* ─── Stat counter pop ───────────────────────────────────── */
.hero-stat-num.counting {
  animation: statPop 0.3s var(--trans-spring);
}
@keyframes statPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ─── PillNav enter animation ────────────────────────────── */
@keyframes fadeInDownNav {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pill-nav-container {
  animation: fadeInDownNav 0.5s ease 0.4s both;
}