/* Effects: the notch, the glow, the scanline, the easing.
   The single most identifying detail of this brand is the CUT CORNER — a clip-path
   polygon that shaves the top-left and bottom-right corners off panels and buttons.
   Radii are otherwise near-zero on the night surfaces; the VN paper theme uses 2–3px. */

:root {
  /* ---- The notch ---- */
  --notch: 10px; /* @kind spacing */
  --notch-sm: 6px; /* @kind spacing */
  --clip-notch: polygon(
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%,
    0 var(--notch)
  );
  --clip-notch-sm: polygon(
    var(--notch-sm) 0,
    100% 0,
    100% calc(100% - var(--notch-sm)),
    calc(100% - var(--notch-sm)) 100%,
    0 100%,
    0 var(--notch-sm)
  );

  /* ---- Radii ---- */
  --radius-0: 0px;
  --radius-1: 2px; /* VN buttons / cards */
  --radius-2: 3px; /* VN list rows */
  --radius-sm: 7px; /* deck thumbnails */
  --radius-md: 8px; /* deck controls */
  --radius-lg: 10px;
  --radius-xl: 14px; /* deck dialog */
  --radius-stage: clamp(8px, 1.2vw, 16px);
  --radius-panel: 20px; /* VN tech panel */
  --radius-phone: 32px;
  --radius-full: 50%;

  /* ---- Borders ---- */
  --border-w: 1px;
  --hairline: 1px solid var(--border-default); /* @kind other */
  --hairline-strong: 1px solid var(--border-strong); /* @kind other */
  --hairline-faint: 1px solid var(--border-faint); /* @kind other */
  --hairline-hot: 1px solid var(--border-hot); /* @kind other */

  /* ---- Shadows: deep, soft, always black — never coloured ---- */
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 30px 70px rgba(0, 0, 0, 0.4);
  --shadow-stage: 0 28px 80px rgba(0, 0, 0, 0.48);
  --shadow-phone: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 10px #15160f;
  --shadow-dialog: 0 32px 100px rgba(0, 0, 0, 0.7);
  --shadow-toast: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* ---- Glows: how the night surfaces signal state. Inset + outer, same hue. ---- */
  --glow-cyan: 0 0 22px rgba(126, 240, 255, 0.16);
  --glow-cyan-inset: 0 0 28px rgba(126, 240, 255, 0.18) inset;
  --glow-coral: 0 0 22px rgba(255, 90, 72, 0.16);
  --glow-coral-inset: 0 0 28px rgba(255, 90, 72, 0.22) inset;
  --glow-danger: 0 0 14px rgba(255, 43, 58, 0.8);
  --glow-icon: drop-shadow(0 0 8px rgba(126, 240, 255, 0.7)); /* @kind other */

  /* ---- Transparency & blur ---- */
  --blur-card: blur(6px); /* @kind other */
  --blur-control: blur(12px); /* @kind other */
  --blur-bar: blur(18px); /* @kind other */
  --blur-scrim: blur(8px); /* @kind other */

  /* ---- Gradient rule: cyan → coral hairline, the divider of the brand ---- */
  --rule-gradient: linear-gradient(
    to right,
    rgba(126, 240, 255, 0),
    rgba(126, 240, 255, 0.55),
    rgba(255, 90, 72, 0.6),
    rgba(255, 90, 72, 0)
  ); /* @kind other */

  /* ---- Vignette over the pixel sky ---- */
  --vignette: radial-gradient(
    120% 90% at 50% 45%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.88) 100%
  ); /* @kind other */

  /* ---- CRT scanlines ---- */
  --scanlines: repeating-linear-gradient(
    to bottom,
    rgba(180, 235, 255, 0.16) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  ); /* @kind other */
  --scanlines-opacity: 0.45; /* @kind other */

  /* ---- Pixel dust field (deck + presentation chrome) ---- */
  --dust: radial-gradient(circle, rgba(220, 244, 255, 0.55) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 120, 100, 0.35) 0 1px, transparent 1.4px); /* @kind other */
  --dust-size: 83px 83px, 131px 131px; /* @kind other */
  --dust-position: 0 0, 29px 41px; /* @kind other */

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* entrances */
  --ease-vn: cubic-bezier(0.22, 0.9, 0.32, 1); /* @kind other */ /* VN cards & sprites */
  --ease-ui: ease; /* @kind other */ /* hovers */
  --dur-fast: 0.2s; /* @kind other */
  --dur-hover: 0.3s; /* @kind other */
  --dur-slow: 0.4s; /* @kind other */
  --dur-entrance: 1.6s; /* @kind other */
  --dur-hero: 1.8s; /* @kind other */
  --dur-scene: 0.45s; /* @kind other */

  /* ---- Pixel rendering ---- */
  --pixel-size: 5px; /* @kind other */
  --image-render: pixelated; /* @kind other */
}