/* Moonsnipe · TERMINAL — shared look for every website page (loaded after each page's own styles)
   Dense, precise, hairlines, mono display type, cream accent. Motion lives in ms-fx.js and respects reduced motion. */
:root { --t-bg: #0A0808; --t-card: rgba(14,11,11,.92); --t-hair: rgba(255,255,255,.085); --t-hair2: rgba(217,195,168,.32);
  --t-cream: #F2F4F3; --t-acc: #D9C3A8; --t-mut: #9C8F84; --t-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }

/* the grid, drifting slowly, with a soft light that follows the cursor */
body { background: var(--t-bg) !important; }
body::before { content: ""; position: fixed; inset: -48px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 48px 48px; animation: ms-grid 40s linear infinite; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 380px at var(--mx, 50%) var(--my, 0%), rgba(217,195,168,.07), transparent 70%),
              radial-gradient(1000px 520px at 50% -12%, rgba(98,24,40,.42), transparent 66%); }
@keyframes ms-grid { to { transform: translate(48px, 48px); } }

/* type */
h1, h2, .t-display { font-family: var(--t-mono) !important; letter-spacing: -.04em !important; }
.chrome { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--t-acc) !important; -webkit-text-fill-color: var(--t-acc); }
.eyebrow, .pill, .works, .kicker { font-family: var(--t-mono) !important; }
.eyebrow::before { content: "> "; color: var(--t-mut); }

/* surfaces: tight radius, hairline, a light that follows the cursor on the border */
.tile, .fl, .f, .lv, .ba .col, .t-card { border-radius: 8px !important; border: 1px solid var(--t-hair) !important; background: var(--t-card) !important; position: relative; isolation: isolate; }
.tile::before, .fl::before, .f::before, .lv::before, .ba .col::before, .t-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px 200px at var(--cx, 50%) var(--cy, 50%), rgba(217,195,168,.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tile:hover::before, .fl:hover::before, .f:hover::before, .lv:hover::before, .ba .col:hover::before, .t-card:hover::before { opacity: 1; }
.f:hover, .lv:hover { transform: translateY(-2px) !important; }

/* buttons: square-ish, with a light sweep */
.btn { border-radius: 6px !important; position: relative; overflow: hidden; }
.b-ink::after, .b-y::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); }
.b-ink:hover::after, .b-y:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.b-out { font-family: var(--t-mono) !important; font-size: 13.5px !important; }

/* reveal: a quick scan from left with a cream line passing over */
.rv { opacity: 0; transform: none !important; transition: none !important; }   /* (no clip-path while hidden: it would stop the scroll observer from seeing it) */
.rv.in { opacity: 1; animation: ms-reveal .75s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes ms-reveal { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.rv.in.scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: var(--t-acc); box-shadow: 0 0 14px var(--t-acc); animation: ms-scan .75s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both; pointer-events: none; }
@keyframes ms-scan { from { left: 0; opacity: 1; } to { left: 100%; opacity: 0; } }

/* typed headline + caret */
.t-caret { display: inline-block; width: .5em; height: .95em; margin-left: .06em; vertical-align: -.08em; background: var(--t-acc); animation: ms-blink 1s steps(1) infinite; }
@keyframes ms-blink { 50% { opacity: 0; } }
.t-typing .t-ch { opacity: 0; } .t-typing .t-ch.on { opacity: 1; }

/* ticker under the nav */
.t-ticker { position: relative; overflow: hidden; border-bottom: 1px solid var(--t-hair); background: rgba(10,8,8,.7); font: 500 11.5px var(--t-mono); color: var(--t-mut); white-space: nowrap; }
.t-ticker .t-lab { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 14px; background: linear-gradient(90deg, #0A0808 80%, transparent); color: var(--t-acc); letter-spacing: .14em; }
.t-ticker .t-run { display: inline-flex; gap: 40px; padding: 9px 40px 9px 130px; animation: ms-tick 60s linear infinite; }
.t-ticker .t-run > span { flex: none; }
.t-ticker:hover .t-run { animation-play-state: paused; }
.t-ticker b { color: var(--t-cream); font-weight: 600; } .t-ticker .g { color: #4ADE80; } .t-ticker .r { color: #F87171; } .t-ticker .c { color: #38D9F5; }
@keyframes ms-tick { to { transform: translateX(-50%); } }

/* small live dot */
.t-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 8px #4ADE80; animation: ms-pulse 1.6s ease-in-out infinite; vertical-align: 1px; }
@keyframes ms-pulse { 50% { opacity: .35; box-shadow: 0 0 2px #4ADE80; } }

@media (prefers-reduced-motion: reduce) {
  body::before, .t-ticker .t-run, .t-caret, .t-live { animation: none !important; }
  .rv, .rv.in { opacity: 1 !important; animation: none !important; }
  .rv.in.scan::after { display: none; }
  .t-typing .t-ch { opacity: 1 !important; }
  .t-ticker .t-run { transform: none; }
}