/* ═══════════════════════════════════════════
   ACME — Animations & Effects
   ═══════════════════════════════════════════ */

/* ── GLITCH EFFECT ── */
@keyframes glitch-1 {
  0%,100% { clip-path: inset(0 0 98% 0); transform: translate(-2px, 0); }
  25%      { clip-path: inset(40% 0 50% 0); transform: translate(2px, 0); }
  50%      { clip-path: inset(80% 0 10% 0); transform: translate(-1px, 0); }
  75%      { clip-path: inset(10% 0 70% 0); transform: translate(1px, 0); }
}
@keyframes glitch-2 {
  0%,100% { clip-path: inset(50% 0 40% 0); transform: translate(2px, 0); color: #ff00ff; }
  50%      { clip-path: inset(20% 0 70% 0); transform: translate(-2px, 0); color: #00ffff; }
}

.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0.8;
}
.glitch::before {
  color: #ff00ff;
  animation: glitch-1 3s steps(1) infinite;
  animation-delay: 0.5s;
}
.glitch::after {
  color: #00ffff;
  animation: glitch-2 3s steps(1) infinite;
}

/* ── MATRIX RAIN ── */
@keyframes matrix-fall {
  0%   { transform: translateY(-100%); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ── NEON FLICKER ── */
@keyframes neon-flicker {
  0%,19%,21%,23%,25%,54%,56%,100% {
    text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan), 0 0 40px var(--cyan);
  }
  20%,24%,55% {
    text-shadow: none;
  }
}

/* ── PROGRESS BAR ANIMATION ── */
@keyframes progress-fill {
  from { width: 0; }
  to   { width: var(--pct); }
}

.progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(0,245,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 2px;
  animation: progress-fill 1.5s ease-out forwards;
  box-shadow: 0 0 8px var(--cyan);
}

/* ── TYPING EFFECT ── */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-border {
  0%,100% { border-right-color: var(--cyan); }
  50%      { border-right-color: transparent; }
}
.typing-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--cyan);
  animation: typing 2.5s steps(30,end) forwards, blink-border 0.7s step-end infinite;
  animation-delay: 0.5s;
  width: 0;
}

/* ── HEX GRID PATTERN ── */
.hex-bg {
  position: relative;
  overflow: hidden;
}
.hex-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,245,255,0.06) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ── CARD HOVER GLOW ── */
.glow-on-hover {
  transition: box-shadow 0.3s ease;
}
.glow-on-hover:hover {
  box-shadow:
    0 0 20px rgba(0,245,255,0.25),
    0 0 60px rgba(0,102,255,0.15),
    inset 0 0 20px rgba(0,245,255,0.05);
}

/* ── REVEAL ANIMATION ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.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; }

/* ── LOGO GLITCH & HOVER EFFECTS ── */
@keyframes logo-glitch {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(-3px, 1px) scale(1.02); filter: brightness(1.5) hue-rotate(10deg); }
  40%  { transform: translate(3px, -1px) scale(0.98); filter: brightness(1.2); }
  60%  { transform: translate(-2px, 0) scale(1.01); filter: brightness(1.3) hue-rotate(-5deg); }
  80%  { transform: translate(1px, 1px) scale(1); filter: brightness(1.1); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes logo-pulse {
  0%   { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0,245,255,0.5)); }
  50%  { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(0,245,255,0.8)) drop-shadow(0 0 40px rgba(0,245,255,0.4)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0,245,255,0.5)); }
}