/*  ARTISH Motion — layout, stacking, and the static fallback.
 *
 *  The stack composites to the original artwork with zero JavaScript running:
 *  every layer sits at its natural position with no transform, so a failed
 *  script or a slow parse degrades to the flat collage rather than to nothing.
 */

/* The root must have a height. It fills a positioned parent by default; if you
   drop it into normal flow instead, give it an explicit height or aspect-ratio
   or the stack collapses to nothing. */
.am-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.am-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
  pointer-events: none;
}
.am-scene[data-active] { opacity: 1; }

/* sized by the runtime to emulate object-fit:cover across the whole stack */
.am-fit { position: absolute; }

.am-layer {
  position: absolute;
  backface-visibility: hidden;
}
/* Promote only the scene actually on screen. Hinting all 26 layers at once
   costs compositor memory for a stack that isn't being drawn. */
.am-scene[data-active] .am-layer { will-change: transform; }
.am-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* Region layers reuse the base image through a mask, so the water, sky and
   foliage bands cost one download between them instead of one each. */
.am-region {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* If masks aren't supported the region layers would paint the whole base image
   over the cutouts, which is worse than losing their motion. Hide them. */
@supports not ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .am-region, .am-shade { display: none; }
}

/* The moon reads as a body with volume because a soft terminator creeps across
   it — not because a fabricated surface texture rotates. */
.am-shade {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: soft-light;
}
.am-shade i {
  position: absolute;
  inset: -25%;
  display: block;
  will-change: transform;
}
.am-shade-lit {
  background: radial-gradient(circle at 34% 28%,
    rgba(255, 244, 226, .40), rgba(255, 244, 226, .10) 42%, transparent 66%);
}
.am-shade-dim {
  background: radial-gradient(circle at 74% 78%,
    rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 44%, transparent 68%);
}

/*  Reduced motion: the composition is already correct with no transforms
    applied, so the fallback is simply the artwork, held still. */
@media (prefers-reduced-motion: reduce) {
  .am-layer { transform: none !important; will-change: auto; }
  .am-scene { transition: none; }
  .am-layer[style*="mix-blend-mode"] { opacity: 0 !important; }
}