/* RawFit — physical bumper-plate layer (PLATES agent).
   #plates-layer: fixed full-viewport overlay holding one <canvas>. It never takes pointer
   events (pushes are read from window-level listeners in js/plates.js).
   z-index 30: above page content and the hero internals, below the glass header/dock pills (900)
   and the skip link (1000). */
.plates-layer{
  position:fixed;inset:0;z-index:30;
  pointer-events:none;
  contain:strict;
  visibility:hidden;
}
.plates-layer.is-live{visibility:visible}
.plates-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The floor the plates get dumped on (light theme). No box: the section is the page background,
   with a soft white/ice ground plane below a faint blue horizon sheen, and a gentle blue ambient
   glow under the pile that wakes up when the floor scrolls in. Everything fades back to the page
   colour at the edges and at the bottom, so it meets the (light) footer without a seam.
   --plates-ground is the ground line (fraction of the floor height); js/plates.js reads it. */
.plates-floor{
  --plates-ground:78%;
  position:relative;
  height:clamp(340px,50svh,520px);
  overflow:hidden;
  pointer-events:none;
  background:transparent;   /* let the page's ambient background run through: no box, no seam */
  isolation:isolate;
}
.plates-floor::before{ /* ground plane: horizon sheen + hairline, ice floor brightening toward the viewer */
  content:"";position:absolute;left:0;right:0;bottom:0;top:calc(var(--plates-ground) - 46px);
  background:
    /* blue horizon hairline at the ground line */
    linear-gradient(90deg,rgba(31,91,255,0) 8%,rgba(31,91,255,.10) 30%,rgba(59,130,246,.16) 50%,rgba(31,91,255,.10) 70%,rgba(31,91,255,0) 92%) 0 46px/100% 1px no-repeat,
    /* faint sky sheen just above the horizon */
    radial-gradient(48% 46px at 50% 46px,rgba(56,189,248,.10),rgba(56,189,248,0) 100%) 0 0/100% 47px no-repeat,
    /* the floor itself: a white plane with an ice cast that fades out sideways and toward the bottom */
    radial-gradient(60% 100% at 50% 46px,rgba(255,255,255,.95),rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 100%) 0 46px/100% calc(100% - 46px) no-repeat,
    linear-gradient(180deg,rgba(232,240,255,0) 46px,rgba(232,240,255,.55) 60px,rgba(232,240,255,.25) 60%,rgba(232,240,255,0) 100%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.plates-floor::after{ /* soft blue ambient glow under the pile */
  content:"";position:absolute;left:50%;top:var(--plates-ground);z-index:-1;
  width:min(1000px,100%);height:clamp(170px,26svh,260px);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(59,130,246,.16),rgba(56,189,248,.07) 52%,rgba(56,189,248,0));
  opacity:0;transition:opacity 1.6s ease;
}
.plates-floor.is-active::after{opacity:1}
@media (max-width:760px){
  .plates-floor{height:360px;--plates-ground:74%}
}

/* Reduced motion: no simulation, a tidy static stack drawn into the floor section. */
.plates-static{position:absolute;left:50%;transform:translateX(-50%);display:block;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .plates-layer{display:none}
  .plates-floor::after{transition:none}
}