/*
 * portfolio/css/animations.css
 * ─────────────────────────────────────────
 * All keyframes, reveal system, glitch, orbit, particles
 * ─────────────────────────────────────────
 */

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */

/* Scanline drift */
@keyframes scanMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

/* Clockwise spin (orbit rings, profile frame) */
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Profile frame — no translate needed */
@keyframes spinPlain {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pulse glow (orbit dots, badge dot) */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.78); }
}

/* Float badge levitate */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Glitch effect for hero name */
@keyframes glitch {
  0%,  76%, 100% {
    clip-path: none;
    transform: none;
  }
  78% {
    clip-path: inset(18% 0 58% 0);
    transform: translateX(-5px) skewX(-1deg);
  }
  80% {
    clip-path: inset(58% 0  8% 0);
    transform: translateX( 5px) skewX( 1deg);
  }
  82% {
    clip-path: inset(38% 0 38% 0);
    transform: translateX(-3px);
  }
  84% {
    clip-path: inset(70% 0  5% 0);
    transform: translateX( 3px);
  }
}

/* Progress bar fill on scroll-trigger */
@keyframes fillBar {
  from { width: 0; }
  to   { width: var(--target-width, 70%); }
}

/* General fade-in + slide-up (used by JS .visible class) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card orbit glow pulse */
@keyframes orbitGlow {
  0%, 100% { box-shadow: 0 0 14px var(--teal), 0 0 28px var(--teal-glow); }
  50%       { box-shadow: 0 0 26px var(--teal), 0 0 52px var(--teal-glow); }
}

/* Mobile drawer slide in */
@keyframes slideInRight {
  from { transform: translateX(110%); }
  to   { transform: translateX(0); }
}

/* Shimmer (skeleton loading) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Smooth scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* Number count pop */
@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════
   GLITCH — applied to .glitch span inside .hero-name
══════════════════════════════════════════ */
.glitch {
  position: relative;
  display: inline-block;
  animation: glitch 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* Pseudo-element colour ghost layers */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #ffffff 25%, var(--teal, #00f5c4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
}

.glitch::before {
  animation: glitch 7s 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  clip-path: inset(0 0 100% 0);
  filter: drop-shadow(-3px 0 var(--teal, #00f5c4));
}

.glitch::after {
  animation: glitch 7s 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  clip-path: inset(100% 0 0 0);
  filter: drop-shadow(3px 0 var(--purple, #7b5ea7));
}

/* ══════════════════════════════════════════
   SCROLL REVEAL SYSTEM
══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity  0.78s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.42s; }
.reveal-delay-5 { transition-delay: 0.55s; }

/* Slide-in from left variant */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity  0.78s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Scale in variant */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ══════════════════════════════════════════
   ORBIT RINGS (referenced from style.css + index.html)
══════════════════════════════════════════ */
.orbit-ring-1 { animation: spin 14s linear infinite; }
.orbit-ring-2 { animation: spin 23s linear infinite reverse; }
.orbit-ring-3 { animation: spin 38s linear infinite; }

/* Orbit dot glow pulse */
.orbit-dot-teal   { animation: orbitGlow 2.5s ease-in-out infinite; }
.orbit-dot-purple { animation: orbitGlow 3.0s ease-in-out infinite 0.5s; }

/* ══════════════════════════════════════════
   PROFILE FRAME (about.html)
══════════════════════════════════════════ */
.profile-frame { animation: spinPlain 22s linear infinite; }

/* ══════════════════════════════════════════
   TIMELINE DOT PULSE (about.html)
══════════════════════════════════════════ */
.timeline-dot {
  animation: orbitGlow 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   FLOAT BADGE (global)
══════════════════════════════════════════ */
.float-badge     { animation: floatBadge 3s ease-in-out infinite; }
.float-badge-dot { animation: pulse 1.6s ease-in-out infinite; }

/* ══════════════════════════════════════════
   SCROLL INDICATOR (index.html)
══════════════════════════════════════════ */
.scroll-indicator { animation: floatBadge 2.2s ease-in-out infinite; }
.scroll-chevron   { animation: scrollBounce 1.6s ease-in-out infinite; }

/* ══════════════════════════════════════════
   HOVER MICRO-ANIMATIONS
══════════════════════════════════════════ */

/* Tag hover pop */
.tag { transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

/* Social link glow */
.social-link {
  transition:
    border-color 0.3s,
    color 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nav link magnetic slide */
.nav-links a { transition: color 0.3s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* Project row slide reveal is handled via ::before in style.css */

/* ══════════════════════════════════════════
   SHIMMER SKELETON (optional loading state)
══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--radius-sm, 4px);
}