/* ═══════════════════════════════════════════════════════════════
   SHREYANSH JAISWAL — CYBERPUNK PORTFOLIO
   animations.css — Keyframes, Effects & Motion
   ═══════════════════════════════════════════════════════════════ */

/* ── Core Keyframes ────────────────────────────────────────── */

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

@keyframes loaderFill {
  from { width: 0; }
  to   { width: 100%; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px currentColor; }
  50%       { opacity: 0.7; transform: scale(1.3); box-shadow: 0 0 16px currentColor; }
}

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

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-15deg); }
  40%       { transform: rotate(15deg); }
  60%       { transform: rotate(-10deg); }
  80%       { transform: rotate(10deg); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 10px var(--neon-blue),
      0 0 20px var(--neon-blue),
      0 0 40px var(--neon-blue),
      0 0 80px var(--neon-blue);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

@keyframes glitchShift {
  0%   { clip-path: inset(0 0 95% 0); transform: translate(-4px, 0); }
  10%  { clip-path: inset(10% 0 80% 0); transform: translate(4px, 0); }
  20%  { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 0); }
  30%  { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
  40%  { clip-path: inset(70% 0 10% 0); transform: translate(-4px, 0); }
  50%  { clip-path: inset(90% 0 0 0); transform: translate(4px, 0); }
  60%  { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(0,212,255,0.2); box-shadow: 0 0 10px rgba(0,212,255,0.1); }
  50%       { border-color: rgba(180,79,255,0.4); box-shadow: 0 0 20px rgba(180,79,255,0.2); }
}

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

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes neonPulseBlue {
  0%, 100% { box-shadow: 0 0 5px rgba(0,212,255,0.3), 0 0 10px rgba(0,212,255,0.2); }
  50%       { box-shadow: 0 0 20px rgba(0,212,255,0.6), 0 0 40px rgba(0,212,255,0.3); }
}

@keyframes neonPulsePurple {
  0%, 100% { box-shadow: 0 0 5px rgba(180,79,255,0.3), 0 0 10px rgba(180,79,255,0.2); }
  50%       { box-shadow: 0 0 20px rgba(180,79,255,0.6), 0 0 40px rgba(180,79,255,0.3); }
}

@keyframes neonPulseRed {
  0%, 100% { box-shadow: 0 0 5px rgba(255,45,85,0.3), 0 0 10px rgba(255,45,85,0.2); }
  50%       { box-shadow: 0 0 20px rgba(255,45,85,0.6), 0 0 40px rgba(255,45,85,0.3); }
}

@keyframes typewriterCursor {
  0%, 100% { border-right-color: var(--neon-blue); }
  50%       { border-right-color: transparent; }
}

@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--target-width); }
}

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

@keyframes particleFade {
  0%   { opacity: 0; transform: scale(0); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.6; }
}

@keyframes heroNameReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

@keyframes borderDraw {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

@keyframes cardHoverGlow {
  0%   { box-shadow: 0 0 0 rgba(0,212,255,0); }
  100% { box-shadow: 0 0 30px rgba(0,212,255,0.2), 0 0 60px rgba(0,212,255,0.1); }
}

@keyframes timelineDotPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.3); }
  50%       { box-shadow: 0 0 25px rgba(0,212,255,0.7), 0 0 50px rgba(0,212,255,0.3); }
}

@keyframes socialHover {
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-4px) rotate(-5deg); }
  75%  { transform: translateY(-4px) rotate(5deg); }
  100% { transform: translateY(-4px) rotate(0); }
}

@keyframes modalOpen {
  from { opacity: 0; transform: scale(0.85) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes glowText {
  0%, 100% {
    text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
  }
  50% {
    text-shadow: 0 0 20px var(--neon-blue), 0 0 40px var(--neon-blue), 0 0 80px var(--neon-blue);
  }
}

@keyframes backgroundShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cornerBlink {
  0%, 90%, 100% { opacity: 1; }
  95%            { opacity: 0.3; }
}

/* ── Applied Animation Classes ─────────────────────────────── */

.anim-float {
  animation: floatY 4s ease-in-out infinite;
}

.anim-neon-flicker {
  animation: neonFlicker 4s ease-in-out infinite;
}

.anim-pulse-blue {
  animation: neonPulseBlue 2s ease-in-out infinite;
}

.anim-pulse-purple {
  animation: neonPulsePurple 2s ease-in-out infinite;
}

.anim-pulse-red {
  animation: neonPulseRed 2s ease-in-out infinite;
}

.anim-shimmer {
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--neon-blue) 50%,
    var(--text-secondary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ── Hero Name Glitch Effect ───────────────────────────────── */
.hero-name {
  position: relative;
}
.hero-name::before,
.hero-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  pointer-events: none;
}
.hero-name::before {
  color: var(--neon-red);
  animation: glitchShift 6s infinite;
  opacity: 0.6;
  clip-path: inset(0 0 100% 0);
}
.hero-name::after {
  color: var(--neon-blue);
  animation: glitchShift 6s infinite 0.1s;
  opacity: 0.4;
  clip-path: inset(100% 0 0 0);
}
.hero-name:hover::before {
  animation: glitchShift 0.3s infinite;
}
.hero-name:hover::after {
  animation: glitchShift 0.3s infinite 0.05s;
}

/* ── Timeline Dot Pulse ────────────────────────────────────── */
.timeline-dot {
  animation: timelineDotPulse 2s ease-in-out infinite;
}

/* ── Hero Corner Blink ─────────────────────────────────────── */
.hero-corner {
  animation: cornerBlink 4s ease-in-out infinite;
}
.hero-corner--tr { animation-delay: 1s; }
.hero-corner--bl { animation-delay: 2s; }
.hero-corner--br { animation-delay: 3s; }

/* ── Section Title Glow ────────────────────────────────────── */
.text-neon {
  animation: glowText 3s ease-in-out infinite;
}

/* ── Badge Dot Pulse ───────────────────────────────────────── */
.badge-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* ── Skill Card Hover ──────────────────────────────────────── */
.skill-card {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.skill-card:hover {
  animation: neonPulseBlue 1.5s ease-in-out infinite;
}

/* ── Project Card Entrance ─────────────────────────────────── */
.project-card {
  animation: fadeInUp 0.6s var(--ease-out) both;
}
.project-card:nth-child(1) { animation-delay: 0.05s; }
.project-card:nth-child(2) { animation-delay: 0.10s; }
.project-card:nth-child(3) { animation-delay: 0.15s; }
.project-card:nth-child(4) { animation-delay: 0.20s; }
.project-card:nth-child(5) { animation-delay: 0.25s; }
.project-card:nth-child(6) { animation-delay: 0.30s; }

/* ── Social Button Hover ───────────────────────────────────── */
.social-btn:hover {
  animation: socialHover 0.4s ease-in-out forwards;
}

/* ── Loader Bar ────────────────────────────────────────────── */
.loader-bar-fill {
  animation: loaderFill 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Scan Line Effect ──────────────────────────────────────── */
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
  opacity: 0.4;
  animation: scanline 6s linear infinite;
  pointer-events: none;
  z-index: 4;
}

/* ── Neon Border Glow on Cards ─────────────────────────────── */
.glass-card {
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out);
}

/* ── Avatar Ring Animations ────────────────────────────────── */
.avatar-ring--1 { animation: ringRotate 10s linear infinite; }
.avatar-ring--2 { animation: ringRotate 7s linear infinite reverse; }
.avatar-ring--3 { animation: ringRotate 4s linear infinite; }

/* ── Typing Text ───────────────────────────────────────────── */
.typing-text {
  display: inline;
}

/* ── Scroll Hint ───────────────────────────────────────────── */
.scroll-line {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ── Filter Button Active State ────────────────────────────── */
.filter-btn.active {
  position: relative;
  overflow: hidden;
}
.filter-btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(180,79,255,0.1));
  pointer-events: none;
}

/* ── Form Input Focus Glow ─────────────────────────────────── */
.form-input:focus {
  animation: neonPulseBlue 2s ease-in-out infinite;
}

/* ── Nav Link Hover ────────────────────────────────────────── */
.nav-link {
  transition: color 0.3s, background 0.3s;
}

/* ── Contact Link Hover ────────────────────────────────────── */
.contact-link {
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}

/* ── Timeline Card Hover ───────────────────────────────────── */
.timeline-card {
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}

/* ── YouTube Card Hover ────────────────────────────────────── */
.yt-card {
  transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.4s;
}

/* ── Stat Counter Animation ────────────────────────────────── */
.stat-num, .stat-value {
  display: inline-block;
  transition: color 0.3s;
}

/* ── Page Transition ───────────────────────────────────────── */
body {
  animation: fadeInUp 0.5s var(--ease-out) both;
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}