/* PHANTOM ZENITH ORIGIN — marketing site
   Built from the Version3 Claude Design export; fonts are self-hosted latin-subset woff2. */

/* ── PZO font faces ───────────────────────────────────────────────────── */
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/share-tech-mono-400.woff2") format('woff2');}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bebas-neue-400.woff2") format('woff2');}
@font-face{font-family:'Saira';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/saira-300.woff2") format('woff2');}
@font-face{font-family:'Saira';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/saira-400.woff2") format('woff2');}
@font-face{font-family:'Saira Extra Condensed';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/saira-extra-condensed-700.woff2") format('woff2');}
@font-face{font-family:'Saira Extra Condensed';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/saira-extra-condensed-800.woff2") format('woff2');}

/* ==========================================================================
   PZO COLOR + GEOMETRY TOKENS — the CSS custom-property face.

   Mirrors `./colors.ts` and `./geometry.ts` exactly. Every component reaches a
   color through `var(--token)`, never a literal hex — so a swap here reaches
   the whole library, and the token graph stays traceable.

   SOURCE OF TRUTH: Documents/Design/UI/UI_Color_Parameter_Tokens.md (§TOK-*)
                    Documents/Design/UI/PZO_UI_Architecture_Bible.md (§UIA-Tokens)

   The `--token` names here are IDENTICAL to the ones the HTML artifacts declare
   locally, so any artifact CSS can be pasted in and will resolve.
   ========================================================================== */

:root,
.pzo-root {
  /* ── §TOK-Surfaces — surface plates ─────────────────────────────────── */
  --s-lowest: #0c0e0f;
  --card: #161616;
  --plate: #1a1c1d;
  --s-low: #1a1c1d; /* alias of --plate (artifact-legacy name) */
  --band: #1e2021;
  --s: #1e2021; /* alias of --band (artifact-legacy name) */
  --s-high: #282a2b;
  --s-highest: #333536;

  /* ── §TOK-Ink — ink tiers ───────────────────────────────────────────── */
  --on: #e2e2e3;
  --on-dim: #9a9a9b;
  --on-faint: #5a5a5b;
  --label-dim: #777777;

  /* ── §TOK-Accents ───────────────────────────────────────────────────── */
  --accent: #30b0a0;
  --accent-chip: #25887b;
  --accent-bright: #50d0c0;
  --accent-dim: #208878;
  --accent-muted: #2e5c57;
  --gain: #4d8df0;
  --loss: #e8902e;
  --loss-dim: #cf802a;

  /* ── §TOK-Pools — HUD pool fills / tracks ───────────────────────────── */
  --hp: #d8dee2;
  --hp-track: #2a2d2f;
  --hp-warn: #ffb327;
  --wp: #c8a24a;
  --wp-track: #2c2820;
  --sp: #7bd3e9;
  --sp-track: #1d2a30;
  --sp-break: #c2443c;
  --hp-chunk: #e8902e;
  --sp-chunk: #4596ae;
  --rally: #6fe0b0;
  --reactor: #f0c03a;
  --redline: #e8503c;
  --bastion: #8fd4ff;
  /* gradient partners measured on the vitals export (WP gold, Bastion green→cyan) */
  --wp-grad-b: #e6c776;
  --bastion-grad-a: #d2e87f;
  --bastion-grad-b: #80d5dc;

  /* ── §TOK-Alarm — two-role reds: TEXT = alarm, STRUCTURE = break ────── */
  --alarm: #fd4747;
  --break: #c2443c;
  --danger: #b7403a;

  /* ── §TOK-Party — player identity (UI+Game) ─────────────────────────── */
  --pc-1: #4d8df0;
  --pc-2: #5fc98a;
  --pc-3: #e0863c;
  --pc-4: #d45fb0;
  --downed-bg: #1d1110;
  --downed-line: #c2443c;

  /* ── §TOK-Element — IDENTITY ONLY, NEVER CHROME ─────────────────────── */
  --el-fire: #e8854f;
  --el-ice: #4fc5e8;
  --el-lightning: #f0c54d;
  --el-toxic: #83b030;
  --el-light: #c8f0f7;
  --el-dark: #d050c3;
  --el-none: #afa9a6;

  /* ── §TOK-Category — IDENTITY ONLY, NEVER CHROME ────────────────────── */
  --cat-weapon: #e66c2a;
  --cat-gear: #4763f3;
  --cat-consumable: #abf347;
  --cat-currency: #f3b147;
  --cat-echo: #e84f4f;

  /* ── §TOK-Manufacturer — UI only ────────────────────────────────────── */
  --mfr-jurygrade: #2848a0;
  --mfr-halcross: #c06818;
  --mfr-sciv: #28887c;
  --mfr-arclyte: #a88820;
  --mfr-vael: #6030a0;

  /* ── §TOK-Chip ──────────────────────────────────────────────────────── */
  --tier: #e66c2a;
  --loot-plate: #000000;

  /* ── §TOK-Derived — inverted ink on a filled accent ─────────────────── */
  --on-accent: #06201c;
  --on-amber: #2a1606;
  --on-gain: #0c1c33;
  --on-echo: #2a0707;
  --on-fire: #2a1206;
  --on-ice: #06222b;
  --on-lightning: #2a2206;
  --on-toxic: #0e2206;
  --on-light: #0a2730;
  --on-dark: #2a0726;
  --on-none: #1c1a18;

  /* ── §TOK-Derived — angular-banner washes (accent @ ~13% over black) ── */
  --alert-bg: #1d1408;
  --info-bg: #061715;
  --reward-bg: #0a121f;

  /* ── FLAGGED — measured, awaiting ratification (§TOK-Reconcile) ──────── */
  --hvr-loaded: #e8503c;
  --affliction-fill: #1d2a30;
  --affliction-line: #0a6e87;
  --affliction-timer: #c9cbcc;
  --palette-inactive: #377870;
  --glyph-ink: #1c1f2a;
  --pnum: #4a4b4c;
  --card-edge: #232627;

  /* ── §UIA-Tokens geometry — chamfer cut tiers (fixed PIXELS) ────────── */
  --chamfer-panel: 38px;
  --chamfer-equipment: 24px;
  --chamfer-card: 14px;
  --chamfer-hud: 12px;

  /* ── §UIA-Invariants — the shear is an ANGLE, the inset is derived ──── */
  --shear-angle: 20deg;
  --shear-tan: 0.36397;
  --chip-height: 16px;
  --chip-inset: 5.8px; /* = 16 × tan20 */

  /* ── layout constants ───────────────────────────────────────────────── */
  --panel-pad-x: 20px;
  --inter-card-gap: 16px;
  --grid-gap: 7px;
  --item-entry: 146px;
}

/* ── font-family shorthands (the four families in play) ────────────────── */
:root,
.pzo-root {
  --font-mono: 'Share Tech Mono', ui-monospace, monospace;
  --font-display: 'Saira Extra Condensed', sans-serif;
  --font-numeric: 'Bebas Neue', sans-serif;
  --font-body: 'Saira', sans-serif;
}

/* The library assumes a dark surface underneath and box-sizing:border-box, the
   way every artifact does. Apply `.pzo-root` to any container that hosts PZO
   components — or rely on `:root` when the whole page is PZO. */
.pzo-root,
.pzo-root * {
  box-sizing: border-box;
}

.pzo-root {
  -webkit-font-smoothing: antialiased;
  color: var(--on);
}

/* ═══════════════════════════════════════════════════
   PHANTOM ZENITH ORIGIN — LOGO ANIMATION
   Lifted verbatim from website/src/css/logo-animation.css (brand-critical).
   Page-level fadeUp rules from the old site are omitted; only the SVG
   logo sequence is carried over.
   ═══════════════════════════════════════════════════ */

@keyframes logoEntry     { to { opacity: 1; transform: translateY(0); } }
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0  5px #751495); }
  50%      { filter: drop-shadow(0 0 22px #9B1EC4); }
}
@keyframes fillReveal    { from { opacity: 0; } to { opacity: 1; } }
@keyframes strokeFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes drawOn        { to { stroke-dashoffset: 0; } }
@keyframes frameStrokeDraw {
  0%   { stroke-dashoffset: 9000; fill: none; }
  99%  { stroke-dashoffset: 0;    fill: none; }
  100% { stroke-dashoffset: 0;    fill: #751495; }
}

.logo-wrap {
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  animation:
    logoEntry 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards,
    glowPulse 2s ease-in-out 2.8s infinite;
}

.logo-wrap svg { width: 100%; height: auto; display: block; }

#logo-frame-fill-wrap { opacity: 0; animation: fillReveal 0.35s ease-out 1.1s forwards; }

#logo-frame_2 {
  stroke: #9B1EC4;
  stroke-width: 2;
  stroke-dasharray: 9000;
  stroke-dashoffset: 9000;
  animation: frameStrokeDraw 1s ease-in-out 0.2s forwards;
}

#logo-frame { opacity: 0; animation: fillReveal 0.35s ease-out 1.1s forwards; }

#logo-strokes [id^="Strokes-Phantom-"],
#logo-strokes [id^="Strokes-Zenith-"] {
  fill: none !important;
  stroke: #E2E8F0 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation:
    drawOn 0.4s ease-out var(--d, 0.8s) forwards,
    strokeFadeOut 0.3s ease-in 2.4s forwards;
}

#logo-strokes [id^="Strokes-Subtitle-"] {
  fill: none !important;
  stroke: #AED2C4 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
  animation:
    drawOn 0.5s ease-out var(--d, 0.8s) forwards,
    strokeFadeOut 0.3s ease-in 2.4s forwards;
}

#Strokes-Phantom-P { --d: 0.80s; }
#Strokes-Phantom-H { --d: 0.88s; }
#Strokes-Phantom-A { --d: 0.96s; }
#Strokes-Phantom-N { --d: 1.04s; }
#Strokes-Phantom-T { --d: 1.12s; }
#Strokes-Phantom-O { --d: 1.20s; }
#Strokes-Phantom-M { --d: 1.28s; }

#Strokes-Zenith-Z { --d: 1.36s; }
#Strokes-Zenith-E { --d: 1.44s; }
#Strokes-Zenith-N { --d: 1.52s; }
#Strokes-Zenith-I { --d: 1.60s; }
#Strokes-Zenith-T { --d: 1.68s; }
#Strokes-Zenith-H { --d: 1.76s; }

#Strokes-Subtitle-Origin   { --d: 1.84s; }
#Strokes-Subtitle-Japanese { --d: 2.05s; }

#logo-letters [id^="Phantom-"],
#logo-letters [id^="Zenith-"] {
  opacity: 0;
  animation: fillReveal 0.25s ease-out var(--fd, 1.2s) forwards;
}

#logo-letters [id^="Subtitle-"],
#logo-letters #Subtitle-Origin,
#Subtitle-Origin,
#Subtitle-Japanese {
  opacity: 0;
  animation: fillReveal 0.3s ease-out var(--fd, 1.2s) forwards;
}

#Phantom-P { --fd: 1.15s; }
#Phantom-H { --fd: 1.23s; }
#Phantom-A { --fd: 1.31s; }
#Phantom-N { --fd: 1.39s; }
#Phantom-T { --fd: 1.47s; }
#Phantom-O { --fd: 1.55s; }
#Phantom-M { --fd: 1.63s; }

#Zenith-Z { --fd: 1.71s; }
#Zenith-E { --fd: 1.79s; }
#Zenith-N { --fd: 1.87s; }
#Zenith-I { --fd: 1.95s; }
#Zenith-T { --fd: 2.03s; }
#Zenith-H { --fd: 2.11s; }

#Subtitle-Origin   { --fd: 2.19s; }
#Subtitle-Japanese { --fd: 2.40s; }

/* Reduced motion: land on the finished frame with no draw-on or glow. */
@media (prefers-reduced-motion: reduce) {
  .logo-wrap { opacity: 1; transform: none; animation: none; }
  #logo-frame, #logo-frame-fill-wrap { opacity: 1; animation: none; }
  #logo-frame_2 { stroke-dashoffset: 0; fill: #751495; animation: none; }
  #logo-strokes { display: none; }
  #logo-letters [id^="Phantom-"],
  #logo-letters [id^="Zenith-"],
  #logo-letters [id^="Subtitle-"],
  #Subtitle-Origin,
  #Subtitle-Japanese { opacity: 1; animation: none; }
}

/* ── page ─────────────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; background: #0c0e0f; }
  html { scroll-behavior: smooth; }
  [id] { scroll-margin-top: 74px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { -webkit-font-smoothing: antialiased; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { color: var(--accent-bright); }
  ::selection { background: var(--accent); color: var(--on-accent); }
  [data-depth-rail] { display: none; }
  @media (min-width: 1360px) { [data-depth-rail] { display: flex; } }
  @keyframes pzo-scan { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(150vh); opacity: 0; } }
  @keyframes pzo-breach { 0%, 100% { border-left-color: var(--break); } 50% { border-left-color: rgba(194,68,60,.3); } }
  @keyframes pzo-transit { 0% { transform: translateY(0); } 100% { transform: translateY(130vh); } }
  @media (prefers-reduced-motion: reduce) { [data-hero-scan] { animation: none; opacity: 0; } }

/* ── hover / focus states (were style-hover / style-focus in the design export; inline styles need !important) ── */
.hv-accent:hover { background: var(--accent) !important; color: var(--on-accent) !important; }
.hv-bright:hover { background: var(--accent-bright) !important; }
.hv-band:hover { background: var(--band) !important; }
.fv-accent:focus-visible { background: var(--accent) !important; color: var(--on-accent) !important; outline: none; }
.fv-bright-ink:focus-visible { background: var(--accent-bright) !important; color: var(--on-accent) !important; outline: none; }
.fv-bright:focus-visible { background: var(--accent-bright) !important; outline: none; }
a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ── pending CTAs ("coming soon"): same chamfer, muted edge, dark face, amber status chip ── */
.cta-pending { cursor: default; }
.soon-tag {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 24px; padding: 0 14px;
  background: var(--loss); clip-path: polygon(8.7px 0, 100% 0, calc(100% - 8.7px) 100%, 0 100%);
  font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--loss); white-space: nowrap;
}
.soon-tag::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--s-lowest); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* ── capture plates: object-fit cover by default; js/pzo.js re-frames from data-s / data-x / data-y ── */
img.plate { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; max-width: none; display: block; transform: translate(-50%, -50%); object-fit: cover; }
div:has(> img.plate) { overflow: hidden; }