/* ============================================================
   URBAN GLIDE — V3 backdrop
   Dub.co-style structural hairlines + near-invisible dot grid.
   Loaded after main-v2.css; touches only background layers.
   ============================================================ */

:root{
  --grid-line:   rgba(10,11,13,0.055);
  --grid-line-2: rgba(10,11,13,0.085);
  --grid-dot:        rgba(10,11,13,0.05);
  --grid-dot-light:  rgba(255,255,255,0.05);
  --grid-step:       14px;
  --grid-spot-r:     280px;
}

/* Dot grid scoped to Audiences and Leadership sections.
   Constrained horizontally to the 1280px column so it never spills past the rails.
   ::before paints the dots; ::after paints the hover spotlight that fades to canvas. */
#audiences,
#team{
  position: relative;
  isolation: isolate;
}
#audiences::before,
#team::before,
#audiences::after,
#team::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left:  max(0px, calc((100% - var(--max-w))/2));
  right: max(0px, calc((100% - var(--max-w))/2));
  pointer-events: none;
  z-index: 0;
}
#audiences::before,
#team::before{
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px);
  background-size: var(--grid-step) var(--grid-step);
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
#audiences::after,
#team::after{
  background: radial-gradient(circle var(--grid-spot-r) at var(--mx, 50%) var(--my, 50%),
    var(--canvas) 0%,
    var(--canvas) 10%,
    rgba(255,255,255,0) 82%);
  opacity: var(--grid-spot, 0);
  transition: opacity 320ms ease;
  will-change: background, opacity;
}
#audiences > *,
#team > *{ position: relative; z-index: 1; }

/* Dark section (.x-depot): fill the whole dark area with the dot grid.
   main.css:744 originally used .x-depot::before for an inset green glow — we move
   that glow onto the element itself so both ::before and ::after are free here. */
.x-depot{
  isolation: isolate;
  box-shadow: inset 0 0 160px rgba(168,192,56,0.07);
}
.x-depot > *{ position: relative; z-index: 1; }
.x-depot::before,
.x-depot::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow: none; /* override the inset-glow rule on .x-depot::before */
}
.x-depot::before{
  background-image: radial-gradient(var(--grid-dot-light) 1px, transparent 1.4px);
  background-size: var(--grid-step) var(--grid-step);
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.x-depot::after{
  background: radial-gradient(circle var(--grid-spot-r) at var(--mx, 50%) var(--my, 50%),
    var(--obsidian) 0%,
    var(--obsidian) 10%,
    rgba(10,11,13,0) 82%);
  opacity: var(--grid-spot, 0);
  transition: opacity 320ms ease;
  will-change: background, opacity;
}

/* Layer 2 — vertical column rails at the 1280px column edges.
   Fixed, full-height, behind content, with soft top/bottom fade. */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      transparent calc(50% - var(--max-w)/2 - 0.5px),
      var(--grid-line-2) calc(50% - var(--max-w)/2 - 0.5px),
      var(--grid-line-2) calc(50% - var(--max-w)/2 + 0.5px),
      transparent calc(50% - var(--max-w)/2 + 0.5px),
      transparent calc(50% + var(--max-w)/2 - 0.5px),
      var(--grid-line-2) calc(50% + var(--max-w)/2 - 0.5px),
      var(--grid-line-2) calc(50% + var(--max-w)/2 + 0.5px),
      transparent calc(50% + var(--max-w)/2 + 0.5px));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 calc(100% - 160px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 calc(100% - 160px), transparent 100%);
}
@media (max-width: 1360px){
  html::before{ display: none; }
}

/* Layer 3 — horizontal hairlines between sections.
   Matches existing .section + .section specificity (main.css:165) and beats it by load order.
   Softer than v2's --hairline-l (0.16) for the premium feel. */
.section + .section{
  border-top: 1px solid var(--grid-line);
}
.section + .section.dark,
.section.x-hero + .section{
  border-top-color: var(--hairline-dd);
}

/* Fix iOS Safari bug: body { overflow-x: hidden; position: relative }
   together break position:fixed — fixed nav/progress scroll with content.
   overflow-x: clip clips without creating a scroll container; static
   position on body avoids the broken containing-block path. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  position: static;
}

/* Force fixed elements onto their own GPU layer so iOS Safari composites
   them independently of the scroll layer — fixes lag/displacement during
   momentum scroll where fixed nav appears to drift below viewport top. */
.x-nav, .x-progress {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* ─── Mobile nav: always-solid white (v3) ──────────────────── */
@media (max-width: 720px) {
  .x-nav {
    background: #fff;
    border-bottom-color: var(--hairline-l);
    backdrop-filter: none;
  }
  .x-nav .x-nav-logo img,
  .x-nav.scrolled .x-nav-logo img { filter: none; }
  .x-nav .btn-ghost { color: var(--ink); border-color: var(--hairline-l); }
  .x-nav .btn-ghost:hover { border-color: var(--ink); }
  .x-nav .x-nav-region { color: var(--mute); border-color: var(--hairline-l); }
}

html { scroll-padding-top: 64px; }