:root {
  color-scheme: light;
  background: #f7efe1;
}

body {
  margin: 0;
}

main {
  display: grid;
  min-height: 100svh;
  place-items: center;
  box-sizing: border-box;
  padding: 1.25rem;
}

.loom {
  position: relative;
  width: min(100%, 36rem, 125svh);
  margin: 0;
}

.loom img {
  display: block;
  width: 100%;
  height: auto;
}

.shuttle-motion {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .shuttle-motion {
    position: absolute;
    inset: 0;
    display: block;
    background: url("./weaver.webp") center / 100% 100% no-repeat;
    mask-image: radial-gradient(ellipse 15% 10% at 43% 52%, #000 38%, transparent 100%);
    animation: pass-shuttle 2.6s ease-in-out 1 both;
  }
}

@keyframes pass-shuttle {
  0%, 100% { transform: translate(0); }
  48% { transform: translate(1.1%, -0.5%); }
  73% { transform: translate(-0.35%, 0.22%); }
}