/* ========== CrazeRush Custom CSS ========== */

/* Keyframes */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px 2px #a855f7, 0 0 24px 4px #06b6d4; }
  50% { box-shadow: 0 0 28px 8px #c026d3, 0 0 48px 12px #22d3ee; }
}
@keyframes parallax-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
}
@keyframes chip-burst {
  0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.marquee-track {
  display: flex;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }

.glow-card {
  animation: glow-pulse 3s ease-in-out infinite;
}
.float-anim {
  animation: parallax-float 5s ease-in-out infinite;
}
.chip-burst-anim {
  animation: chip-burst 0.8s cubic-bezier(.22,.61,.36,1) both;
}
.fade-in-up {
  animation: fadeInUp 0.7s ease both;
}

/* ========== Prose Styles ========== */
.prose {
  color: #e2d9f3;
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 100%;
}
.prose h2 {
  color: #e879f9;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  text-shadow: 0 0 10px #a855f788;
  border-left: 4px solid #06b6d4;
  padding-left: 0.7em;
}
.prose h3 {
  color: #67e8f9;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.prose p {
  margin-bottom: 1.1em;
  color: #ddd6fe;
}
.prose a {
  color: #22d3ee;
  text-decoration: underline;
  text-decoration-color: #a855f755;
}
.prose a:hover { color: #e879f9; }
.prose ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
  color: #c4b5fd;
}
.prose ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin-bottom: 1em;
  color: #c4b5fd;
}
.prose li { margin-bottom: 0.35em; }
.prose blockquote {
  border-left: 4px solid #a855f7;
  padding: 0.6em 1.2em;
  color: #c084fc;
  background: #1e1040;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5em 0;
  font-style: italic;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 1.5em;
}
/* Scrollable table wrapper - use on all table containers */
.prose table-wrapper,
.table-scroll,
.prose .table-scroll {
  overflow-x: auto;
  max-width: 100%;
  display: block;
  -webkit-overflow-scrolling: touch;
}
.prose thead th {
  background: #2e1065;
  color: #e879f9;
  padding: 0.6em 1em;
  text-align: left;
  border-bottom: 2px solid #7c3aed;
}
.prose tbody td {
  padding: 0.55em 1em;
  border-bottom: 1px solid #3b0764;
  color: #ddd6fe;
  background: #1a0040;
}
.prose tbody tr:hover td { background: #270060; }
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5em auto;
  display: block;
  border: 2px solid #7c3aed;
  box-shadow: 0 0 20px #a855f755;
}
.prose strong { color: #f0abfc; }
.prose code {
  background: #2e1065;
  color: #67e8f9;
  padding: 0.1em 0.45em;
  border-radius: 0.3em;
  font-size: 0.9em;
}

/* ========== Layout helpers ========== */
.clip-jagged {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 94% 100%, 6% 100%, 0 88%);
}
.clip-jagged-top {
  clip-path: polygon(0 8%, 5% 0, 95% 0, 100% 8%, 100% 100%, 0 100%);
}
.neon-border {
  border: 1.5px solid #7c3aed;
  box-shadow: 0 0 10px #a855f755, inset 0 0 8px #06b6d411;
}
.neon-btn {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #fff;
  font-weight: 700;
  border-radius: 9999px;
  transition: box-shadow 0.2s, transform 0.15s;
  text-shadow: 0 1px 4px #0008;
}
.neon-btn:hover {
  box-shadow: 0 0 18px 4px #a855f7, 0 0 32px 8px #06b6d4;
  transform: translateY(-2px) scale(1.04);
}
.neon-btn-outline {
  border: 2px solid #06b6d4;
  color: #67e8f9;
  border-radius: 9999px;
  font-weight: 600;
  background: transparent;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.neon-btn-outline:hover {
  background: #06b6d4;
  color: #0d0020;
  box-shadow: 0 0 16px #06b6d4;
}
.site-bg { background-color: #0d0020; }
.panel-bg { background: linear-gradient(145deg, #1a0040 0%, #0d0020 100%); }
.card-bg { background: linear-gradient(135deg, #1e1040 60%, #0e2040 100%); }