/* Word Safari landing: the page backdrop behind every section BELOW the hero.
   A blurred wash of the hero painting, three drifting clouds, and a legibility
   scrim. A tiny rAF scroll handler (scene.js) gives it depth parallax.

   This file used to hold a whole hand-authored flat SVG savanna: a gradient
   sky, a sun, three bands of vector hills, acacia trees, a watering hole with
   a turtle, a zebra family, bushes, butterflies, a branch with the brand
   parrot, and foreground grass. All of it went on 2026-08-10, when the hero
   became real painted art. The flat scene had been drawn in a completely
   different visual language from the 3D characters standing on it, and it
   drew a cartoon horizon across the bottom of every section on the page.
   The hero's own art now lives in styles.css (.hero-scene), which is where
   to add anything scene-like; this file is deliberately just atmosphere.

   Structure:
   - .scene is ONE fixed full-viewport box, z-index 0, sitting behind the
     real page content (.site-header/main/.site-footer are given z-index 2
     in styles.css so they always paint above it).
   - .scene-far holds the calm, slow-moving atmosphere, visible for the
     entire page, at every scroll depth and viewport.
   - .scrim is a fixed gradient veil (light at the top, a little heavier by
     the bottom of the CURRENT viewport) that keeps text legible over the
     scene at every scroll depth; it is calibrated against the viewport
     (position: fixed), not the document, so it reads the same near the top
     of a short viewport or a tall one.

   Every [data-speed] element gets ONLY a JS-set translate3d (scene.js) for
   scroll parallax; every ambient loop below targets a CHILD of that element
   instead, so the two transforms never collide on one node. */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene-far {
  position: absolute;
  inset: 0;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ---- the page backdrop (scene-far) -------------------------------------
   The same painting the hero uses, turned into atmosphere. Three numbers do
   that job and they are balanced against each other, so change them as a set:

   - blur(34px) destroys every readable shape, which is the point. Below about
     24px the acacias resolve into recognisable trees and the page looks like
     it is showing the hero image twice.
   - saturate(.5) brightness(1.18) lifts it towards the page's cream so body
     text keeps its contrast; the painting at full strength is far too dark
     and saturated to put paragraphs on.
   - opacity .5 then blends the whole thing into --bg underneath.

   A blurred element still samples pixels from OUTSIDE its own box, so this is
   scaled slightly past the viewport (inset: -6%) to stop the blur pulling in
   transparent edges and drawing a pale vignette down all four sides. */
.wash-photo {
  z-index: 1;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(34px) saturate(0.5) brightness(1.18);
  opacity: 0.5;
}

/* ---- clouds (scene-far) ------------------------------------------------ */
.clouds {
  z-index: 3;
}

.cloud {
  position: absolute;
  animation: pxs-cloud-drift 60s ease-in-out infinite alternate;
}

.cloud-a {
  top: 9%;
  left: 6%;
  width: clamp(100px, 17vw, 210px);
  animation-duration: 70s;
}

.cloud-b {
  top: 20%;
  left: 54%;
  width: clamp(75px, 13vw, 160px);
  animation-duration: 54s;
  animation-delay: -12s;
}

.cloud-c {
  top: 7%;
  left: 80%;
  width: clamp(60px, 11vw, 130px);
  animation-duration: 64s;
  animation-delay: -30s;
}

@keyframes pxs-cloud-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(4.5vw, 0, 0);
  }
}

/* ============================================================== SCRIM == */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 248, 0.3) 0%,
    rgba(255, 253, 248, 0.45) 30%,
    rgba(255, 253, 248, 0.62) 62%,
    rgba(255, 253, 248, 0.74) 100%
  );
}

/* ==================================================== REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .cloud {
    animation: none !important;
  }
}