/* ============================================================================
   Mensch site chrome — shared across Home / Studio / Manifesto (and reusable
   by ai/about). Fonts, tokens, helpers, and the nav / INFO / footer styling.
   The nav, INFO panel, footer and cursor markup are injected by web-chrome.js.
   ============================================================================ */

/* ---- Fonts (self-hosted, no third-party requests) ---- */
@font-face { font-family:'Greed Narrow'; src:url('assets/fonts/GreedNarrow-SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Greed Narrow'; src:url('assets/fonts/GreedNarrow-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('assets/fonts/BeVietnamPro-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('assets/fonts/BeVietnamPro-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('assets/fonts/BeVietnamPro-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('assets/fonts/BeVietnamPro-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('assets/fonts/BeVietnamPro-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'UnifrakturCook'; src:url('assets/fonts/UnifrakturCook-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --color-primary-500: #fb3f0c;   /* Brand Orange */
  --color-primary-400: #fd6a3d;
  --lime: #BBEE2F;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; }
body { font-family: 'Be Vietnam Pro', sans-serif; -webkit-font-smoothing: antialiased; color: #fff; }
a { color: var(--color-primary-500); }
a:hover { color: var(--color-primary-400); }
::selection { background: var(--color-primary-500); color: #000; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #FB3F0C; outline-offset: 2px; }

@keyframes lab-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes lab-static { 0% { background-position: 0 0; } 10% { background-position: -13% 7%; } 20% { background-position: 9% -11%; } 30% { background-position: -7% -18%; } 40% { background-position: 16% 4%; } 50% { background-position: -11% 12%; } 60% { background-position: 6% -6%; } 70% { background-position: -15% -3%; } 80% { background-position: 12% 15%; } 90% { background-position: -4% -9%; } 100% { background-position: 0 0; } }
@keyframes lab-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes reach-out-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,63,12,.4); } 50% { transform: scale(1.035); box-shadow: 0 0 0 8px rgba(251,63,12,0); } }

/* ---- Lenis smooth scroll (self-hosted; behaviour added by web-chrome.js) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- smooth cross-document page transitions (no hard reload flash) ----
   Native MPA View Transitions: the browser snapshots the old page and animates
   to the new one. Falls back to a normal navigation where unsupported. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mensch-vt-out .42s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: mensch-vt-in .46s cubic-bezier(.4,0,.2,1) both; }
@keyframes mensch-vt-out { to { opacity: 0; transform: scale(.992) translateY(-8px); } }
@keyframes mensch-vt-in { from { opacity: 0; transform: scale(1.012) translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.uf { font-family: 'UnifrakturCook', serif; font-weight: 700; }
.lab-mark-white path { fill: #fff; }

/* ---- nav + info chrome (markup injected by web-chrome.js) ---- */
/* base glass for the header controls (moved out of inline styles so the open/hover
   state can override it without an !important fight) */
#nav-pill, #info-btn { background: rgba(0,0,0,.15); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.nav-on-light#nav-pill, .nav-on-light#info-btn { border-color: #000 !important; }
/* hover AND open share one treatment: rich dark glass over a heavy blur. A white tint
   washed out over the light sky hero, so it's dark-on-blur instead. INFO matches the nav. */
#nav-pill:hover, #nav-pill.nav-open, #info-btn:hover, #info-btn.info-open {
  background-color: rgba(0,0,0,.55) !important;
  border-color: #fff !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}
/* the INFO dropdown itself — glass instead of solid black */
#info-panel { background: rgba(0,0,0,.55) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }
/* nav wordmark always links home */
#nav-home-link { display: block; line-height: 0; }
.nav-link { transition: color .15s ease; }
.nav-link:hover { color: #FB3F0C !important; }
.nav-link.current { color: #FB3F0C !important; }

/* ---- section-2 client logo ticker ---- */
.marquee-track { display: inline-flex; align-items: center; gap: 54px; white-space: nowrap; animation: lab-marquee 30s linear infinite; will-change: transform; }
.marquee-track img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .9; flex: none; }

/* Content that overflows horizontally (marquees, sliders) must not widen the initial
   containing block — otherwise fixed elements anchored with `right:` get pushed
   off-screen on mobile. `clip` (not `hidden`) avoids making <html> a scroll
   container, so position:sticky keeps working. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ---- footer (definition + links, interactive wordmark, animated soil bg) ---- */
#site-footer { position: relative; overflow: hidden; isolation: isolate; background: #2A0800; }
/* the drag-gradient soil canvas fills the footer, behind the content (#2A0800 shows if WebGL is off) */
#footer-soil { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#site-footer .foot-top, #site-footer #footer-wordmark-wrap { position: relative; z-index: 1; }
/* definition pushed further left, links further right — wider than the page gutter */
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 40px; padding: 24px 20px 8px; }
.foot-def { font-family: 'Greed Narrow', sans-serif; font-size: 14px; line-height: 1.4; letter-spacing: .01em; color: #fff; }
.foot-def em { font-family: 'Be Vietnam Pro', sans-serif; font-style: italic; color: rgba(235,233,217,.6); }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { font-family: 'Greed Narrow', sans-serif; font-size: 14px; color: rgba(255,255,255,.72); text-decoration: none; transition: color .15s ease; }
.foot-links a:hover { color: #FB3F0C; }
#footer-wordmark-wrap { width: 100%; padding: 6px 0 0; margin-bottom: -1vw; line-height: 0; }
#footer-wordmark-wrap svg { display: block; width: 102%; margin-left: -1%; height: auto; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 767px) {
  [data-nav-wrap] { left: 12px !important; top: 20px !important; width: auto !important; max-width: calc(100vw - 130px) !important; }
  [data-info-wrap] { right: 12px !important; top: 20px !important; }
  #info-btn { height: 48px !important; }
  #info-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; bottom: 16px !important; }

  .foot-top { padding: 18px 20px 6px; gap: 10px 20px; }
  .foot-links a { font-size: 12px; }
  .foot-links { gap: 14px 18px; }
  #footer-wordmark-wrap { padding: 6px 0 0; margin-bottom: -2vw; }
  #footer-wordmark-wrap svg { width: 106%; margin-left: -3%; }
}