/* ==========================================================================
   XENO EXECUTOR — style.css
   Custom classes + keyframes that the Tailwind Play CDN can't generate.
   (Tailwind utility classes are handled by the CDN in index.html.)
   ========================================================================== */

:root {
  --void: #050505;
  --ink: #0a0a0a;
  --coal: #141414;
  --xeno: #8b5cf6;       /* violet — primary brand accent */
  --xeno-bright: #a855f7;
  --neon-green: #39ff14; /* terminal / status accent */
}

/* --- Dark base (applies instantly, before the Tailwind CDN paints) ----------
   Prevents the flash where the page is white with white text until Tailwind
   compiles bg-ink/text-white. Guarantees light text is always on a dark bg. */
html, body {
  background-color: var(--ink);
  color: #ededed;
}
html { -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

/* Keep the newsletter email field readable when the browser autofills it
   (autofill forces a white background that hides white text). */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
  transition: background-color 9999s ease-in-out 0s;
}
::placeholder { color: #6b7280; }

/* --- Slanted clip-path for buttons (used by .clip-path-slant) --------------- */
.clip-path-slant {
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}

/* --- Custom scrollbar (changelog / editor panes) --------------------------- */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0d0d0d; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #2a2a2a; border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--xeno); }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #2a2a2a #0d0d0d; }

/* --- Glitch text (FAQ heading) --------------------------------------------- */
.glitch-text { position: relative; }
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
}
.glitch-text::before {
  color: var(--xeno);
  animation: glitch-x 3s infinite linear alternate-reverse;
  clip-path: inset(0 0 55% 0);
}
.glitch-text::after {
  color: var(--neon-green);
  animation: glitch-x 2.4s infinite linear alternate-reverse;
  clip-path: inset(55% 0 0 0);
}

/* --- Keyframes ------------------------------------------------------------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scanline {
  0%   { transform: translateY(0); }
  100% { transform: translateY(4000%); }
}

@keyframes progress {
  0%   { width: 0%; }
  50%  { width: 100%; }
  100% { width: 0%; }
}

@keyframes glitch-x {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(1px); }
}

/* --- Small helpers --------------------------------------------------------- */
.text-neon-green { color: var(--neon-green); }
.text-xeno { color: var(--xeno); }
.text-xeno-bright { color: var(--xeno-bright); }
.border-neon-green { border-color: var(--neon-green); }
.border-xeno { border-color: var(--xeno); }

/* Solid accent backgrounds — defined here as a fallback so the CDN config
   never leaves an accent button as black-on-black (bg fails to load). */
.bg-void { background-color: var(--void); }
.bg-ink { background-color: var(--ink); }
.bg-coal { background-color: var(--coal); }
.bg-xeno { background-color: var(--xeno); }
.bg-xeno-bright { background-color: var(--xeno-bright); }
.bg-neon-green { background-color: var(--neon-green); }
.hover\:bg-xeno:hover { background-color: var(--xeno); }
.hover\:bg-xeno-bright:hover { background-color: var(--xeno-bright); }
.hover\:text-xeno-bright:hover { color: var(--xeno-bright); }
.hover\:border-xeno:hover { border-color: var(--xeno); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}