/* ========================================
   Cloudflare Proxy — Shared Styles
   ======================================== */

/* --- Animations --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor-blink::after {
  content: '_';
  animation: blink 1s step-end infinite;
  color: #22C55E;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp .6s ease-out both; }
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .4); }
  50%      { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}
.pulse-accent { animation: pulseGreen 2s infinite; }

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

/* --- Terminal animation --- */
.terminal-line {
  opacity: 0;
  animation: fadeInUp .4s ease-out forwards;
}
.terminal-line:nth-child(1) { animation-delay: .3s; }
.terminal-line:nth-child(2) { animation-delay: .6s; }
.terminal-line:nth-child(3) { animation-delay: .9s; }
.terminal-line:nth-child(4) { animation-delay: 1.2s; }

/* --- Hero glow --- */
.hero-glow {
  background: radial-gradient(ellipse 600px 400px at 50% 0%, rgba(34, 197, 94, .12), transparent);
}

/* --- Scrollbar --- */
html {
  scrollbar-color: #334155 #1E293B;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #1E293B;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* --- Code blocks --- */
.code-block code {
  white-space: pre;
  display: block;
  width: max-content;
  min-width: 100%;
}

/* --- Respect user motion preference --- */
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}