/* Twitchicide — kawaii manga invasion.
 *
 * Ported from the custom site built for Twitchy "the Corpse Bleeder"
 * McTwitcherson, a resident artist at Nevermore Tattoo Collective, so this is
 * the artist-family companion to the `nevermore` studio theme.
 *
 * Two things differ from every other theme file here, both deliberate:
 *
 * 1. There is no display font. The source ships no @font-face, no @import and
 *    no Google Fonts link — it renders in Tailwind's default system stack, and
 *    the heavy `font-black` + `tracking-tighter` treatment is what carries the
 *    headline weight. Substituting a Google face would change the design.
 *
 * 2. The identity lives in the texture layer below (halftone, cyber grid,
 *    scanline, glitch offset, panel borders) rather than in type or palette
 *    alone. Those classes are ported from the source's src/index.css with the
 *    Tailwind HSL-triple tokens (`hsl(var(--primary) / 0.3)`) rewritten to our
 *    hex-var convention, since our themes expose plain hex custom properties.
 */

@layer theme {
  [data-theme="twitchicide"] {
    --bg: #000000;
    --bg-mid: #0d0d0d;
    --text: #ffffff;
    --accent: #ff33aa;
    --accent-text: #ff33aa;
    --muted: #b3b3b3;
    --rule: rgba(255, 255, 255, 0.12);

    /* The source's secondary palette. Kept as real custom properties so the
     * texture classes below and any future section variant can reach them
     * without hardcoding. Values converted from the HSL triples in the
     * source's :root — see the swatch comment in lib/themes/swatches.ts. */
    --kawaii-pink: #ff33aa;
    --kawaii-purple: #9933ff;
    --kawaii-mint: #33ffbb;
    --kawaii-yellow: #ffdd33;
    --kawaii-cyan: #00d5ff;

    --font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Square, loud, wide-tracked — the source's buttons are skewed blocks
     * with no radius at all. */
    --btn-radius: 0;
    --btn-weight: 900;
    --btn-transform: uppercase;
    --btn-tracking: 0.2em;
  }

  /* --- texture layer ---------------------------------------------------- */

  /* 40px graph-paper grid, sat behind the page at low opacity. */
  [data-theme="twitchicide"] .tw-cyber-grid {
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  /* Manga screentone dots. The source lays this over portraits at
   * mix-blend-mode: overlay. */
  [data-theme="twitchicide"] .tw-halftone {
    background-image: radial-gradient(circle, rgba(255, 51, 170, 0.12) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
  }

  /* Chromatic-aberration headline. Two hard shadows, no blur. */
  [data-theme="twitchicide"] .tw-glitch {
    text-shadow: 2px 0 var(--kawaii-cyan), -2px 0 var(--kawaii-pink);
  }

  /* Hard manga panel: thick border + offset drop, no radius, no blur. */
  [data-theme="twitchicide"] .tw-panel {
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow:
      4px 4px 0 rgba(255, 51, 170, 0.6),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    background: var(--bg-mid);
  }

  [data-theme="twitchicide"] .tw-kawaii-gradient {
    background: linear-gradient(135deg, var(--kawaii-pink), var(--kawaii-purple), var(--kawaii-mint));
  }

  /* Slow CRT scanline sweep. */
  [data-theme="twitchicide"] .tw-scanline {
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: 100px;
    z-index: 10;
    opacity: 0.1;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 51, 170, 0.1) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    animation: tw-scanline 6s linear infinite;
  }

  [data-theme="twitchicide"] .tw-sparkle {
    animation: tw-sparkle 2s ease-in-out infinite;
  }
}

@keyframes tw-scanline {
  0% { bottom: 100%; }
  100% { bottom: -100%; }
}

@keyframes tw-sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Respect the OS reduced-motion setting — the source does not, which is an
 * accessibility bug we are not porting. The scanline sweep and the sparkle
 * pulse are both decorative, so they simply stop. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="twitchicide"] .tw-scanline,
  [data-theme="twitchicide"] .tw-sparkle {
    animation: none;
  }
}