/* Decorative motion never changes the geometry or click targets of the page. */
#home-view .atlas-highlight { display: none; }
#home-view .atlas-details {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
#home-view .atlas-details g { opacity: 0; }
#home-view .atlas-trace { stroke-dasharray: 1; }
#home-view .atlas-traveller { transform-origin: 0 0; opacity: 0; }
#home-view .atlas-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
#home-view .atlas-details-mobile,
#home-view .atlas-mobile-motion-surface { display: none; }

@media (min-width: 801px) {
  #home-view { overflow: clip; }
  #home-view h1 { text-shadow: 0 2px 2px #10102030, 0 12px 24px #11112124; }
  #home-view .home-world-label { text-shadow: 0 2px 2px #0b0c1c38, 0 7px 16px #1111212b; }
  #home-view .atlas-highlight {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("assets/memory-encounter-desktop.png") center / 100% 100% no-repeat;
    filter: saturate(1.06) brightness(1.12);
    -webkit-mask-image: radial-gradient(ellipse 18% 80% at var(--atlas-highlight-x,50%) 52%, black 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 18% 80% at var(--atlas-highlight-x,50%) 52%, black 20%, transparent 100%);
    opacity: 0;
    transform-origin: var(--atlas-highlight-x,50%) 52%;
  }
  #home-view[data-atlas-world] .atlas-highlight { opacity: .52; }
  #home-view .home-world:hover .home-art,
  #home-view .home-world:focus-visible .home-art { transform: none; filter: var(--thumbnail-filter); }
  #home-view .home-world:hover .world-arrow,
  #home-view .home-world:focus-visible .world-arrow { transform: none; }
  #home-view .home-world[data-atlas-active] .home-art { filter: var(--thumbnail-filter) brightness(1.09); }
}

@media (prefers-reduced-motion: no-preference) {
  #home-view .atlas-highlight { transition: opacity .4s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  #home-view[data-atlas-world] .atlas-highlight { transform: scale(1.012); }
  #home-view .home-world[data-atlas-active] .world-arrow { transform: translateX(4px); }
}
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  #home-view .atlas-art {
    transform: translate3d(var(--atlas-shift-x,0px),calc(-50% + var(--atlas-shift-y,0px)),0);
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
  }
}
@media (max-width: 800px) {
  #home-view .atlas-mobile-motion-surface {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  #home-view .atlas-details-mobile { display: block; z-index: 1; stroke-width: 2.4; }
  #home-view .atlas-details-desktop { display: none; }
  #home-view .home-world[data-atlas-active] .home-world-label { text-shadow: 0 0 18px color-mix(in srgb, var(--world) 40%, transparent); }
}
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  #home-view .mobile-atlas-art,
  #home-view .atlas-details-mobile {
    transform: translate3d(var(--atlas-shift-x,0px),var(--atlas-shift-y,0px),0);
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #home-view .atlas-details { display: none; }
  #home-view .home-world,
  #home-view .home-world .home-art,
  #home-view .home-world .world-arrow,
  #home-view .atlas-highlight,
  #home-view .mobile-atlas-art { transform: none !important; transition: none !important; }
}