/* Heisei Pixel — 平成レトロ Japanese retro pixel-art cinematic skin (ADR 0050).

   OPT-IN + FULLY SCOPED. Linked only by the design site; every rule sits
   under [data-theme^="heisei-pixel-"], so it is inert for every other theme
   and every consumer that doesn't link it. The 18-token palette lives in
   themes.css; this file is the motif kit — the self-hosted DotGothic16
   dot-matrix @font-face, a subtle dither backdrop (+ a dark-mode CRT
   scanline), chunky pixel-window card frames, pressable "game" buttons, a ▶
   sprite before section headings, and a blinking cursor after the top one.
   CSS-ONLY: the single animation (the cursor blink) is CSS and
   prefers-reduced-motion-gated — no motion JS.

   Full-pixel by choice: both --font-family-display AND --font-family-body are
   DotGothic16 (set in themes.css) for a whole-UI dot-matrix look. */

@font-face {
  font-family: "DotGothic16";
  src: url("/static/design/fonts/DotGothic16-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Shared across both modes — hard pixel corners + dot-matrix chrome
   ============================================================ */

/* Pixels have hard corners: themes.css zeroes --radius-md; the motif zeroes
   the rest so chips / inputs / tabs are hard-cornered too. */
:root[data-theme^="heisei-pixel-"] {
  --radius-sm: 0;
  --radius-lg: 0;
}

/* Loosen body leading — a full-pixel body reads easier with air. */
:root[data-theme^="heisei-pixel-"] body {
  line-height: 1.5;
}

/* DotGothic16 ships one weight (400); pin headings/titles so the browser
   never synthesises a faux-bold from the single woff2. A little tracking
   reads as dot-matrix. */
:root[data-theme^="heisei-pixel-"] h1,
:root[data-theme^="heisei-pixel-"] h2,
:root[data-theme^="heisei-pixel-"] h3,
:root[data-theme^="heisei-pixel-"] .card-title,
:root[data-theme^="heisei-pixel-"] .section-heading,
:root[data-theme^="heisei-pixel-"] .marketing-nav-brand {
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Section headings get a ▶ sprite cursor — a CSS-drawn triangle (the
   DotGothic16 subset carries no ▶ glyph), in the accent, sized in em so it
   scales with the heading. */
:root[data-theme^="heisei-pixel-"] .section-heading::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.55em solid var(--accent);
  border-top: 0.34em solid transparent;
  border-bottom: 0.34em solid transparent;
  margin-right: 0.5em;
  vertical-align: 0.08em;
}

/* A blinking block cursor after the TOP page heading (PageSectionTop → h2)
   only — the arcade "press start" beat. Colour per-mode below; blink is the
   reduced-motion-gated keyframe at the foot of this file. */
:root[data-theme^="heisei-pixel-"] h2.section-heading::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.3em;
  vertical-align: -0.14em;
  background: var(--accent);
}

/* Cards read as chunky pixel windows: a hard 2px frame, zero radius; the
   hard offset drop-shadow (no blur) is set per-mode so its colour stays
   visible on each surface. */
:root[data-theme^="heisei-pixel-"] .card {
  border: 2px solid var(--border-subtle);
  border-radius: 0;
}

/* Buttons: pressable "game" buttons — hard corners, no transition, and a
   solid bottom lip (box-shadow, per-mode below) that collapses as the button
   presses down on :active. A discrete state change, so reduced-motion-safe. */
:root[data-theme^="heisei-pixel-"] .button {
  border-radius: 0;
  font-weight: 400;
  transition: none;
}
:root[data-theme^="heisei-pixel-"] .button:active {
  transform: translateY(4px);
}

/* Chips: little pixel badges — a hard border in the chip's own colour. */
:root[data-theme^="heisei-pixel-"] .chip {
  border: 2px solid currentColor;
  border-radius: 0;
}

/* Tabs + form controls: hard corners. */
:root[data-theme^="heisei-pixel-"] .tabs,
:root[data-theme^="heisei-pixel-"] .tab,
:root[data-theme^="heisei-pixel-"] .input,
:root[data-theme^="heisei-pixel-"] .select {
  border-radius: 0;
}

/* Links: accent. Raster images render pixelated. */
:root[data-theme^="heisei-pixel-"] a {
  color: var(--accent);
}
:root[data-theme^="heisei-pixel-"] img {
  image-rendering: pixelated;
}

/* ============================================================
   Dark mode — arcade CRT at night: navy surfaces, hot-pink + cyan/lime
   sprites, a dither + scanline backdrop, magenta pixel shadows, phosphor
   glow on the headings.
   ============================================================ */

/* Lit headings catch a cyan phosphor glow; the cursor is cyan. */
:root[data-theme="heisei-pixel-dark"] h1,
:root[data-theme="heisei-pixel-dark"] h2,
:root[data-theme="heisei-pixel-dark"] .card-title,
:root[data-theme="heisei-pixel-dark"] .marketing-nav-brand {
  color: #dff2ff;
  text-shadow: 0 0 8px rgba(124, 232, 255, 0.3);
}
:root[data-theme="heisei-pixel-dark"] h2.section-heading::after {
  background: #7ce8ff;
}

/* Cards: a VISIBLE magenta pixel drop-shadow — a near-black offset vanishes
   on the navy panel (the mockup bug) — plus a stronger cool frame and a
   faint cyan inner liner. */
:root[data-theme="heisei-pixel-dark"] .card {
  border-color: rgba(160, 190, 255, 0.35);
  box-shadow: 5px 5px 0 0 #b23c78, inset 0 0 0 1px rgba(124, 232, 255, 0.08);
}

/* Primary button: pink face with a darker-rose border + bottom lip that both
   read against the navy panel — the "buttons don't work in dark mode" fix
   (the lip must NOT be --bg-primary, which disappears on the panel). */
:root[data-theme="heisei-pixel-dark"] .button--primary {
  border: 2px solid #7a2049;
  box-shadow: 0 4px 0 0 #b83b78;
}
:root[data-theme="heisei-pixel-dark"] .button--primary:active {
  box-shadow: 0 0 0 0 #b83b78;
}
/* Secondary button: a clearly-visible cool frame + lip on the dark panel. */
:root[data-theme="heisei-pixel-dark"] .button--secondary {
  border: 2px solid rgba(180, 205, 255, 0.55);
  box-shadow: 0 4px 0 0 rgba(120, 160, 230, 0.5);
}
:root[data-theme="heisei-pixel-dark"] .button--secondary:active {
  box-shadow: 0 0 0 0;
}

/* The dither + scanline backdrop. base.css paints html+body with
   --bg-primary; drop body's background so this fixed ::before (z-index -1)
   shows above the html canvas but behind content (the design site's
   .skin-main sits on a solid panel over it). Low-alpha cyan checkerboard +
   faint CRT scanlines + a soft hot-pink top glow. */
:root[data-theme="heisei-pixel-dark"] body {
  background: transparent;
}
:root[data-theme="heisei-pixel-dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
  background-color: #0e0e20;
  background-image:
    linear-gradient(45deg, rgba(124, 232, 255, 0.045) 25%, transparent 25%, transparent 75%, rgba(124, 232, 255, 0.045) 75%),
    linear-gradient(45deg, rgba(124, 232, 255, 0.045) 25%, transparent 25%, transparent 75%, rgba(124, 232, 255, 0.045) 75%),
    repeating-linear-gradient(0deg, rgba(200, 220, 255, 0.03) 0, rgba(200, 220, 255, 0.03) 1px, transparent 1px, transparent 3px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 92, 168, 0.06), rgba(14, 14, 32, 0) 60%);
  background-size: 8px 8px, 8px 8px, 100% 3px, 100% 100%;
  background-position: 0 0, 4px 4px, 0 0, 0 0;
}

:root[data-theme="heisei-pixel-dark"] ::selection {
  background: rgba(255, 92, 168, 0.35);
  color: #14142b;
}

/* ============================================================
   Light mode — daytime handheld / kawaii notebook: cream paper, dark pixel
   ink, coral-pink sprites, hard ink pixel shadows. Crisp — no scanline,
   no glow.
   ============================================================ */

/* Cards: a hard ink pixel drop-shadow on cream. */
:root[data-theme="heisei-pixel-light"] .card {
  border-color: rgba(36, 29, 51, 0.32);
  box-shadow: 5px 5px 0 0 rgba(36, 29, 51, 0.24);
}

/* Primary button: kawaii-pink face, ink frame + a deep-rose bottom lip. */
:root[data-theme="heisei-pixel-light"] .button--primary {
  border: 2px solid #241d33;
  box-shadow: 0 4px 0 0 #8a2450;
}
:root[data-theme="heisei-pixel-light"] .button--primary:active {
  box-shadow: 0 0 0 0 #8a2450;
}
/* Secondary button: ink frame + lip. */
:root[data-theme="heisei-pixel-light"] .button--secondary {
  border: 2px solid rgba(36, 29, 51, 0.4);
  box-shadow: 0 4px 0 0 rgba(36, 29, 51, 0.2);
}
:root[data-theme="heisei-pixel-light"] .button--secondary:active {
  box-shadow: 0 0 0 0;
}

/* A faint ink checkerboard dither on the cream backdrop — no scanline. */
:root[data-theme="heisei-pixel-light"] body {
  background: transparent;
}
:root[data-theme="heisei-pixel-light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
  background-color: #ece2c9;
  background-image:
    linear-gradient(45deg, rgba(60, 45, 70, 0.05) 25%, transparent 25%, transparent 75%, rgba(60, 45, 70, 0.05) 75%),
    linear-gradient(45deg, rgba(60, 45, 70, 0.05) 25%, transparent 25%, transparent 75%, rgba(60, 45, 70, 0.05) 75%);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
}

:root[data-theme="heisei-pixel-light"] ::selection {
  background: rgba(198, 44, 102, 0.25);
  color: #241d33;
}

/* ============================================================
   Motion — the single animation (the cursor blink), reduced-motion-gated.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme^="heisei-pixel-"] h2.section-heading::after {
    animation: heisei-blink 1.06s steps(1) infinite;
  }
}
@keyframes heisei-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}