/* ══════════════════ FX — PROJECTS PAGE ══════════════════
   Needs fx.css (Lenis, progress bar, .fx-gl). Everything visual is gated on
   html.fx-on / html.has-gl so the page falls back to its original look. */

/* ── Full-page ambient shader backdrop ── */
.fx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.has-gl #top, .has-gl #catalog, .has-gl footer { position: relative; z-index: 1; }
.has-gl #top::before { display: none; }
/* let the backdrop read through the bands; even bands keep a translucent wash */
.has-gl #top, .has-gl .cat { background: transparent; }
.has-gl .cat:nth-child(even) { background: rgba(244, 243, 241, .62); }
.has-gl body.dark .cat:nth-child(even) { background: rgba(18, 18, 18, .55); }

/* ── Header: full-height stage ── */
html.fx-on #top {
  min-height: 88vh; min-height: 88svh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
html.fx-on #top .top-inner { width: 100%; }
/* "Projects." is ~6.5em wide in Syne 800 — 13vw keeps it inside the 20px phone gutters (318px at 375) */
html.fx-on .top-title { font-size: clamp(40px, 13vw, 214px); line-height: .95; letter-spacing: -.045em; }
.top-title, .top-desc, .top-eyebrow { will-change: transform, opacity; }

/* category jump chips */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jb); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--border); border-radius: 100px; padding: 9px 15px 9px 12px;
  cursor: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .25s, color .25s, transform .25s, background-color .25s;
}
.fx-chip b { color: var(--acc); font-weight: 600; }
.fx-chip i { font-style: normal; color: var(--muted); }
.fx-chip:hover, .fx-chip.on { border-color: var(--acc); transform: translateY(-2px); }
.fx-chip.on { background: var(--acc); color: #fff; }
.fx-chip.on b, .fx-chip.on i { color: rgba(255,255,255,.8); }

/* ── Category bands ── */
.cat { position: relative; overflow: hidden; }
.cat-inner { position: relative; z-index: 1; }
.fx-ghost {
  position: absolute; left: 0; top: 50%; z-index: 0; pointer-events: none;
  white-space: nowrap; font-family: var(--sy); font-weight: 800;
  font-size: clamp(120px, 22vw, 360px); line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--acc-mid); opacity: .7;
  transform: translateY(-50%); will-change: transform;
}
body.dark .fx-ghost { -webkit-text-stroke-color: rgba(129,140,248,.2); }

/* masked char rise for category names */
.fx-line { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: bottom; }
.fx-ch { display: inline-block; will-change: transform; }

/* ── Niche cards: cursor spotlight + tilt ── */
html.fx-on .niche { transform-style: preserve-3d; }
html.fx-on .niche::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(79,70,229,.13), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
html.fx-on .niche > * { position: relative; z-index: 1; }
html.fx-on .niche:hover::after { opacity: 1; }
html.fx-on .niche:hover {
  transform: translateY(-4px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
/* while GSAP drives the entrance, CSS transitions would smear every frame */
.fx-intro, .fx-intro * { transition: none !important; }

/* ══ SPACING / COMPATIBILITY FIXES ══ */
/* 769–820px: the original ≤820 rules make .nav-links a full-width row but don't reorder,
   so the nav stacked logo / links / CTA on three rows. Match the ≤768 layout:
   logo + CTA on top, links underneath. */
@media (min-width: 769px) and (max-width: 820px) {
  .nav-logo { order: 1; }
  .nav-cta { order: 2; margin-left: auto; }
  .nav-links { order: 3; }
}

/* tablets: one 760px-wide card per row read as a list of banners */
@media (min-width: 601px) and (max-width: 820px) {
  .niche-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
}
/* phones: header + bands used 22px gutters, nav + footer 20px */
@media (max-width: 768px) {
  #top { padding-left: 20px !important; padding-right: 20px !important; }
  .cat { padding-left: 20px !important; padding-right: 20px !important; }
  html.fx-on #top { min-height: 0; padding-top: 150px !important; }
  .cat-head { margin-bottom: 28px; }
  .fx-chips { margin-top: 26px; gap: 6px; }
  .fx-chip { padding: 8px 12px 8px 10px; font-size: 9px; }
}
@media (max-width: 600px) {
  .cat { padding-top: 56px; padding-bottom: 56px; }
  .cat-headline { gap: 10px 14px; }
  .cat-blurb { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-ghost { transform: translateY(-50%) !important; }
}