/* A separate Minecraft world asset: replace the PNG without editing the backdrop. */
.forever-island {
  position: absolute;
  top: 100px;
  bottom: 56px;
  left: calc(-25% - clamp(24px, 1.9vw, 40px));
  width: 128%;
  display: grid;
  place-items: center;
  isolation: isolate;
  z-index: 1;
}
.island-float {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  transform: translate3d(0, 0, 0);
  transition: transform .7s cubic-bezier(.2, .65, .3, 1);


}
.forever-island img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  /* Keep the skyline clear, dissolve the rocky base into the actual sky. */
  -webkit-mask-image: linear-gradient(#000 42%, #000e 55%, #0008 72%, #0002 88%, transparent 98%), linear-gradient(90deg, transparent, #000 21%, #000 79%, transparent);
  mask-image: linear-gradient(#000 42%, #000e 55%, #0008 72%, #0002 88%, transparent 98%), linear-gradient(90deg, transparent, #000 21%, #000 79%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: saturate(.9) brightness(1.03);




}
.island-mist, .forever-island::after {
  position: absolute;
  pointer-events: none;
  content: "";
  width: 100%;
  height: 34%;
  left: -8%;
  bottom: 16%;
  background: url('island-fog.png?v=2') center / contain no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  will-change: transform, opacity;
  opacity: 0;
  animation: island-mist-drift 19s linear infinite;
}
.island-mist-back { z-index: -1; bottom: 44%; animation-duration: 25s; animation-delay: -12s; }
.island-mist-front { bottom: 7%; height: 43%; animation-delay: -7s; }
.forever-island::after { bottom: 29%; height: 24%; animation-duration: 23s; animation-delay: -17s; animation-direction: reverse; }

@keyframes island-mist-drift {
  0% { transform: translate3d(-28%, 3px, 0) scale(.96); opacity: 0; }
  20% { opacity: .52; }
  55% { opacity: .64; }
  85% { opacity: .42; }
  100% { transform: translate3d(40%, -5px, 0) scale(.96); opacity: 0; }
}

/* Static at rest; a small lift on deliberate hover or keyboard focus. */
.forever-island:focus-visible .island-float { transform: translate3d(0, -6px, 0); }
@media (hover: hover) and (pointer: fine) {
  .forever-island:hover .island-float { transform: translate3d(0, -6px, 0); }
}
.forever-island::before {
  content: '';
  position: absolute;
  left: -10%;
  bottom: 1%;
  width: 120%;
  height: 52%;
  pointer-events: none;
  z-index: 1;
  background: url('island-fog.png?v=2') center / contain no-repeat;
  mask-image: radial-gradient(ellipse, #000 20%, transparent 72%);
  animation: island-fog 16s ease-in-out infinite alternate;
}
.island-fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.island-fireflies i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6b5;
  box-shadow: 0 0 5px 2px #ffd86c90, 0 0 12px 4px #ffd86c30;
  opacity: 0;
  animation: island-firefly var(--duration) ease-in-out var(--delay) infinite;
}
@keyframes island-firefly {
  0%, 100% { opacity: 0; transform: translate3d(0, 5px, 0); }
  25% { opacity: .8; }
  60% { opacity: .45; }
  85% { opacity: 0; transform: translate3d(var(--drift), -16px, 0); }
}
@keyframes island-fog {
  from { opacity: .5; transform: translate3d(-12px, 3px, 0); }
  to { opacity: .8; transform: translate3d(14px, -3px, 0); }
}
.detail-visual[data-art="01"] {
  background-image: url('forever-world.png?v=3'), radial-gradient(ellipse at bottom, #7895a8, #172635 75%);
  background-size: auto 95%, cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 1100px) {
  .world-systems { height: 520px; }
  .forever-island { top: 112px; bottom: 108px; left: 2%; width: 96%; }
  .world-systems .systems-art { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .forever-island::before { animation: none; opacity: .4; }
  .island-fireflies i { animation: none; opacity: .45; }
  .island-mist, .forever-island::after { animation: none; opacity: .3; will-change: auto; }
  .island-float { animation: none; transform: none; transition: none; will-change: auto; }
  .forever-island:is(:hover, :focus-visible) .island-float { transform: none; }
  .forever-island img { transition: none; animation: none; translate: none; }
  .forever-island:is(:hover, :focus-visible) img { transform: none; }
}