/* Projected scenery for the three builds. Shapes also work without a canvas. */
.atelier-world .scene-floor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  --facet: #647fb6;
  --light: #cdddff;
  --glow: #749ffa;
}

.atelier-world[data-assembly="read"] .scene-floor { opacity: .37; }
.atelier-world:is([data-assembly="shape"], [data-assembly="test"], [data-assembly="done"]) .scene-floor { opacity: 1; }
.atelier-world[data-wish="castle"] .scene-floor { --facet: #7772ad; --light: #ffdba2; --glow: #d99369; }
.atelier-world[data-wish="city"] .scene-floor { --facet: #5186a8; --light: #a1f4ff; --glow: #54cfe9; }
.atelier-world[data-wish="fairytale"] .scene-floor { --facet: #5689a2; --light: #b3e8ff; --glow: #8eb3ff; }

.scene-floor .world-ring,
.scene-floor .effect-landscape,
.scene-floor .effect-trail { position: absolute; }

.scene-floor .world-ring {
  inset: 56% 11% 15%;
  border: 1px solid #9db1ec29;
  border-radius: 50%;
  background: radial-gradient(ellipse, #7983cf24, transparent 68%);
}

.scene-floor .world-ring::before,
.scene-floor .world-ring::after {
  position: absolute;
  inset: 17% 15%;
  border: 1px solid #9db1ec22;
  border-radius: inherit;
  content: "";
}

.scene-floor .world-ring::after { inset: 33% 30%; border-style: dashed; }
.atelier-world[data-tested] .world-ring { border-color: var(--facet); }

.scene-floor .effect-landscape {
  left: 50%;
  top: 46%;
  width: min(86%, 760px);
  height: 77%;
  transform: translate(-50%, -50%);
}

.scene-floor .effect-landscape i {
  position: absolute;
  display: block;
  left: var(--x);
  bottom: var(--ground, 13%);
  width: var(--width);
  height: var(--height);
  background: linear-gradient(94deg, #1b2339, var(--facet) 49%, #2c3854 50%, #151b30);
  opacity: var(--solid, .94);
  clip-path: var(--outline);
}

.scene-floor .effect-landscape i::after {
  position: absolute;
  inset: 22% 12% 0;
  background: var(--glass, repeating-linear-gradient(90deg, transparent 0 11%, var(--light) 12% 18%, transparent 19% 28%));
  mask-image: repeating-linear-gradient(0deg, transparent 0 13%, black 13% 22%, transparent 22% 30%);
  opacity: .17;
  transition: opacity .48s;
  content: "";
}

.atelier-world[data-tested] .effect-landscape i::after { opacity: .78; }

.scene-floor .effect-trail { inset: 0; }
.scene-floor .effect-trail i {
  position: absolute;
  display: block;
  opacity: 0;
  left: var(--x);
  top: var(--y);
  width: var(--width, 5px);
  height: var(--height, 5px);
  border-radius: 50%;
  transform: var(--start, scale(.45));
  background: var(--light);
  box-shadow: 0 0 10px var(--glow), 0 0 22px var(--glow);
  transition: opacity .5s, transform .75s cubic-bezier(.2,.66,.27,1);
  transition-delay: var(--delay, 0s);
}

.atelier-world[data-tested] .scene-floor .effect-trail i {
  opacity: var(--shine, .85);
  transform: var(--end, scale(1));
}

/* Keep and paired turrets share a single base. */
.atelier-world[data-wish="castle"] .effect-landscape {
  width: min(66%, 475px);
  --tower: polygon(0 14%, 0 0, 19% 0, 19% 9%, 39% 9%, 39% 0, 60% 0, 60% 9%, 81% 9%, 81% 0, 100% 0, 100% 14%, 88% 25%, 88% 100%, 11% 100%, 11% 25%);
}

.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(1) { --x: 35%; --width: 30%; --height: 66%; --outline: var(--tower); }
.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(2) { --x: 12%; --width: 23%; --height: 53%; --outline: var(--tower); --solid: .87; }
.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(3) { --x: 65%; --width: 23%; --height: 53%; --outline: var(--tower); --solid: .87; }
.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(4) { --x: 28%; --width: 17%; --height: 40%; --outline: var(--tower); }
.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(5) { --x: 55%; --width: 17%; --height: 40%; --outline: var(--tower); }
.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(6) {
  --x: 45%;
  --width: 10%;
  --height: 20%;
  border-radius: 48% 48% 0 0;
  border: 1px solid #b3adcd50;
  background: radial-gradient(ellipse at 50% 99%, #17101c, #110d1e 60%, #28253d);
}

.atelier-world[data-wish="castle"] .effect-landscape i:nth-child(6)::after { display: none; }
.atelier-world[data-wish="castle"][data-tested] .effect-landscape i:nth-child(6) { background: radial-gradient(ellipse at 50% 99%, #ffeac0, #a95a47 75%, #292335); }

.atelier-world[data-wish="castle"] .effect-trail i:nth-child(1) { --x: 49%; --y: 64%; --width: 3%; --height: 2%; }
.atelier-world[data-wish="castle"] .effect-trail i:nth-child(2) { --x: 36%; --y: 57%; --delay: .14s; }
.atelier-world[data-wish="castle"] .effect-trail i:nth-child(3) { --x: 64%; --y: 57%; --delay: .14s; }
.atelier-world[data-wish="castle"] .effect-trail i:nth-child(4) { --x: 44%; --y: 41%; --delay: .27s; }
.atelier-world[data-wish="castle"] .effect-trail i:nth-child(5) { --x: 56%; --y: 41%; --delay: .27s; }

/* A varied skyline opens onto a fan of illuminated streets. */
.atelier-world[data-wish="city"] .effect-landscape i { --ground: 17%; }
.atelier-world[data-wish="city"] .effect-landscape i:nth-child(1) { --x: 7%; --width: 17%; --height: 42%; --outline: polygon(0 23%, 34% 23%, 34% 0, 78% 0, 78% 16%, 100% 16%, 100% 100%, 0 100%); }
.atelier-world[data-wish="city"] .effect-landscape i:nth-child(2) { --x: 20%; --width: 14%; --height: 69%; --outline: polygon(0 20%, 36% 20%, 36% 6%, 48% 6%, 48% 0, 56% 0, 56% 6%, 67% 6%, 67% 20%, 100% 20%, 100% 100%, 0 100%); }
.atelier-world[data-wish="city"] .effect-landscape i:nth-child(3) { --x: 34%; --width: 18%; --height: 46%; --outline: polygon(0 16%, 33% 16%, 33% 0, 59% 0, 59% 16%, 100% 16%, 100% 100%, 0 100%); }
.atelier-world[data-wish="city"] .effect-landscape i:nth-child(4) { --x: 48%; --width: 17%; --height: 60%; --outline: polygon(0 22%, 35% 22%, 49% 0, 68% 0, 78% 20%, 100% 20%, 100% 100%, 0 100%); }
.atelier-world[data-wish="city"] .effect-landscape i:nth-child(5) { --x: 63%; --width: 16%; --height: 74%; --outline: polygon(0 22%, 49% 4%, 60% 4%, 60% 0, 71% 0, 71% 6%, 100% 19%, 100% 100%, 0 100%); }
.atelier-world[data-wish="city"] .effect-landscape i:nth-child(6) { --x: 77%; --width: 17%; --height: 46%; --outline: polygon(0 7%, 42% 7%, 42% 23%, 70% 23%, 70% 0, 88% 0, 88% 23%, 100% 23%, 100% 100%, 0 100%); }

.atelier-world[data-wish="city"] .effect-trail i {
  --height: 1px;
  --width: 15%;
  border-radius: 0;
  transform-origin: 0 50%;
  --start: rotate(var(--angle)) scaleX(.3);
  --end: rotate(var(--angle)) scaleX(1);
}

.atelier-world[data-wish="city"] .effect-trail i:nth-child(1) { --x: 47%; --y: 69%; --angle: 151deg; --width: 34%; }
.atelier-world[data-wish="city"] .effect-trail i:nth-child(2) { --x: 49%; --y: 69%; --angle: 130deg; --width: 20%; --delay: .09s; }
.atelier-world[data-wish="city"] .effect-trail i:nth-child(3) { --x: 50%; --y: 70%; --angle: 79deg; --width: 12%; --delay: .16s; }
.atelier-world[data-wish="city"] .effect-trail i:nth-child(4) { --x: 53%; --y: 69%; --angle: 34deg; --width: 21%; --delay: .09s; }
.atelier-world[data-wish="city"] .effect-trail i:nth-child(5) { --x: 54%; --y: 69%; --angle: 18deg; --width: 34%; }

/* A floating island carries a small grove over a falling ribbon of water. */
.atelier-world[data-wish="fairytale"] .effect-landscape { width: min(76%, 560px); height: 86%; }
.atelier-world[data-wish="fairytale"] .effect-landscape i::after { display: none; }

.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(1) {
  --x: 12%;
  --width: 76%;
  --height: 36%;
  --ground: 21%;
  --outline: polygon(0 17%, 10% 1%, 79% 0, 98% 12%, 100% 24%, 95% 39%, 81% 58%, 67% 70%, 58% 100%, 44% 79%, 33% 83%, 23% 59%, 12% 55%, 2% 34%);
  background: conic-gradient(from 50deg at 54% 81%, #4b4279 0deg, #364572 44deg, #7272a1 45deg, #7d64a4 75deg, #3d4269 75deg, #466184 108deg, #394468 155deg, #57648e 158deg, #7b6a9f 193deg, #9a82b2 225deg, #4d477a 242deg, #7675a6 280deg, #635084 319deg, #4b4279 360deg);
}

.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(2) {
  --x: 15%;
  --width: 70%;
  --height: 14%;
  --ground: 49%;
  --outline: polygon(0 59%, 13% 36%, 28% 33%, 34% 20%, 48% 10%, 64% 21%, 76% 10%, 88% 28%, 100% 54%, 79% 71%, 59% 67%, 42% 79%, 22% 73%);
  background: linear-gradient(177deg, #aae3bb, #5a9a89 65%, #508383 71%, #2f6474);
}

.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(3),
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(4),
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(5) {
  border-radius: 60% 50% 0 0;
  box-shadow: inset 0 1px 3px #f8d9ee93;
  background: radial-gradient(ellipse at 28% 40%, #ffb5da 0 7%, transparent 8%),
              radial-gradient(ellipse at 63% 21%, #ffc9d6 0 5%, transparent 6%),
              linear-gradient(165deg, #ca88c7, #9d609e 75%, #675186);
}
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(3) { --x: 30%; --width: 24%; --height: 15%; --ground: 69%; }
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(4) { --x: 56%; --width: 18%; --height: 12%; --ground: 64%; }
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(5) { --x: 21%; --width: 15%; --height: 9%; --ground: 62%; }

.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(3)::after,
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(4)::after,
.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(5)::after {
  display: block;
  inset: 93% 45% -115%;
  border-radius: 25% 25% 10% 10%;
  background: linear-gradient(90deg, #a6bdb6, #dfcedc 49%, #8c6897);
  mask-image: none;
  opacity: .95;
}

.atelier-world[data-wish="fairytale"] .effect-landscape i:nth-child(6) {
  --x: 46%;
  --width: 13%;
  --height: 38%;
  --ground: 17%;
  --outline: polygon(55% 0, 97% 0, 87% 30%, 61% 57%, 55% 78%, 25% 100%, 2% 100%, 22% 77%, 24% 56%, 44% 24%);
  --solid: .34;
  background: linear-gradient(91deg, #758abd30, #8ec2d6a1 61%, #c5f5ffb5 68%, #4c77b056);
  transition: opacity .6s;
}

.atelier-world[data-wish="fairytale"][data-tested] .effect-landscape i:nth-child(6) { opacity: 1; }

.atelier-world[data-wish="fairytale"] .effect-trail i {
  --height: 2%;
  --width: 13%;
  --y: 76%;
  border: 1px solid var(--light);
  background: transparent;
  --start: scale(.46);
}
.atelier-world[data-wish="fairytale"] .effect-trail i:nth-child(1) { --x: 41%; --y: 69%; --width: 1%; --height: 3%; --start: translateY(-16px); --end: translateY(12px); background: var(--light); }
.atelier-world[data-wish="fairytale"] .effect-trail i:nth-child(2) { --x: 44%; --y: 64%; --width: 1%; --height: 3%; --delay: .13s; --start: translateY(-14px); --end: translateY(10px); background: var(--light); }
.atelier-world[data-wish="fairytale"] .effect-trail i:nth-child(3) { --x: 35%; --delay: .28s; }
.atelier-world[data-wish="fairytale"] .effect-trail i:nth-child(4) { --x: 32%; --width: 19%; --delay: .35s; --shine: .52; }
.atelier-world[data-wish="fairytale"] .effect-trail i:nth-child(5) { --x: 28%; --width: 27%; --delay: .43s; --shine: .35; }

.atelier-world:is([data-renderer="gl"], [data-renderer="2d"]) .effect-landscape { visibility: hidden; }
.atelier-world[data-assembly="done"]:not([data-live-stage]) .effect-landscape { visibility: visible; }
.atelier-world[data-live-stage] .scene-floor { visibility: hidden; }
.atelier-world:is([data-renderer="gl"], [data-renderer="2d"]) .effect-trail { opacity: .66; }

.atelier-world[data-motion="paused"] .scene-floor,
.atelier-world[data-motion="paused"] .scene-floor *,
.atelier-world[data-motion="paused"] .scene-floor *::after { transition: none !important; }

@media (max-width: 810px) {
  .scene-floor .world-ring { inset: 58% 4% 14%; }
  .atelier-world[data-wish="castle"] .effect-landscape { width: 72%; }
  .atelier-world[data-wish="city"] .effect-landscape { width: 97%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-world .scene-floor,
  .atelier-world .scene-floor *,
  .atelier-world .scene-floor *::after { transition: none !important; }
}