/* ============================================================================
 * pixel-worlds.css — LIVING CINEMATIC PIXEL SCENERY
 * ---------------------------------------------------------------------------
 * Twelve full-viewport environments made from hard-edged CSS planes. Gradients
 * provide atmosphere; clipped polygons, stepped motion, a coarse pixel grid,
 * and deliberately quantized crossfades keep them in the same visual world as
 * the ASCII centerpiece.
 * ========================================================================== */

.pixel-worlds.scenery {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--field);
  isolation: isolate;
}

/* The painted worlds are retired in favor of a single photographic
   background (above). Their DOM stays mounted — mark.js still keys the
   wordmark's glyph stock off `portfolio:worldchange` — but nothing they
   draw should render over the photo. */
.pixel-world { display: none; }

/* ...except the one scene that belongs to the photograph. It stays mounted
   and `is-on` (the life layer pauses its animations in any world that is
   not), but every PAINTED plane it owns is suppressed. Only `.life` — the
   sprite population in scene-life.css — is allowed through, so the actors
   move over the photo instead of over a CSS-drawn sky. */
.pixel-world[data-world="mediterranean"] { display: block; }
.pixel-world[data-world="mediterranean"] > .sky,
.pixel-world[data-world="mediterranean"] > .far,
.pixel-world[data-world="mediterranean"] > .mid,
.pixel-world[data-world="mediterranean"] > .near,
.pixel-world[data-world="mediterranean"] > .fx { display: none; }

/* The world-arrival grid flash is a switching artifact. Nothing switches
   any more, so it would only ever fire once on load, as a flicker. */
.pixel-world[data-world="mediterranean"].is-on::after { display: none; }

/* the always-on 8px pixel-grid overlay that used to sit here (a faint hairline
   grid across every scene, all the time) is gone by decision — it read as
   screen-door texture rather than as pixel art. The world-switch flash
   (.pixel-world.is-on::after, below) still gives a scene its grid moment,
   but only for the ~1s it takes to arrive. */

.pixel-worlds.scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 44%, transparent 28%, rgba(242, 239, 233, 0.08) 68%, rgba(20, 18, 15, 0.06) 125%),
    rgba(242, 239, 233, 0.08);
}

.pixel-world {
  --sky-top: #d8ccd0;
  --sky-bottom: #ead3b6;
  --light: #f4e4c7;
  --far: #b7aaa8;
  --mid: #8d7e78;
  --near: #6f6560;
  --accent: #866d73;
  position: absolute;
  inset: -2%;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 1600ms steps(12, end);
  will-change: opacity;
}

.pixel-world.is-on { opacity: 1; }

.pixel-world > i {
  position: absolute;
  display: block;
  pointer-events: none;
  font-style: normal;
  will-change: transform;
}

.pixel-world .sky {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 76% 21%, var(--light) 0 5%, transparent 5.2%),
    linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  animation: pixel-sky-breathe 24s steps(24, end) infinite alternate;
}

.pixel-world .sky::before,
.pixel-world .sky::after,
.pixel-world .far::before,
.pixel-world .far::after,
.pixel-world .mid::before,
.pixel-world .mid::after,
.pixel-world .near::before,
.pixel-world .near::after,
.pixel-world .fx::before,
.pixel-world .fx::after {
  content: "";
  position: absolute;
  display: block;
}

/* Quantized cloud banks. Their rectangular repeats move in whole-pixel-feeling
   steps instead of sliding smoothly like ordinary web gradients. */
.pixel-world .sky::before {
  top: 13%;
  left: -8%;
  width: 44%;
  height: 8%;
  opacity: 0.26;
  background: rgba(255, 255, 255, 0.76);
  clip-path: polygon(0 50%, 13% 50%, 13% 25%, 31% 25%, 31% 0, 55% 0, 55% 25%, 83% 25%, 83% 50%, 100% 50%, 100% 100%, 0 100%);
  box-shadow: 76vw 9vh 0 rgba(255, 255, 255, 0.48);
  animation: pixel-cloud-a 38s steps(38, end) infinite;
}

.pixel-world .sky::after {
  top: 29%;
  left: 18%;
  width: 28%;
  height: 5%;
  opacity: 0.17;
  background: rgba(255, 255, 255, 0.72);
  clip-path: polygon(0 50%, 18% 50%, 18% 0, 72% 0, 72% 50%, 100% 50%, 100% 100%, 0 100%);
  animation: pixel-cloud-b 52s steps(52, end) infinite;
}

.pixel-world .far,
.pixel-world .mid,
.pixel-world .near,
.pixel-world .fx { inset: 0; }
.pixel-world .far  { z-index: 2; animation: pixel-far-drift 20s steps(20, end) infinite alternate; }
.pixel-world .mid  { z-index: 3; animation: pixel-mid-drift 15s steps(15, end) infinite alternate; }
.pixel-world .near { z-index: 4; animation: pixel-near-drift 11s steps(11, end) infinite alternate; }
.pixel-world .fx   { z-index: 5; }

/* Shared terrain planes. Each world overrides the silhouettes beneath. */
.pixel-world .far::before {
  left: -4%;
  right: -4%;
  bottom: 8%;
  height: 46%;
  background: var(--far);
  clip-path: polygon(0 74%, 10% 52%, 18% 64%, 28% 30%, 38% 61%, 50% 24%, 63% 58%, 73% 35%, 84% 60%, 94% 43%, 100% 54%, 100% 100%, 0 100%);
}
.pixel-world .mid::before {
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 31%;
  background: var(--mid);
  clip-path: polygon(0 38%, 12% 28%, 24% 47%, 37% 26%, 51% 43%, 66% 20%, 79% 39%, 90% 24%, 100% 40%, 100% 100%, 0 100%);
}
.pixel-world .near::before {
  left: -4%;
  right: -4%;
  bottom: -1%;
  height: 16%;
  background: var(--near);
  clip-path: polygon(0 30%, 10% 38%, 19% 24%, 31% 42%, 44% 22%, 56% 35%, 69% 18%, 82% 37%, 92% 21%, 100% 31%, 100% 100%, 0 100%);
}

/* Small living particles, always behind the black interface text. */
.pixel-world .fx::before {
  top: 18%;
  left: 12%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    14vw 13vh 0 rgba(255, 255, 255, 0.42),
    37vw -4vh 0 rgba(255, 255, 255, 0.54),
    61vw 16vh 0 rgba(255, 255, 255, 0.38),
    73vw 2vh 0 rgba(255, 255, 255, 0.46),
    28vw 39vh 0 rgba(255, 255, 255, 0.34);
  animation: pixel-motes 8s steps(8, end) infinite alternate;
}

/* --------------------------------------------------------------------------
 * CASTLE — rose stone, distant ridges, one severe central keep
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="castle"] {
  --sky-top: #c8bcc9;
  --sky-bottom: #ead1b0;
  --light: #f6e3bd;
  --far: #aaa0a5;
  --mid: #81757a;
  --near: #655d60;
  --accent: #786477;
}
.pixel-world[data-world="castle"] .mid::after {
  left: 58%;
  bottom: 20%;
  width: min(25vw, 380px);
  height: min(37vh, 340px);
  background: var(--mid);
  clip-path: polygon(0 100%, 0 35%, 8% 35%, 8% 24%, 15% 24%, 15% 35%, 28% 35%, 28% 8%, 34% 8%, 34% 0, 40% 0, 40% 8%, 48% 8%, 48% 56%, 59% 56%, 59% 28%, 66% 28%, 66% 18%, 72% 18%, 72% 28%, 80% 28%, 80% 52%, 90% 52%, 90% 38%, 96% 38%, 96% 30%, 100% 30%, 100% 100%);
  filter: drop-shadow(18px 20px 0 rgba(74, 61, 65, 0.16));
}
.pixel-world[data-world="castle"] .mid::after { animation: castle-breathe 7s steps(7, end) infinite alternate; }

/* --------------------------------------------------------------------------
 * FOREST — layered canopy and a stepped stand of trunks
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="forest"] {
  --sky-top: #b9cbb9;
  --sky-bottom: #e6d6b5;
  --light: #eef0c7;
  --far: #93aa91;
  --mid: #667f68;
  --near: #4f6755;
  --accent: #58715e;
}
.pixel-world[data-world="forest"] .far::before {
  height: 58%;
  clip-path: polygon(0 100%, 0 64%, 5% 64%, 5% 43%, 10% 43%, 10% 22%, 15% 22%, 15% 47%, 21% 47%, 21% 29%, 28% 29%, 28% 10%, 34% 10%, 34% 38%, 42% 38%, 42% 18%, 49% 18%, 49% 43%, 57% 43%, 57% 7%, 63% 7%, 63% 32%, 71% 32%, 71% 14%, 77% 14%, 77% 46%, 84% 46%, 84% 25%, 91% 25%, 91% 39%, 100% 39%, 100% 100%);
}
.pixel-world[data-world="forest"] .mid::after {
  left: 12%;
  bottom: 11%;
  width: 18px;
  height: 43%;
  background: var(--near);
  box-shadow: 14vw 5vh 0 var(--mid), 31vw -3vh 0 var(--near), 53vw 4vh 0 var(--mid), 71vw -5vh 0 var(--near);
  opacity: 0.72;
}
.pixel-world[data-world="forest"] .fx::before {
  background: #e7e9b6;
  box-shadow: 12vw 18vh 0 #dfe6a6, 28vw 6vh 0 #eff0bc, 48vw 25vh 0 #dce29a, 70vw 11vh 0 #edf0bb;
  opacity: 0.68;
}

/* --------------------------------------------------------------------------
 * MOUNTAIN — cold stacked peaks with pixel snow caps
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="mountain"] {
  --sky-top: #becdd9;
  --sky-bottom: #e4ded2;
  --light: #f1eee4;
  --far: #98a9b6;
  --mid: #728696;
  --near: #596d7a;
  --accent: #617989;
}
.pixel-world[data-world="mountain"] .far::before {
  height: 64%;
  clip-path: polygon(0 100%, 0 78%, 12% 52%, 21% 66%, 37% 13%, 48% 61%, 59% 33%, 70% 67%, 84% 21%, 100% 69%, 100% 100%);
}
.pixel-world[data-world="mountain"] .far::after {
  left: 27%;
  bottom: 42%;
  width: 24%;
  height: 22%;
  background: rgba(239, 239, 232, 0.84);
  clip-path: polygon(0 100%, 42% 0, 100% 100%, 74% 79%, 61% 88%, 48% 58%, 35% 83%, 24% 74%);
}
.pixel-world[data-world="mountain"] .mid::after {
  right: 5%;
  bottom: 22%;
  width: 42%;
  height: 36%;
  background: var(--mid);
  clip-path: polygon(0 100%, 42% 0, 100% 100%);
  opacity: 0.76;
}

/* --------------------------------------------------------------------------
 * DESERT — bright sky, stepped dunes, distant mesa and cactus
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="desert"] {
  --sky-top: #e8c89d;
  --sky-bottom: #f1dcb8;
  --light: #f7e4ab;
  --far: #c99566;
  --mid: #ac744c;
  --near: #8c5e43;
  --accent: #a15f3f;
}
.pixel-world[data-world="desert"] .far::before {
  height: 39%;
  clip-path: polygon(0 100%, 0 65%, 13% 65%, 13% 48%, 29% 48%, 29% 30%, 45% 30%, 45% 55%, 61% 55%, 61% 41%, 74% 41%, 74% 67%, 100% 67%, 100% 100%);
}
.pixel-world[data-world="desert"] .mid::before {
  height: 33%;
  clip-path: polygon(0 66%, 12% 47%, 25% 31%, 38% 37%, 53% 63%, 70% 41%, 86% 30%, 100% 54%, 100% 100%, 0 100%);
}
.pixel-world[data-world="desert"] .mid::after {
  right: 16%;
  bottom: 20%;
  width: 18px;
  height: 26%;
  background: var(--near);
  clip-path: polygon(34% 100%, 34% 55%, 0 55%, 0 29%, 22% 29%, 22% 43%, 34% 43%, 34% 0, 66% 0, 66% 32%, 79% 32%, 79% 18%, 100% 18%, 100% 48%, 66% 48%, 66% 100%);
}
.pixel-world[data-world="desert"] .fx::before { opacity: 0.25; }

/* --------------------------------------------------------------------------
 * BEACH — horizon, pale surf, island shelf and palm silhouette
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="beach"] {
  --sky-top: #b9d7dc;
  --sky-bottom: #edd8b1;
  --light: #f7e5b8;
  --far: #8fbfc2;
  --mid: #d2b07b;
  --near: #7f9f85;
  --accent: #5f9298;
}
.pixel-world[data-world="beach"] .far::before {
  bottom: 0;
  height: 43%;
  background: #8ebbc1;
  clip-path: polygon(0 13%, 18% 15%, 36% 11%, 55% 16%, 72% 12%, 100% 15%, 100% 100%, 0 100%);
}
.pixel-world[data-world="beach"] .mid::before {
  height: 22%;
  background: var(--mid);
  clip-path: polygon(0 71%, 18% 49%, 36% 56%, 52% 31%, 68% 46%, 82% 25%, 100% 40%, 100% 100%, 0 100%);
}
.pixel-world[data-world="beach"] .mid::after {
  right: 18%;
  bottom: 20%;
  width: 20%;
  height: 44%;
  background: var(--near);
  clip-path: polygon(45% 100%, 50% 35%, 38% 28%, 12% 30%, 35% 19%, 18% 7%, 44% 14%, 48% 0, 55% 16%, 82% 5%, 66% 21%, 96% 24%, 61% 31%, 58% 100%);
  opacity: 0.84;
}
.pixel-world[data-world="beach"] .near::before { background: #c39b69; height: 12%; }

/* --------------------------------------------------------------------------
 * SEA — no land, three independent stepped wave bands
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="sea"] {
  --sky-top: #aec8d6;
  --sky-bottom: #d8e2df;
  --light: #edf0df;
  --far: #88b1c2;
  --mid: #6596ad;
  --near: #477a91;
  --accent: #4f8197;
}
.pixel-world[data-world="sea"] .far::before {
  bottom: 0;
  height: 47%;
  clip-path: polygon(0 14%, 8% 9%, 16% 15%, 24% 8%, 32% 14%, 40% 7%, 48% 15%, 56% 9%, 64% 14%, 72% 8%, 80% 15%, 88% 9%, 100% 14%, 100% 100%, 0 100%);
}
.pixel-world[data-world="sea"] .mid::before {
  height: 32%;
  clip-path: polygon(0 31%, 12% 18%, 23% 33%, 35% 15%, 47% 34%, 59% 18%, 72% 35%, 85% 16%, 100% 32%, 100% 100%, 0 100%);
}
.pixel-world[data-world="sea"] .near::before {
  height: 17%;
  clip-path: polygon(0 36%, 9% 17%, 20% 39%, 31% 16%, 43% 42%, 54% 18%, 67% 40%, 78% 15%, 90% 39%, 100% 22%, 100% 100%, 0 100%);
}
.pixel-world[data-world="sea"] .far,
.pixel-world[data-world="sea"] .mid,
.pixel-world[data-world="sea"] .near { animation-duration: 7s; }

/* --------------------------------------------------------------------------
 * PIRATE — sunset sea and a large hard-edged ship silhouette
 * ----------------------------------------------------------------------- */
.pixel-world[data-world="pirate"] {
  --sky-top: #c7a9ad;
  --sky-bottom: #ebc88f;
  --light: #f3d69b;
  --far: #8fa7aa;
  --mid: #655b5d;
  --near: #444548;
  --accent: #704d55;
}
.pixel-world[data-world="pirate"] .far::before {
  bottom: 0;
  height: 31%;
  background: #7899a3;
  clip-path: polygon(0 21%, 9% 12%, 18% 22%, 29% 11%, 40% 24%, 51% 10%, 62% 22%, 74% 12%, 86% 24%, 100% 13%, 100% 100%, 0 100%);
}
.pixel-world[data-world="pirate"] .mid::before {
  height: 18%;
  background: #567b87;
  clip-path: polygon(0 33%, 13% 17%, 26% 35%, 40% 15%, 54% 37%, 69% 18%, 84% 36%, 100% 14%, 100% 100%, 0 100%);
}
.pixel-world[data-world="pirate"] .mid::after {
  right: 12%;
  bottom: 20%;
  width: min(36vw, 540px);
  height: min(47vh, 430px);
  background: var(--near);
  clip-path: polygon(0 72%, 13% 72%, 13% 65%, 45% 65%, 45% 14%, 48% 14%, 48% 4%, 51% 4%, 51% 14%, 54% 14%, 54% 26%, 74% 40%, 54% 43%, 54% 65%, 82% 65%, 82% 52%, 85% 52%, 85% 65%, 100% 65%, 92% 86%, 75% 100%, 22% 100%, 8% 88%);
  filter: drop-shadow(18px 20px 0 rgba(61, 44, 48, 0.16));
  animation: ship-rock 6s steps(12, end) infinite alternate;
  transform-origin: 50% 100%;
}

/* --------------------------------------------------------------------------
 * THE WORLD ALSO TUNES THE LIVE INTERFACE MATERIAL
 * ----------------------------------------------------------------------- */
html[data-world="blank"]   { --world-accent: #14120f; --world-glass: rgba(242, 239, 233, 0); }
html[data-world="icebreaker"] { --world-accent: #68d9df; --world-glass: rgba(205, 232, 240, 0.4); }
html[data-world="ocean"]      { --world-accent: #2f98a5; --world-glass: rgba(205, 235, 239, 0.4); }
html[data-world="castle"]     { --world-accent: #82566d; --world-glass: rgba(242, 225, 218, 0.4); }
html[data-world="skyscraper"] { --world-accent: #557da0; --world-glass: rgba(229, 238, 240, 0.42); }
html[data-world="citadel"]    { --world-accent: #6a5878; --world-glass: rgba(232, 226, 234, 0.4); }
html[data-world="metropolis"] { --world-accent: #456e9b; --world-glass: rgba(198, 218, 229, 0.38); }
html[data-world="port"]       { --world-accent: #4a667a; --world-glass: rgba(220, 228, 235, 0.4); }
html[data-world="alpine"]     { --world-accent: #587589; --world-glass: rgba(220, 231, 236, 0.42); }
html[data-world="farm"]       { --world-accent: #5a7356; --world-glass: rgba(228, 235, 220, 0.4); }
html[data-world="galleon"]    { --world-accent: #6e3f4b; --world-glass: rgba(222, 203, 198, 0.38); }
html[data-world="cove"]       { --world-accent: #3e7c6f; --world-glass: rgba(210, 237, 224, 0.4); }
html[data-world="lighthouse"] { --world-accent: #5f6c87; --world-glass: rgba(210, 224, 232, 0.4); }

/* the chapter pages (about/projects/connect) cycle a second set of worlds
   that never got an entry here, so the nav hover below had nothing to read
   and silently fell back to the same fixed brown on every one of them */
html[data-world="forest"]   { --world-accent: #58715e; --world-glass: rgba(224, 232, 210, 0.4); }
html[data-world="mountain"] { --world-accent: #617989; --world-glass: rgba(220, 229, 234, 0.42); }
html[data-world="desert"]   { --world-accent: #8a7568; --world-glass: rgba(235, 228, 218, 0.4); }
html[data-world="beach"]    { --world-accent: #5f9298; --world-glass: rgba(228, 235, 232, 0.4); }
html[data-world="sea"]      { --world-accent: #4f8197; --world-glass: rgba(216, 226, 223, 0.4); }
html[data-world="pirate"]   { --world-accent: #704d55; --world-glass: rgba(228, 212, 208, 0.4); }

html[data-world] .hero__pill,
html[data-world] .hero__pill.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), var(--world-glass));
  border-color: rgba(20, 18, 15, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 10px 28px rgba(20, 18, 15, 0.1);
}

html[data-world] .hero__pill-wrap:hover .hero__pill,
html[data-world] .hero__pill:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), var(--world-glass));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 34px rgba(20, 18, 15, 0.16);
}

html[data-world] .hero__mark-stage.is-glitching .hero__wordmark--echo-a {
  color: var(--world-accent);
  opacity: 0.38;
}

/* Everything lives, but stays registered to its exact layout position. The
   independent translate property composes with the existing transform rules. */
.chrome { animation: ui-float-nav 8s ease-in-out infinite; }
.hero__details { animation: ui-float-details 10s ease-in-out infinite; }
.hero__pill-wrap:nth-child(1) { animation: ui-float-pill 7s ease-in-out infinite; }
.hero__pill-wrap:nth-child(2) { animation: ui-float-pill 8.5s 700ms ease-in-out infinite; }
.hero__pill-wrap:nth-child(3) { animation: ui-float-pill 7.8s 1.2s ease-in-out infinite; }

@keyframes pixel-sky-breathe { to { filter: saturate(1.08) brightness(1.025); transform: scale(1.015); } }
@keyframes pixel-cloud-a { to { transform: translateX(18vw); } }
@keyframes pixel-cloud-b { to { transform: translateX(-13vw); } }
@keyframes pixel-far-drift { to { transform: translate3d(-1.2%, 0.7%, 0) scale(1.015); } }
@keyframes pixel-mid-drift { to { transform: translate3d(1.4%, -0.5%, 0) scale(1.012); } }
@keyframes pixel-near-drift { to { transform: translate3d(-0.8%, -0.9%, 0) scale(1.018); } }
@keyframes pixel-motes { to { transform: translate3d(12px, -18px, 0); opacity: 0.35; } }
@keyframes castle-breathe { to { transform: translateY(-4px); } }
@keyframes ship-rock { to { rotate: 0.8deg; translate: 0 -3px; } }
@keyframes ui-float-nav { 50% { translate: 0 -2px; } }
@keyframes ui-float-details { 50% { translate: 0 -3px; } }
@keyframes ui-float-pill { 50% { translate: 0 -2px; } }

@media (max-width: 720px) {
  .pixel-world { inset: 0; transform: none; }
  .pixel-world .mid::after { opacity: 0.58; }
  .pixel-world[data-world="castle"] .mid::after { left: 47%; width: 48vw; }
  .pixel-world[data-world="pirate"] .mid::after { right: -4%; width: 62vw; }
}

/* ========================================================================== 
 * PRODUCTION ART LAYER
 * Original full-screen pixel paintings replace the CSS silhouette studies
 * above. The empty depth planes remain useful as moving light, atmosphere,
 * weather, and foreground glass, so every world feels alive without sliding
 * the interface away from its registered position.
 * ======================================================================== */
.pixel-world[data-world="blank"]      { --world-image: none; --particle: transparent; }
.pixel-world[data-world="icebreaker"] { --world-image: url("../public/worlds-atlas/icebreaker.webp"); --particle: #e8f6ff; }
.pixel-world[data-world="ocean"]      { --world-image: url("../public/worlds-atlas/ocean.webp"); --particle: #d9f8ff; }
.pixel-world[data-world="castle"]     { --world-image: url("../public/worlds-atlas/castle.webp"); --particle: #ffd67f; }
.pixel-world[data-world="skyscraper"] { --world-image: url("../public/worlds-atlas/skyscraper.webp"); --particle: #fff1c3; }
.pixel-world[data-world="citadel"]    { --world-image: url("../public/worlds-atlas/citadel.webp"); --particle: #ffc96d; }
.pixel-world[data-world="metropolis"] { --world-image: url("../public/worlds-atlas/metropolis.webp"); --particle: #80c7e8; }
.pixel-world[data-world="port"]       { --world-image: url("../public/worlds-atlas/port.webp"); --particle: #ffc36c; }
.pixel-world[data-world="alpine"]     { --world-image: url("../public/worlds-atlas/alpine.webp"); --particle: #eef8ff; }
.pixel-world[data-world="farm"]       { --world-image: url("../public/worlds-atlas/farm.webp"); --particle: #f2cb68; }
.pixel-world[data-world="galleon"]    { --world-image: url("../public/worlds-atlas/galleon.webp"); --particle: #ffb35f; }
.pixel-world[data-world="cove"]       { --world-image: url("../public/worlds-atlas/cove.webp"); --particle: #d8f7cc; }
.pixel-world[data-world="lighthouse"] { --world-image: url("../public/worlds-atlas/lighthouse.webp"); --particle: #cceaf5; }

/* The vignette + top-to-bottom tint that used to sit here is gone with every
   other overlay on the photograph — see the note on .chapter-glass. */
.pixel-worlds.scenery::after {
  content: none;
}

.pixel-world {
  inset: -3%;
  transform: scale(1.02);
  transition: opacity 550ms steps(8, end);
}

.pixel-world.is-on {
  animation: world-pixel-enter 600ms steps(8, end) both;
}

.pixel-world[data-world="blank"] {
  inset: 0;
  transform: none;
  background: #f2efe9;
}

.pixel-world[data-world="blank"].is-on { animation: none; }

.pixel-world[data-world="blank"] .sky {
  background: #f2efe9;
  filter: none;
  transform: none;
  animation: none !important;
}

html[data-world="blank"] .pixel-worlds.scenery::before,
html[data-world="blank"] .pixel-worlds.scenery::after,
html[data-world="blank"] .pixel-world[data-world="blank"] :is(.far, .mid, .near, .fx) {
  opacity: 0;
}

.pixel-world .sky {
  inset: 0;
  background-image: var(--world-image);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: none;
  filter: saturate(1.07) contrast(1.035);
}

.pixel-world.is-on .sky {
  animation: world-camera var(--camera-duration, 13s) steps(var(--camera-steps, 34), end) both;
}

/* Retire the prototype polygon scenery while retaining the five-layer DOM. */
.pixel-worlds .pixel-world .sky::before,
.pixel-worlds .pixel-world .sky::after,
.pixel-worlds .pixel-world .far::before,
.pixel-worlds .pixel-world .far::after,
.pixel-worlds .pixel-world .mid::before,
.pixel-worlds .pixel-world .mid::after,
.pixel-worlds .pixel-world .near::before,
.pixel-worlds .pixel-world .near::after {
  content: none !important;
}

.pixel-worlds .pixel-world .far {
  z-index: 2;
  background:
    radial-gradient(circle at 23% 24%, rgba(255, 240, 189, 0.18), transparent 31%),
    radial-gradient(circle at 78% 72%, rgba(83, 172, 196, 0.12), transparent 36%);
  mix-blend-mode: screen;
  animation: world-light-drift 8s steps(16, end) infinite alternate;
}

.pixel-worlds .pixel-world .mid {
  z-index: 3;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 245, 216, 0.12) 48%, transparent 64%);
  mix-blend-mode: overlay;
  animation: world-light-sweep 9s steps(18, end) infinite;
}

.pixel-worlds .pixel-world .near {
  z-index: 4;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 7, 6, 0.18) 112%);
  animation: world-foreground-breathe 6s steps(12, end) infinite alternate;
}

.pixel-worlds .pixel-world .fx::before {
  top: 16%;
  left: 9%;
  width: 4px;
  height: 4px;
  border-radius: 0;
  background: var(--particle);
  box-shadow:
    9vw 24vh 0 var(--particle), 18vw 7vh 0 var(--particle),
    29vw 43vh 0 var(--particle), 42vw 18vh 0 var(--particle),
    55vw 34vh 0 var(--particle), 67vw 11vh 0 var(--particle),
    76vw 48vh 0 var(--particle), 87vw 28vh 0 var(--particle),
    35vw 64vh 0 var(--particle), 72vw 70vh 0 var(--particle);
  opacity: 0.55;
  animation: world-particles 5.6s steps(14, end) infinite;
}

.pixel-worlds .pixel-world .fx::after {
  inset: -15%;
  background-image: repeating-linear-gradient(112deg, transparent 0 34px, rgba(255,255,255,0.11) 35px 36px, transparent 37px 76px);
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: world-weather 7s steps(18, end) infinite;
}

.pixel-worlds .pixel-world[data-world="forest"] .fx::after {
  background-image: repeating-linear-gradient(128deg, transparent 0 52px, rgba(205, 237, 119, 0.16) 53px 56px, transparent 57px 94px);
}

.pixel-worlds .pixel-world[data-world="desert"] .fx::after {
  background-image: repeating-linear-gradient(96deg, transparent 0 44px, rgba(255, 217, 154, 0.16) 45px 47px, transparent 48px 82px);
  animation-duration: 4.8s;
}

.pixel-worlds .pixel-world:is([data-world="beach"], [data-world="sea"], [data-world="pirate"]) .near {
  background:
    repeating-linear-gradient(176deg, transparent 0 17px, rgba(215, 247, 255, 0.13) 18px 20px, transparent 21px 38px),
    linear-gradient(180deg, transparent 55%, rgba(13, 45, 61, 0.16) 110%);
  animation: world-tide 5s steps(12, end) infinite alternate;
}

.pixel-worlds .pixel-world[data-world="mountain"] .fx::after {
  background-image: repeating-linear-gradient(118deg, transparent 0 48px, rgba(244, 252, 255, 0.19) 49px 51px, transparent 52px 88px);
}

.pixel-world.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 5px, transparent 5px 18px),
    repeating-linear-gradient(90deg, rgba(16,13,11,0.15) 0 5px, transparent 5px 18px);
  mix-blend-mode: overlay;
  animation: world-grid-flash 1050ms steps(8, end) both;
}

@keyframes world-pixel-enter {
  0%   { clip-path: inset(0 100% 0 0); filter: contrast(1.85) saturate(0.45); }
  48%  { clip-path: inset(0 0 0 0); filter: contrast(1.35) saturate(0.72); }
  72%  { clip-path: inset(0); filter: contrast(1.12) saturate(1.12); }
  100% { clip-path: inset(0); filter: none; }
}

@keyframes world-camera {
  0%   { transform: scale(var(--camera-z0, 1.045)) translate3d(var(--camera-x0, -0.35%), var(--camera-y0, 0.2%), 0); }
  50%  { transform: scale(var(--camera-zm, 1.075)) translate3d(var(--camera-xm, 0.4%), var(--camera-ym, -0.35%), 0); }
  100% { transform: scale(var(--camera-z1, 1.095)) translate3d(var(--camera-x1, 0.15%), var(--camera-y1, -0.7%), 0); }
}

@keyframes world-light-drift { to { transform: translate3d(1.5%, -0.8%, 0) scale(1.025); opacity: 0.72; } }
@keyframes world-light-sweep { to { transform: translate3d(22%, 0, 0); } }
@keyframes world-foreground-breathe { to { transform: translate3d(-0.5%, -0.65%, 0) scale(1.012); } }
@keyframes world-particles {
  0% { transform: translate3d(0, 10px, 0); opacity: 0.2; }
  50% { opacity: 0.68; }
  100% { transform: translate3d(22px, -28px, 0); opacity: 0.12; }
}
@keyframes world-weather { to { transform: translate3d(7%, 9%, 0); } }
@keyframes world-tide { to { transform: translate3d(-1.5%, -0.8%, 0) scale(1.018); } }
@keyframes world-grid-flash {
  0% { opacity: 0.95; background-size: 72px 72px; }
  46% { opacity: 0.34; background-size: 22px 22px; }
  100% { opacity: 0; background-size: 6px 6px; }
}

@media (max-width: 720px) {
  .pixel-world .sky { background-position: 50% 50%; }
}

/* ========================================================================== 
 * ATLAS CAMERA AND ATMOSPHERE
 * Every approved painting has a different camera cadence and weather field.
 * ======================================================================== */
.pixel-world[data-world="icebreaker"] { --camera-duration: 19s; --camera-steps: 38; --camera-z0: 1.04; --camera-zm: 1.065; --camera-z1: 1.08; --camera-x0: -.2%; --camera-xm: .2%; --camera-x1: .38%; --camera-y1: -.42%; }
.pixel-world[data-world="ocean"]      { --camera-duration: 15s; --camera-steps: 40; --camera-z0: 1.035; --camera-zm: 1.07; --camera-z1: 1.09; --camera-x0: -.35%; --camera-xm: .35%; --camera-x1: -.1%; --camera-y1: -.5%; }
.pixel-world[data-world="castle"]     { --camera-duration: 25s; --camera-steps: 42; --camera-z0: 1.035; --camera-zm: 1.055; --camera-z1: 1.072; --camera-x0: -.15%; --camera-xm: .25%; --camera-x1: .1%; --camera-y1: -.38%; }
.pixel-world[data-world="skyscraper"] { --camera-duration: 29s; --camera-steps: 46; --camera-z0: 1.03; --camera-zm: 1.052; --camera-z1: 1.07; --camera-x0: -.12%; --camera-xm: .16%; --camera-x1: .08%; --camera-y0: .38%; --camera-ym: -.18%; --camera-y1: -.75%; }
.pixel-world[data-world="citadel"]    { --camera-duration: 27s; --camera-steps: 42; --camera-z0: 1.035; --camera-zm: 1.06; --camera-z1: 1.078; --camera-x0: -.28%; --camera-xm: .22%; --camera-x1: .35%; --camera-y1: -.42%; }
.pixel-world[data-world="metropolis"] { --camera-duration: 18s; --camera-steps: 40; --camera-z0: 1.04; --camera-zm: 1.068; --camera-z1: 1.085; --camera-x0: -.3%; --camera-xm: .34%; --camera-x1: .16%; --camera-y1: -.58%; }
.pixel-world[data-world="port"]       { --camera-duration: 23s; --camera-steps: 42; --camera-z0: 1.035; --camera-zm: 1.058; --camera-z1: 1.075; --camera-x0: -.26%; --camera-xm: .3%; --camera-x1: .18%; --camera-y1: -.46%; }
.pixel-world[data-world="alpine"]     { --camera-duration: 33s; --camera-steps: 48; --camera-z0: 1.03; --camera-zm: 1.048; --camera-z1: 1.063; --camera-x0: -.12%; --camera-xm: .15%; --camera-x1: .06%; --camera-y1: -.34%; }
.pixel-world[data-world="farm"]       { --camera-duration: 26s; --camera-steps: 44; --camera-z0: 1.035; --camera-zm: 1.056; --camera-z1: 1.073; --camera-x0: -.2%; --camera-xm: .25%; --camera-x1: .1%; --camera-y1: -.4%; }
.pixel-world[data-world="galleon"]    { --camera-duration: 12s; --camera-steps: 32; --camera-z0: 1.045; --camera-zm: 1.078; --camera-z1: 1.098; --camera-x0: -.48%; --camera-xm: .55%; --camera-x1: -.2%; --camera-y0: .35%; --camera-ym: -.5%; --camera-y1: -.78%; }
.pixel-world[data-world="cove"]       { --camera-duration: 21s; --camera-steps: 40; --camera-z0: 1.035; --camera-zm: 1.06; --camera-z1: 1.078; --camera-x0: -.24%; --camera-xm: .28%; --camera-x1: .12%; --camera-y1: -.44%; }
.pixel-world[data-world="lighthouse"] { --camera-duration: 19s; --camera-steps: 38; --camera-z0: 1.04; --camera-zm: 1.065; --camera-z1: 1.082; --camera-x0: -.32%; --camera-xm: .38%; --camera-x1: .16%; --camera-y1: -.55%; }

.pixel-worlds .pixel-world[data-world="icebreaker"] .fx::after {
  background-image:
    radial-gradient(ellipse at 78% 9%, rgba(45, 255, 200, .22), transparent 34%),
    repeating-linear-gradient(115deg, transparent 0 27px, rgba(239, 250, 255, .28) 28px 31px, transparent 32px 58px);
  opacity: .38;
  animation: atlas-polar 9s steps(28, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="ocean"] .fx::after {
  background-image:
    radial-gradient(ellipse at 65% 25%, rgba(255, 247, 207, .26), transparent 34%),
    repeating-linear-gradient(178deg, transparent 0 24px, rgba(211, 248, 255, .15) 25px 27px, transparent 28px 46px);
  opacity: .34;
  animation: atlas-water-sky 7s steps(24, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="castle"] .fx::after {
  background-image:
    linear-gradient(112deg, transparent 22%, rgba(255, 222, 157, .2) 38%, transparent 54%),
    radial-gradient(circle at 78% 61%, rgba(255, 180, 90, .14), transparent 29%);
  opacity: .32;
  animation: atlas-light-shift 13s steps(28, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="skyscraper"] .fx::after {
  background-image:
    radial-gradient(ellipse at 24% 66%, rgba(255,255,255,.3), transparent 25%),
    radial-gradient(ellipse at 72% 56%, rgba(218, 239, 247, .26), transparent 28%),
    linear-gradient(108deg, transparent 32%, rgba(255, 235, 183, .18) 48%, transparent 63%);
  opacity: .3;
  animation: atlas-cloud-deck 18s steps(34, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="citadel"] .fx::after {
  background-image:
    repeating-linear-gradient(175deg, transparent 0 38px, rgba(235, 225, 206, .14) 39px 46px, transparent 47px 83px),
    linear-gradient(105deg, transparent 24%, rgba(255, 213, 143, .18) 44%, transparent 64%);
  opacity: .32;
  animation: atlas-valley-mist 15s steps(30, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="metropolis"] .fx::after {
  background-image:
    repeating-linear-gradient(112deg, transparent 0 24px, rgba(160, 211, 236, .25) 25px 28px, transparent 29px 53px),
    linear-gradient(90deg, transparent 36%, rgba(128, 198, 230, .1) 51%, transparent 66%);
  opacity: .42;
  animation: atlas-city-rain 5.5s steps(28, end) infinite;
}
.pixel-worlds .pixel-world[data-world="port"] .fx::after {
  background-image:
    linear-gradient(0deg, rgba(229, 217, 198, .18), transparent 42%),
    repeating-linear-gradient(92deg, transparent 0 61px, rgba(255, 205, 132, .09) 62px 68px, transparent 69px 121px);
  opacity: .3;
  animation: atlas-harbor-haze 12s steps(26, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="alpine"] .fx::after {
  background-image:
    radial-gradient(ellipse at 38% 52%, rgba(234, 245, 250, .22), transparent 28%),
    repeating-linear-gradient(118deg, transparent 0 54px, rgba(244, 252, 255, .15) 55px 58px, transparent 59px 98px);
  opacity: .32;
  animation: atlas-mountain-air 17s steps(32, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="farm"] .fx::after {
  background-image:
    repeating-linear-gradient(100deg, transparent 0 47px, rgba(255, 228, 155, .12) 48px 54px, transparent 55px 91px),
    linear-gradient(115deg, transparent 28%, rgba(255, 232, 171, .18) 46%, transparent 64%);
  opacity: .34;
  animation: atlas-field-wind 8s steps(24, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="galleon"] .fx::after {
  background-image:
    repeating-linear-gradient(112deg, transparent 0 21px, rgba(191, 211, 221, .26) 22px 26px, transparent 27px 49px),
    radial-gradient(ellipse at 43% 17%, rgba(255, 206, 132, .12), transparent 39%);
  opacity: .47;
  animation: atlas-storm 4.8s steps(24, end) infinite;
}
.pixel-worlds .pixel-world[data-world="cove"] .fx::after {
  background-image:
    repeating-linear-gradient(176deg, transparent 0 18px, rgba(207, 252, 245, .18) 19px 22px, transparent 23px 42px),
    radial-gradient(ellipse at 68% 63%, rgba(255, 235, 156, .17), transparent 35%);
  opacity: .34;
  animation: atlas-cove-breeze 8s steps(26, end) infinite alternate;
}
.pixel-worlds .pixel-world[data-world="lighthouse"] .fx::after {
  background-image:
    repeating-linear-gradient(116deg, transparent 0 36px, rgba(205, 226, 236, .2) 37px 40px, transparent 41px 73px),
    linear-gradient(0deg, rgba(202, 220, 229, .16), transparent 52%);
  opacity: .4;
  animation: atlas-coastal-weather 7s steps(26, end) infinite alternate;
}

@keyframes atlas-polar { to { transform: translate3d(5%, 7%, 0); filter: hue-rotate(12deg) brightness(1.08); } }
@keyframes atlas-water-sky { to { transform: translate3d(-3%, -2%, 0); filter: brightness(1.12); } }
@keyframes atlas-light-shift { to { transform: translate3d(9%, 0, 0); opacity: .2; } }
@keyframes atlas-cloud-deck { to { transform: translate3d(7%, -4%, 0) scale(1.04); opacity: .22; } }
@keyframes atlas-valley-mist { to { transform: translate3d(8%, 3%, 0); opacity: .18; } }
@keyframes atlas-city-rain { to { transform: translate3d(-6%, 13%, 0); } }
@keyframes atlas-harbor-haze { to { transform: translate3d(6%, -2%, 0); filter: brightness(1.08); } }
@keyframes atlas-mountain-air { to { transform: translate3d(5%, 4%, 0); opacity: .2; } }
@keyframes atlas-field-wind { to { transform: translate3d(9%, -1%, 0) skewX(-2deg); } }
@keyframes atlas-storm { to { transform: translate3d(-7%, 14%, 0); filter: brightness(.88); } }
@keyframes atlas-cove-breeze { to { transform: translate3d(-4%, -2%, 0); filter: brightness(1.1); } }
@keyframes atlas-coastal-weather { to { transform: translate3d(7%, 8%, 0); opacity: .25; } }