/* ==========================================================================
   POCKETCORP DESIGN SYSTEM
   Imported from the Claude Design project "Pocketcorp website redesign"
   (design system d31d1245). Tokens first, then a deliberately small component
   layer — every surface on the site is built from these few classes, and any
   other app can adopt the system by linking this one file.

   Structure:
     1. Tokens      — colors, type, spacing, borders, radii, elevation, motion
     2. Primitives  — .ds-btn .ds-card .ds-frame .ds-tag .ds-led .ds-term
     3. Type utils  — .ds-display .ds-label .ds-body .ds-eyebrow
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* -- colour: monochrome by system; mint is the only signature accent ----- */
  --pc-white: #FFFFFF;
  --pc-black: #1A1A1A;              /* the brand black — never #000 in chrome */
  --pc-true-black: #000000;         /* video letterbox only */
  --pc-card-dark: #252525;
  --pc-app-dark: #111111;

  --pc-surface: #FFFFFF;
  --pc-ink: #1A1A1A;
  --pc-surface-inverse: #1A1A1A;
  --pc-ink-inverse: #FFFFFF;

  --pc-border: rgba(26, 26, 26, 0.15);
  --pc-border-hover: rgba(26, 26, 26, 0.30);
  --pc-border-strong: rgba(26, 26, 26, 0.35);
  --pc-border-muted: rgba(128, 128, 128, 0.15);
  --pc-bg-subtle: rgba(26, 26, 26, 0.02);
  --pc-bg-hover: rgba(26, 26, 26, 0.05);

  --pc-accent-mint: #34d399;        /* checkmarks, "live", eyebrows, prompts */
  --pc-accent-mint-ink: #10935f;    /* mint text on a light surface */
  --pc-accent-mint-deep: #04150d;   /* ink on a mint fill */
  --pc-led-online: #4CAF50;
  --pc-led-idle: #888888;
  --pc-warning: #FB8C00;
  --pc-alert: #E85D2B;
  --pc-danger: #B00020;
  --pc-danger-soft: #ef4444;        /* inline field-level validation text */
  --pc-danger-on-dark: #ff6b6b;     /* danger text on a dark surface */

  /* -- type: two faces, no exceptions ------------------------------------- */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-wordmark: 'Space Grotesk', sans-serif;   /* the wordmark only */
  --font-body: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-3xs: 0.55rem;
  --fs-2xs: 0.6rem;
  --fs-xs: 0.65rem;
  --fs-sm: 0.7rem;
  --fs-md: 0.75rem;
  --fs-lg: 0.8rem;
  --fs-xl: 0.875rem;
  --fs-2xl: 1.1rem;
  --fs-3xl: 1.5rem;
  --fs-4xl: 3rem;
  --fs-display: clamp(2.5rem, 6vw, 5rem);
  --fs-display-alt: clamp(2.5rem, 5vw, 3.75rem);

  --ls-tightest: -0.02em;
  --ls-tight: -0.01em;
  --ls-wide: 0.08em;
  --ls-wider: 0.12em;
  --ls-widest: 0.15em;
  --ls-button: 0.18em;
  --ls-brand: 0.25em;
  --ls-splash: 0.32em;

  --lh-tight: 1;
  --lh-display: 1.1;
  --lh-heading: 1.3;
  --lh-body: 1.6;
  --lh-prose: 1.9;

  --measure-body: 340px;
  --measure-prose: 620px;

  /* -- opacity is the grey scale: ink at reduced alpha works in both themes */
  --dim-1: 0.85;
  --dim-2: 0.7;
  --dim-3: 0.6;
  --dim-4: 0.55;   /* the body-copy default */
  --dim-5: 0.5;
  --dim-6: 0.45;
  --dim-7: 0.4;
  --dim-8: 0.35;
  --dim-disabled: 0.5;

  /* -- spacing ------------------------------------------------------------ */
  --space-1: 4px;  --space-2: 6px;  --space-3: 8px;  --space-4: 10px;
  --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px;
  --space-9: 32px; --space-10: 40px; --space-11: 48px; --space-12: 64px;
  --space-13: 80px; --space-14: 100px; --space-15: 120px;

  --layout-max: 1280px;
  --gutter-desktop: 56px;
  --gutter-mobile: 20px;

  /* -- borders: hairline vs. structural, nothing else --------------------- */
  --bw-hairline: 1px;
  --bw-structural: 1.5px;
  --bw-focus: 2px;
  --focus-offset: 4px;

  /* -- radii: marketing is square; rounding is an app-chrome signal ------- */
  --radius-none: 0;
  --radius-button: 10px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 1rem;
  --radius-3xl: 1.25rem;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* -- elevation: hairlines carry depth; shadows only on floating things -- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-popover: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-media: 0 24px 60px -12px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.2);
  --glow-online: 0 0 0 3px rgba(76, 175, 80, 0.2);
  --blur-glass: blur(8px);

  /* -- motion: fade, blur, short slide. Nothing bounces. ------------------ */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glitch: cubic-bezier(0.46, 0.29, 0, 1.24);

  --dur-instant: 0.15s; --dur-fast: 0.2s;  --dur-quick: 0.25s;
  --dur-base: 0.3s;     --dur-mid: 0.35s;  --dur-slow: 0.5s;
  --dur-reveal: 0.8s;   --dur-blur-in: 1s; --dur-glitch: 340ms;

  --stagger-1: 0.1s; --stagger-2: 0.2s; --stagger-3: 0.3s; --stagger-4: 0.4s;
  --reveal-shift-y: 40px; --reveal-shift-x: 60px; --reveal-blur: 12px; --reveal-scale: 0.92;
}

.dark {
  --pc-surface: #1A1A1A;
  --pc-ink: #FFFFFF;
  --pc-surface-inverse: #FFFFFF;
  --pc-ink-inverse: #1A1A1A;

  --pc-border: rgba(255, 255, 255, 0.15);
  --pc-border-hover: rgba(255, 255, 255, 0.30);
  --pc-border-strong: rgba(255, 255, 255, 0.35);
  --pc-bg-subtle: rgba(255, 255, 255, 0.02);
  --pc-bg-hover: rgba(255, 255, 255, 0.05);

  --pc-accent-mint-ink: #34d399;
  --pc-danger: #ff6b81;
}

/* ------------------------------------------------------------ 2. PRIMITIVES */

/* Button — the one interactive shape. `data-variant="filled"` inverts it,
   `data-size="sm"` shrinks it, `data-pill` rounds it for app chrome. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-5) var(--space-9);
  border: var(--bw-structural) solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--radius-button);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out-expo),
              color var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              transform 120ms var(--ease-out-expo);
}

.ds-btn:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
}

.ds-btn:active { transform: scale(0.97); }

.ds-btn[data-variant="filled"] {
  border-color: var(--pc-ink);
  background: var(--pc-ink);
  color: var(--pc-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pc-ink) 12%, transparent);
}

.ds-btn[data-variant="filled"]:hover {
  background: color-mix(in srgb, var(--pc-ink) 88%, var(--pc-surface));
  color: var(--pc-surface);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pc-ink) 22%, transparent);
}

.ds-btn[data-size="sm"] {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  padding: 9px var(--space-7);
}

.ds-btn[data-pill] { border-radius: var(--radius-pill); }
.ds-btn[disabled] { opacity: var(--dim-disabled); cursor: not-allowed; }

/* Frame — the numbered marketing section: a hairline box with a legend that
   interrupts its top edge. Every landing section is one of these. */
.ds-frame {
  position: relative;
  padding: var(--space-11) 44px 44px;
  border: var(--bw-hairline) solid var(--pc-border);
  background: var(--pc-bg-subtle);
}

.ds-frame-legend {
  position: absolute;
  top: -9px;
  left: 26px;
  padding: 0 var(--space-5);
  background: var(--pc-surface);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
  color: var(--pc-accent-mint);
}

/* Card — a bordered surface. `data-highlight` inverts it. */
.ds-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-11);
  border: var(--bw-structural) solid var(--pc-border);
  background: var(--pc-surface);
  transition: border-color var(--dur-base) var(--ease-out-expo);
}

.ds-card:hover { border-color: var(--pc-border-hover); }

.ds-card[data-highlight] {
  background: var(--pc-surface-inverse);
  color: var(--pc-ink-inverse);
  border-color: var(--pc-surface-inverse);
}

/* Tag — a capability chip. */
.ds-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border: var(--bw-hairline) solid var(--pc-border);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  opacity: var(--dim-2);
  white-space: nowrap;
}

/* LED — hardware status dot. */
.ds-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--pc-led-online);
  box-shadow: var(--glow-online);
  flex: 0 0 auto;
}

.ds-led[data-state="offline"] { background: var(--pc-danger); box-shadow: none; }
.ds-led[data-state="idle"] { background: var(--pc-border-strong); box-shadow: none; }

/* Terminal — a log/command block. */
.ds-term {
  border: var(--bw-structural) solid var(--pc-border);
  background: var(--pc-app-dark);
  color: var(--pc-white);
  padding: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.85;
}

.ds-term b { color: var(--pc-accent-mint); font-weight: var(--fw-regular); }
.ds-term i { opacity: var(--dim-4); font-style: normal; }

/* Row — the "> label / description" list item used inside frames. */
.ds-row {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8) var(--space-7) 0;
  border-bottom: var(--bw-hairline) solid var(--pc-border);
}

.ds-row::before {
  content: '>';
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--pc-accent-mint);
}

/* ------------------------------------------------------------- 3. TYPE UTILS */

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: var(--ls-tightest);
  line-height: 1.45;
  text-wrap: pretty;
  margin: 0;
}

.ds-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

.ds-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  opacity: var(--dim-4);
  max-width: var(--measure-prose);
  margin: 0;
}

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--pc-accent-mint);
}

.ds-mono {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  opacity: var(--dim-5);
}

@media (max-width: 900px) {
  .ds-frame { padding: 38px var(--gutter-mobile) 28px; }
  .ds-row { padding: var(--space-7) 0; }
}

/* ==========================================================================
   3. App chrome — primitives shared by the logged-in pages (dashboard,
      deploy, workspace). Ported from the POCKETCORP design project's app
      screens; values mirror Overview/Deploy/Workspace.dc.html exactly.
   ========================================================================== */

/* -- top bar ---------------------------------------------------------------
   64px sticky bar, hairline bottom, surface at 82% + blur. Content aligned
   to a 1240px well via the max() padding trick. */
.ds-appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 64px;
  padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px));
  border-bottom: var(--bw-hairline) solid var(--pc-border);
  background: color-mix(in srgb, var(--pc-surface) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ds-appbar-left { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.ds-appbar-brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.ds-appbar-mark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.ds-appbar-sub { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.18em; opacity: var(--dim-6); }
.ds-appbar-nav { display: flex; align-items: center; white-space: nowrap; gap: 26px; flex: 0 1 auto; min-width: 0; }
.ds-appbar-link {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.ds-appbar-link:hover { opacity: 1; }
.ds-appbar-sep { width: 1px; height: 20px; background: var(--pc-border); }

/* Marketing variant: fixed over the hero, fully transparent until the page
   scrolls, then the themed surface with a hairline (layout.js toggles
   .is-scrolled at scrollY > 40). */
.ds-appbar--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--dur-base) ease,
              border-color var(--dur-base) ease,
              box-shadow var(--dur-base) ease;
}
.ds-appbar--overlay.is-scrolled {
  background: var(--pc-surface);
  border-bottom-color: var(--pc-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Optional mobile burger (opens the site drawer where a page carries one). */
.ds-appbar .ds-appbar-burger { display: none; border: 0; }

/* Auth-dependent chrome (pre-painted via the pc-auth-hint class, corrected
   once checkAuth answers): guests get Login + Deploy now; signed-in visitors
   get My workspace (in Deploy now's filled slot) + the avatar menu. */
.ds-appbar .ds-appbar-workspace { display: none; }
html.pc-authed .ds-appbar .ds-appbar-workspace { display: inline-flex; }
html.pc-authed .ds-appbar .ds-appbar-login,
html.pc-authed .ds-appbar .ds-appbar-deploy { display: none; }

/* Avatar + account dropdown (top right, signed-in only) */
.ds-appbar-user { position: relative; display: none; }
html.pc-authed .ds-appbar-user { display: block; }
.ds-appbar-avatar {
  width: 34px; height: 34px;
  border-radius: var(--radius-circle);
  border: var(--bw-structural) solid var(--pc-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  transition: border-color var(--dur-base) var(--ease-out-expo);
}
.ds-appbar-avatar:hover { border-color: var(--pc-border-hover); }
.ds-appbar-avatar[aria-expanded="true"] { border-color: var(--pc-border-strong); }
.ds-appbar-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background: var(--pc-surface);
  border: var(--bw-hairline) solid var(--pc-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  padding: 8px;
  z-index: 60;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--dur-quick) var(--ease-out-expo),
              transform var(--dur-quick) var(--ease-out-expo);
}
.ds-appbar-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ds-appbar-menu-email {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  opacity: var(--dim-5);
  padding: 8px 12px 10px;
  border-bottom: var(--bw-hairline) solid var(--pc-border);
  margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-appbar-menu a,
.ds-appbar-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  color: var(--pc-ink); text-decoration: none; text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  opacity: var(--dim-2);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              background var(--dur-base) var(--ease-out-expo);
}
.ds-appbar-menu a:hover,
.ds-appbar-menu button:hover { opacity: 1; background: var(--pc-bg-hover); color: var(--pc-ink); }

@media (prefers-reduced-motion: reduce) {
  .ds-appbar-menu { transition: none; }
}

@media (max-width: 960px) {
  .ds-appbar { gap: 14px; }
  .ds-appbar [data-hide-sm] { display: none !important; }
  .ds-appbar-mark { font-size: 0.8rem; letter-spacing: 0.16em; }
  .ds-appbar-nav { gap: 10px; }
  .ds-appbar .ds-appbar-burger { display: inline-flex; }
}
/* Narrow phones: the design keeps both buttons in the bar — compress them so
   wordmark + "My workspace" + "Deploy now" fit a 360px viewport. */
@media (max-width: 600px) {
  .ds-appbar { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .ds-appbar-mark { font-size: 0.7rem; letter-spacing: 0.12em; }
  .ds-appbar-nav { gap: 6px; }
  .ds-appbar .ds-btn[data-size="sm"] {
    padding: 8px 9px;
    font-size: var(--fs-3xs);
    letter-spacing: 0.1em;
    gap: 6px;
  }
  .ds-appbar .ds-appbar-burger { width: 30px; height: 30px; }
}

/* -- form fields (square, marketing-style; app inputs stay quiet) -------- */
.ds-field-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: var(--dim-3);
  margin-bottom: 8px;
}
.ds-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--pc-ink);
  background: var(--pc-bg-subtle);
  border: var(--bw-hairline) solid var(--pc-border);
  border-radius: 0;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out-expo);
}
.ds-input::placeholder { color: var(--pc-ink); opacity: 0.3; }
.ds-input:focus { border-color: var(--pc-border-strong); }
.ds-input:focus-visible { outline: var(--bw-focus) solid var(--pc-ink); outline-offset: var(--focus-offset); }

/* -- round icon button (app chrome) --------------------------------------- */
.ds-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  border: var(--bw-hairline) solid var(--pc-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
}
.ds-iconbtn:hover { opacity: 1; border-color: var(--pc-border-hover); }
.ds-iconbtn:active { transform: scale(0.95); }

/* -- LED: busy = a task is running (amber, the "meter" accent) ------------ */
.ds-led[data-state="busy"] { background: var(--pc-warning); box-shadow: 0 0 10px var(--pc-warning); }

/* -- hidden always wins (utility classes set display) --------------------- */
[hidden] { display: none !important; }

/* -- stack glitch (base/glitch.css of the DS) ------------------------------
   Same rules as css/main.css so pages that skip main.css (app chrome) still
   render the wordmark glitch. */
.stack-glitch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr;
}
.stack-glitch__slice {
  grid-row-start: 1;
  grid-column-start: 1;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation:
    stack-glitch-stack 340ms var(--ease-glitch) 1 backwards calc(var(--index) * 120ms + var(--delay, 0ms));
}
.stack-glitch.is-looping .stack-glitch__slice {
  animation:
    stack-glitch-stack 340ms var(--ease-glitch) 1 backwards calc(var(--index) * 120ms + var(--delay, 0ms)),
    stack-glitch-glitch 2s ease infinite 2s alternate-reverse;
}
.stack-glitch__slice:nth-child(odd) { --glitch-translate: 8px; }
.stack-glitch__slice:nth-child(even) { --glitch-translate: -8px; }
@keyframes stack-glitch-stack {
  0% { opacity: 0; transform: translateX(-50%); text-shadow: -2px 3px 0 red, 2px -3px 0 blue; }
  60% { opacity: 0.5; transform: translateX(50%); }
  80% { transform: none; opacity: 1; text-shadow: 2px -3px 0 red, -2px 3px 0 blue; }
  100% { text-shadow: none; }
}
@keyframes stack-glitch-glitch {
  0% { text-shadow: -2px 3px 0 red, 2px -3px 0 blue; transform: translate(var(--glitch-translate)); }
  2% { text-shadow: 2px -3px 0 red, -2px 3px 0 blue; }
  4%, 100% { text-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-glitch__slice { animation: none !important; }
}