/* ============================================================
   ACE 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. */
#ace3d {
  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;
}
#ace3d.ace3d-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. */
.ace3d-lost #ace3d { 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);
}

/* Content must stack above the canvas. These all create a stacking
   context already or are static; giving them an explicit layer is enough. */
header.nav,
.mobile-menu,
main,
section,
footer,
.hero-content,
.floating-cta,
.leadcap { position: relative; z-index: 1; }

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

/* 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). */
.hero { background: transparent; z-index: auto; }
.hero .hero-bg { z-index: 0; opacity: .5; }
.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) {
  #ace3d { transition: none; }
}

/* On phones the medallion competes with copy far more, so pull it back. */
@media (max-width: 820px) {
  #ace3d { opacity: 0; }
  #ace3d.ace3d-in { opacity: .85; }
  .hero .hero-bg { opacity: .65; }
}