/* ============================================================================
 * pixel-life.css — INDEPENDENT LIVING WORLD SPRITES
 * ---------------------------------------------------------------------------
 * These are intentionally coarse, hand-built pixel actors. They sit between
 * the painted scenery and the interface, move in quantized steps, and differ
 * radically in population from world to world.
 * ========================================================================== */

.pixel-world .life {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  overflow: hidden;
  pointer-events: none;
  font-style: normal;
  contain: layout paint;
}

.life__actor,
.life__actor::before,
.life__actor::after {
  position: absolute;
  display: block;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.life__actor {
  --x: 0%;
  --y: 0%;
  --dur: 10s;
  --delay: 0s;
  --scale: 1;
  left: var(--x);
  top: var(--y);
  transform: translateZ(0) scale(var(--scale));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.life__actor::before,
.life__actor::after { content: ""; }

.pixel-world:not(.is-on) .life__actor,
.pixel-world:not(.is-on) .life__actor::before,
.pixel-world:not(.is-on) .life__actor::after {
  animation-play-state: paused !important;
}

/* ---- sky: large block clouds, birds, gulls, eagles --------------------- */
.life__cloud {
  width: 76px;
  height: 14px;
  color: rgba(255, 248, 226, 0.42);
  background: currentColor;
  box-shadow:
    14px -8px 0 currentColor,
    34px -14px 0 currentColor,
    50px -8px 0 currentColor,
    66px -2px 0 currentColor,
    24px 8px 0 color-mix(in srgb, currentColor 72%, transparent),
    50px 8px 0 color-mix(in srgb, currentColor 72%, transparent);
  opacity: 0.38;
  mix-blend-mode: screen;
  animation: life-cloud var(--dur) steps(70, end) var(--delay) infinite;
}

.pixel-world[data-world="forest"] .life__cloud,
.pixel-world[data-world="pirate"] .life__cloud { color: rgba(183, 196, 185, 0.25); }
.pixel-world[data-world="sea"] .life__cloud { color: rgba(215, 225, 233, 0.3); }

.life__bird,
.life__gull,
.life__eagle {
  width: 7px;
  height: 3px;
  color: #211e1a;
  background: currentColor;
  animation: life-flight var(--dur) steps(80, end) var(--delay) infinite;
}

.life__gull { color: rgba(247, 244, 229, 0.94); filter: drop-shadow(1px 1px 0 rgba(20, 24, 28, 0.72)); }
.life__eagle { width: 10px; color: #3c2d21; }

.life__bird::before,
.life__gull::before,
.life__eagle::before {
  left: -5px;
  top: -2px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform-origin: 100% 100%;
  animation: life-wing-left 520ms steps(2, jump-none) infinite;
}

.life__bird::after,
.life__gull::after,
.life__eagle::after {
  right: -5px;
  top: -2px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform-origin: 0 100%;
  animation: life-wing-right 520ms steps(2, jump-none) infinite;
}

.life__eagle::before,
.life__eagle::after { width: 9px; height: 3px; animation-duration: 760ms; }

/* ---- human activity ---------------------------------------------------- */
.life__person,
.life__crew {
  width: 5px;
  height: 10px;
  color: #231d19;
  background: currentColor;
  box-shadow: 3px 2px 0 color-mix(in srgb, currentColor 80%, #925f39);
  animation: life-walk var(--dur) steps(18, end) var(--delay) infinite alternate;
}

.life__crew { color: #17191a; }

.life__person::before,
.life__crew::before {
  left: 0;
  top: -5px;
  width: 5px;
  height: 5px;
  background: color-mix(in srgb, currentColor 72%, #b6774f);
}

.life__person::after,
.life__crew::after {
  left: 0;
  bottom: -5px;
  width: 2px;
  height: 6px;
  background: currentColor;
  box-shadow: 4px 0 0 currentColor;
  animation: life-legs 420ms steps(2, jump-none) infinite;
}

/* ---- architectural life: windows, lanterns, flags, smoke -------------- */
.life__light,
.life__lantern,
.life__firefly {
  width: 4px;
  height: 4px;
  background: #ffd979;
  box-shadow: 0 0 8px 2px rgba(255, 194, 78, 0.62);
  animation: life-light var(--dur) steps(4, jump-none) var(--delay) infinite;
}

.life__lantern {
  width: 5px;
  height: 6px;
  background: #ffbd4c;
  box-shadow: 0 0 10px 3px rgba(255, 143, 48, 0.68);
}

.life__firefly {
  width: 3px;
  height: 3px;
  background: #e9f685;
  box-shadow: 0 0 7px 2px rgba(216, 241, 90, 0.6);
  animation: life-firefly var(--dur) steps(16, end) var(--delay) infinite alternate;
}

.life__flag {
  width: 22px;
  height: 11px;
  background: var(--tone, #6d2d31);
  clip-path: polygon(0 0, 100% 13%, 84% 52%, 100% 91%, 0 100%);
  transform-origin: 0 50%;
  box-shadow: -2px 0 0 rgba(20, 17, 15, 0.55);
  animation: life-flag var(--dur) steps(5, jump-none) var(--delay) infinite;
}

.life__flag::before {
  left: -3px;
  top: -8px;
  width: 3px;
  height: 34px;
  background: #29241f;
}

.life__smoke {
  width: 9px;
  height: 9px;
  background: rgba(89, 82, 75, 0.42);
  box-shadow: 7px -8px 0 rgba(104, 96, 88, 0.34), -3px -15px 0 rgba(121, 113, 104, 0.26);
  animation: life-smoke var(--dur) steps(18, end) var(--delay) infinite;
}

/* ---- forest: leaves, fronds, animals, moving stream -------------------- */
.life__leaf {
  width: 5px;
  height: 5px;
  background: #8ca640;
  box-shadow: 5px 2px 0 #516d2f;
  animation: life-leaf var(--dur) steps(24, end) var(--delay) infinite;
}

.life__frond {
  width: 42px;
  height: 5px;
  background: #233f27;
  transform-origin: 0 50%;
  box-shadow:
    8px -7px 0 #355a31,
    16px 6px 0 #294b2a,
    24px -8px 0 #3d6335,
    31px 5px 0 #294b2a;
  animation: life-frond var(--dur) steps(12, end) var(--delay) infinite alternate;
}

.life__deer {
  width: 17px;
  height: 9px;
  color: #725034;
  background: currentColor;
  box-shadow: 10px -5px 0 currentColor;
  animation: life-animal var(--dur) steps(26, end) var(--delay) infinite alternate;
}

.life__deer::before {
  right: -3px;
  top: -11px;
  width: 4px;
  height: 9px;
  background: currentColor;
  box-shadow: -3px -4px 0 #4f3828, 4px -4px 0 #4f3828;
}

.life__deer::after {
  left: 2px;
  top: 8px;
  width: 3px;
  height: 10px;
  background: #493327;
  box-shadow: 11px 0 0 #493327;
  animation: life-legs 650ms steps(2, jump-none) infinite;
}

.life__stream,
.life__wave {
  width: 170px;
  height: 5px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(211, 246, 255, 0.78) 7px 18px, transparent 18px 28px);
  box-shadow: 24px 7px 0 rgba(123, 207, 232, 0.26);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: life-water var(--dur) steps(22, end) var(--delay) infinite;
}

.life__stream { width: 95px; opacity: 0.52; }

/* ---- desert: caravan and wind ----------------------------------------- */
.life__camel {
  width: 21px;
  height: 9px;
  color: #70472d;
  background: currentColor;
  box-shadow: 4px -5px 0 currentColor, 11px -7px 0 currentColor, 17px -3px 0 currentColor;
  animation: life-animal var(--dur) steps(30, end) var(--delay) infinite alternate;
}

.life__camel::before {
  right: -4px;
  top: -6px;
  width: 4px;
  height: 9px;
  background: currentColor;
}

.life__camel::after {
  left: 3px;
  top: 8px;
  width: 3px;
  height: 9px;
  background: #50311f;
  box-shadow: 14px 0 0 #50311f;
  animation: life-legs 580ms steps(2, jump-none) infinite;
}

.life__dust {
  width: 160px;
  height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(243, 187, 114, 0.56) 13px 28px, transparent 28px 42px);
  opacity: 0.56;
  animation: life-dust var(--dur) steps(30, end) var(--delay) infinite;
}

/* ---- shore and sea ----------------------------------------------------- */
.life__boat {
  width: 46px;
  height: 12px;
  background: #302a25;
  clip-path: polygon(0 0, 100% 0, 83% 100%, 18% 100%);
  animation: life-boat var(--dur) steps(16, end) var(--delay) infinite alternate;
}

.life__boat::before {
  left: 21px;
  top: -27px;
  width: 3px;
  height: 29px;
  background: #292521;
}

.life__boat::after {
  left: 24px;
  top: -24px;
  width: 18px;
  height: 20px;
  background: rgba(219, 204, 170, 0.72);
  clip-path: polygon(0 0, 100% 72%, 0 100%);
}

.life__crab {
  width: 11px;
  height: 6px;
  background: #a94c32;
  box-shadow: -4px 2px 0 #8d3b2b, 4px 2px 0 #8d3b2b;
  animation: life-crab var(--dur) steps(14, end) var(--delay) infinite alternate;
}

.life__dolphin {
  width: 24px;
  height: 10px;
  background: #6b8c9d;
  clip-path: polygon(0 60%, 34% 24%, 72% 28%, 100% 0, 88% 54%, 100% 100%, 70% 67%, 29% 80%);
  animation: life-dolphin var(--dur) steps(46, end) var(--delay) infinite;
}

/* ---- mountain and storm ------------------------------------------------ */
.life__snow {
  width: 4px;
  height: 4px;
  background: rgba(243, 248, 250, 0.88);
  box-shadow: 31vw 8vh 0 rgba(243, 248, 250, 0.62), 58vw -3vh 0 rgba(243, 248, 250, 0.72);
  animation: life-snow var(--dur) steps(36, end) var(--delay) infinite;
}

.life__rain {
  width: 3px;
  height: 17px;
  background: rgba(174, 203, 217, 0.44);
  box-shadow: 9vw -12vh 0 rgba(174, 203, 217, 0.34), 19vw 5vh 0 rgba(174, 203, 217, 0.3);
  transform: skewX(-18deg) scale(var(--scale));
  animation: life-rain var(--dur) steps(36, end) var(--delay) infinite;
}

/* ---- moving light and shadow over every suitable world ---------------- */
.life__shadow {
  width: 44vw;
  height: 32vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 18, 19, 0.22), transparent 68%);
  mix-blend-mode: multiply;
  filter: blur(12px);
  animation: life-shadow var(--dur) steps(28, end) var(--delay) infinite alternate;
}

/* ---- motion: all quantized so the actors belong to the pixel worlds ---- */
@keyframes life-cloud {
  from { transform: translate3d(-12vw, 0, 0) scale(var(--scale)); }
  to   { transform: translate3d(38vw, 2vh, 0) scale(var(--scale)); }
}

@keyframes life-flight {
  0%   { transform: translate3d(0, 0, 0) scale(var(--scale)); }
  25%  { transform: translate3d(29vw, -2vh, 0) scale(var(--scale)); }
  52%  { transform: translate3d(59vw, 1.5vh, 0) scale(var(--scale)); }
  78%  { transform: translate3d(88vw, -1vh, 0) scale(var(--scale)); }
  100% { transform: translate3d(118vw, 1vh, 0) scale(var(--scale)); }
}

@keyframes life-wing-left {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-28deg) translateY(2px); }
}
@keyframes life-wing-right {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(28deg) translateY(2px); }
}

@keyframes life-walk {
  0% { transform: translate3d(-2vw, 0, 0) scale(var(--scale)); }
  48% { transform: translate3d(2vw, -1px, 0) scale(var(--scale)); }
  52% { transform: translate3d(2vw, 0, 0) scaleX(calc(-1 * var(--scale))) scaleY(var(--scale)); }
  100% { transform: translate3d(-2vw, -1px, 0) scaleX(calc(-1 * var(--scale))) scaleY(var(--scale)); }
}

@keyframes life-legs {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

@keyframes life-light {
  0%, 100% { opacity: 0.36; filter: brightness(.8); }
  34% { opacity: 1; filter: brightness(1.35); }
  68% { opacity: 0.62; filter: brightness(1); }
}

@keyframes life-firefly {
  0% { transform: translate3d(-12px, 8px, 0) scale(var(--scale)); opacity: 0.18; }
  35% { opacity: 1; }
  68% { opacity: 0.32; }
  100% { transform: translate3d(24px, -18px, 0) scale(var(--scale)); opacity: 0.8; }
}

@keyframes life-flag {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  35% { transform: skewY(7deg) scaleX(.82); }
  68% { transform: skewY(-4deg) scaleX(.94); }
}

@keyframes life-smoke {
  0% { transform: translate3d(0, 0, 0) scale(calc(var(--scale) * .6)); opacity: 0; }
  24% { opacity: .48; }
  100% { transform: translate3d(18px, -14vh, 0) scale(calc(var(--scale) * 1.7)); opacity: 0; }
}

@keyframes life-leaf {
  0% { transform: translate3d(0, -8vh, 0) rotate(0) scale(var(--scale)); opacity: 0; }
  14% { opacity: .88; }
  50% { transform: translate3d(7vw, 34vh, 0) rotate(180deg) scale(var(--scale)); }
  100% { transform: translate3d(-2vw, 78vh, 0) rotate(360deg) scale(var(--scale)); opacity: .16; }
}

@keyframes life-frond {
  from { transform: rotate(-3deg) scale(var(--scale)); }
  to { transform: rotate(8deg) scale(var(--scale)); }
}

@keyframes life-animal {
  0% { transform: translate3d(-3vw, 0, 0) scale(var(--scale)); }
  47% { transform: translate3d(3vw, -1px, 0) scale(var(--scale)); }
  53% { transform: translate3d(3vw, 0, 0) scaleX(calc(-1 * var(--scale))) scaleY(var(--scale)); }
  100% { transform: translate3d(-3vw, -1px, 0) scaleX(calc(-1 * var(--scale))) scaleY(var(--scale)); }
}

@keyframes life-water {
  from { transform: translate3d(-18px, 0, 0) scale(var(--scale)); filter: brightness(.82); }
  to { transform: translate3d(28px, -2px, 0) scale(var(--scale)); filter: brightness(1.28); }
}

@keyframes life-dust {
  0% { transform: translate3d(-24vw, 0, 0) scale(var(--scale)); opacity: 0; }
  18% { opacity: .5; }
  100% { transform: translate3d(45vw, -2vh, 0) scale(var(--scale)); opacity: 0; }
}

@keyframes life-boat {
  from { transform: translate3d(-10px, 2px, 0) rotate(-1deg) scale(var(--scale)); }
  to { transform: translate3d(18px, -4px, 0) rotate(1.5deg) scale(var(--scale)); }
}

@keyframes life-crab {
  from { transform: translate3d(-16px, 0, 0) scale(var(--scale)); }
  to { transform: translate3d(22px, 0, 0) scaleX(calc(-1 * var(--scale))) scaleY(var(--scale)); }
}

@keyframes life-dolphin {
  0% { transform: translate3d(0, 10vh, 0) rotate(-18deg) scale(var(--scale)); opacity: 0; }
  12% { opacity: .84; }
  43% { transform: translate3d(48vw, -8vh, 0) rotate(8deg) scale(var(--scale)); }
  60% { transform: translate3d(68vw, 4vh, 0) rotate(26deg) scale(var(--scale)); opacity: .9; }
  100% { transform: translate3d(118vw, 12vh, 0) rotate(12deg) scale(var(--scale)); opacity: 0; }
}

@keyframes life-snow {
  from { transform: translate3d(-2vw, -14vh, 0) scale(var(--scale)); opacity: .1; }
  16% { opacity: .74; }
  to { transform: translate3d(15vw, 96vh, 0) scale(var(--scale)); opacity: .18; }
}

@keyframes life-rain {
  from { transform: translate3d(0, -24vh, 0) skewX(-18deg) scale(var(--scale)); opacity: 0; }
  12% { opacity: .55; }
  to { transform: translate3d(-12vw, 105vh, 0) skewX(-18deg) scale(var(--scale)); opacity: .08; }
}

@keyframes life-shadow {
  from { transform: translate3d(-18vw, -4vh, 0) scale(1); opacity: .32; }
  to { transform: translate3d(52vw, 14vh, 0) scale(1.25); opacity: .62; }
}

@media (max-width: 720px) {
  .life__cloud { opacity: .26; }
  .life__person, .life__crew { scale: .82; }
  .life__shadow { width: 62vw; }
}

/* ==========================================================================
 * MULTIPLANE GAME DEPTH
 * The finished game paintings are echoed into three softly masked depth
 * bands. Their tiny opposing stepped moves separate sky, architecture, and
 * foreground without introducing smooth photographic motion or hard seams.
 * ======================================================================== */
.pixel-world:not([data-world="blank"]) :is(.far, .mid, .near) {
  background-image: var(--world-image);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  mix-blend-mode: normal;
}

.pixel-world:not([data-world="blank"]) .far {
  opacity: var(--far-opacity, 0.16);
  -webkit-mask-image: linear-gradient(180deg, #000 0 36%, rgba(0,0,0,.72) 52%, transparent 69%);
  mask-image: linear-gradient(180deg, #000 0 36%, rgba(0,0,0,.72) 52%, transparent 69%);
  animation: game-depth-far var(--far-duration, 22s) steps(var(--far-steps, 32), end) infinite alternate;
}

.pixel-world:not([data-world="blank"]) .mid {
  opacity: var(--mid-opacity, 0.13);
  -webkit-mask-image: linear-gradient(180deg, transparent 24%, #000 44% 74%, transparent 90%);
  mask-image: linear-gradient(180deg, transparent 24%, #000 44% 74%, transparent 90%);
  animation: game-depth-mid var(--mid-duration, 16s) steps(var(--mid-steps, 28), end) infinite alternate;
}

.pixel-world:not([data-world="blank"]) .near {
  opacity: var(--near-opacity, 0.2);
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.72) 72%, #000 88% 100%);
  mask-image: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.72) 72%, #000 88% 100%);
  animation: game-depth-near var(--near-duration, 11s) steps(var(--near-steps, 24), end) infinite alternate;
}

@keyframes game-depth-far {
  from { transform: translate3d(var(--far-x0, -0.45%), var(--far-y0, 0.1%), 0) scale(var(--far-z0, 1.01)); }
  to { transform: translate3d(var(--far-x1, 0.55%), var(--far-y1, -0.35%), 0) scale(var(--far-z1, 1.018)); }
}

@keyframes game-depth-mid {
  from { transform: translate3d(var(--mid-x0, 0.55%), var(--mid-y0, 0.2%), 0) scale(var(--mid-z0, 1.012)); }
  to { transform: translate3d(var(--mid-x1, -0.75%), var(--mid-y1, -0.55%), 0) scale(var(--mid-z1, 1.025)); }
}

@keyframes game-depth-near {
  from { transform: translate3d(var(--near-x0, -0.8%), var(--near-y0, 0.35%), 0) scale(var(--near-z0, 1.02)); }
  to { transform: translate3d(var(--near-x1, 0.9%), var(--near-y1, -0.8%), 0) scale(var(--near-z1, 1.038)); }
}

/* ==========================================================================
 * ATLAS ACTORS
 * Each new world has its own motion language instead of borrowing generic
 * birds-and-clouds from every other scene.
 * ======================================================================== */

/* Metropolis traffic and transit. */
.life__vehicle,
.life__truck {
  width: 30px;
  height: 10px;
  border: 2px solid rgba(10, 12, 16, .72);
  background: var(--tone, #8e3034);
  box-shadow: 3px 7px 0 -1px #11161d, 21px 7px 0 -1px #11161d;
  animation: life-traffic var(--dur) steps(24, end) var(--delay) infinite alternate;
}

.life__vehicle::before,
.life__truck::before {
  left: 6px;
  top: -7px;
  width: 17px;
  height: 7px;
  background: color-mix(in srgb, var(--tone, #8e3034) 78%, #d9edf4);
  clip-path: polygon(18% 0, 84% 0, 100% 100%, 0 100%);
}

.life__vehicle::after,
.life__truck::after {
  right: -4px;
  top: 2px;
  width: 4px;
  height: 4px;
  background: #ff7351;
  box-shadow: 0 0 7px 2px rgba(255, 78, 48, .55);
}

.life__truck { width: 42px; height: 13px; }
.life__truck::before { left: 29px; top: -5px; width: 13px; height: 7px; }

.life__transit {
  width: 82px;
  height: 17px;
  border: 2px solid #111923;
  background:
    repeating-linear-gradient(90deg, #9ec0ce 0 9px, #172430 9px 13px),
    var(--tone, #d6b15f);
  box-shadow: 9px 17px 0 -5px #111923, 62px 17px 0 -5px #111923;
  animation: life-cross-screen var(--dur) steps(70, end) var(--delay) infinite;
}

.life__aircraft,
.life__pod {
  width: 26px;
  height: 7px;
  background: var(--tone, #d9e4e8);
  clip-path: polygon(0 42%, 32% 42%, 45% 0, 59% 0, 69% 42%, 100% 42%, 88% 100%, 16% 100%);
  box-shadow: 0 2px 6px rgba(120, 207, 235, .5);
  animation: life-airroute var(--dur) steps(80, end) var(--delay) infinite;
}

.life__pod { width: 34px; height: 11px; border-radius: 40% 55% 45% 35%; }

/* Skyscraper mechanics. */
.life__gondola {
  width: 25px;
  height: 13px;
  border: 2px solid #353b3e;
  background: rgba(213, 224, 221, .82);
  animation: life-gondola var(--dur) steps(18, end) var(--delay) infinite alternate;
}
.life__gondola::before { left: 11px; bottom: 100%; width: 2px; height: 18vh; background: rgba(41, 48, 51, .62); }

.life__beacon {
  width: 5px;
  height: 5px;
  background: #ff4b36;
  box-shadow: 0 0 8px 3px rgba(255, 68, 44, .65);
  animation: life-beacon var(--dur) steps(2, jump-none) var(--delay) infinite;
}

/* Farm wind, animals and machinery. */
.life__wheat {
  width: 4px;
  height: 30px;
  background: #8b5a1d;
  box-shadow: 5px 2px 0 #b98632, 10px -2px 0 #d1a24a, 15px 3px 0 #9f6d27, 20px -3px 0 #d5ad58;
  transform-origin: 50% 100%;
  animation: life-wheat var(--dur) steps(12, end) var(--delay) infinite alternate;
}

.life__tractor,
.life__combine {
  width: 34px;
  height: 17px;
  background: var(--tone, #385d3a);
  border: 2px solid rgba(44, 35, 23, .7);
  box-shadow: 5px 16px 0 1px #28251f, 27px 16px 0 3px #28251f;
  animation: life-machine var(--dur) steps(34, end) var(--delay) infinite alternate;
}
.life__tractor::before { left: 16px; top: -12px; width: 16px; height: 12px; background: #afc6c5; border: 2px solid #3c3d37; }
.life__combine { width: 52px; height: 22px; }
.life__combine::before { left: -20px; top: 12px; width: 24px; height: 5px; background: #3e3525; box-shadow: 0 -6px 0 #8d4a2d; }
.life__combine::after { right: -13px; top: -10px; width: 3px; height: 29px; background: #75422d; rotate: -42deg; }

.life__sheep {
  width: 17px;
  height: 10px;
  background: #e8dfc9;
  box-shadow: 5px -4px 0 #f3ead7, 11px -2px 0 #ded4bd;
  animation: life-animal var(--dur) steps(22, end) var(--delay) infinite alternate;
}
.life__sheep::before { right: -6px; top: 1px; width: 7px; height: 7px; background: #4b4338; }
.life__sheep::after { left: 2px; top: 9px; width: 2px; height: 7px; background: #4b4338; box-shadow: 11px 0 0 #4b4338; }

.life__mist {
  width: 34vw;
  height: 18px;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(232, 231, 215, .28) 18px 54px, transparent 54px 76px);
  filter: blur(3px);
  animation: life-mist var(--dur) steps(30, end) var(--delay) infinite;
}

.life__wheel {
  width: 31px;
  height: 31px;
  border: 4px solid #4a3828;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10%, #4a3828 10% 14%, transparent 14% 23%, #4a3828 23% 27%, transparent 27% 36%, #4a3828 36% 40%, transparent 40% 49%, #4a3828 49% 53%, transparent 53% 62%, #4a3828 62% 66%, transparent 66% 75%, #4a3828 75% 79%, transparent 79% 88%, #4a3828 88% 92%, transparent 92%);
  animation: life-wheel var(--dur) steps(16, end) var(--delay) infinite;
}

/* Ocean mammals and spray. */
.life__whale {
  width: 42px;
  height: 13px;
  background: #304f61;
  border-radius: 60% 35% 28% 55%;
  clip-path: polygon(0 51%, 11% 25%, 74% 18%, 92% 40%, 100% 11%, 98% 62%, 77% 82%, 18% 90%);
  animation: life-whale var(--dur) steps(18, end) var(--delay) infinite alternate;
}

.life__spout {
  width: 5px;
  height: 5px;
  background: rgba(227, 245, 248, .9);
  box-shadow: -5px -4px 0 rgba(227, 245, 248, .7), 5px -7px 0 rgba(227, 245, 248, .65);
  animation: life-spout var(--dur) steps(16, end) var(--delay) infinite;
}

/* Icebreaker mechanics and floating ice. */
.life__radar {
  width: 25px;
  height: 3px;
  background: #bdc9ce;
  transform-origin: 50% 50%;
  animation: life-wheel var(--dur) steps(16, end) var(--delay) infinite;
}
.life__radar::before { left: 11px; top: -7px; width: 3px; height: 17px; background: #384249; }

.life__search {
  width: 36vw;
  height: 8vh;
  background: linear-gradient(90deg, rgba(242, 250, 239, .42), transparent 85%);
  clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 57%);
  transform-origin: 0 50%;
  mix-blend-mode: screen;
  animation: life-search var(--dur) steps(14, end) var(--delay) infinite alternate;
}

.life__seal {
  width: 24px;
  height: 10px;
  background: #777c7d;
  border-radius: 60% 60% 35% 30%;
  animation: life-seal var(--dur) steps(16, end) var(--delay) infinite alternate;
}
.life__seal::before { right: -5px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #656a6b; }

.life__ice {
  width: 74px;
  height: 16px;
  background: rgba(188, 225, 239, .72);
  clip-path: polygon(0 58%, 13% 22%, 37% 33%, 52% 0, 72% 37%, 100% 24%, 91% 100%, 12% 90%);
  animation: life-ice var(--dur) steps(20, end) var(--delay) infinite alternate;
}

/* Port logistics. */
.life__cargo {
  width: 36px;
  height: 16px;
  border: 2px solid rgba(25, 26, 25, .62);
  background: repeating-linear-gradient(90deg, var(--tone, #aa4936) 0 5px, color-mix(in srgb, var(--tone, #aa4936) 78%, #101315) 5px 6px);
  box-shadow: 18px -16vh 0 -15px rgba(34, 34, 32, .8);
  animation: life-cargo var(--dur) steps(24, end) var(--delay) infinite alternate;
}

.life__forklift {
  width: 23px;
  height: 14px;
  background: #cf8e2d;
  box-shadow: 3px 13px 0 -2px #1f2426, 17px 13px 0 -2px #1f2426;
  animation: life-traffic var(--dur) steps(20, end) var(--delay) infinite alternate;
}
.life__forklift::before { left: 14px; top: -12px; width: 3px; height: 14px; background: #293033; box-shadow: 8px 0 0 #293033; }
.life__forklift::after { left: 21px; top: -2px; width: 16px; height: 3px; background: #293033; }

.life__tug {
  width: 45px;
  height: 13px;
  background: #32424a;
  clip-path: polygon(0 0, 87% 0, 100% 52%, 82% 100%, 12% 100%);
  animation: life-cross-screen var(--dur) steps(70, end) var(--delay) infinite;
}
.life__tug::before { left: 15px; top: -11px; width: 19px; height: 11px; background: #d6c18f; border: 2px solid #30383b; }
.life__tug::after { left: -14px; top: 11px; width: 61px; height: 3px; background: rgba(210, 241, 247, .72); }

/* Hotel water, fabric and people. */
.life__swimmer {
  width: 18px;
  height: 5px;
  background: #c7835b;
  box-shadow: -5px 3px 0 rgba(210, 246, 252, .55), 11px 3px 0 rgba(210, 246, 252, .55);
  animation: life-swim var(--dur) steps(20, end) var(--delay) infinite alternate;
}

.life__fountain {
  width: 4px;
  height: 4px;
  background: rgba(210, 249, 255, .92);
  box-shadow: 7px 0 0 rgba(210, 249, 255, .7), -7px 1px 0 rgba(210, 249, 255, .66);
  animation: life-fountain var(--dur) steps(18, end) var(--delay) infinite;
}

.life__ripple {
  width: 105px;
  height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(152, 244, 255, .72) 7px 18px, transparent 18px 29px);
  mix-blend-mode: screen;
  animation: life-water var(--dur) steps(22, end) var(--delay) infinite;
}

.life__curtain {
  width: 18px;
  height: 29px;
  background: rgba(232, 212, 192, .5);
  clip-path: polygon(0 0, 100% 0, 82% 23%, 100% 50%, 75% 76%, 95% 100%, 0 100%);
  transform-origin: 0 0;
  animation: life-curtain var(--dur) steps(12, end) var(--delay) infinite alternate;
}

/* Mountain, storm and tropical wildlife. */
.life__goat {
  width: 18px;
  height: 10px;
  background: #696056;
  box-shadow: 9px -5px 0 #746a5e;
  animation: life-animal var(--dur) steps(22, end) var(--delay) infinite alternate;
}
.life__goat::before { right: -4px; top: -8px; width: 6px; height: 8px; background: #5a5149; box-shadow: -2px -3px 0 #3e3833, 4px -3px 0 #3e3833; }
.life__goat::after { left: 2px; top: 9px; width: 2px; height: 8px; background: #47413c; box-shadow: 12px 0 0 #47413c; }

.life__lightning {
  width: 8px;
  height: 42vh;
  background: #fff4bd;
  clip-path: polygon(47% 0, 100% 0, 62% 38%, 100% 38%, 10% 100%, 35% 53%, 0 53%);
  filter: drop-shadow(0 0 8px rgba(255, 234, 157, .9));
  animation: life-lightning var(--dur) steps(2, jump-none) var(--delay) infinite;
}

.life__sail {
  width: 58px;
  height: 76px;
  background: var(--tone, #15171c);
  clip-path: polygon(5% 0, 100% 21%, 85% 100%, 0 85%);
  transform-origin: 0 50%;
  opacity: .72;
  animation: life-sail var(--dur) steps(10, end) var(--delay) infinite alternate;
}

.life__turtle {
  width: 27px;
  height: 14px;
  border-radius: 55%;
  background: #466e59;
  box-shadow: -6px 5px 0 -2px #6c9272, 19px 7px 0 -2px #6c9272;
  animation: life-airroute var(--dur) steps(70, end) var(--delay) infinite;
}
.life__turtle::before { right: -6px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #63866c; }

.life__fish {
  width: 18px;
  height: 8px;
  border-radius: 60% 35% 35% 60%;
  background: #e1a44d;
  clip-path: polygon(0 50%, 24% 0, 77% 15%, 100% 0, 91% 50%, 100% 100%, 77% 84%, 24% 100%);
  animation: life-cross-screen var(--dur) steps(70, end) var(--delay) infinite;
}

@keyframes life-traffic {
  from { transform: translate3d(-5vw, 0, 0) scale(var(--scale)); }
  to { transform: translate3d(9vw, -1px, 0) scale(var(--scale)); }
}
@keyframes life-cross-screen {
  from { transform: translate3d(-8vw, 0, 0) scale(var(--scale)); }
  to { transform: translate3d(128vw, 0, 0) scale(var(--scale)); }
}
@keyframes life-airroute {
  0% { transform: translate3d(0, 2vh, 0) scale(var(--scale)); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translate3d(122vw, -8vh, 0) scale(var(--scale)); opacity: 0; }
}
@keyframes life-gondola { from { transform: translateY(-3vh) scale(var(--scale)); } to { transform: translateY(16vh) scale(var(--scale)); } }
@keyframes life-beacon { 0%, 54% { opacity: .14; } 55%, 100% { opacity: 1; } }
@keyframes life-wheat { from { transform: skewX(-4deg) scale(var(--scale)); } to { transform: skewX(11deg) scale(var(--scale)); } }
@keyframes life-machine { from { transform: translate3d(-4vw, 0, 0) scale(var(--scale)); } to { transform: translate3d(6vw, -1px, 0) scale(var(--scale)); } }
@keyframes life-mist { from { transform: translate3d(-28vw, 0, 0) scale(var(--scale)); opacity: .1; } 35% { opacity: .45; } to { transform: translate3d(55vw, 2vh, 0) scale(var(--scale)); opacity: 0; } }
@keyframes life-wheel { to { rotate: 360deg; } }
@keyframes life-whale { from { transform: translate3d(-1vw, 1vh, 0) rotate(-2deg) scale(var(--scale)); } to { transform: translate3d(2vw, -1.5vh, 0) rotate(2deg) scale(var(--scale)); } }
@keyframes life-spout { 0% { transform: translateY(8px) scale(.5); opacity: 0; } 22% { opacity: .9; } 100% { transform: translateY(-9vh) scale(1.6); opacity: 0; } }
@keyframes life-search { from { rotate: -7deg; opacity: .25; } to { rotate: 12deg; opacity: .62; } }
@keyframes life-seal { from { transform: translateY(0) rotate(-2deg) scale(var(--scale)); } to { transform: translateY(-5px) rotate(4deg) scale(var(--scale)); } }
@keyframes life-ice { from { transform: translate3d(-2vw, 1px, 0) rotate(-1deg) scale(var(--scale)); } to { transform: translate3d(3vw, -2px, 0) rotate(1deg) scale(var(--scale)); } }
@keyframes life-cargo { from { transform: translateY(-9vh) scale(var(--scale)); } to { transform: translateY(11vh) scale(var(--scale)); } }
@keyframes life-swim { from { transform: translate3d(-3vw, 0, 0) scale(var(--scale)); } to { transform: translate3d(5vw, -2px, 0) scale(var(--scale)); } }
@keyframes life-fountain { 0% { transform: translateY(4px) scale(.45); opacity: 0; } 20% { opacity: .9; } 55% { transform: translateY(-8vh) scale(1); opacity: .8; } 100% { transform: translateY(3px) scale(.55); opacity: 0; } }
@keyframes life-curtain { from { transform: skewX(-2deg) scale(var(--scale)); } to { transform: skewX(13deg) scale(var(--scale)); } }
@keyframes life-lightning { 0%, 83%, 100% { opacity: 0; } 84%, 87% { opacity: 1; } 88%, 92% { opacity: .16; } 93%, 96% { opacity: .88; } }
@keyframes life-sail { from { transform: skewY(-2deg) scaleX(.94) scale(var(--scale)); } to { transform: skewY(6deg) scaleX(1.05) scale(var(--scale)); } }

/* ========================================================================== 
 * UNIQUE DEPTH MAPS
 * The same full artwork is exposed through different masks in each plane.
 * Timings and travel vectors follow the physical subject of the scene.
 * ======================================================================== */
.pixel-world[data-world="icebreaker"] {
  --far-duration: 31s; --mid-duration: 17s; --near-duration: 9s;
  --far-x0: -.22%; --far-x1: .34%; --far-y1: -.22%;
  --mid-x0: -.48%; --mid-x1: .64%; --mid-y1: -.34%;
  --near-x0: -1.3%; --near-x1: 1.1%; --near-y1: -.45%;
  --far-opacity: .14; --mid-opacity: .16; --near-opacity: .24;
}
.pixel-world[data-world="icebreaker"] .far { -webkit-mask-image: linear-gradient(#000 0 51%, transparent 69%); mask-image: linear-gradient(#000 0 51%, transparent 69%); }
.pixel-world[data-world="icebreaker"] .mid { -webkit-mask-image: linear-gradient(transparent 21%, #000 35% 72%, transparent 86%); mask-image: linear-gradient(transparent 21%, #000 35% 72%, transparent 86%); }
.pixel-world[data-world="icebreaker"] .near { -webkit-mask-image: linear-gradient(transparent 57%, #000 77% 100%); mask-image: linear-gradient(transparent 57%, #000 77% 100%); }

.pixel-world[data-world="ocean"] {
  --far-duration: 36s; --mid-duration: 8s; --near-duration: 5.2s;
  --far-x0: -.16%; --far-x1: .28%; --far-y1: -.32%;
  --mid-x0: -1.1%; --mid-x1: 1.45%; --mid-y1: -.24%;
  --near-x0: -2.1%; --near-x1: 2.2%; --near-y1: -.52%; --near-z1: 1.045;
  --far-opacity: .13; --mid-opacity: .18; --near-opacity: .28;
}
.pixel-world[data-world="ocean"] .far { -webkit-mask-image: linear-gradient(#000 0 56%, transparent 67%); mask-image: linear-gradient(#000 0 56%, transparent 67%); }
.pixel-world[data-world="ocean"] .mid { -webkit-mask-image: linear-gradient(transparent 49%, #000 58% 78%, transparent 89%); mask-image: linear-gradient(transparent 49%, #000 58% 78%, transparent 89%); }
.pixel-world[data-world="ocean"] .near { -webkit-mask-image: linear-gradient(transparent 65%, #000 76% 100%); mask-image: linear-gradient(transparent 65%, #000 76% 100%); }

.pixel-world[data-world="castle"] {
  --far-duration: 33s; --mid-duration: 21s; --near-duration: 13s;
  --far-x0: -.28%; --far-x1: .31%; --far-y1: -.2%;
  --mid-x0: .42%; --mid-x1: -.56%; --mid-y1: -.38%;
  --near-x0: -.72%; --near-x1: .83%; --near-y1: -.65%;
  --far-opacity: .12; --mid-opacity: .15; --near-opacity: .22;
}
.pixel-world[data-world="castle"] .far { -webkit-mask-image: linear-gradient(#000 0 44%, transparent 63%); mask-image: linear-gradient(#000 0 44%, transparent 63%); }
.pixel-world[data-world="castle"] .mid { -webkit-mask-image: linear-gradient(transparent 25%, #000 39% 77%, transparent 89%); mask-image: linear-gradient(transparent 25%, #000 39% 77%, transparent 89%); }
.pixel-world[data-world="castle"] .near { -webkit-mask-image: linear-gradient(transparent 61%, #000 76% 100%); mask-image: linear-gradient(transparent 61%, #000 76% 100%); }

.pixel-world[data-world="skyscraper"] {
  --far-duration: 42s; --mid-duration: 26s; --near-duration: 17s;
  --far-x0: -.12%; --far-x1: .18%; --far-y0: .25%; --far-y1: -.62%;
  --mid-x0: .3%; --mid-x1: -.42%; --mid-y0: .18%; --mid-y1: -.78%;
  --near-x0: -.44%; --near-x1: .5%; --near-y0: .4%; --near-y1: -1.05%;
  --far-opacity: .11; --mid-opacity: .14; --near-opacity: .2;
}
.pixel-world[data-world="skyscraper"] .far { -webkit-mask-image: linear-gradient(#000 0 58%, transparent 72%); mask-image: linear-gradient(#000 0 58%, transparent 72%); }
.pixel-world[data-world="skyscraper"] .mid { -webkit-mask-image: linear-gradient(transparent 18%, #000 34% 83%, transparent 94%); mask-image: linear-gradient(transparent 18%, #000 34% 83%, transparent 94%); }
.pixel-world[data-world="skyscraper"] .near { -webkit-mask-image: linear-gradient(transparent 51%, #000 69% 100%); mask-image: linear-gradient(transparent 51%, #000 69% 100%); }

.pixel-world[data-world="citadel"] {
  --far-duration: 37s; --mid-duration: 23s; --near-duration: 14s;
  --far-x0: -.34%; --far-x1: .4%; --far-y1: -.27%;
  --mid-x0: -.39%; --mid-x1: .52%; --mid-y1: -.46%;
  --near-x0: -.85%; --near-x1: .97%; --near-y1: -.7%;
  --far-opacity: .13; --mid-opacity: .15; --near-opacity: .23;
}
.pixel-world[data-world="citadel"] .far { -webkit-mask-image: linear-gradient(#000 0 49%, transparent 67%); mask-image: linear-gradient(#000 0 49%, transparent 67%); }
.pixel-world[data-world="citadel"] .mid { -webkit-mask-image: linear-gradient(transparent 20%, #000 37% 76%, transparent 90%); mask-image: linear-gradient(transparent 20%, #000 37% 76%, transparent 90%); }
.pixel-world[data-world="citadel"] .near { -webkit-mask-image: linear-gradient(transparent 59%, #000 74% 100%); mask-image: linear-gradient(transparent 59%, #000 74% 100%); }

.pixel-world[data-world="metropolis"] {
  --far-duration: 28s; --mid-duration: 14s; --near-duration: 8s;
  --far-x0: -.21%; --far-x1: .37%; --far-y1: -.35%;
  --mid-x0: .82%; --mid-x1: -1.08%; --mid-y1: -.31%;
  --near-x0: -1.45%; --near-x1: 1.66%; --near-y1: -.4%;
  --far-opacity: .13; --mid-opacity: .17; --near-opacity: .25;
}
.pixel-world[data-world="metropolis"] .far { -webkit-mask-image: linear-gradient(#000 0 54%, transparent 72%); mask-image: linear-gradient(#000 0 54%, transparent 72%); }
.pixel-world[data-world="metropolis"] .mid { -webkit-mask-image: linear-gradient(transparent 28%, #000 43% 84%, transparent 95%); mask-image: linear-gradient(transparent 28%, #000 43% 84%, transparent 95%); }
.pixel-world[data-world="metropolis"] .near { -webkit-mask-image: linear-gradient(transparent 65%, #000 79% 100%); mask-image: linear-gradient(transparent 65%, #000 79% 100%); }

.pixel-world[data-world="port"] {
  --far-duration: 34s; --mid-duration: 15s; --near-duration: 9.5s;
  --far-x0: -.19%; --far-x1: .29%; --far-y1: -.23%;
  --mid-x0: 1.05%; --mid-x1: -1.34%; --mid-y1: -.38%;
  --near-x0: -1.62%; --near-x1: 1.4%; --near-y1: -.58%;
  --far-opacity: .12; --mid-opacity: .17; --near-opacity: .24;
}
.pixel-world[data-world="port"] .far { -webkit-mask-image: linear-gradient(#000 0 45%, transparent 63%); mask-image: linear-gradient(#000 0 45%, transparent 63%); }
.pixel-world[data-world="port"] .mid { -webkit-mask-image: linear-gradient(transparent 23%, #000 37% 81%, transparent 93%); mask-image: linear-gradient(transparent 23%, #000 37% 81%, transparent 93%); }
.pixel-world[data-world="port"] .near { -webkit-mask-image: linear-gradient(transparent 56%, #000 72% 100%); mask-image: linear-gradient(transparent 56%, #000 72% 100%); }

.pixel-world[data-world="alpine"] {
  --far-duration: 45s; --mid-duration: 29s; --near-duration: 18s;
  --far-x0: -.2%; --far-x1: .23%; --far-y1: -.28%;
  --mid-x0: .31%; --mid-x1: -.39%; --mid-y1: -.43%;
  --near-x0: -.48%; --near-x1: .59%; --near-y1: -.55%;
  --far-opacity: .11; --mid-opacity: .13; --near-opacity: .2;
}
.pixel-world[data-world="alpine"] .far { -webkit-mask-image: linear-gradient(#000 0 58%, transparent 73%); mask-image: linear-gradient(#000 0 58%, transparent 73%); }
.pixel-world[data-world="alpine"] .mid { -webkit-mask-image: linear-gradient(transparent 31%, #000 44% 82%, transparent 93%); mask-image: linear-gradient(transparent 31%, #000 44% 82%, transparent 93%); }
.pixel-world[data-world="alpine"] .near { -webkit-mask-image: linear-gradient(transparent 64%, #000 78% 100%); mask-image: linear-gradient(transparent 64%, #000 78% 100%); }

.pixel-world[data-world="farm"] {
  --far-duration: 39s; --mid-duration: 19s; --near-duration: 7s;
  --far-x0: -.25%; --far-x1: .35%; --far-y1: -.19%;
  --mid-x0: .52%; --mid-x1: -.68%; --mid-y1: -.32%;
  --near-x0: -1.28%; --near-x1: 1.46%; --near-y1: -.36%;
  --far-opacity: .11; --mid-opacity: .14; --near-opacity: .26;
}
.pixel-world[data-world="farm"] .far { -webkit-mask-image: linear-gradient(#000 0 50%, transparent 65%); mask-image: linear-gradient(#000 0 50%, transparent 65%); }
.pixel-world[data-world="farm"] .mid { -webkit-mask-image: linear-gradient(transparent 30%, #000 43% 77%, transparent 90%); mask-image: linear-gradient(transparent 30%, #000 43% 77%, transparent 90%); }
.pixel-world[data-world="farm"] .near { -webkit-mask-image: linear-gradient(transparent 56%, #000 69% 100%); mask-image: linear-gradient(transparent 56%, #000 69% 100%); }

.pixel-world[data-world="galleon"] {
  --far-duration: 21s; --mid-duration: 9s; --near-duration: 5.8s;
  --far-x0: -.38%; --far-x1: .47%; --far-y1: -.31%;
  --mid-x0: -1.02%; --mid-x1: 1.17%; --mid-y0: .36%; --mid-y1: -.72%; --mid-z1: 1.032;
  --near-x0: -2.15%; --near-x1: 2.35%; --near-y1: -.85%; --near-z1: 1.05;
  --far-opacity: .14; --mid-opacity: .19; --near-opacity: .29;
}
.pixel-world[data-world="galleon"] .far { -webkit-mask-image: linear-gradient(#000 0 52%, transparent 69%); mask-image: linear-gradient(#000 0 52%, transparent 69%); }
.pixel-world[data-world="galleon"] .mid { -webkit-mask-image: linear-gradient(transparent 18%, #000 32% 79%, transparent 92%); mask-image: linear-gradient(transparent 18%, #000 32% 79%, transparent 92%); }
.pixel-world[data-world="galleon"] .near { -webkit-mask-image: linear-gradient(transparent 55%, #000 69% 100%); mask-image: linear-gradient(transparent 55%, #000 69% 100%); }

.pixel-world[data-world="cove"] {
  --far-duration: 35s; --mid-duration: 12s; --near-duration: 6.2s;
  --far-x0: -.24%; --far-x1: .33%; --far-y1: -.21%;
  --mid-x0: -.72%; --mid-x1: .91%; --mid-y1: -.3%;
  --near-x0: -1.7%; --near-x1: 1.82%; --near-y1: -.48%;
  --far-opacity: .12; --mid-opacity: .16; --near-opacity: .27;
}
.pixel-world[data-world="cove"] .far { -webkit-mask-image: linear-gradient(#000 0 54%, transparent 69%); mask-image: linear-gradient(#000 0 54%, transparent 69%); }
.pixel-world[data-world="cove"] .mid { -webkit-mask-image: linear-gradient(transparent 32%, #000 45% 80%, transparent 92%); mask-image: linear-gradient(transparent 32%, #000 45% 80%, transparent 92%); }
.pixel-world[data-world="cove"] .near { -webkit-mask-image: linear-gradient(transparent 58%, #000 71% 100%); mask-image: linear-gradient(transparent 58%, #000 71% 100%); }

.pixel-world[data-world="lighthouse"] {
  --far-duration: 32s; --mid-duration: 18s; --near-duration: 7.4s;
  --far-x0: -.3%; --far-x1: .4%; --far-y1: -.28%;
  --mid-x0: .54%; --mid-x1: -.7%; --mid-y1: -.48%;
  --near-x0: -1.76%; --near-x1: 1.93%; --near-y1: -.62%;
  --far-opacity: .13; --mid-opacity: .16; --near-opacity: .27;
}
.pixel-world[data-world="lighthouse"] .far { -webkit-mask-image: linear-gradient(#000 0 57%, transparent 72%); mask-image: linear-gradient(#000 0 57%, transparent 72%); }
.pixel-world[data-world="lighthouse"] .mid { -webkit-mask-image: linear-gradient(transparent 23%, #000 38% 85%, transparent 95%); mask-image: linear-gradient(transparent 23%, #000 38% 85%, transparent 95%); }
.pixel-world[data-world="lighthouse"] .near { -webkit-mask-image: linear-gradient(transparent 62%, #000 76% 100%); mask-image: linear-gradient(transparent 62%, #000 76% 100%); }