/* ============================================================
   MATRIX PORTFOLIO — animations.css
   ============================================================ */

/* ── KEYFRAMES ── */

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

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

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 4px var(--green); opacity: 1; }
  50%       { box-shadow: 0 0 16px var(--green), 0 0 30px var(--green); opacity: 0.7; }
}

@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

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

@keyframes glitch-clip-1 {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  25%  { clip-path: inset(50% 0 20% 0); transform: translate(4px, 0); }
  50%  { clip-path: inset(5%  0 80% 0); transform: translate(-2px, 0); }
  75%  { clip-path: inset(70% 0 10% 0); transform: translate(2px,  0); }
  100% { clip-path: inset(20% 0 60% 0); transform: translate(0,    0); }
}

@keyframes glitch-clip-2 {
  0%   { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0);  }
  25%  { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 0); }
  50%  { clip-path: inset(80% 0 5%  0); transform: translate(2px,  0); }
  75%  { clip-path: inset(15% 0 70% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(60% 0 10% 0); transform: translate(0,    0); }
}

@keyframes glitch-skew {
  0%        { transform: skewX(0deg);    }
  4.9%      { transform: skewX(0deg);    }
  5%        { transform: skewX(-4deg);   }
  5.1%      { transform: skewX(0deg);    }
  49.9%     { transform: skewX(0deg);    }
  50%       { transform: skewX(2deg);    }
  50.1%     { transform: skewX(0deg);    }
  99.9%     { transform: skewX(0deg);    }
  100%      { transform: skewX(-1deg);   }
}

@keyframes rgb-split {
  0%   { text-shadow:  2px 0 0 rgba(255,0,0,0.6), -2px 0 0 rgba(0,255,255,0.6); }
  25%  { text-shadow: -2px 0 0 rgba(255,0,0,0.6),  2px 0 0 rgba(0,255,255,0.6); }
  50%  { text-shadow:  2px 2px rgba(255,0,0,0.5), -2px -2px rgba(0,255,255,0.5); }
  75%  { text-shadow:  0 0 0 transparent; }
  100% { text-shadow:  2px 0 0 rgba(255,0,0,0.6), -2px 0 0 rgba(0,255,255,0.6); }
}

@keyframes flicker {
  0%   { opacity: 1;    }
  8%   { opacity: 0.92; }
  9%   { opacity: 1;    }
  12%  { opacity: 1;    }
  13%  { opacity: 0.85; }
  14%  { opacity: 1;    }
  60%  { opacity: 1;    }
  61%  { opacity: 0.9;  }
  62%  { opacity: 1;    }
  90%  { opacity: 1;    }
  91%  { opacity: 0.88; }
  92%  { opacity: 1;    }
}

@keyframes noise-shift {
  0%   { background-position: 0%   0%;   }
  10%  { background-position: -5%  -10%; }
  20%  { background-position: -15% 5%;   }
  30%  { background-position: 7%   -25%; }
  40%  { background-position: 20%  25%;  }
  50%  { background-position: -25% 10%;  }
  60%  { background-position: 15%  5%;   }
  70%  { background-position: 0%   15%;  }
  80%  { background-position: 25%  35%;  }
  90%  { background-position: -10% 10%;  }
  100% { background-position: 0%   0%;   }
}

@keyframes border-pulse {
  0%, 100% { border-color: var(--border); }
  50%       { border-color: var(--green); box-shadow: 0 0 20px var(--green-glow); }
}

@keyframes text-glow-pulse {
  0%, 100% { text-shadow: 0 0 20px var(--green-glow); }
  50%       { text-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(0,255,65,0.3); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes boot-fade-out {
  0%   { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes site-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── GLITCH COMPONENT ── */

.glitch {
  position: relative;
  display: inline-block;
  animation: glitch-skew 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite,
             text-glow-pulse 3s ease-in-out infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font: inherit;
  color: var(--green);
}

.glitch::before {
  color: #00ffff;
  animation: glitch-clip-1 3s infinite linear;
  opacity: 0;
}

.glitch::after {
  color: #ff00ff;
  animation: glitch-clip-2 3s infinite linear 0.08s;
  opacity: 0;
}

/* Trigger glitch on hover */
.glitch:hover::before,
.glitch:hover::after { opacity: 0.6; }

/* ── BTN GLITCH ── */
.btn-glitch {
  position: relative;
  display: inline-block;
}
.btn-primary:hover .btn-glitch {
  animation: rgb-split 0.4s step-end 1;
}

/* ── CARD APPEAR ── */
.project-card {
  animation: scale-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) 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; }

/* ── FLICKER OVERLAY (CRT effect) ── */
.scanlines { animation: flicker 8s step-end infinite; }

/* ── SECTION REVEAL DELAYS ── */
.reveal:nth-child(1) { transition-delay: 0.0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }

/* ── SKILL CATEGORY APPEAR ── */
.skill-category {
  animation: slide-in-left 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.skill-category:nth-child(2) { animation-delay: 0.1s; animation-name: fadeIn; }
.skill-category:nth-child(3) { animation-delay: 0.2s; animation-name: slide-in-right; }

/* ── NAV BORDER PULSE (on scroll) ── */
#nav.active-glow { animation: border-pulse 2.5s ease-in-out infinite; }

/* ── TECH BADGE HOVER ── */
.tech-badge {
  transition: color 0.2s, border-color 0.2s,
              box-shadow 0.2s, transform 0.2s;
}

/* ── SCROLL-LINE ── */
.scroll-line { animation: scroll-line 1.8s ease-in-out infinite; }

/* ── ORBIT RINGS ── */
.ring-1 { animation: orbit  8s linear infinite; }
.ring-2 { animation: orbit 14s linear infinite reverse; }
.ring-3 { animation: orbit 22s linear infinite; }

/* ── BOOT SCREEN EXIT ── */
#boot-screen.exiting { animation: boot-fade-out 0.8s ease forwards; }

/* ── SITE WRAPPER ENTRY ── */
#site-wrapper.entering { animation: site-reveal 0.6s ease forwards; }

/* ── CONTACT LINK SLIDE ── */
.contact-link:nth-child(1) { transition-delay: 0.05s; }
.contact-link:nth-child(2) { transition-delay: 0.10s; }
.contact-link:nth-child(3) { transition-delay: 0.15s; }

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