/* ============================================================
   EPHIX brand system — tokens + shared primitives
   Source: brand/colors/tokens.css, brand/ui/*.svg, brand guide.
   Layers on every page: INK base -> SIGNAL (electric accents)
   -> PRINT (paper moments). Blue = interactive/live only.
   ============================================================ */

:root {
  /* brand tokens (colors/tokens.css, verbatim) */
  --ephix-ink: #050608;
  --ephix-void: #0b0e13;
  --ephix-surface: #11161e;
  --ephix-surface-2: #18202b;
  --ephix-paper: #f4f6f8;
  --ephix-steel: #a8b0bc;
  --ephix-muted: #687585;
  --ephix-electric: #1769ff;
  --ephix-electric-bright: #3c86ff;
  --ephix-electric-deep: #0b42b6;
  --ephix-line: #26303d;
  --ephix-line-strong: #425064;
  --ephix-success: #59d39b;
  --ephix-warning: #ffc857;
  --ephix-danger: #ff5d6c;

  /* semantic (theme-switchable) */
  --accent: var(--ephix-electric);
  --accent-bright: var(--ephix-electric-bright);
  --accent-deep: var(--ephix-electric-deep);
  --bg: var(--ephix-ink);
  --surface: var(--ephix-surface);
  --surface-2: var(--ephix-surface-2);
  --text: var(--ephix-paper);
  --muted: var(--ephix-steel);
  --faint: var(--ephix-muted);
  --line: var(--ephix-line);
  --line-strong: var(--ephix-line-strong);
  --panel: rgba(17, 22, 30, .78);

  /* type */
  --font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-ui: 'Barlow Semi Condensed', 'Arial', sans-serif;
  --font-body: 'Inter', 'Arial', sans-serif;
  --font-mono: 'Cascadia Mono', 'Consolas', monospace;

  /* geometry */
  --chamfer: 28px;
  --notch: 10px;
  --slant: -3deg;
  --chamfer-poly: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  --notch-poly: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);

  /* motion tokens */
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 460ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-spring: cubic-bezier(.2, .7, .3, 1.25);
  --ease-inout: cubic-bezier(.5, 0, .2, 1);

  /* legacy aliases — pages not yet migrated keep resolving */
  --cyan: var(--accent);
  --cyan-soft: var(--accent-bright);
  --violet: var(--ephix-steel);
  --green: var(--ephix-success);
  --red: var(--ephix-danger);
  --amber: var(--ephix-warning);
}

/* ---- themes: ELECTRIC (default) / PAPER / STEEL ---- */
html[data-theme="paper"] {
  --bg: #eceff2;
  --surface: #ffffff;
  --surface-2: #e4e8ec;
  --text: var(--ephix-ink);
  --muted: #57626f;
  --faint: #7c8794;
  --line: #c2c9d1;
  --line-strong: #99a3ae;
  --panel: rgba(255, 255, 255, .88);
}
html[data-theme="steel"] {
  --accent: #b6bec9;
  --accent-bright: #dde2e8;
  --accent-deep: #7b8693;
}

/* ---- angular chip (ui/button-styles.svg) ----
   Background lives on ::before so focus outlines survive the clip. */
.e-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border: 0;
  background: none;
  padding: .68em 1.6em .62em 1.15em;
  font: 600 .72rem var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, transform .16s ease;
}
.e-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-2);
  clip-path: var(--notch-poly);
  transition: background .16s ease;
}
.e-chip--primary { color: var(--ephix-paper); }
.e-chip--primary::before { background: var(--accent); }
.e-chip--primary:hover::before { background: var(--accent-deep); }
.e-chip--primary:hover { color: #fff; }
.e-chip--outline { color: var(--accent-bright); }
.e-chip--outline::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.e-chip--ghost { color: var(--muted); }
.e-chip--ghost::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.e-chip--ghost:hover { color: var(--text); }
.e-chip--ghost:hover::before { box-shadow: inset 0 0 0 1px var(--accent); }
.e-chip:active { transform: translateX(1px); }
.e-chip .e-arrow { font-family: var(--font-body); transition: transform .16s ease; }
.e-chip:hover .e-arrow { transform: translateX(3px); }
.e-chip--sm { padding: .5em 1.25em .46em .95em; font-size: .64rem; --notch: 8px; }

/* tag chip (social/stickers.svg word-chips) */
.e-tag {
  display: inline-flex;
  align-items: center;
  font: 700 .62rem var(--font-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .5em 1.3em .44em 1em;
  clip-path: var(--notch-poly);
  --notch: 8px;
}
.e-tag--paper { background: var(--ephix-paper); color: var(--ephix-ink); }
.e-tag--blue { background: var(--accent); color: #fff; }
.e-tag--ghost { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }

/* ---- chamfered panel (ui/card-style.svg) ----
   ::before carries surface + border (clipped), ::after redraws the
   cut-edge diagonal so the chamfer keeps its stroke. */
.e-panel {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
}
.e-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel-bg, var(--panel));
  border: 1px solid var(--panel-line, var(--line));
  clip-path: var(--chamfer-poly);
  transition: border-color .2s ease, background .2s ease;
}
.e-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% - var(--chamfer));
  width: calc(var(--chamfer) * 1.4143);
  height: 2px;
  z-index: -1;
  background: var(--panel-line, var(--line));
  transform-origin: 0 0;
  transform: rotate(45deg);
  transition: background .2s ease;
}
.e-panel--flush { --panel-bg: var(--surface); }
.hover-accent { transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
.hover-accent:hover { transform: translateY(-3px); }
.hover-accent:hover::before { border-color: var(--accent); }
.hover-accent:hover::after { background: var(--accent); }
.e-panel:focus-visible,
.e-chip:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

/* blue header band (ui/card-style.svg top band) */
.e-band {
  position: relative;
}
.e-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}

/* section head with diagonal divider (ui/borders-dividers.svg) */
.e-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
}
.e-section-head h2,
.e-section-head h1 {
  margin: 0;
  font: 700 clamp(1.7rem, 3.4vw, 2.7rem)/1.05 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  transform: skewX(var(--slant));
}
.e-section-head .e-kicker {
  display: block;
  font: 600 .64rem var(--font-ui);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
  transform: none;
}
.e-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 40px;
}
.e-rule::before {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}
.e-rule::after {
  content: '';
  width: 34px;
  height: 3px;
  background: var(--accent);
  transform: skewX(-32deg);
}

/* loading indicator (ui/loading-indicator.svg) */
.e-loader {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.e-loader i {
  width: 18px;
  height: 10px;
  background: var(--accent);
  clip-path: var(--notch-poly);
  --notch: 5px;
  animation: eLoad 1.15s ease-in-out infinite;
}
.e-loader i:nth-child(2) { animation-delay: .15s; }
.e-loader i:nth-child(3) { animation-delay: .3s; }
@keyframes eLoad {
  0%, 100% { opacity: .22; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(2px); }
}

/* sticker decal (stickers/generated/*) */
.e-sticker {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .5));
}

/* print panel (paper moment) */
.e-print { background: var(--ephix-paper); color: var(--ephix-ink); }

/* focus + selection + scrollbar */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: #fff; }
html { scrollbar-color: var(--line-strong) var(--bg); background: var(--bg); }

html[data-theme="paper"] .brand-icon { filter: invert(1) hue-rotate(180deg); }

/* masthead logo: the ephix-logo morph target on every section page */
.masthead-logo { view-transition-name: ephix-logo; }
html[data-theme="paper"] .masthead-logo { filter: invert(1) hue-rotate(180deg); }


/* VT overlay backdrop: any region the snapshots don't cover renders ink,
   never the white canvas */
::view-transition { background: var(--ephix-ink); }
html[data-theme="paper"]::view-transition { background: var(--ephix-paper); }

/* no-VT fallback: ink wipe covers the navigation gap in every browser */
.eb-nav-wipe {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: var(--ephix-ink);
  animation: ebNavWipeIn 170ms var(--ease-inout) both;
}
.eb-nav-wipe.out { animation: ebNavWipeOut 220ms var(--ease-out) both; }
@keyframes ebNavWipeIn {
  from { clip-path: polygon(-20% -20%, 10% -20%, -30% 120%, -70% 120%); }
  to { clip-path: polygon(-20% -20%, 132% -20%, 92% 120%, -70% 120%); }
}
@keyframes ebNavWipeOut {
  from { clip-path: polygon(-20% -20%, 132% -20%, 92% 120%, -70% 120%); }
  to { clip-path: polygon(150% -20%, 200% -20%, 110% 120%, 20% 120%); }
}
html.eb-arrive .portal, html.eb-arrive .wrap > *, html.eb-arrive .hero-shell,
html.eb-arrive .site-header, html.eb-arrive .console-head, html.eb-arrive .masthead {
  animation: ebWipeIn var(--t-slow) var(--ease-out) both !important;
}

/* ---- INK base layers (shared; asset urls relative to this file) ---- */
.bg-bands, .bg-grid, .bg-grain { position: fixed; inset: 0; pointer-events: none; }
.bg-bands {
  z-index: 0;
  background: var(--ephix-ink) url('bg/clean-dark.svg') center/cover no-repeat;
}
.bg-grid {
  z-index: 0;
  background: url('patterns/geometric-grid.svg') center/cover no-repeat;
  opacity: .05;
}
.bg-grain {
  z-index: 1;
  background: url('textures/distress-overlay.svg') repeat;
  background-size: 760px 506px;
  opacity: .05;
  mix-blend-mode: screen;
}
.crt-overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(244, 246, 248, .016) 0 1px, transparent 1px 3px);
}
.hud-frame { position: fixed; inset: 12px; z-index: 3; pointer-events: none; opacity: .55; }
.hud-corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--accent); }
.hud-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

html[data-theme="paper"] .bg-bands { filter: invert(1) hue-rotate(180deg); opacity: .55; }
html[data-theme="paper"] .bg-grid { filter: invert(1) hue-rotate(180deg); opacity: .07; }
html[data-theme="paper"] .bg-grain { mix-blend-mode: multiply; filter: invert(1); opacity: .05; }
html[data-theme="paper"] .crt-overlay {
  background: repeating-linear-gradient(0deg, rgba(5, 6, 8, .02) 0 1px, transparent 1px 3px);
}
html[data-theme="paper"] .hud-corner { border-color: var(--ephix-ink); }
html[data-theme="steel"] .bg-bands,
html[data-theme="steel"] .bg-grid { filter: saturate(0); }

/* ---------- theme dots (shared switcher) ---------- */
.theme-dots { display: flex; gap: .55rem; align-items: center; }
.theme-dot {
  width: 13px; height: 13px; padding: 0; cursor: pointer; border: 0;
  background: var(--surface-2);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .18s ease, filter .18s ease;
}
.theme-dot[data-t="electric"] { background: var(--ephix-electric); }
.theme-dot[data-t="paper"] { background: var(--ephix-paper); }
.theme-dot[data-t="steel"] { background: var(--ephix-steel); }
.theme-dot:hover { transform: scale(1.3); }
.theme-dot.active { transform: scale(1.3); filter: drop-shadow(0 0 1.5px var(--text)); }

@media (prefers-reduced-motion: reduce) {
  .e-loader i { animation: none; opacity: .8; }
  .e-chip, .e-panel, .hover-accent { transition: none; }
}

/* ============================================================
   MOTION — broadcast choreography
   Wipe / Stamp / Sweep / Static. Transform+opacity+clip only.
   ============================================================ */

@keyframes ebRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes ebWipeIn {
  from { opacity: 0; clip-path: inset(-4% 100% -4% 0); transform: translateY(6px); }
  to { opacity: 1; clip-path: inset(-4% -2% -4% -2%); transform: none; }
}
@keyframes ebStamp {
  0% { opacity: 0; transform: scale(.93) rotate(-1.6deg); }
  62% { opacity: 1; transform: scale(1.012) rotate(.3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ebChamferIn {
  from { opacity: .4; clip-path: inset(0 0 100% 0); transform: translateY(-6px); }
  to { opacity: 1; clip-path: inset(-6% -6% -6% -6%); transform: none; }
}
@keyframes ebSlashDraw {
  /* uses the individual `scale` property so it composes with each
     element's own skew/transform instead of overwriting it */
  from { scale: 0 1; }
  to { scale: 1 1; }
}
@keyframes ebFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes ebSlashDraw {
  /* uses the individual `scale` property so it composes with each
     element's own skew/transform instead of overwriting it */
  from { scale: 0 1; }
  to { scale: 1 1; }
}

/* scroll/mount reveal — armed only when JS is running.
   Hidden state is opacity/transform ONLY: Chrome's IntersectionObserver
   honors clip-path, so a zero-width clip would stop .is-in from ever
   firing (and would freeze loading=lazy images). The wipe plays as an
   animation on .is-in instead. */
html.js-reveal [data-reveal] { opacity: 0; }
html.js-reveal [data-reveal="up"] { transform: translateY(18px); }
html.js-reveal [data-reveal="left"] { transform: translateX(-26px); }
html.js-reveal [data-reveal="stamp"] { transform: scale(.94) rotate(-1.6deg); }
html.js-reveal [data-reveal="wipe"] { transform: translateY(6px); }
html.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 55ms);
}
html.js-reveal [data-reveal="stamp"].is-in { transition-timing-function: var(--ease-spring); }
html.js-reveal [data-reveal="wipe"].is-in {
  animation: ebWipeIn var(--t-slow) var(--ease-out) both;
  animation-delay: calc(var(--reveal-i, 0) * 55ms);
}

/* FLIP helper: JS sets --fx/--fy (px) then plays .is-flipping */
.flip-live { transition: transform var(--t-med) var(--ease-out); }
.flip-live.is-flipping { transition: none; }

/* ---------- signature pass: ambient (subtle, low-frequency) ---------- */
@keyframes ebTwinkle {
  0%, 100% { scale: 1; opacity: .92; }
  50% { scale: 1.09; opacity: .55; }
}
@keyframes ebBandDrift {
  from { translate: -26px 0; }
  to { translate: 26px 0; }
}
@keyframes ebRegDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 3px -2px; }
}
@keyframes ebEqShimmer {
  0%, 100% { opacity: var(--eq-lo, .26); }
  50% { opacity: var(--eq-hi, .38); }
}

/* ---------- idle signal pass ---------- */
.eb-sweep {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  opacity: .05;
  animation: ebSignalSweep 52s linear infinite;
}
@keyframes ebSignalSweep {
  from { translate: 0 -2vh; }
  to { translate: 0 102vh; }
}
.bg-grain.grain-live {
  inset: -40px;
  animation: ebGrainShift 1.4s steps(1, end) infinite;
}
@keyframes ebGrainShift {
  0% { translate: 0 0; }
  20% { translate: -8px 5px; }
  40% { translate: 6px -7px; }
  60% { translate: -5px -4px; }
  80% { translate: 7px 4px; }
  100% { translate: 0 0; }
}
@keyframes ebGhostFloat {
  from { translate: 0 -6px; }
  to { translate: 0 8px; }
}
@keyframes ebStrokeFlicker {
  0%, 91%, 96%, 100% { opacity: 1; }
  93% { opacity: .55; }
  97.5% { opacity: .75; }
}
@keyframes ebRock {
  from { rotate: -1.2deg; }
  to { rotate: 1.2deg; }
}
@keyframes ebJitter {
  0%, 96%, 100% { translate: 0 0; }
  96.8% { translate: 1.5px -1px; }
  97.6% { translate: -1px 1px; }
}
/* ---------- theme dots (shared switcher) ---------- */
.theme-dots { display: flex; gap: .55rem; align-items: center; }
.theme-dot {
  width: 13px; height: 13px; padding: 0; cursor: pointer; border: 0;
  background: var(--surface-2);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .18s ease, filter .18s ease;
}
.theme-dot[data-t="electric"] { background: var(--ephix-electric); }
.theme-dot[data-t="paper"] { background: var(--ephix-paper); }
.theme-dot[data-t="steel"] { background: var(--ephix-steel); }
.theme-dot:hover { transform: scale(1.3); }
.theme-dot.active { transform: scale(1.3); filter: drop-shadow(0 0 1.5px var(--text)); }

/* ---------- theme dots (shared switcher) ---------- */
.theme-dots { display: flex; gap: .55rem; align-items: center; }
.theme-dot {
  width: 13px; height: 13px; padding: 0; cursor: pointer; border: 0;
  background: var(--surface-2);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .18s ease, filter .18s ease;
}
.theme-dot[data-t="electric"] { background: var(--ephix-electric); }
.theme-dot[data-t="paper"] { background: var(--ephix-paper); }
.theme-dot[data-t="steel"] { background: var(--ephix-steel); }
.theme-dot:hover { transform: scale(1.3); }
.theme-dot.active { transform: scale(1.3); filter: drop-shadow(0 0 1.5px var(--text)); }

/* fx particles: click-burst confetti (positioned at TOP LEVEL so they
   render for normal users; hidden entirely under reduced motion) */
.fx-particle {
  position: fixed; z-index: 400; width: 4px; height: 10px;
  border-radius: 1px; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}