/* ============================================================
   Floppy Wave Co. — collage wallpaper
   Fixed, full-bleed, pinned during scroll.
   Two crops: the panorama on landscape, a portrait cut centred
   on the fishey for phones — a 2.5:1 image on a phone screen
   otherwise shows an 18% slice of itself.
   position:fixed does the pinning, NOT background-attachment,
   which is broken on iOS Safari.
   ============================================================ */

.fw-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#0B0B0E;
}

.fw-bg__art{
  position:absolute;
  inset:0;
  /* Both extensions listed — browsers skip whichever 404s, so this
     works whether the file downloaded as .jpg or .jpeg. */
  background-image:url("floppy-wall-wide.jpg"),url("floppy-wall-wide.jpeg");
  background-size:cover,cover;
  background-position:center center,center center;
  background-repeat:no-repeat,no-repeat;
  opacity:.80;
}

/* Portrait screens get the fishey crop. */
@media (max-aspect-ratio:1/1){
  .fw-bg__art{
    background-image:url("floppy-wall-tall.jpg"),url("floppy-wall-tall.jpeg");
    background-position:38% center,38% center;
    opacity:.62;
  }
}

/* --- legibility scrim ---------------------------------------
   The collage is busy and bright through the middle. This keeps
   the lockup and body copy readable without flattening the art. */
.fw-bg__scrim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(52% 40% at 50% 34%, rgba(11,11,14,.90), rgba(11,11,14,.52) 58%, rgba(11,11,14,.10) 82%),
    radial-gradient(70% 50% at 50% 38%, rgba(225,29,46,.10), transparent 72%),
    linear-gradient(180deg, rgba(11,11,14,.74) 0%, rgba(11,11,14,.22) 24%, rgba(11,11,14,.30) 66%, rgba(11,11,14,.82) 100%);
}

@media (max-aspect-ratio:1/1){
  .fw-bg__scrim{
    background:
      radial-gradient(70% 34% at 50% 30%, rgba(11,11,14,.93), rgba(11,11,14,.62) 60%, rgba(11,11,14,.24) 84%),
      linear-gradient(180deg, rgba(11,11,14,.82) 0%, rgba(11,11,14,.38) 26%, rgba(11,11,14,.44) 64%, rgba(11,11,14,.88) 100%);
  }
}