/* fx.css — LOCKED. Do not edit. Tokens + effect styles. Layout goes in site.css. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;700;800&family=Sometype+Mono:wght@400;500&display=swap');
:root {
  --fx-bg: #161616;     /* charcoal */
  --fx-ink: #f2ede4;    /* bone */
  --accent: #d7ff3c;    /* hi-vis */
  --accent-2: #ff5a36;  /* safety orange, use sparingly */
  --muted: #8d8a84;
  --line: rgba(242, 237, 228, .12);
  --display: 'Geist', system-ui, sans-serif;
  --mono: 'Sometype Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@view-transition { navigation: auto; } /* smooth cross-page transitions, no JS */
html { background: var(--fx-bg); color: var(--fx-ink); }
body { margin: 0; font-family: var(--display); font-weight: 400; -webkit-font-smoothing: antialiased; }
#fx-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* big statements */
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; margin: 0; }
.display--xl { font-size: clamp(3.2rem, 9vw, 9rem); }
.display--lg { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.display--md { font-size: clamp(1.6rem, 3.2vw, 2.8rem); }
/* tiny bracket labels */
.label { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.label::before { content: '[ '; } .label::after { content: ' ]'; }
.plus { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.plus::before { content: '( + )'; }

/* dither reveal: media appears through a growing dot screen */
.fx-media { position: relative; overflow: hidden; background: #222; }
.fx-media > img, .fx-media > video { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 46%); mask-image: radial-gradient(circle, #000 45%, transparent 46%);
  -webkit-mask-size: 6px 6px; mask-size: 6px 6px; -webkit-mask-position: center; mask-position: center; opacity: 0;
  transition: -webkit-mask-size 1.1s var(--ease), mask-size 1.1s var(--ease), opacity .4s, filter .6s var(--ease), transform .8s var(--ease);
  filter: grayscale(1) contrast(1.15); }
.fx-media.is-in > img, .fx-media.is-in > video { opacity: 1; -webkit-mask-size: 300% 300%; mask-size: 300% 300%; }
.fx-media:hover > img, .fx-media:hover > video { filter: none; transform: scale(1.04); }

/* buttons / pills */
.pill { display: inline-flex; width: max-content; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(242,237,228,.08);
  backdrop-filter: blur(10px); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--fx-ink); text-decoration: none;
  transition: background .25s var(--ease), color .25s; }
.pill:hover { background: var(--accent); color: #111; }
.pill--solid { background: var(--fx-ink); color: #111; }

@media (prefers-reduced-motion: reduce) {
  .fx-media > img, .fx-media > video { -webkit-mask: none; mask: none; opacity: 1; transition: none; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }