.island-depth-fog{position:absolute;inset:0;pointer-events:none;overflow:visible;--rear:.83;--ruins:.44;--bridge:.65}
.depth-fog{position:absolute;inset:-10% -20%;transition:opacity 4s ease;will-change:opacity}
.depth-fog::before,.depth-fog::after{content:'';position:absolute;inset:0;background:inherit;animation:depth-mist-drift 26s ease-in-out infinite alternate}
.depth-fog::after{opacity:.45;animation-duration:37s;animation-direction:alternate-reverse}
.rear-fog{opacity:var(--rear);background:radial-gradient(ellipse 16.43% 10.83% at 42.14% 18.33%,#c5d3c9b8 15%,#bccdc294 46%,#b5c7bf00 100%),radial-gradient(ellipse 15% 10% at 58.57% 21.67%,#cbd8ceb0 10%,#b9cdc082 47%,#b9cdc000 100%),radial-gradient(ellipse 15.7% 10.83% at 27.14% 29.17%,#c9d7cc9e 12%,#bdcfc476 46%,#bdcfc400 100%)}
.ruins-fog{opacity:var(--ruins);background:radial-gradient(ellipse 17.14% 7.5% at 45.71% 27.5%,#c7d5caa8 10%,#bed0c170 48%,#bed0c100 100%)}
.bridge-fog{opacity:var(--bridge);background:radial-gradient(ellipse 10% 10.83% at 80% 40%,#c8d6cdb0 10%,#b9cdc47a 46%,#b9cdc400 100%)}
#island[data-step="2"] .island-depth-fog{--rear:.72;--ruins:.36;--bridge:.56}
#island[data-step="3"] .island-depth-fog{--rear:.57;--ruins:.19;--bridge:.43}
#island[data-step="4"] .island-depth-fog{--rear:.39;--ruins:.08;--bridge:.29}
#island[data-step="5"] .island-depth-fog{--rear:.13;--ruins:.04;--bridge:.12}
@keyframes depth-mist-drift{from{transform:translate(-1.2%,-.6%)}to{transform:translate(1.4%,.7%)}}
@media(prefers-reduced-motion:reduce){.depth-fog{transition:none}.depth-fog::before,.depth-fog::after{animation:none}}