/* ============================================================================
 *  scenery.css — TEN ATMOSPHERES, AND THE GLASS THAT SITS ON THEM
 *  ---------------------------------------------------------------------------
 *  The ground is off-white. This layer is what stops that being flat: ten
 *  compositions of soft colour fields, one on screen at a time, swapped every
 *  30 seconds by src/scenes/scenery.js.
 *
 *  WHY GRADIENTS AND NOT IMAGES. Ten photographs would be several megabytes
 *  and would date instantly; ten gradient compositions are a few hundred bytes
 *  of CSS, are sharp at any size, and can be parallaxed per-layer because each
 *  one is a real element rather than a baked pixel. It is the same decision
 *  the rest of the site already makes.
 *
 *  EVERY SCENE HAS THREE DEPTHS — `.far`, `.mid`, `.near`. They move by
 *  different fractions of the pointer offset (set as `--px`/`--py` on the
 *  container by the script), which is what makes it read as depth rather than
 *  as one sheet sliding about.
 *
 *  THEY STAY QUIET ON PURPOSE. The type on this page is near-black on
 *  `--field` and it must keep clearing AA no matter which of the ten is up, so
 *  no scene is allowed to get dark or saturated enough to threaten it. The
 *  whole layer is capped at low opacity and sits behind a paper wash.
 * ========================================================================== */

.scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* the pointer offset, written by scenery.js; the layers read it */
  --px: 0;
  --py: 0;
}

/* The home keeps its original composition and glass surfaces, but the colour
   atmospheres are retired. The canvas is the flat paper token underneath. */
.scenery { display: none; }

/* A WASH OF THE PAGE'S OWN GROUND SITS ON TOP OF THE WHOLE LAYER. Without it
   the scenes tint the paper and the ink starts fighting them; with it they
   read as weather behind the page instead of as the page's colour. */
.scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--field);
  opacity: 0.58;
}

.scenery__scene {
  position: absolute;
  inset: -12%;
  opacity: 0;
  transition: opacity 2600ms linear;
  will-change: opacity;
}
.scenery__scene.is-on { opacity: 1; }

/* ---- the three depths ---------------------------------------------------- */
.scenery__scene > i {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* the far plane barely registers the pointer; the near plane moves most */
.scenery__scene > .far  { transform: translate3d(calc(var(--px) * 6px),  calc(var(--py) * 4px),  0); }
.scenery__scene > .mid  { transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 11px), 0); }
.scenery__scene > .near { transform: translate3d(calc(var(--px) * 32px), calc(var(--py) * 22px), 0); }

/* Each plane also drifts on its own slow clock, so the scene is never
   completely still even when the pointer is. */
.scenery__scene > .mid  { animation: scenery-drift-a 41s ease-in-out infinite; }
.scenery__scene > .near { animation: scenery-drift-b 57s ease-in-out infinite; }

/* ============================================================================
 *  THE TEN
 *  Each is three stacked radial fields. `far` is the sky, `mid` is the mass,
 *  `near` is the light in front of it.
 * ========================================================================== */
[data-scene="dawn"]    > .far  { background: radial-gradient(120% 80% at 50% 105%, #f3c9a4, transparent 62%); }
[data-scene="dawn"]    > .mid  { background: radial-gradient(70% 55% at 22% 78%, #e3a3ac, transparent 60%); }
[data-scene="dawn"]    > .near { background: radial-gradient(60% 40% at 78% 88%, #f6dcae, transparent 58%); }

[data-scene="harbour"] > .far  { background: radial-gradient(120% 85% at 50% 8%, #a9c6dd, transparent 64%); }
[data-scene="harbour"] > .mid  { background: radial-gradient(80% 50% at 76% 82%, #7fa7bf, transparent 60%); }
[data-scene="harbour"] > .near { background: radial-gradient(55% 38% at 18% 74%, #cfe0e8, transparent 58%); }

[data-scene="desert"]  > .far  { background: radial-gradient(120% 80% at 50% 96%, #e6c79a, transparent 62%); }
[data-scene="desert"]  > .mid  { background: radial-gradient(85% 45% at 30% 84%, #cf9f74, transparent 58%); }
[data-scene="desert"]  > .near { background: radial-gradient(50% 34% at 82% 22%, #f4e2c2, transparent 56%); }

[data-scene="rain"]    > .far  { background: radial-gradient(120% 90% at 50% 12%, #b6bcc4, transparent 66%); }
[data-scene="rain"]    > .mid  { background: radial-gradient(75% 50% at 24% 70%, #93a0ad, transparent 60%); }
[data-scene="rain"]    > .near { background: radial-gradient(60% 40% at 80% 90%, #d3d9de, transparent 58%); }

[data-scene="pine"]    > .far  { background: radial-gradient(120% 80% at 50% 100%, #a8c0a4, transparent 62%); }
[data-scene="pine"]    > .mid  { background: radial-gradient(70% 55% at 76% 80%, #6f8f72, transparent 58%); }
[data-scene="pine"]    > .near { background: radial-gradient(55% 38% at 20% 24%, #dbe7cf, transparent 58%); }

[data-scene="dusk"]    > .far  { background: radial-gradient(120% 85% at 50% 104%, #d8a0b4, transparent 62%); }
[data-scene="dusk"]    > .mid  { background: radial-gradient(80% 55% at 26% 86%, #9b8ec2, transparent 60%); }
[data-scene="dusk"]    > .near { background: radial-gradient(52% 36% at 80% 18%, #f0cfb9, transparent 56%); }

[data-scene="salt"]    > .far  { background: radial-gradient(120% 80% at 50% 10%, #cddbe2, transparent 64%); }
[data-scene="salt"]    > .mid  { background: radial-gradient(85% 48% at 68% 88%, #b9cbc6, transparent 60%); }
[data-scene="salt"]    > .near { background: radial-gradient(55% 38% at 16% 80%, #eee7d6, transparent 58%); }

[data-scene="aurora"]  > .far  { background: radial-gradient(120% 85% at 50% 6%, #a9d0c6, transparent 64%); }
[data-scene="aurora"]  > .mid  { background: radial-gradient(72% 58% at 30% 20%, #8fb6d4, transparent 60%); }
[data-scene="aurora"]  > .near { background: radial-gradient(58% 40% at 78% 84%, #c9b9dd, transparent 58%); }

[data-scene="canyon"]  > .far  { background: radial-gradient(120% 80% at 50% 98%, #dfae94, transparent 62%); }
[data-scene="canyon"]  > .mid  { background: radial-gradient(78% 52% at 74% 84%, #b87f6b, transparent 58%); }
[data-scene="canyon"]  > .near { background: radial-gradient(52% 36% at 22% 20%, #f2d9c0, transparent 56%); }

[data-scene="snow"]    > .far  { background: radial-gradient(120% 85% at 50% 14%, #ccd6e0, transparent 66%); }
[data-scene="snow"]    > .mid  { background: radial-gradient(80% 50% at 22% 84%, #aebccb, transparent 60%); }
[data-scene="snow"]    > .near { background: radial-gradient(56% 38% at 80% 76%, #eef2f6, transparent 58%); }

@keyframes scenery-drift-a {
  0%, 100% { translate: 0 0; }
  50%      { translate: 2.2% -1.6%; }
}
@keyframes scenery-drift-b {
  0%, 100% { translate: 0 0; }
  50%      { translate: -2.6% 1.8%; }
}

/* ============================================================================
 *  LIQUID GLASS
 *  The nav and the record pills sit ON the scenery, so they are the one place
 *  the page can legitimately be glass: a real backdrop blur, a saturation lift
 *  so the colour behind them stays alive rather than going grey, a bright top
 *  edge and a soft drop. Because the scene behind them changes every 30s, they
 *  change with it — which is the whole reason to use glass here rather than a
 *  flat panel.
 * ========================================================================== */
.glass {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--field-raised) 72%, transparent),
    color-mix(in srgb, var(--field-raised) 46%, transparent)
  );
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
    0 8px 26px color-mix(in srgb, var(--ink) 10%, transparent);
}

/* the bar is glass too, but only a strip of it */
.chrome {
  border-radius: 999px;
  padding-inline: clamp(10px, 1.6vw, 20px);
}