/* ------------------------------------------------------------- */
/* Card Scene                                                    
/*    perspective + preserve-3d only drive the card TILT now.    
/*    Layer depth is handled separately via 2D translation offsets. 
*/
.games-section .card-scene {
  perspective: 800px;
  width: 20rem;
  height: 26.6rem;
}

/* ------------------------------------------------------------- */
/* Card Shell                                                    
/*    Rotates as a whole. overflow:hidden clips all layers cleanly.
/*    No preserve-3d needed — layers are all flat inside this.     
*/
.games-section .card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition: transform 0.12s ease-out;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* ------------------------------------------------------------- */
/* Layers                                                    
    All layers are slightly OVERSIZED (110%) so that when they
    slide around on tilt, no gaps appear at the card edges.
    translateX/Y are driven by JS via CSS custom properties.

    Depth factor controls how much each layer moves:
      --depth: 0.0  →  background  (barely moves)
      --depth: 0.5  →  midground   (moves moderately)
      --depth: 1.0  →  foreground  (moves the most)

    The actual offset = tilt angle * depth * scale constant.    
*/
.games-section .layer {
  position: absolute;
  /* center the oversized layer so it clips symmetrically */
  inset: calc(var(--oversize, 0%) * -1);
  width: calc(100% + var(--oversize, 0%) * 2);
  height: calc(100% + var(--oversize, 0%) * 2);
  
  display: flex;
  align-items: center;
  justify-content: center;

  /* each layer slides by its own depth factor */
  transform:
    translateX(calc(var(--offset-x, 0px) * var(--depth, 0)))
    translateY(calc(var(--offset-y, 0px) * var(--depth, 0)));

  transition: transform 0.12s ease-out;
  
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.games-section .layer-bg  { --depth: -1.0; --oversize: 13%; }
.games-section .layer-mid { --depth: -0.5; --oversize: 5%; }
.games-section .layer-fg  { --depth: 0.0; --oversize: 0%; }