/* ═══════════════════════════════════════════════════════════════════════════
   BRAND TOKENS
   ═══════════════════════════════════════════════════════════════════════════
   #8B1E2D  – crimson red   (strip background – defined inside (4).svg itself)
   #F5F3EF  – warm cream    (nav text in normal/dark view)
   #0D0D0D  – near-black    (inverted text color inside cursor spotlight)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Root: full viewport, no scroll, hide system cursor ─────────────────── */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ─── Container: stacking context, locked to viewport ────────────────────── */
.container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED LAYER BASE
   ═══════════════════════════════════════════════════════════════════════════
   All layers:
     • position:absolute / inset:0  → stretch to fill the container exactly
     • background-size:cover        → CSS "slice" mode – fills without
                                      letterboxing regardless of the SVG's
                                      own preserveAspectRatio attribute
     • background-position:center   → anchor the crop to the centre
     • pointer-events:none          → let mouse events fall through to window
   ═══════════════════════════════════════════════════════════════════════════ */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ─── Z1  Dark chess-piece background ────────────────────────────────────── */
#base-layer {
  z-index: 1;
  background-image: url("public/assets/the-odd-space-bg-2.svg");
}

/* ─── Z2  White branding text + red horizontal rule (from (3).svg) ─────────
   Always fully visible, no filter, sits on top of the dark base.           */
#text-layer {
  z-index: 2;
  background-image: url("public/assets/the-odd-space-bg-3.svg");
}

/* ─── Z3  Cursor spotlight reveal group ─────────────────────────────────── */
/*
   The clip-path starts fully collapsed (zero-area) so nothing leaks through
   before the user moves the mouse. JavaScript sets the real inset rectangle
   on every mousemove/touchmove event.
   will-change:clip-path tells the GPU to optimise this property.
*/
#cursor-layer {
  z-index: 3;
  clip-path: inset(50% 50% 50% 50%);
  will-change: clip-path;
  background: none;
  /* container only – no own background */
}

/* 3a: bright/light version of the chess-piece scene – revealed by cursor */
#bright-bg {
  background-image: url("public/assets/the-odd-space-bg-1.svg");
}

/* 3b: branding text with the invertWhite filter applied
   ─────────────────────────────────────────────────────────────────────────
   The #invertWhite SVG filter (defined in HTML <svg><defs>) maps:
     white text    → near-black  (A' = R_in, so white: A'=1 → solid black)
     dark bg       → transparent (dark: A'≈0 → bright-bg shows through)
     red elements  → unchanged
     grey AA fringe→ semi-transparent black (preserves smooth anti-aliasing)

   KEY: no feComponentTransfer threshold step is used. Snapping alpha to 0/1
   turns every anti-aliased grey pixel into solid opaque black, making text
   edges look "thick / leaked / corrupted". Leaving A' = R_in keeps the
   smooth gradient of anti-aliased pixels intact → perfectly sharp text.     */
#inv-text {
  background-image: url("public/assets/the-odd-space-bg-3.svg");
  filter: url(#invertWhite);
}

/* ─── Z4  Red navigation strip from (4).svg ─────────────────────────────── */
/*
   (4).svg is a full-resolution SVG with the same viewBox (0 0 1440 810) as
   all other layers. The red strip rectangle inside it sits at y=388–422 in
   design coordinates, which is 388/810 ≈ 47.9% from the top – right in the
   vertical middle of the design.

   By loading it as background-image with background-size:cover (same as every
   other layer), it aligns pixel-perfectly with the other layers because they
   all share the same coordinate space.

   This layer is ABOVE the cursor-layer (z-index 4) and is NOT part of the
   clip-path group, so the red strip is ALWAYS fully visible – it is never
   clipped or inverted by the cursor spotlight.                              */
#strip-layer {
  z-index: 4;
  background-image: url("public/assets/the-odd-space-bg-4.svg");
  /* (4).svg is a fully transparent canvas with only the strip drawn on it –
       areas outside the strip are transparent, so all other layers show through */
}

/* ─── Mobile Responsiveness ──────────────────────────────────────────────── */
/* On smaller/portrait screens, we use a dedicated mobile PNG for the UI.
   We hide the interactive and text layers as they are formatted for 16:9 desktop. */
@media (max-width: 768px) {
    #base-layer {
        background-image: url("public/assets/the-odd-space-bg-mobile.png");
    }
    
    #text-layer,
    #cursor-layer,
    #strip-layer {
        display: none;
    }

    .layer {
        background-size: cover;
        background-position: center center;
    }
}