/* ===== KEYFRAMES ===== */

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

@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.08); }
  66%       { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-50px, 20px) scale(1.05); }
  66%       { transform: translate(30px, -40px) scale(0.98); }
}

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

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--glow-cyan-sm), 0 0 40px var(--glow-cyan-xs); }
  50%       { box-shadow: 0 0 30px var(--glow-cyan-md), 0 0 60px var(--glow-cyan-sm); }
}

@keyframes glow-pulse-purple {
  0%, 100% { box-shadow: 0 0 20px var(--glow-purple-sm), 0 0 40px var(--glow-purple-xs); }
  50%       { box-shadow: 0 0 30px var(--glow-purple-md), 0 0 60px var(--glow-purple-sm); }
}

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

@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 badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0); }
}

@keyframes grid-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* glitch layers */
@keyframes glitch-clip-1 {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  20%  { clip-path: inset(70% 0 5% 0);  transform: translate(3px, -2px); }
  40%  { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 1px); }
  60%  { clip-path: inset(10% 0 75% 0); transform: translate(2px, -1px); }
  80%  { clip-path: inset(55% 0 20% 0); transform: translate(-1px, 3px); }
  100% { clip-path: inset(30% 0 50% 0); transform: translate(0, 0); }
}

@keyframes glitch-clip-2 {
  0%   { clip-path: inset(50% 0 30% 0); transform: translate(3px, -1px); color: var(--accent-purple); }
  25%  { clip-path: inset(15% 0 65% 0); transform: translate(-3px, 2px);  color: var(--accent-cyan); }
  50%  { clip-path: inset(65% 0 15% 0); transform: translate(2px, -2px);  color: var(--accent-purple); }
  75%  { clip-path: inset(35% 0 45% 0); transform: translate(-2px, 1px);  color: var(--accent-cyan); }
  100% { clip-path: inset(80% 0 5% 0);  transform: translate(0, 0); }
}

@keyframes glitch-skew {
  0%   { transform: skew(-1deg); }
  10%  { transform: skew(1deg); }
  20%  { transform: skew(-0.5deg); }
  30%  { transform: skew(0.5deg); }
  40%  { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

/* ===== SCROLL REVEAL ===== */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }
.reveal.delay-6 { transition-delay: 0.6s; }

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

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ===== ACTIVE STATES ===== */

.glitch-active .typewriter-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  color: var(--accent-cyan);
  animation: glitch-clip-1 0.4s steps(1) forwards;
}

.glitch-active .typewriter-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  color: var(--accent-purple);
  animation: glitch-clip-2 0.4s steps(1) forwards;
}

.glitch-active .typewriter-wrapper {
  animation: glitch-skew 0.4s steps(1) forwards;
}