/* ==========================================================================
   motifs.css — decorative shapes of each project (generated from the `deco`
   list in js/data/projects.js).
   .m    positioned + parallax (--sp from js/parallax.js, --p from stack.js,
         multiplied by its own depth --d)
   .m-i  the shape itself, with its own idle float loop
   ========================================================================== */
.m {
  position: absolute;
  width: var(--w); height: var(--h);
  opacity: var(--o, 1);
  rotate: var(--r, 0deg);
  translate: 0 calc((var(--sp, 0) - var(--p, 0)) * var(--d, .3) * 160px);
}
.m-i {
  display: block; width: 100%; height: 100%;
  animation: float var(--fd, 7s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
.m:nth-child(2n) .m-i { --fd: 8.5s; }
.m:nth-child(3n) .m-i { --fd: 6s; animation-direction: reverse; }
.proj:not(.is-near) .m-i { animation-play-state: paused; }

.m-sheet { --w: clamp(70px, 9vw, 130px); --h: auto; aspect-ratio: 3 / 4; }
.m-sheet .m-i {
  border-radius: 12px; background-color: #FFF6DF;
  box-shadow: 0 18px 30px -20px rgba(59, 35, 15, .6);
  background-image: linear-gradient(#E9C98A, #E9C98A), linear-gradient(#E9C98A, #E9C98A), linear-gradient(#E9C98A, #E9C98A);
  background-size: 60% 6px, 70% 6px, 45% 6px; background-repeat: no-repeat;
  background-position: 20% 24%, 20% 40%, 20% 56%;
}
.m-dot .m-i { border-radius: 50%; background: var(--c); }
.m-planet .m-i { position: relative; }
.m-planet .m-i i { position: absolute; inset: 0; border-radius: 50%; background: var(--c); box-shadow: inset -18px -14px 0 rgba(0, 0, 0, .18); }
/* ring is centred on the planet, so it can never drift out of alignment:
   back half is painted before the sphere, front half after it */
.m-planet.has-ring .m-i::before, .m-planet.has-ring .m-i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 206%; height: 46%;
  translate: -50% -50%; rotate: -16deg; border-radius: 50%;
  border: 2px solid var(--c2, #C9BCFF); pointer-events: none;
}
.m-planet.has-ring .m-i::before { opacity: .45; }
.m-planet.has-ring .m-i::after { clip-path: inset(50% 0 0 0); }
.m-roll .m-i { border-radius: 999px; background: var(--c); }
.m-ring .m-i { border-radius: 50%; border: 2px solid var(--c, currentColor); opacity: .25; }
.m-plus { --w: auto; --h: auto; }
.m-plus .m-i { color: #fff; opacity: .22; font: 900 clamp(40px, 6vw, 90px)/1 var(--wide); animation-name: spin-slow; animation-duration: 14s; animation-timing-function: linear; }
.m-spark .m-i { color: var(--c, #FFD86B); animation-name: twinkle; animation-duration: 3.4s; }
.m-spark svg, .m-gear svg { display: block; width: 100%; height: 100%; }
.m-gear .m-i { opacity: .9; animation: spin-slow 22s linear infinite; }
.m-gear:nth-child(2n) .m-i { animation-direction: reverse; animation-duration: 16s; }
.m-stripes { --w: clamp(140px, 22vw, 300px); --h: 22px; }
.m-stripes .m-i { border-radius: 12px; opacity: .85; background: repeating-linear-gradient(-45deg, #1F1712 0 14px, #FFB067 14px 28px); background-size: 39.6px 100%; animation-name: slide-stripes; animation-duration: 2.4s; animation-timing-function: linear; }
.m-gem { --w: clamp(40px, 5vw, 72px); --h: var(--w); aspect-ratio: 1; height: auto; }
.m-gem .m-i { border: 2px solid #C9A867; border-radius: 8px; rotate: 45deg; }