/* Gallery backdrop: the home mosaic's pictures drifting behind a veil.
   Shared by /success (the post-purchase welcome page, where it started) and
   /signin (owner, 2026-10-19: "so bland with so much black"; picked option D in
   early-looks/signin-backgrounds.html, with the card kept solid).

   Markup, placed once anywhere in <body>:
     <link rel="stylesheet" href="/css/gallery-backdrop.css?cb=1">
     <div class="gallery-backdrop" aria-hidden="true"><div class="gallery-backdrop-drift"></div><div class="gallery-backdrop-veil"></div></div>

   One element and one baked picture (success/gallery-v1.webp, made by
   scripts/bake_success_backdrop.py): the lab's 8 x 8 repeating tiles, already
   blurred 1.5px, so nothing is filtered at runtime. The drift is a compositor
   transform, exactly one 8-tile period (1104px) on both axes of the rotated
   grid, so the loop is seamless. Medium speed: one loop every 70s. The box is
   big enough to cover any viewport through the whole loop:
   115vmax >= 1.1144vmax (cos 7deg + sin 7deg) plus the 1104px of travel.

   Rejected for Lite effects: swapping in the Glow background. The picture is
   already a single cheap image, so Lite just holds it still (below). */

body {
  /* The sky: each theme's darkest page color (cloud has only its gradient stops;
     legacy has no variable at all). */
  --gallery-bg: var(--bg-deep, var(--bg, var(--bg-mid, #121212)));
  /* The lab's brightness(.5) per tile, as the layer's opacity over the dark sky
     (light themes: the lab's opacity(.55)). Opacity, unlike a filter, is free. */
  --gallery-tile-opacity: 0.5;
}
body[data-theme-mode="light"] { --gallery-tile-opacity: 0.55; }

.gallery-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--gallery-bg); }
.gallery-backdrop-drift {
  --size: calc(115vmax + 1160px);
  position: absolute; left: 50%; top: 50%;
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  background: url(/success/gallery-v1.webp) 0 0 / 1104px 1104px repeat;
  opacity: var(--gallery-tile-opacity);
  transform: rotate(-7deg) translate(552px, 552px);
  animation: gallery-backdrop-drift 70s linear infinite;
  will-change: transform;
}
@keyframes gallery-backdrop-drift { to { transform: rotate(-7deg) translate(-552px, -552px); } }
/* Motion: Less. Owner: "just make it slower for those". Same drift, a quarter of the speed. */
:where(:root[data-motion='less']) .gallery-backdrop-drift { animation-duration: 280s; }
/* Lite effects (header.php's data-ws-fx, set on slow devices): the same picture, held still. */
:where(:root[data-ws-fx='lite']) .gallery-backdrop-drift { animation: none; will-change: auto; }
.gallery-backdrop-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 35%,
    color-mix(in srgb, var(--gallery-bg) 70%, transparent),
    color-mix(in srgb, var(--gallery-bg) 30%, transparent) 60%,
    color-mix(in srgb, var(--gallery-bg) 85%, transparent) 100%);
}
/* The navbar's frosted glass would re-blur the moving wall every frame on mono,
   glass and cloud; over the backdrop it is a near-opaque tint instead (the same
   trade cosmic made for its animated sky, --glass-bg-opaque). */
body:has(.gallery-backdrop) > nav.navbar {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--gallery-bg) 88%, transparent);
}
/* Tailwind paints the sign-in section white, which would hide the wall. */
body:has(.gallery-backdrop) .signin-section { background: transparent; }