/*
  /arcade/arcade.css  (TEST THEME)
  A retro arcade skin that sits ON TOP of the main /css/styles.css.
  Same layouts and content as the main site; this file only swaps
  fonts, colors and details. Every rule is scoped to body.arcade so
  it can never leak into the main site.

  Sections:
    1. Tokens          5. Headings (marquee face, one color)
    2. Base + stars    6. Buttons, links, forms
    3. Top bar         7. Components (strips, cards, viewer)
    4. Page title      8. Responsive + reduced motion
*/

/* =========================================================
   1. TOKENS
   Overriding the main tokens re-colors the whole site at once.
   ========================================================= */
body.arcade {
  --ink: #04050f;          /* screen black */
  --ink-2: #0b1030;        /* panels */
  --black: #000;
  --line: #232c6b;         /* navy hairlines */
  --paper: #e8ecff;        /* main text */
  --soft: #b9c2ee;         /* body copy */
  --muted: #7d88c4;        /* labels */
  --accent: #f3e27c;       /* marquee gold */

  /* the high-score rainbow */
  --r1: #e05cff;  --r2: #ff4f5e;  --r3: #ff9a3c;  --r4: #8cf04a;  --r5: #3fe0d0;  --r6: #3fb2ff;
  /* the 3D drop under the gold title letters */
  --sky: #4cc3f0;  --blue: #4f74e3;  --navy: #2e3aa8;

  --pixel: "Press Start 2P", ui-monospace, monospace;
  --block: "Bungee", "Arial Black", Impact, sans-serif;
  --serif: var(--pixel);                                      /* every big heading becomes pixel */
  --sans: "JetBrains Mono", ui-monospace, Menlo, monospace;   /* clean mono for reading */
  --mono: var(--pixel);                                       /* small labels */
}

/* =========================================================
   2. BASE + STARFIELD
   The page background moves to <html> so the fixed star canvas
   can sit behind everything.
   ========================================================= */
html:has(body.arcade) { background: #04050f; }
body.arcade { background: transparent; font-size: 16px; line-height: 1.7; }
body.arcade::after { content: none; }                 /* drop the film grain */
.arcade .stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.arcade ::selection { background: var(--accent); color: var(--ink); }
.arcade .label { font-size: 9px; letter-spacing: .1em; line-height: 1.8; }
.arcade :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* =========================================================
   3. TOP BAR
   Name in marquee letters; nav links use the menu's rainbow.
   ========================================================= */
.arcade .bar { background: color-mix(in srgb, #04050f 90%, transparent); border-bottom: 2px solid var(--line); }
.arcade .bar__name {
  font: 400 20px/1 var(--block); color: var(--accent); letter-spacing: .02em;
  text-shadow: -1px -1px 0 var(--sky), -2px -2px 0 var(--blue), -3px -3px 0 var(--navy);
  transform: skewX(-8deg); display: inline-block;
}
.arcade .bar nav a { font: 10px var(--pixel); border: 0; padding-block: 6px; opacity: .8; }
.arcade .bar nav a:nth-child(1) { color: var(--r1); }
.arcade .bar nav a:nth-child(2) { color: var(--r2); }
.arcade .bar nav a:nth-child(3) { color: var(--r4); }
.arcade .bar nav a:nth-child(4) { color: var(--r6); }
.arcade .bar nav a:hover { opacity: 1; text-shadow: 0 0 8px currentColor; }
.arcade .bar nav a[aria-current="page"] { opacity: 1; text-shadow: 0 0 10px currentColor; }
.arcade .bar nav a[aria-current="page"]::before { content: "> "; animation: arcade-blink .8s steps(1) infinite; }

/* =========================================================
   4. PAGE TITLE
   The one bold moment per page: gold marquee letters with a stacked 3D drop.
   ========================================================= */
.arcade .page-head h1 {
  font: 400 clamp(46px, 8.5vw, 116px)/1 var(--block);
  color: var(--accent); letter-spacing: .01em;
  transform: skewX(-8deg) rotate(-2deg); transform-origin: left bottom;
  text-shadow:
    -1px -1px 0 var(--sky), -2px -2px 0 var(--sky), -3px -3px 0 var(--sky), -4px -4px 0 var(--sky),
    -5px -5px 0 var(--blue), -6px -6px 0 var(--blue), -7px -7px 0 var(--blue), -8px -8px 0 var(--blue),
    -9px -9px 0 var(--navy), -10px -10px 0 var(--navy), -11px -11px 0 var(--navy), -12px -12px 0 var(--navy);
}
.arcade .page-head .label { color: var(--r5); }
.arcade .page-head--center h1 { transform-origin: center bottom; }

/* =========================================================
   5. HEADINGS: same marquee face as the page titles (Bungee),
   slanted the same way, but flat sky blue with no 3D drop.
   ========================================================= */
.arcade .worktype__head h2,
.arcade .service h2,
.arcade .process h2,
.arcade .sheet-head h2 {
  font: 400 clamp(30px, 4.4vw, 58px)/1.05 var(--block);
  letter-spacing: .01em;
  color: var(--sky);
  display: inline-block;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}

/* Smaller headings: same face and color, smaller */
.arcade .pframe h4, .arcade .tactics h3, .arcade .pillars h3, .arcade .skill-row h3, .arcade .lead h2 {
  font: 400 clamp(17px, 1.6vw, 21px)/1.2 var(--block);
  letter-spacing: .01em;
  color: var(--sky);
}

.arcade .subhead { font-size: 10px; color: var(--r5); }
.arcade .project h3, .arcade .piece figcaption { font-family: var(--sans); }

/* Big numbers read like a score counter */
.arcade .result-card__num {
  font-family: var(--pixel); font-size: clamp(34px, 5.5vw, 72px); line-height: 1.2;
  color: var(--accent); text-shadow: -3px -3px 0 var(--navy), 0 0 18px rgba(243, 226, 124, .35);
}
.arcade .split .result-card__num { font-size: clamp(30px, 4.4vw, 60px); }

.arcade .life__story .pull { font-size: clamp(15px, 1.8vw, 21px); line-height: 1.7; color: var(--accent); }
.arcade .next-step a { font-size: clamp(16px, 2.6vw, 30px); line-height: 1.5; color: var(--r4); }
.arcade .next-step a::before { content: "> "; animation: arcade-blink .8s steps(1) infinite; }
.arcade .direct .email { font-size: clamp(16px, 3.4vw, 46px); line-height: 1.4; color: var(--r6); text-shadow: 0 0 12px rgba(63, 178, 255, .45); }
.arcade .viewer__title { font-size: 20px; line-height: 1.5; color: var(--accent); }

/* =========================================================
   6. BUTTONS, LINKS, FORMS
   Chunky pixel buttons with a hard offset shadow that "presses" on click.
   ========================================================= */
.arcade .btn {
  font: 11px/1 var(--pixel); letter-spacing: .04em; padding: 16px 20px;
  border: 3px solid var(--paper); color: var(--paper);
  box-shadow: 5px 5px 0 var(--navy); transition: transform .05s, box-shadow .05s;
}
.arcade .btn--solid { background: var(--accent); border-color: var(--accent); color: #04050f; }
.arcade .btn:hover { color: var(--accent); border-color: var(--accent); }
.arcade .btn--solid:hover { background: #fff3a8; color: #04050f; }
.arcade .btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--navy); }
.arcade .link-arrow { color: var(--accent); border-bottom: 2px dotted var(--accent); }

.arcade .field label { font: 10px var(--pixel); color: var(--r5); letter-spacing: .06em; }
.arcade .field input, .arcade .field textarea {
  font-family: var(--sans); background: #02030a; border: 2px solid var(--line); caret-color: var(--accent);
}
.arcade .field input:focus, .arcade .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 226, 124, .2); }
.arcade .lead { background: color-mix(in srgb, var(--ink-2) 92%, transparent); border: 2px solid var(--line); box-shadow: 8px 8px 0 #000; }
.arcade .form-status.is-ok { color: var(--r4); }

/* =========================================================
   7. COMPONENTS
   ========================================================= */
/* Type nav + logo strip */
.arcade .type-nav { background: color-mix(in srgb, #04050f 92%, transparent); border-block: 2px solid var(--line); }
.arcade .type-nav a { font: 10px var(--pixel); }
.arcade .type-nav a:nth-child(1) { color: var(--r1); }
.arcade .type-nav a:nth-child(2) { color: var(--r2); }
.arcade .type-nav a:nth-child(3) { color: var(--r3); }
.arcade .type-nav a:nth-child(4) { color: var(--r4); }
.arcade .type-nav a:nth-child(5) { color: var(--r5); }
.arcade .type-nav a:nth-child(6) { color: var(--r6); }
.arcade .type-nav a:hover { text-shadow: 0 0 8px currentColor; }
.arcade .marquee, .arcade .logos { border-color: var(--line); }

/* Panels get a pixel border and hard shadow instead of soft hairlines */
.arcade .pframe, .arcade .clients-2 article { border: 2px solid var(--line); box-shadow: 6px 6px 0 #000; background: color-mix(in srgb, var(--ink-2) 92%, transparent); }
.arcade .pframe__deliv .label { color: var(--accent); }
.arcade .loopback, .arcade .shared .label { color: var(--r4); }
.arcade .tags li { color: var(--r5); }

/* Media frames: thin neon edge */
.arcade .still, .arcade .gphoto, .arcade .piece__img { box-shadow: 0 0 0 2px var(--line); }
.arcade .play__icon { border-radius: 0; border-width: 3px; }                 /* square "pixel" play button */
.arcade .play:hover .play__icon { border-color: var(--accent); background-color: rgba(243, 226, 124, .15); }
.arcade .gphoto { image-rendering: auto; }

/* Lists and rows use the navy line */
.arcade .timeline, .arcade .timeline li, .arcade .accounts, .arcade .accounts div,
.arcade .pillars, .arcade .pillars li, .arcade .service, .arcade .services, .arcade .expect, .arcade .expect li { border-color: var(--line); }
.arcade .timeline .label { color: var(--accent); }

/* Viewer + footer */
.arcade .viewer::backdrop { background: rgba(2, 3, 12, .94); }
.arcade footer { border-top: 2px solid var(--line); }

/* Services tiles + pop-up: pixel panels, sky headings */
.arcade .svc-tile { border: 2px solid var(--line); box-shadow: 6px 6px 0 #000; background: color-mix(in srgb, var(--ink-2) 92%, transparent); }
.arcade .svc-tile:hover, .arcade .svc-tile:focus-visible, .arcade .svc-tile--lead { border-color: var(--accent); }
.arcade .svc-tile__name, .arcade .svc-dialog__body h2 { font-family: var(--block); color: var(--sky); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; }
.arcade .svc-dialog__body h2 { font-size: clamp(26px, 3.4vw, 40px); }
.arcade .svc-tile__more { font-size: 9px; }
.arcade .svc-dialog { border: 2px solid var(--line); box-shadow: 10px 10px 0 #000; }
.arcade .svc-dialog::backdrop { background: rgba(2, 3, 12, .9); }

/* SEO big numbers read like scores */
.arcade .big-stats dt { font-family: var(--pixel); font-size: clamp(15px, 1.5vw, 20px); line-height: 1.4; color: var(--accent); }

/* SEM trend chart + case pop-up */
.arcade .ads-chart { border: 2px solid var(--line); box-shadow: 6px 6px 0 #000; background: color-mix(in srgb, var(--ink-2) 92%, transparent); }
.arcade .trend { border: 2px solid var(--line); }
.arcade .trend:hover, .arcade .trend:focus-visible { border-color: var(--sky); }
.arcade .trend__line { stroke: var(--sky); }
.arcade .trend__area { fill: color-mix(in srgb, var(--sky) 14%, transparent); }
.arcade .trend__end { fill: var(--sky); }
.arcade .trend__total, .arcade .ads-chart__tip .tip-total { font-family: var(--pixel); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.4; color: var(--accent); }
.arcade .ads-chart__tip { border: 2px solid var(--sky); box-shadow: 6px 6px 0 #000; }
.arcade .case-dialog { border: 2px solid var(--line); box-shadow: 10px 10px 0 #000; }
.arcade .case-dialog h3 { font-family: var(--block); color: var(--sky); font-size: clamp(24px, 3.2vw, 38px); }
.arcade .case-stats dd { font-family: var(--pixel); font-size: clamp(15px, 1.8vw, 20px); line-height: 1.3; color: var(--accent); }

/* =========================================================
   8. RESPONSIVE + MOTION
   ========================================================= */
@keyframes arcade-blink { 50% { opacity: 0; } }

@media (max-width: 860px) {
  .arcade .bar nav a { font-size: 8px; }
  .arcade .bar__name { font-size: 15px; }
  .arcade .page-head h1 {
    text-shadow:
      -1px -1px 0 var(--sky), -2px -2px 0 var(--sky), -3px -3px 0 var(--blue),
      -4px -4px 0 var(--blue), -5px -5px 0 var(--navy), -6px -6px 0 var(--navy);
  }
}
@media (max-width: 480px) {
  .arcade .bar nav { gap: 10px; }
  .arcade .bar nav a[aria-current="page"]::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade .bar nav a[aria-current="page"]::before,
  .arcade .next-step a::before { animation: none; }
}