/* ============================================================
   KWT 3D — presentation layer for the scroll-driven medallion.
   Loaded AFTER styles.css so it can override the surface tokens.
   Nothing here touches layout, so it cannot shift the page.
   ============================================================ */

/* The 3D layer sits above the page background but below all content. */
#kwt3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;   /* never intercepts a tap on a CTA */
  opacity: 0;
  transition: opacity .7s ease;
}
#kwt3d.kwt3d-in { opacity: 1; }

/* If the GPU context is lost (mobile Chrome reclaims it on backgrounded
   tabs) hide the dead canvas rather than leaving a black hole. */
.kwt3d-lost #kwt3d { opacity: 0 !important; }

/* ------------------------------------------------------------------
   Let the medallion show through the whole page.

   styles.css paints sections with OPAQUE near-black surfaces
   (--surface-1 #141414 etc. over --bg #0A0A0A). Anything opaque would
   occlude a fixed canvas sitting behind it, so the medallion would only
   appear in a few gaps. Re-declaring the surface tokens as very low
   alpha white keeps the rendered colour almost identical over the
   #0A0A0A page while letting the 3D layer read through.
   ------------------------------------------------------------------ */
:root {
  --surface-1: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .055);
  --surface-3: rgba(255, 255, 255, .080);
}

/* The hero is dark like the rest of the page, so it keeps the inherited
   low-alpha white surfaces. (An earlier paper-hero variant scoped dark-on-
   light values here; removed with the paper canvas.) */

/* Content must stack above the canvas. These all create a stacking
   context already or are static; giving them an explicit layer is enough. */
/* Content must stack above the canvas.

   .mobile-menu is deliberately NOT in this list. It is position:fixed and
   already makes its own stacking context, and forcing it to relative put a
   715px transparent overlay into normal flow — it shoved the hero and every
   section below it off the bottom of the screen. A fixed element needs the
   z-index, not the position.

   .floating-cta and .leadcap were ACE selectors that exist in no markup or
   stylesheet here; dropped. */
header.nav,
main,
section,
footer,
.hero-content { position: relative; z-index: 1; }

header.nav { z-index: 20; }
.mobile-menu { z-index: 130; }

/* The hero owns its own background media. Rather than let the medallion be
   ghosted THROUGH the photo, slot it between the photo and the copy:
   z-index:auto stops .hero creating a stacking context, so its children order
   against the fixed canvas in the root context. The canvas is last in the DOM,
   so it lands above .hero-bg (z-index 0) and below .hero-content (z-index 2). */
/* z-index:auto is load-bearing: it stops .hero creating a stacking
   context, which is what lets the fixed canvas order BETWEEN its
   children (topo behind it, hero copy and the truck in front). */
/* Ink, not paper: the hero subject is a WHITE vehicle, which needs a dark
   ground to separate at all. This sheet loads last, so it is the one that
   decides - a .hero background set in kwt.css loses to it. */
.hero { background: var(--ink); z-index: auto; }
.hero .hero-content { position: relative; z-index: 2; }

/* Anything with a hard inline background gets the same treatment */
section[style*="--surface-1"],
section[style*="surface-1"] { background: rgba(255, 255, 255, .035) !important; }

@media (prefers-reduced-motion: reduce) {
  #kwt3d { transition: none; }
}

/* On phones the medallion competes with copy far more, so pull it back. */
@media (max-width: 820px) {
  #kwt3d { opacity: 0; }
  /* On a phone the badge lands directly behind the headline rather than
     beside it — there is no room to swing it clear — so it drops back to a
     watermark. .85 left it competing with the copy for legibility. */
  #kwt3d.kwt3d-in { opacity: .5; }
}