{"id":"magnetic-attraction","title":"Magnetic Attraction","html":"<!doctype html>\n<html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><meta name=\"description\" content=\"A button with a little extra pull.\"><title>Magnetic Attraction — MotionVault</title><style>\n.scene-root {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  aspect-ratio: 1.5;\r\n  isolation: isolate;\r\n  overflow: hidden;\r\n  container-type: inline-size;\r\n  background: var(--scene-bg, #eeeae1);\r\n  color: #242622;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n.scene-composition {\r\n  position: absolute;\r\n  inset: 0;\r\n  overflow: hidden;\r\n  font-size: 1cqw;\r\n  transform-origin: center;\r\n}\r\n.scene-root * {\r\n  box-sizing: border-box;\r\n}\r\n.scene-root h2,\r\n.scene-root p {\r\n  margin: 0;\r\n}\r\n.scene-root h2 {\r\n  font-weight: 700;\r\n  letter-spacing: -0.075em;\r\n  line-height: 0.95;\r\n}\r\n.scene-root small {\r\n  font-size: 1.05em;\r\n  letter-spacing: 0.065em;\r\n}\r\n.scene-root button {\r\n  font-family: inherit;\r\n}\r\n.scene-root i {\r\n  font-style: normal;\r\n}\r\n.scene-nav {\r\n  position: absolute;\r\n  top: 6%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 2%;\r\n  z-index: 8;\r\n  color: #292a26;\r\n  font-size: 1.3em;\r\n}\r\n.scene-nav b {\r\n  font-size: 1.7em;\r\n  letter-spacing: -0.05em;\r\n}\r\n.scene-nav > span {\r\n  font-size: 0.8em;\r\n}\r\n.scene-nav > i {\r\n  font-size: 0.85em;\r\n  border-bottom: 1px solid currentColor;\r\n  padding-bottom: 0.25em;\r\n}\r\n.scene-nav-light {\r\n  color: #f8f1e7;\r\n}\r\n.scene-footer {\r\n  position: absolute;\r\n  left: 6%;\r\n  right: 6%;\r\n  bottom: 5%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 4%;\r\n  font-size: 0.75em;\r\n  letter-spacing: 0.04em;\r\n  z-index: 7;\r\n}\r\n.scene-footer-light {\r\n  color: #e5e9d2;\r\n}\r\n.scene-pill {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 99px;\r\n  padding: 1em 1.6em;\r\n  font-size: 1.2em;\r\n  background: var(--scene-accent);\r\n  color: #292a26;\r\n}\r\n.scene-pill-dark {\r\n  background: #28321e;\r\n  color: #eaf0dd;\r\n}\r\n.scene-pill-outline {\r\n  border: 1px solid #54554b70;\r\n  background: transparent;\r\n}\r\n.scene-star {\r\n  display: inline-block;\r\n  font-family: Arial, sans-serif;\r\n}\r\n.scene-webgl {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 3;\r\n  pointer-events: none;\r\n}\r\n.scene-webgl canvas {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n.scene-webgl-ready .scene-chrome-object,\r\n.scene-webgl-ready .scene-object-stage,\r\n.scene-webgl-ready .scene-pink-torus,\r\n.scene-webgl-ready .scene-orbit-core {\r\n  opacity: 0.12;\r\n}\r\n.scene-live-canvas {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 10;\r\n  pointer-events: none;\r\n}\r\n.scene-chrome {\r\n  background: #e9e8e4;\r\n}\r\n.scene-chrome-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 28%;\r\n  z-index: 5;\r\n}\r\n.scene-chrome-copy h2 {\r\n  font-size: 9.5em;\r\n  margin: 1.4% 0 3%;\r\n  position: relative;\r\n}\r\n.scene-chrome-copy p {\r\n  font-size: 1.65em;\r\n  margin: 2em 0 1.6em;\r\n}\r\n.scene-chrome-copy small {\r\n  font-size: 0.95em;\r\n}\r\n.scene-chrome-copy .scene-pill {\r\n  background: #ff7043;\r\n}\r\n.scene-chrome-object {\r\n  position: absolute;\r\n  right: 2%;\r\n  top: 9%;\r\n  width: 45%;\r\n  height: 80%;\r\n  animation: scene-float calc(7s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-chrome-ring {\r\n  position: absolute;\r\n  inset: 4% 13%;\r\n  border-radius: 50%;\r\n  background: conic-gradient(\r\n    from 70deg,\r\n    #a3a5a7,\r\n    #edf0f2 11%,\r\n    #63686c 22%,\r\n    #f8fafa 30%,\r\n    #929a9f 42%,\r\n    #f2f5f6 50%,\r\n    #5b6064 62%,\r\n    #fafcfc 73%,\r\n    #82898f 83%,\r\n    #c4cbd0 93%,\r\n    #7f878d\r\n  );\r\n  mask: radial-gradient(ellipse, transparent 47%, #000 48%);\r\n  transform: rotate(-29deg) rotateY(20deg);\r\n  box-shadow: inset 2em 0 3em #ffffff90;\r\n  filter: drop-shadow(1em 1.5em 1em #0002);\r\n}\r\n.scene-ring-two {\r\n  inset: 21% -3%;\r\n  transform: rotate(49deg) scale(0.78);\r\n  background: conic-gradient(\r\n    #f7f9f9,\r\n    #6e777b,\r\n    #dce1e1,\r\n    #6a7378,\r\n    #fff,\r\n    #78868b,\r\n    #f7f9f9\r\n  );\r\n}\r\n.scene-chrome-ball {\r\n  position: absolute;\r\n  left: 23%;\r\n  top: 28%;\r\n  width: 42%;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  background: radial-gradient(\r\n    circle at 30% 25%,\r\n    #fff 0%,\r\n    #c6ccd1 22%,\r\n    #58636d 48%,\r\n    #bcc6ca 66%,\r\n    #fafafa 80%,\r\n    #687078 100%\r\n  );\r\n  box-shadow: 1em 1.5em 3em #0003;\r\n}\r\n.scene-editorial {\r\n  background: #ed3537;\r\n  color: #f8e9de;\r\n}\r\n.scene-editorial-title {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 23%;\r\n  width: 86%;\r\n  z-index: 6;\r\n}\r\n.scene-editorial-title > span {\r\n  font-size: 2.6em;\r\n  letter-spacing: -0.04em;\r\n}\r\n.scene-editorial-title h2 {\r\n  font-size: 12.5em;\r\n  margin-top: 0.15em;\r\n  line-height: 0.91;\r\n}\r\n.scene-editorial-photo {\r\n  position: absolute;\r\n  right: 6%;\r\n  top: 25%;\r\n  width: 31%;\r\n  height: 53%;\r\n  overflow: hidden;\r\n  background: linear-gradient(110deg, #8c8175, #d5cabe 35%, #a6a095);\r\n  transform: rotate(5deg);\r\n  animation: scene-photo calc(8s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-editorial-photo:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: repeating-linear-gradient(\r\n    90deg,\r\n    transparent 0 3px,\r\n    #ffffff04 4px 5px\r\n  );\r\n  z-index: 2;\r\n}\r\n.scene-editorial-circle {\r\n  position: absolute;\r\n  width: 105%;\r\n  height: 125%;\r\n  border: 5em solid #d6d0c6;\r\n  border-radius: 50%;\r\n  left: 15%;\r\n  top: -15%;\r\n  transform: rotate(-25deg);\r\n  box-shadow:\r\n    -1em 0.8em 2em #51473e80,\r\n    inset 1em 1em 2em #51473e70;\r\n}\r\n.scene-editorial-photo > span {\r\n  position: absolute;\r\n  bottom: 5%;\r\n  left: 8%;\r\n  font-size: 1.1em;\r\n  color: #5c5145;\r\n}\r\n.scene-editorial-bottom {\r\n  position: absolute;\r\n  bottom: 6%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: end;\r\n  z-index: 8;\r\n  font-size: 0.95em;\r\n  line-height: 1.25;\r\n}\r\n.scene-editorial-bottom .scene-star {\r\n  font-size: 7em;\r\n  line-height: 0.7;\r\n  animation: scene-spin calc(24s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-lime {\r\n  background: #eaf0dd;\r\n  color: #29331e;\r\n}\r\n.scene-lime-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 29%;\r\n  z-index: 5;\r\n}\r\n.scene-lime-copy h2 {\r\n  font-size: 10em;\r\n  line-height: 0.95;\r\n  margin-top: 0.17em;\r\n}\r\n.scene-lime-copy p {\r\n  font-size: 1.6em;\r\n  margin: 1.4em 0;\r\n}\r\n.scene-lime-copy .scene-pill {\r\n  font-size: 1.2em;\r\n}\r\n.scene-headphones {\r\n  position: absolute;\r\n  right: 6%;\r\n  top: 22%;\r\n  width: 40%;\r\n  height: 60%;\r\n  transform: rotate(17deg);\r\n  animation: scene-headphone calc(7s * var(--scene-speed)) ease-in-out infinite;\r\n  z-index: 3;\r\n}\r\n.scene-headband {\r\n  position: absolute;\r\n  width: 83%;\r\n  height: 88%;\r\n  left: 8%;\r\n  top: 0;\r\n  border: 3.8em solid #303629;\r\n  border-bottom-color: transparent;\r\n  border-radius: 50% 50% 38% 38%;\r\n  box-shadow:\r\n    inset 0.4em 0.2em 0.5em #b9c2a470,\r\n    -0.1em -0.2em 0.4em #303725;\r\n  border-image: none;\r\n}\r\n.scene-headband:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 5%;\r\n  right: 5%;\r\n  top: -10%;\r\n  height: 40%;\r\n  border: 1em solid #7e896b;\r\n  border-bottom: 0;\r\n  border-radius: 50% 50% 0 0;\r\n}\r\n.scene-ear {\r\n  position: absolute;\r\n  top: 47%;\r\n  width: 27%;\r\n  height: 49%;\r\n  border-radius: 42%;\r\n  background: linear-gradient(\r\n    100deg,\r\n    #252d21,\r\n    #4d5941 45%,\r\n    #384331 70%,\r\n    #20261d\r\n  );\r\n  box-shadow:\r\n    inset 0.5em 0 0.4em #818d6b80,\r\n    1em 0.5em 1em #28332320;\r\n}\r\n.scene-ear-left {\r\n  left: 0;\r\n  transform: rotate(-7deg);\r\n}\r\n.scene-ear-right {\r\n  right: 0;\r\n  transform: rotate(7deg);\r\n}\r\n.scene-wave {\r\n  position: absolute;\r\n  border: 1px solid #a2b97577;\r\n  border-radius: 50%;\r\n  inset: -10% -12%;\r\n  z-index: -1;\r\n  animation: scene-wave calc(5s * var(--scene-speed)) ease-out infinite;\r\n}\r\n.scene-wave-two {\r\n  animation-delay: -2.5s;\r\n}\r\n.scene-lime-label {\r\n  position: absolute;\r\n  bottom: 5%;\r\n  right: 6%;\r\n  font-size: 2em;\r\n  font-weight: 700;\r\n  line-height: 0.95;\r\n  letter-spacing: -0.05em;\r\n}\r\n.scene-lime-label i {\r\n  position: absolute;\r\n  right: -1em;\r\n  top: 0;\r\n  font-size: 0.5em;\r\n}\r\n.scene-parallax {\r\n  background: #829380;\r\n  color: #eff0db;\r\n}\r\n.scene-landscape {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(#a6b39a, #bac1a4 48%, #5e7c63);\r\n}\r\n.scene-sun {\r\n  position: absolute;\r\n  left: 67%;\r\n  top: 16%;\r\n  width: 16%;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  background: #e8ddac;\r\n  box-shadow: 0 0 7em #d5cba660;\r\n}\r\n.scene-mountain {\r\n  position: absolute;\r\n  left: -10%;\r\n  right: -10%;\r\n  bottom: -8%;\r\n  height: 65%;\r\n  clip-path: polygon(\r\n    0 55%,\r\n    9% 25%,\r\n    15% 35%,\r\n    22% 8%,\r\n    29% 27%,\r\n    36% 3%,\r\n    45% 30%,\r\n    53% 17%,\r\n    62% 42%,\r\n    70% 6%,\r\n    77% 20%,\r\n    85% 0,\r\n    94% 28%,\r\n    100% 37%,\r\n    100% 100%,\r\n    0 100%\r\n  );\r\n}\r\n.scene-mountain-back {\r\n  background: #627b65;\r\n  bottom: 5%;\r\n  filter: blur(0.3em);\r\n  animation: scene-land calc(15s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-mountain-mid {\r\n  background: #3e624b;\r\n  transform: scaleX(-1);\r\n  height: 55%;\r\n  bottom: -8%;\r\n  animation: scene-land calc(12s * var(--scene-speed)) ease-in-out infinite\r\n    reverse;\r\n}\r\n.scene-mountain-front {\r\n  background: #254831;\r\n  height: 40%;\r\n  bottom: -12%;\r\n  clip-path: polygon(\r\n    0 30%,\r\n    13% 24%,\r\n    27% 40%,\r\n    36% 32%,\r\n    49% 60%,\r\n    62% 57%,\r\n    72% 30%,\r\n    81% 36%,\r\n    92% 16%,\r\n    100% 30%,\r\n    100% 100%,\r\n    0 100%\r\n  );\r\n}\r\n.scene-parallax-copy {\r\n  position: absolute;\r\n  left: 7%;\r\n  top: 31%;\r\n  z-index: 5;\r\n}\r\n.scene-parallax-copy h2 {\r\n  font-family: Georgia, \"Times New Roman\", serif;\r\n  font-size: 12.2em;\r\n  letter-spacing: -0.055em;\r\n  font-weight: 400;\r\n  margin-top: 0.1em;\r\n}\r\n.scene-parallax-copy small {\r\n  font-size: 1.1em;\r\n  letter-spacing: 0.12em;\r\n}\r\n.scene-gallery {\r\n  background: #f1f0e9;\r\n}\r\n.scene-gallery-heading {\r\n  position: absolute;\r\n  top: 22%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: end;\r\n}\r\n.scene-gallery-heading h2 {\r\n  font-size: 8em;\r\n}\r\n.scene-gallery-heading > span {\r\n  font-size: 0.9em;\r\n  line-height: 1.4;\r\n}\r\n.scene-gallery-track {\r\n  position: absolute;\r\n  display: flex;\r\n  gap: 3%;\r\n  width: 117%;\r\n  left: 6%;\r\n  top: 56%;\r\n  height: 50%;\r\n  animation: scene-gallery calc(14s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-gallery-art {\r\n  position: relative;\r\n  width: 31%;\r\n  overflow: hidden;\r\n  border-radius: 0.4em;\r\n}\r\n.scene-gallery-art > span {\r\n  position: absolute;\r\n  bottom: 5%;\r\n  left: 7%;\r\n  font-size: 0.9em;\r\n  z-index: 5;\r\n}\r\n.scene-art-a {\r\n  background: #f18f61;\r\n}\r\n.scene-art-a i {\r\n  position: absolute;\r\n  left: 19%;\r\n  top: -25%;\r\n  width: 65%;\r\n  height: 150%;\r\n  border: 5em solid #a63f2f;\r\n  border-radius: 48%;\r\n  transform: rotate(-35deg);\r\n  box-shadow:\r\n    inset 0.5em 0 0.8em #fbbc98,\r\n    1em 0 1em #b64e3f;\r\n}\r\n.scene-art-b {\r\n  background: #baade9;\r\n}\r\n.scene-art-b i {\r\n  position: absolute;\r\n  width: 68%;\r\n  aspect-ratio: 1;\r\n  top: 10%;\r\n  left: 16%;\r\n  border-radius: 50%;\r\n  background: repeating-conic-gradient(\r\n    from 30deg,\r\n    #3e287b 0 15deg,\r\n    #b7a2ee 17deg 30deg\r\n  );\r\n  animation: scene-spin calc(30s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-art-c {\r\n  background: #dae1a2;\r\n}\r\n.scene-art-c i {\r\n  position: absolute;\r\n  left: 30%;\r\n  top: 0;\r\n  bottom: 10%;\r\n  width: 30%;\r\n  border-radius: 30%;\r\n  background: #718342;\r\n  transform: rotate(35deg);\r\n  box-shadow:\r\n    -3em 0 #93a957,\r\n    3em 0 #a5b96a;\r\n}\r\n.scene-stack {\r\n  background: #d4c6f0;\r\n}\r\n.scene-stack-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 31%;\r\n  z-index: 6;\r\n}\r\n.scene-stack-copy h2 {\r\n  font-size: 7.9em;\r\n  margin-top: 0.15em;\r\n}\r\n.scene-stack-copy small {\r\n  font-size: 0.8em;\r\n}\r\n.scene-paper {\r\n  position: absolute;\r\n  width: 29%;\r\n  height: 61%;\r\n  top: 24%;\r\n  right: 7%;\r\n  border-radius: 1em;\r\n  padding: 2.5%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: -1em 0.8em 2em #33234b20;\r\n  transform-origin: 50% 85%;\r\n  animation: scene-paper calc(9s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-paper > span {\r\n  font-size: 0.85em;\r\n  letter-spacing: 0.05em;\r\n}\r\n.scene-paper > b {\r\n  font-size: 6.8em;\r\n  line-height: 0.88;\r\n  letter-spacing: -0.06em;\r\n  margin-top: auto;\r\n  font-weight: 600;\r\n}\r\n.scene-paper > i,\r\n.scene-paper > .scene-star {\r\n  font-size: 7em;\r\n  line-height: 0.9;\r\n  margin-top: 10%;\r\n}\r\n.scene-paper-one {\r\n  background: #f0e7dc;\r\n  transform: rotate(-17deg);\r\n  right: 15%;\r\n  top: 20%;\r\n  z-index: 1;\r\n}\r\n.scene-paper-two {\r\n  background: #e6eda9;\r\n  transform: rotate(-4deg);\r\n  right: 10%;\r\n  top: 23%;\r\n  z-index: 2;\r\n  animation-delay: -3s;\r\n}\r\n.scene-paper-three {\r\n  background: #8f6fc4;\r\n  color: #f6eeff;\r\n  transform: rotate(11deg);\r\n  z-index: 3;\r\n  animation-delay: -6s;\r\n}\r\n.scene-objects {\r\n  background: #eeeae1;\r\n}\r\n.scene-objects-copy {\r\n  position: absolute;\r\n  top: 29%;\r\n  left: 6%;\r\n  z-index: 6;\r\n}\r\n.scene-objects-copy h2 {\r\n  font-size: 11em;\r\n  margin-top: 0.12em;\r\n}\r\n.scene-objects-copy .scene-pill {\r\n  margin-top: 2em;\r\n}\r\n.scene-object-stage {\r\n  position: absolute;\r\n  width: 47%;\r\n  height: 74%;\r\n  right: 3%;\r\n  top: 16%;\r\n  animation: scene-float calc(9s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-blue-sphere {\r\n  position: absolute;\r\n  right: 5%;\r\n  top: 13%;\r\n  width: 62%;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  background: radial-gradient(\r\n    circle at 30% 25%,\r\n    #a9c3ff,\r\n    #3d6bf3 38%,\r\n    #1747cb 65%,\r\n    #183c97 82%,\r\n    #6087dd\r\n  );\r\n  box-shadow: 1em 1.7em 2em #25489c24;\r\n}\r\n.scene-blue-cube {\r\n  position: absolute;\r\n  left: 5%;\r\n  top: 51%;\r\n  width: 37%;\r\n  aspect-ratio: 1;\r\n  border-radius: 10%;\r\n  transform: rotate(16deg) skew(-7deg);\r\n  background: linear-gradient(120deg, #678efa, #2d5af1 50%, #163ca6);\r\n  box-shadow: 0.5em 0.8em 1em #25489c24;\r\n}\r\n.scene-blue-cube i {\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 10%;\r\n  background: linear-gradient(60deg, transparent 70%, #a7beff70);\r\n}\r\n.scene-blue-ring {\r\n  position: absolute;\r\n  right: 10%;\r\n  bottom: 0;\r\n  width: 57%;\r\n  height: 36%;\r\n  border: 3.5em solid #2854e8;\r\n  border-radius: 50%;\r\n  transform: rotate(-22deg);\r\n  box-shadow:\r\n    inset 0.4em 0.5em 1em #0e299580,\r\n    0.5em 0.6em 0.8em #25489c24;\r\n}\r\n.scene-object-shadow {\r\n  position: absolute;\r\n  bottom: -5%;\r\n  left: 0;\r\n  right: 0;\r\n  height: 10%;\r\n  background: #66614b24;\r\n  filter: blur(1.3em);\r\n  border-radius: 50%;\r\n  z-index: -1;\r\n}\r\n.scene-orbit {\r\n  background: radial-gradient(ellipse at 60% 45%, #252d53, #10142c 75%);\r\n  color: #e5e6f3;\r\n}\r\n.scene-orbit-path {\r\n  position: absolute;\r\n  border: 1px solid #858eae55;\r\n  border-radius: 50%;\r\n  top: 14%;\r\n  left: 36%;\r\n  width: 58%;\r\n  height: 72%;\r\n  transform: rotate(-30deg);\r\n}\r\n.scene-orbit-path-two {\r\n  inset: 24% 12% 22% 44%;\r\n  transform: rotate(28deg);\r\n}\r\n.scene-orbit-path-three {\r\n  inset: 4% -5% 0 26%;\r\n  transform: rotate(-24deg);\r\n}\r\n.scene-orbit-core {\r\n  position: absolute;\r\n  left: 60%;\r\n  top: 32%;\r\n  width: 20%;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  background: radial-gradient(\r\n    circle at 28% 20%,\r\n    #fffce7,\r\n    #d7d9e9 25%,\r\n    #8a96bb 52%,\r\n    #3b476d 80%,\r\n    #737b9d\r\n  );\r\n  box-shadow: 0 0 5em #8f9bc730;\r\n  animation: scene-float calc(8s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-orbit-dot {\r\n  position: absolute;\r\n  width: 2.4%;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  background: #d9e2fd;\r\n  box-shadow: 0 0 1em #b7c9ff80;\r\n}\r\n.scene-orbit-dot-one {\r\n  top: 15%;\r\n  left: 66%;\r\n  animation: scene-orbit calc(16s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-orbit-dot-two {\r\n  top: 68%;\r\n  left: 82%;\r\n  width: 1.2%;\r\n  background: #a7abed;\r\n  animation: scene-orbit calc(20s * var(--scene-speed)) linear infinite reverse;\r\n}\r\n.scene-orbit-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 33%;\r\n  z-index: 6;\r\n}\r\n.scene-orbit-copy h2 {\r\n  font-size: 9.5em;\r\n  margin-top: 0.15em;\r\n}\r\n.scene-orbit-copy small {\r\n  font-size: 0.85em;\r\n  letter-spacing: 0.1em;\r\n}\r\n.scene-torus {\r\n  background: #4227b8;\r\n  color: #ffe7f5;\r\n}\r\n.scene-torus-title {\r\n  position: absolute;\r\n  top: 28%;\r\n  left: 6%;\r\n  z-index: 5;\r\n}\r\n.scene-torus-title h2 {\r\n  font-size: 12em;\r\n}\r\n.scene-torus-title > span {\r\n  display: block;\r\n  font-size: 0.9em;\r\n  margin-top: 2em;\r\n}\r\n.scene-pink-torus {\r\n  position: absolute;\r\n  top: 12%;\r\n  right: 6%;\r\n  height: 76%;\r\n  width: 40%;\r\n  border-radius: 50%;\r\n  background: conic-gradient(\r\n    from 40deg,\r\n    #b6448d,\r\n    #ffd3e7 17%,\r\n    #e9a0d1 30%,\r\n    #a42b83 48%,\r\n    #ffbada 65%,\r\n    #f7d0e6 78%,\r\n    #bc458e\r\n  );\r\n  mask: radial-gradient(ellipse, transparent 44%, #000 45%);\r\n  transform: rotate(-30deg);\r\n  animation: scene-torus calc(10s * var(--scene-speed)) ease-in-out infinite;\r\n  filter: drop-shadow(0.8em 1.5em 0.8em #24127350);\r\n}\r\n.scene-torus-chip {\r\n  position: absolute;\r\n  right: 6%;\r\n  bottom: 14%;\r\n  background: #c8f678;\r\n  color: #32266d;\r\n  font-size: 1.2em;\r\n  line-height: 1.2;\r\n  padding: 1.4em 2em;\r\n  border-radius: 50%;\r\n  transform: rotate(-12deg);\r\n  z-index: 8;\r\n}\r\n.scene-kinetic {\r\n  background: #b8a2e5;\r\n  color: #26212b;\r\n}\r\n.scene-poster-top {\r\n  position: absolute;\r\n  top: 6%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-size: 0.9em;\r\n  letter-spacing: 0.05em;\r\n}\r\n.scene-kinetic-line {\r\n  position: absolute;\r\n  top: 17%;\r\n  left: 4%;\r\n  font-size: 23em;\r\n  line-height: 0.82;\r\n  font-weight: 800;\r\n  letter-spacing: -0.09em;\r\n  animation: scene-type-slide calc(6s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-kinetic-line > .scene-star,\r\n.scene-kinetic-line > span {\r\n  display: inline-block;\r\n  font-size: 0.6em;\r\n  margin-left: 0.1em;\r\n  vertical-align: top;\r\n  animation: scene-spin calc(20s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-kinetic-line.scene-kinetic-outline {\r\n  top: 45%;\r\n  font-size: 20.2em;\r\n  letter-spacing: -0.075em;\r\n  color: transparent;\r\n  -webkit-text-stroke: 0.01em #26212b;\r\n  animation-direction: reverse;\r\n}\r\n.scene-kinetic-sticker {\r\n  position: absolute;\r\n  right: 6%;\r\n  top: 39%;\r\n  background: #ceff62;\r\n  border-radius: 1.4em;\r\n  padding: 1em 1.4em;\r\n  font-size: 2.3em;\r\n  font-weight: 700;\r\n  line-height: 0.95;\r\n  transform: rotate(-12deg);\r\n  z-index: 7;\r\n  animation: scene-sticker calc(6s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-kinetic-floor {\r\n  position: absolute;\r\n  left: 5%;\r\n  right: 6%;\r\n  bottom: 4%;\r\n  font-size: 13em;\r\n  line-height: 0.8;\r\n  font-weight: 800;\r\n  letter-spacing: -0.08em;\r\n}\r\n.scene-kinetic-floor > span {\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: 0;\r\n  font-size: 0.075em;\r\n  letter-spacing: 0.02em;\r\n  font-weight: 500;\r\n}\r\n.scene-type {\r\n  background: #171915;\r\n  color: #e6fd52;\r\n}\r\n.scene-type-top {\r\n  position: absolute;\r\n  top: 5%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n.scene-type-top b {\r\n  font-size: 2.5em;\r\n  letter-spacing: -0.05em;\r\n}\r\n.scene-type-top span {\r\n  font-size: 0.9em;\r\n}\r\n.scene-type-word {\r\n  position: absolute;\r\n  top: 19%;\r\n  left: 5%;\r\n  font-size: 23.5em;\r\n  line-height: 0.8;\r\n  letter-spacing: -0.085em;\r\n  font-weight: 800;\r\n  animation: scene-type-slide calc(5s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-type-word i {\r\n  font-style: italic;\r\n}\r\n.scene-type-ticker {\r\n  position: absolute;\r\n  left: -10%;\r\n  right: -10%;\r\n  top: 74%;\r\n  background: #e6fd52;\r\n  color: #171915;\r\n  padding: 0.5em 0;\r\n  transform: rotate(-6deg);\r\n  overflow: hidden;\r\n  z-index: 6;\r\n}\r\n.scene-type-ticker span {\r\n  display: block;\r\n  white-space: nowrap;\r\n  font-size: 3.4em;\r\n  font-weight: 800;\r\n  animation: scene-ticker calc(14s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-type-bottom {\r\n  position: absolute;\r\n  bottom: 4%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: end;\r\n  font-size: 0.9em;\r\n  line-height: 1.3;\r\n}\r\n.scene-type-bottom .scene-star {\r\n  font-size: 6em;\r\n  line-height: 0.6;\r\n  animation: scene-spin calc(18s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-ribbon {\r\n  background: #f1d9c9;\r\n  color: #57251e;\r\n}\r\n.scene-ribbon-top {\r\n  position: absolute;\r\n  top: 6%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n.scene-ribbon-top b {\r\n  font-size: 2em;\r\n  letter-spacing: -0.05em;\r\n}\r\n.scene-ribbon-top > span {\r\n  font-size: 0.8em;\r\n}\r\n.scene-ribbon-form {\r\n  position: absolute;\r\n  right: 3%;\r\n  top: 13%;\r\n  width: 61%;\r\n  height: 80%;\r\n  animation: scene-spin calc(35s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-ribbon-form i {\r\n  position: absolute;\r\n  inset: 18% 5%;\r\n  border: 5em solid #ff704b;\r\n  border-radius: 50%;\r\n  transform: rotate(25deg);\r\n  box-shadow:\r\n    inset 0.3em 0.3em 0.5em #fbb49d,\r\n    0.5em 0.6em 1em #b4503d44;\r\n  background: linear-gradient(transparent, transparent);\r\n}\r\n.scene-ribbon-form i:nth-child(2) {\r\n  transform: rotate(75deg);\r\n  border-color: #f37855;\r\n}\r\n.scene-ribbon-form i:nth-child(3) {\r\n  transform: rotate(125deg);\r\n  border-color: #f98c6c;\r\n}\r\n.scene-ribbon-form i:nth-child(4) {\r\n  transform: rotate(175deg);\r\n  border-color: #f57f5f;\r\n}\r\n.scene-ribbon-title {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 38%;\r\n  font-size: 10em;\r\n  z-index: 5;\r\n  font-weight: 600 !important;\r\n}\r\n.scene-ribbon-caption {\r\n  position: absolute;\r\n  left: 6%;\r\n  bottom: 6%;\r\n  font-size: 0.9em;\r\n  z-index: 5;\r\n}\r\n.scene-ripple {\r\n  background: radial-gradient(\r\n    ellipse at 65% 35%,\r\n    #8ec9ed,\r\n    #3885cb 50%,\r\n    #235fad\r\n  );\r\n  color: #eef7ff;\r\n}\r\n.scene-water {\r\n  position: absolute;\r\n  left: 0;\r\n  right: -20%;\r\n  top: -30%;\r\n  bottom: -30%;\r\n  transform: rotate(-23deg);\r\n}\r\n.scene-water i {\r\n  position: absolute;\r\n  left: 28%;\r\n  top: 33%;\r\n  width: 40%;\r\n  height: 34%;\r\n  border: 1.1em solid #b6e3f33b;\r\n  border-radius: 50%;\r\n  box-shadow:\r\n    0 0.4em 1em #2e5fac33,\r\n    inset 0 0.5em 0.6em #4b8dc450;\r\n  animation: scene-ripple calc(8s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-water i:nth-child(2) {\r\n  animation-delay: -1.6s;\r\n}\r\n.scene-water i:nth-child(3) {\r\n  animation-delay: -3.2s;\r\n}\r\n.scene-water i:nth-child(4) {\r\n  animation-delay: -4.8s;\r\n}\r\n.scene-water i:nth-child(5) {\r\n  animation-delay: -6.4s;\r\n}\r\n.scene-ripple-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 30%;\r\n  z-index: 6;\r\n}\r\n.scene-ripple-copy h2 {\r\n  font-family: Georgia, serif;\r\n  font-weight: 400;\r\n  font-size: 11.2em;\r\n  line-height: 1;\r\n  margin: 0.1em 0 0.3em;\r\n}\r\n.scene-ripple-copy small {\r\n  font-size: 0.9em;\r\n  letter-spacing: 0.1em;\r\n}\r\n.scene-ripple-copy > span {\r\n  font-size: 0.9em;\r\n  letter-spacing: 0.025em;\r\n}\r\n.scene-mesh {\r\n  background: #f0a4a7;\r\n  color: #392631;\r\n}\r\n.scene-mesh-orb {\r\n  position: absolute;\r\n  width: 90%;\r\n  height: 120%;\r\n  border-radius: 50%;\r\n  filter: blur(6em);\r\n  mix-blend-mode: normal;\r\n  animation: scene-mesh calc(15s * var(--scene-speed)) ease-in-out infinite\r\n    alternate;\r\n}\r\n.scene-mesh-one {\r\n  background: #f7b88e;\r\n  left: -22%;\r\n  top: -50%;\r\n}\r\n.scene-mesh-two {\r\n  background: #e16699;\r\n  left: 35%;\r\n  top: 10%;\r\n  animation-delay: -5s;\r\n}\r\n.scene-mesh-three {\r\n  background: #7466b1;\r\n  left: 57%;\r\n  top: -65%;\r\n  width: 70%;\r\n  height: 120%;\r\n  animation-delay: -10s;\r\n}\r\n.scene-mesh-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 29%;\r\n  z-index: 6;\r\n}\r\n.scene-mesh-copy h2 {\r\n  font-size: 13em;\r\n  margin: 0.06em 0 0.22em;\r\n  letter-spacing: -0.08em;\r\n}\r\n.scene-mesh-copy small {\r\n  font-size: 0.95em;\r\n}\r\n.scene-mesh-copy .scene-pill {\r\n  font-size: 1.1em;\r\n}\r\n.scene-particles {\r\n  background: radial-gradient(ellipse at 65% 55%, #334d38, #182b23 73%);\r\n  color: #e7edcf;\r\n}\r\n.scene-particle-cloud {\r\n  position: absolute;\r\n  inset: 10% 0 0 15%;\r\n  transform: rotate(-13deg);\r\n  animation: scene-land calc(18s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-particle-cloud i {\r\n  position: absolute;\r\n  width: calc(0.4em + var(--n) * 0.035em);\r\n  aspect-ratio: 1;\r\n  background: #ceeac0;\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 1.2em #b4df7770;\r\n  animation: scene-particle calc((3s + var(--n) * 0.1s) * var(--scene-speed))\r\n    ease-in-out infinite;\r\n  animation-delay: calc(var(--n) * -0.19s);\r\n}\r\n.scene-particles-copy {\r\n  position: absolute;\r\n  left: 6%;\r\n  top: 32%;\r\n  z-index: 5;\r\n}\r\n.scene-particles-copy h2 {\r\n  font-family: Georgia, serif;\r\n  font-weight: 400;\r\n  font-size: 10.5em;\r\n  margin: 0.1em 0 0.4em;\r\n  letter-spacing: -0.055em;\r\n  line-height: 0.98;\r\n}\r\n.scene-particles-copy small {\r\n  font-size: 0.9em;\r\n  letter-spacing: 0.06em;\r\n}\r\n.scene-particles-copy > span {\r\n  font-size: 0.8em;\r\n  letter-spacing: 0.07em;\r\n}\r\n.scene-cards {\r\n  background: #eeeaf4;\r\n  color: #332c3c;\r\n}\r\n.scene-bento-title {\r\n  position: absolute;\r\n  left: 6%;\r\n  right: 6%;\r\n  top: 7%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: end;\r\n}\r\n.scene-bento-title > b {\r\n  font-size: 5.6em;\r\n  line-height: 0.98;\r\n  letter-spacing: -0.055em;\r\n}\r\n.scene-bento-title > span {\r\n  font-size: 0.8em;\r\n  max-width: 22%;\r\n  line-height: 1.3;\r\n}\r\n.scene-bento-grid {\r\n  position: absolute;\r\n  left: 6%;\r\n  right: 6%;\r\n  top: 34%;\r\n  bottom: 6%;\r\n  display: grid;\r\n  grid-template-columns: 1.1fr 1fr;\r\n  grid-template-rows: 1fr 1fr;\r\n  gap: 1.4em;\r\n}\r\n.scene-bento-cell {\r\n  position: relative;\r\n  border-radius: 1.7em;\r\n  overflow: hidden;\r\n  padding: 2em;\r\n  animation: scene-bento calc(7s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-bento-cell > span {\r\n  position: relative;\r\n  z-index: 2;\r\n  font-size: 0.7em;\r\n  letter-spacing: 0.05em;\r\n}\r\n.scene-bento-purple {\r\n  background: #b39afa;\r\n  grid-row: 1 / 3;\r\n}\r\n.scene-bento-orange {\r\n  background: #fba07f;\r\n}\r\n.scene-bento-dark {\r\n  background: #332d3d;\r\n  color: #e9ddff;\r\n  grid-column: 2;\r\n  display: none;\r\n}\r\n.scene-bento-lime {\r\n  background: #d9ef9b;\r\n  animation-delay: -3s;\r\n}\r\n.scene-bento-flower {\r\n  position: absolute;\r\n  top: 24%;\r\n  left: 13%;\r\n  font-size: 25em;\r\n  line-height: 0.9;\r\n  animation: scene-spin calc(35s * var(--scene-speed)) linear infinite;\r\n}\r\n.scene-bento-orange > strong {\r\n  position: absolute;\r\n  left: 7%;\r\n  bottom: 2%;\r\n  font-size: 8.6em;\r\n  line-height: 1;\r\n  letter-spacing: -0.06em;\r\n}\r\n.scene-bento-orange > strong > span {\r\n  font-size: 0.6em;\r\n  vertical-align: top;\r\n}\r\n.scene-bento-lime > strong {\r\n  position: absolute;\r\n  right: 10%;\r\n  bottom: -10%;\r\n  font-size: 15em;\r\n  line-height: 1;\r\n  font-weight: 500;\r\n}\r\n.scene-bento-bars {\r\n  position: absolute;\r\n  bottom: 15%;\r\n  left: 10%;\r\n  right: 10%;\r\n  height: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 7%;\r\n}\r\n.scene-bento-bars i {\r\n  width: 10%;\r\n  height: 40%;\r\n  background: #e9ddff;\r\n  border-radius: 10px;\r\n  animation: scene-bar calc(2s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-bento-bars i:nth-child(2n) {\r\n  animation-delay: -0.5s;\r\n}\r\n.scene-bento-bars i:nth-child(3n) {\r\n  animation-delay: -1s;\r\n}\r\n.scene-magnetic {\r\n  background: #f1ede5;\r\n  color: #302e29;\r\n}\r\n.scene-magnetic-top {\r\n  position: absolute;\r\n  top: 8%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  z-index: 5;\r\n}\r\n.scene-magnetic-top > b {\r\n  font-size: 2.7em;\r\n  font-weight: 600;\r\n  letter-spacing: -0.055em;\r\n}\r\n.scene-magnetic-top > span {\r\n  font-size: 0.75em;\r\n}\r\n.scene-magnetic-lines {\r\n  position: absolute;\r\n  inset: 0;\r\n}\r\n.scene-magnetic-lines i {\r\n  position: absolute;\r\n  left: 18%;\r\n  right: 18%;\r\n  top: 28%;\r\n  bottom: 24%;\r\n  border: 1px solid #dad5cd;\r\n  border-radius: 50%;\r\n  transform: rotate(-17deg);\r\n}\r\n.scene-magnetic-lines i:nth-child(2) {\r\n  inset: 18% 9% 15%;\r\n}\r\n.scene-magnetic-lines i:nth-child(3) {\r\n  inset: 8% 0 6%;\r\n}\r\n.scene-magnetic-button {\r\n  position: absolute;\r\n  left: 27%;\r\n  right: 27%;\r\n  top: 41%;\r\n  height: 21%;\r\n  border: 0;\r\n  border-radius: 100px;\r\n  background: #ec4c3e;\r\n  color: #fff8ef;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0 8%;\r\n  font-size: 2.4em;\r\n  letter-spacing: -0.04em;\r\n  cursor: pointer;\r\n  box-shadow: 0 0.5em 1em #bb352415;\r\n  animation: scene-magnet calc(5s * var(--scene-speed)) ease-in-out infinite;\r\n  transition: transform 0.25s ease;\r\n  z-index: 5;\r\n}\r\n.scene-magnetic-button > span {\r\n  font-size: 1.35em;\r\n}\r\n.scene-magnetic-cursor {\r\n  position: absolute;\r\n  left: 66%;\r\n  top: 61%;\r\n  font-size: 4em;\r\n  filter: drop-shadow(0 0.1em 0.05em #0002);\r\n  animation: scene-cursor calc(5s * var(--scene-speed)) ease-in-out infinite;\r\n  z-index: 6;\r\n  pointer-events: none;\r\n}\r\n.scene-magnetic-cursor > span {\r\n  position: absolute;\r\n  left: 1.3em;\r\n  top: 1em;\r\n  font-size: 0.28em;\r\n  background: #e6be8b;\r\n  padding: 0.5em 0.8em;\r\n  border-radius: 0.5em;\r\n  white-space: nowrap;\r\n  color: #5e4931;\r\n}\r\n.scene-magnetic-bottom {\r\n  position: absolute;\r\n  bottom: 8%;\r\n  left: 6%;\r\n  font-size: 0.8em;\r\n  letter-spacing: 0.06em;\r\n}\r\n.scene-hero {\r\n  background: radial-gradient(ellipse at 70% 40%, #40583a, #213427 70%);\r\n  color: #e1edc7;\r\n}\r\n.scene-depth-header {\r\n  position: absolute;\r\n  top: 7%;\r\n  left: 6%;\r\n  right: 6%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n.scene-depth-header > b {\r\n  font-size: 2.5em;\r\n  letter-spacing: -0.07em;\r\n}\r\n.scene-depth-header > span {\r\n  font-size: 0.8em;\r\n  letter-spacing: 0.02em;\r\n}\r\n.scene-depth-card {\r\n  position: absolute;\r\n  width: 42%;\r\n  height: 66%;\r\n  left: 31%;\r\n  top: 22%;\r\n  border-radius: 1.4em;\r\n  padding: 3%;\r\n  box-shadow: -0.7em 1em 2em #0e1e1930;\r\n  transform-origin: 50% 80%;\r\n  animation: scene-depth calc(9s * var(--scene-speed)) ease-in-out infinite;\r\n}\r\n.scene-depth-card > span {\r\n  font-size: 0.8em;\r\n  letter-spacing: 0.04em;\r\n}\r\n.scene-depth-back {\r\n  background: #66845c;\r\n  transform: rotate(-17deg) translate(-14%, -5%);\r\n  left: 28%;\r\n  top: 21%;\r\n  color: #e1edc7;\r\n}\r\n.scene-depth-mid {\r\n  background: #9cba80;\r\n  transform: rotate(-6deg) translate(-2%, -3%);\r\n  left: 30%;\r\n  color: #2f4326;\r\n  animation-delay: -3s;\r\n}\r\n.scene-depth-front {\r\n  background: #c5f36a;\r\n  transform: rotate(8deg);\r\n  color: #24371c;\r\n  animation-delay: -6s;\r\n}\r\n.scene-depth-front > b {\r\n  position: absolute;\r\n  left: 8%;\r\n  top: 30%;\r\n  font-size: 8em;\r\n  line-height: 0.88;\r\n  letter-spacing: -0.065em;\r\n  font-weight: 600;\r\n}\r\n.scene-depth-front > i {\r\n  position: absolute;\r\n  right: 8%;\r\n  bottom: 7%;\r\n  font-size: 6em;\r\n  line-height: 0.8;\r\n}\r\n.scene-depth-label {\r\n  position: absolute;\r\n  left: 6%;\r\n  bottom: 6%;\r\n  font-size: 0.8em;\r\n  letter-spacing: 0.025em;\r\n}\r\n.scene-paused *,\r\n.scene-paused *:before,\r\n.scene-paused *:after {\r\n  animation-play-state: paused !important;\r\n}\r\n.scene-compact {\r\n  pointer-events: none;\r\n}\r\n.scene-root:has(.scene-magnetic-button:hover) .scene-magnetic-cursor {\r\n  opacity: 0.2;\r\n}\r\n.scene-root .scene-magnetic-button:hover {\r\n  animation-play-state: paused;\r\n  box-shadow: 0 1em 2em #bb35242b;\r\n}\r\n.scene-root .scene-magnetic-button:focus-visible {\r\n  outline: 0.2em solid #292b24;\r\n  outline-offset: 0.25em;\r\n}\r\n.scene-chrome-copy .scene-pill,\r\n.scene-editorial,\r\n.scene-magnetic-button,\r\n.scene-depth-front,\r\n.scene-bento-purple,\r\n.scene-kinetic-sticker,\r\n.scene-type-ticker {\r\n  background: var(--scene-accent);\r\n}\r\n.scene-type {\r\n  color: var(--scene-accent);\r\n}\r\n.scene-pink-torus {\r\n  background: conic-gradient(\r\n    from 40deg,\r\n    #b6448d,\r\n    var(--scene-accent) 17%,\r\n    #e9a0d1 30%,\r\n    #a42b83 48%,\r\n    var(--scene-accent) 65%,\r\n    #f7d0e6 78%,\r\n    #bc458e\r\n  );\r\n}\r\n.scene-ribbon-form i {\r\n  border-color: var(--scene-accent);\r\n}\r\n.scene-mesh-two {\r\n  background: var(--scene-accent);\r\n}\r\n.scene-particle-cloud i,\r\n.scene-orbit-dot {\r\n  background: var(--scene-accent);\r\n}\r\n.scene-water i {\r\n  border-color: color-mix(in srgb, var(--scene-accent) 35%, transparent);\r\n}\r\n.scene-blue-cube {\r\n  background: linear-gradient(\r\n    120deg,\r\n    #678efa,\r\n    var(--scene-accent) 50%,\r\n    #163ca6\r\n  );\r\n}\r\n.scene-blue-ring {\r\n  border-color: var(--scene-accent);\r\n}\r\n.scene-lime .scene-wave {\r\n  border-color: var(--scene-accent);\r\n}\r\n.scene-parallax .scene-sun {\r\n  background: var(--scene-accent);\r\n}\r\n.scene-gallery .scene-art-c {\r\n  background: var(--scene-accent);\r\n}\r\n.scene-paper-three {\r\n  background: var(--scene-accent);\r\n}\r\n.scene-scroll-active .scene-mountain,\r\n.scene-scroll-active .scene-gallery-track,\r\n.scene-scroll-active .scene-paper {\r\n  animation: none;\r\n}\r\n.scene-scroll-active .scene-sun {\r\n  translate: 0 calc(var(--scene-progress, 0) * -35%);\r\n}\r\n.scene-scroll-active .scene-mountain-back {\r\n  translate: calc(var(--scene-progress, 0) * -3%)\r\n    calc(var(--scene-progress, 0) * -12%);\r\n}\r\n.scene-scroll-active .scene-mountain-mid {\r\n  translate: calc(var(--scene-progress, 0) * 4%)\r\n    calc(var(--scene-progress, 0) * -4%);\r\n}\r\n.scene-scroll-active .scene-mountain-front {\r\n  translate: calc(var(--scene-progress, 0) * -5%)\r\n    calc(var(--scene-progress, 0) * 15%);\r\n}\r\n.scene-scroll-active .scene-parallax-copy {\r\n  translate: 0 calc(var(--scene-progress, 0) * -30%);\r\n}\r\n.scene-scroll-active .scene-gallery-track {\r\n  transform: translateX(calc(var(--scene-progress, 0) * -22%));\r\n  translate: 0 0;\r\n}\r\n.scene-scroll-active .scene-gallery-heading {\r\n  translate: 0 calc(var(--scene-progress, 0) * -15%);\r\n}\r\n.scene-scroll-active .scene-paper-one {\r\n  z-index: 3;\r\n  translate: calc(var(--scene-progress, 0) * -6em)\r\n    calc(var(--scene-progress, 0) * -10em);\r\n  opacity: clamp(0.15, calc(1 - var(--scene-progress, 0) * 1.4), 1);\r\n}\r\n.scene-scroll-active .scene-paper-two {\r\n  z-index: 4;\r\n  translate: 0 calc((1 - var(--scene-progress, 0)) * 36em);\r\n}\r\n.scene-scroll-active .scene-paper-three {\r\n  z-index: 5;\r\n  translate: 0 calc((1 - var(--scene-progress, 0)) * 75em);\r\n}\r\n@keyframes scene-float {\r\n  0%,\r\n  100% {\r\n    transform: translateY(0) rotate(0);\r\n  }\r\n  50% {\r\n    transform: translateY(-3%) rotate(3deg);\r\n  }\r\n}\r\n@keyframes scene-photo {\r\n  0%,\r\n  100% {\r\n    transform: rotate(5deg);\r\n  }\r\n  50% {\r\n    transform: rotate(1deg) translateY(-2%);\r\n  }\r\n}\r\n@keyframes scene-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n@keyframes scene-headphone {\r\n  0%,\r\n  100% {\r\n    transform: rotate(17deg) translateY(0);\r\n  }\r\n  50% {\r\n    transform: rotate(11deg) translateY(-3%);\r\n  }\r\n}\r\n@keyframes scene-wave {\r\n  0% {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n  15% {\r\n    opacity: 0.8;\r\n  }\r\n  100% {\r\n    transform: scale(1.2);\r\n    opacity: 0;\r\n  }\r\n}\r\n@keyframes scene-land {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  50% {\r\n    translate: -2% 2%;\r\n  }\r\n}\r\n@keyframes scene-gallery {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  50% {\r\n    translate: -12% 0;\r\n  }\r\n}\r\n@keyframes scene-paper {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n    rotate: 0deg;\r\n  }\r\n  50% {\r\n    translate: 0 -5%;\r\n    rotate: 3deg;\r\n  }\r\n}\r\n@keyframes scene-orbit {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  25% {\r\n    translate: 8em 12em;\r\n  }\r\n  50% {\r\n    translate: 0 27em;\r\n  }\r\n  75% {\r\n    translate: -15em 12em;\r\n  }\r\n}\r\n@keyframes scene-torus {\r\n  0%,\r\n  100% {\r\n    transform: rotate(-30deg) scaleX(1);\r\n  }\r\n  50% {\r\n    transform: rotate(-12deg) scaleX(0.77);\r\n  }\r\n}\r\n@keyframes scene-type-slide {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  50% {\r\n    translate: 2% 0;\r\n  }\r\n}\r\n@keyframes scene-sticker {\r\n  0%,\r\n  100% {\r\n    transform: rotate(-12deg);\r\n  }\r\n  50% {\r\n    transform: rotate(-5deg) translateY(-5%);\r\n  }\r\n}\r\n@keyframes scene-ticker {\r\n  to {\r\n    translate: -45% 0;\r\n  }\r\n}\r\n@keyframes scene-ripple {\r\n  0% {\r\n    transform: scale(0.3);\r\n    opacity: 0;\r\n  }\r\n  15% {\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    transform: scale(3);\r\n    opacity: 0;\r\n  }\r\n}\r\n@keyframes scene-mesh {\r\n  0% {\r\n    translate: 0 0;\r\n    scale: 1;\r\n  }\r\n  100% {\r\n    translate: -20% 30%;\r\n    scale: 1.2;\r\n  }\r\n}\r\n@keyframes scene-particle {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n    opacity: 0.4;\r\n    scale: 0.8;\r\n  }\r\n  50% {\r\n    translate: 1em -2em;\r\n    opacity: 1;\r\n    scale: 1.1;\r\n  }\r\n}\r\n@keyframes scene-bento {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  50% {\r\n    translate: 0 -0.5em;\r\n  }\r\n}\r\n@keyframes scene-bar {\r\n  0%,\r\n  100% {\r\n    scale: 1 0.4;\r\n  }\r\n  50% {\r\n    scale: 1 1.6;\r\n  }\r\n}\r\n@keyframes scene-magnet {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  50% {\r\n    translate: 1.3em 0.3em;\r\n  }\r\n}\r\n@keyframes scene-cursor {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n  }\r\n  50% {\r\n    translate: -0.8em -0.5em;\r\n  }\r\n}\r\n@keyframes scene-depth {\r\n  0%,\r\n  100% {\r\n    translate: 0 0;\r\n    rotate: 0deg;\r\n  }\r\n  50% {\r\n    translate: 0 -3%;\r\n    rotate: 3deg;\r\n  }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .scene-root *,\r\n  .scene-root *:before,\r\n  .scene-root *:after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n}\r\n\r\n.scene-shader-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}.scene-shader-canvas[hidden]{display:none}.scene-shader-ready .scene-water,.scene-shader-ready .scene-mesh-orb{visibility:hidden}.scene-shader-ready .scene-composition{overflow:visible}.scene-shader-ready .scene-nav,.scene-shader-ready .scene-footer{z-index:8}.scene-webgl-ready.scene-objects .scene-object-stage{opacity:0}\r\n\n*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f1ede5;color:#222;font-family:Arial,Helvetica,sans-serif}a{color:inherit}main{overflow:clip}.export-scroll-story{height:260svh}.export-scroll-story .export-hero{position:sticky;top:0}.export-brand{font-size:1.7em;font-weight:700;letter-spacing:-.05em;text-decoration:none}.export-nav-links{display:flex;gap:1.6em}.export-nav-links a,.export-nav-contact{text-decoration:none}.export-nav-contact{font-size:.85em;border-bottom:1px solid currentColor;padding-bottom:.25em}.scene-pill{text-decoration:none}.export-work{padding:80px 7vw;background:#eae6dd}.export-work-header{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.export-work h2{font-size:clamp(32px,5vw,70px);letter-spacing:-.06em;margin:0}.export-work-header p{max-width:250px;line-height:1.5;font-size:14px}.export-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.export-project{border-radius:16px;padding:28px;min-height:280px;background:#d9d0c0;text-decoration:none;display:flex;flex-direction:column;transition:transform .3s}.export-project:nth-child(2){background:#b9b3c5}.export-project:nth-child(3){background:#c8d3ae}.export-project:hover{transform:translateY(-8px)}.export-project small{font-size:10px;letter-spacing:.1em}.export-project b{font-size:clamp(22px,3vw,40px);letter-spacing:-.05em;line-height:1.05;margin-top:auto}.export-project span{font-size:40px;margin:20px 0}.export-contact{padding:100px 7vw;background:#252b24;color:#f2efe5}.export-contact h2{font-size:clamp(35px,6vw,80px);line-height:1;letter-spacing:-.06em;max-width:700px;margin:0 0 40px}.export-contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:750px}.export-contact-form label{font-size:12px;display:flex;flex-direction:column;gap:9px}.export-contact-form label:last-of-type{grid-column:1/-1}.export-contact-form input,.export-contact-form textarea{font:inherit;color:inherit;border:1px solid #ffffff40;border-radius:9px;padding:14px;background:#ffffff08}.export-contact-form textarea{min-height:100px;resize:vertical}.export-contact-form button{border:0;padding:16px 24px;background:#ec4c3e;border-radius:40px;font:600 14px Arial;cursor:pointer;justify-self:start}.export-contact-status{font-size:14px;line-height:1.5;max-width:650px}.export-contact-status a{text-decoration:underline}.export-work small{font-size:11px}.export-hero{position:relative;width:100%;height:100svh;min-height:500px}.export-hero .scene-root{height:100%;min-height:500px}.export-hero .scene-composition{font-size:min(1vw,1.5vh)}.export-canvas{width:100%;height:100%;display:block;object-fit:cover}.export-info{background:#f3f0e9;padding:clamp(40px,8vw,140px) 7vw;min-height:75svh;display:grid;grid-template-columns:1fr 2fr;gap:8vw;align-items:center}.export-info small{font-size:11px;letter-spacing:.12em}.export-info h1{font-size:clamp(38px,6vw,90px);line-height:1;letter-spacing:-.055em;margin:20px 0}.export-info p{max-width:480px;font-size:18px;line-height:1.6;color:#6c6a64}.export-links{display:flex;gap:20px;font-size:14px}.export-shape{width:28vw;height:28vw;border-radius:38%;background:#ec4c3e;transform:rotate(-20deg);transition:transform .5s}.export-shape:hover{transform:rotate(20deg) scale(.9)}.export-footer{padding:30px 7vw;background:#f3f0e9;border-top:1px solid #d9d5cd;display:flex;justify-content:space-between;font-size:12px}.export-scroll{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;color:#242424;font-size:10px;letter-spacing:.1em;text-decoration:none}.export-pause{position:fixed;bottom:20px;right:20px;z-index:50;border:1px solid #9996;background:#f6f2e7;color:#222;padding:12px 18px;border-radius:30px;cursor:pointer}.export-hero[data-paused=true] *{animation-play-state:paused!important}@media(max-width:650px){.export-info{grid-template-columns:1fr}.export-projects{grid-template-columns:1fr}.export-project{min-height:210px}.export-contact-form{grid-template-columns:1fr}.export-work-header{display:block}.export-nav-links{gap:1em}.export-shape{width:45vw;height:45vw}.export-hero .scene-composition{font-size:1.25vw}.export-hero{height:75svh;min-height:400px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}\n</style></head><body><main><section class=\"export-hero\" id=\"top\"><div class=\"scene-root scene-magnetic \" style=\"--scene-accent:#ec4c3e;--scene-speed:1;--scene-bg:#f1ede5\"><div class=\"scene-composition\"><div class=\"scene-magnetic-top\"><b>Interactions, with feeling.</b><span>001 / MAGNETIC</span></div><div class=\"scene-magnetic-lines\"><i></i><i></i><i></i></div><button class=\"scene-magnetic-button\" type=\"button\">Make your move<span>↗</span></button><div class=\"scene-magnetic-cursor\">↖<span>you, probably</span></div><div class=\"scene-magnetic-bottom\">A LITTLE ATTRACTION GOES A LONG WAY.</div></div></div><a href=\"#about\" class=\"export-scroll\">SCROLL TO DISCOVER ↓</a></section><section id=\"about\" class=\"export-info\"><div class=\"export-shape\" aria-hidden=\"true\"></div><div><small>AN ORIGINAL MOTIONVAULT EXPERIENCE / 2026</small><h1>Magnetic Attraction.<br>Make your move.</h1><p>A button with a little extra pull. A thoughtfully crafted digital experience, made to be explored. Edit this standalone file to make it your own.</p><div class=\"export-links\"><a href=\"#contact\">Let's make something ↗</a><a href=\"#top\">Back to top ↑</a></div></div></section><section id=\"work\" class=\"export-work\"><div class=\"export-work-header\"><div><small>SELECTED EXPLORATIONS / 01—03</small><h2>A little more possibility.</h2></div><p>Three starting points for your next great idea. Take a closer look, then make them your own.</p></div><div class=\"export-projects\"><a class=\"export-project\" href=\"#contact\"><small>01 / STRATEGY</small><span>✳</span><b>A different<br>point of view. ↗</b></a><a class=\"export-project\" href=\"#contact\"><small>02 / DESIGN</small><span>◉</span><b>Made to<br>move people. ↗</b></a><a class=\"export-project\" href=\"#contact\"><small>03 / EXPERIENCE</small><span>↗</span><b>Something<br>worth exploring. ↗</b></a></div></section><section id=\"contact\" class=\"export-contact\"><h2>Have something<br>in mind?</h2><form class=\"export-contact-form\"><label>Your name<input name=\"name\" autocomplete=\"name\" required></label><label>Email address<input name=\"email\" type=\"email\" autocomplete=\"email\" required></label><label>Tell us about your idea<textarea name=\"message\" required></textarea></label><button type=\"submit\">Prepare enquiry ↗</button></form><p class=\"export-contact-status\" role=\"status\">Use this form to prepare a project enquiry you can save and share.</p></section><footer class=\"export-footer\"><span>Magnetic Attraction © 2026</span><a href=\"https://motionvault.site\" target=\"_blank\" rel=\"noopener\">Made with MotionVault ↗</a></footer></main><button class=\"export-pause\" type=\"button\" aria-pressed=\"false\">Pause motion</button><script>\nlet shaderController=null;const template={\"id\":\"magnetic-attraction\",\"title\":\"Magnetic Attraction\",\"subtitle\":\"A button with a little extra pull.\",\"category\":\"Components\",\"scene\":\"magnetic\",\"color\":\"#ec4c3e\",\"background\":\"#f1ede5\",\"engine\":\"CSS\",\"tags\":[\"Button\",\"Hover\",\"Interactive\"],\"free\":true,\"featured\":false,\"format\":\"Responsive · Component\",\"prompt\":\"Create an original responsive components experience called Magnetic Attraction. A button with a little extra pull.. Art direction: #f1ede5 canvas with #ec4c3e accents, confident typography, deliberate whitespace, and a distinctive magnetic composition. Include accessible navigation, responsive layouts, reduced-motion support, and polished animation. Use CSS. Build the complete working experience, with production-quality interaction and no placeholder links.\"};const options={\"speed\":1,\"accent\":\"#ec4c3e\"};const reduceQuery=matchMedia('(prefers-reduced-motion: reduce)');let reduce=reduceQuery.matches;let paused=reduce;const hero=document.querySelector('.export-hero');const pause=document.querySelector('.export-pause');const composition=document.querySelector('.scene-composition');const stage=document.querySelector('.scene-root');function setPause(){shaderController?.setOptions({paused});hero.dataset.paused=String(paused);pause.textContent=paused?'Play motion':'Pause motion';pause.setAttribute('aria-pressed',String(paused));}setPause();pause.addEventListener('click',()=>{paused=!paused;setPause();});reduceQuery.addEventListener('change',event=>{reduce=event.matches;if(reduce){paused=true;setPause();}});\nconst drawMotionFrame=function drawMotionFrame(ctx, template, time, width, height, options = {}) {\n    const w = width, h = height, t = time * (options.speed ?? 1), accent = options.accent || template.color;\n    ctx.save();\n    ctx.clearRect(0, 0, w, h);\n    ctx.fillStyle = template.scene === \"editorial\" ? accent : template.background;\n    ctx.fillRect(0, 0, w, h);\n    const text = (value, x, y, size, color, weight = \"800\", align = \"left\") => {\n        ctx.font = `${weight} ${size}px Arial, sans-serif`;\n        const available = Math.max(1, align === \"center\" ? Math.min(x, w - x) * 2 - w * .06 : align === \"right\" ? x - w * .04 : w * .96 - x);\n        const measured = ctx.measureText(value).width;\n        if (measured > available)\n            ctx.font = `${weight} ${size * available / measured}px Arial, sans-serif`;\n        ctx.fillStyle = color;\n        ctx.textAlign = align;\n        ctx.fillText(value, x, y);\n    };\n    const ellipse = (x, y, rx, ry, color, rotation = 0) => {\n        ctx.beginPath();\n        ctx.ellipse(x, y, Math.max(1, rx), Math.max(1, ry), rotation, 0, Math.PI * 2);\n        ctx.fillStyle = color;\n        ctx.fill();\n    };\n    const roundRect = (x, y, rw, rh, radius, fill) => {\n        ctx.beginPath();\n        ctx.roundRect(x, y, rw, rh, radius);\n        ctx.fillStyle = fill;\n        ctx.fill();\n    };\n    const s = template.scene;\n    if (s === \"kinetic\") {\n        const move = Math.sin(t * 1.3) * w * 0.02;\n        text(\"MAKE SOMETHING MOVE.\", w * 0.05, h * 0.09, w * 0.012, \"#292034\", \"600\");\n        text(\"VOL. 001 ↗\", w * 0.95, h * 0.09, w * 0.012, \"#292034\", \"600\", \"right\");\n        text(options.title || \"GOOD\", w * 0.045 + move, h * 0.43, w * 0.23, \"#242021\");\n        ctx.font = `800 ${w * 0.205}px Arial`;\n        ctx.lineWidth = w * 0.002;\n        ctx.strokeStyle = \"#242021\";\n        ctx.strokeText(\"ENERGY\", w * 0.045 - move, h * 0.73);\n        roundRect(w * 0.67, h * 0.37 + Math.sin(t * 2) * h * 0.02, w * 0.25, h * 0.18, w * 0.02, accent);\n        text(\"100% ORIGINAL\", w * 0.795, h * 0.48 + Math.sin(t * 2) * h * 0.02, w * 0.025, \"#252923\", \"800\", \"center\");\n        text(\"ONLY.\", w * 0.05, h * 0.96, w * 0.13, \"#242021\");\n    }\n    else if (s === \"type\") {\n        text(\"signal\", w * 0.05, h * 0.1, w * 0.03, accent);\n        text(options.title || \"MAKE\", w * 0.055 + Math.sin(t * 2) * w * 0.015, h * 0.44, w * 0.21, accent);\n        text(\"NOISE.\", w * 0.055 - Math.sin(t * 2) * w * 0.015, h * 0.78, w * 0.21, accent);\n        ctx.save();\n        ctx.translate(w / 2, h * 0.8);\n        ctx.rotate(-0.08);\n        ctx.fillStyle = accent;\n        ctx.fillRect(-w, 0, w * 2, h * 0.11);\n        const x = -((t * w * 0.07) % (w * 0.45));\n        for (let i = -1; i < 5; i++)\n            text(\"TURN IT UP ↗\", x + i * w * 0.45, h * 0.075, w * 0.047, \"#171915\");\n        ctx.restore();\n    }\n    else if (s === \"ribbon\") {\n        ctx.save();\n        ctx.translate(w * 0.67, h * 0.49);\n        ctx.rotate(t * 0.22);\n        for (let i = 0; i < 5; i++) {\n            ctx.save();\n            ctx.rotate((i * Math.PI) / 2.5);\n            const g = ctx.createLinearGradient(-w * 0.23, 0, w * 0.23, 0);\n            g.addColorStop(0, accent);\n            g.addColorStop(0.5, '#fff0e7');\n            g.addColorStop(1, accent);\n            ctx.strokeStyle = g;\n            ctx.lineWidth = w * 0.058;\n            ctx.beginPath();\n            ctx.ellipse(0, 0, w * 0.225, h * 0.19, 0, 0, Math.PI * 2);\n            ctx.stroke();\n            ctx.restore();\n        }\n        ctx.restore();\n        text(\"soft assembly\", w * 0.05, h * 0.1, w * 0.025, \"#57251e\");\n        text(options.title || \"Stay\", w * 0.055, h * 0.48, w * 0.12, \"#57251e\");\n        text(\"in motion.\", w * 0.055, h * 0.68, w * 0.12, \"#57251e\");\n    }\n    else if (s === \"mesh\" || s === \"ripple\") {\n        if (s === \"mesh\") {\n            [\"#f8cda4\", accent, \"#5d52b7\", \"#f9a36d\"].forEach((c, i) => {\n                const x = w * (0.5 + 0.4 * Math.sin(t * 0.24 + i * 2)), y = h * (0.5 + 0.4 * Math.cos(t * 0.19 + i));\n                const g = ctx.createRadialGradient(x, y, 0, x, y, w * 0.65);\n                g.addColorStop(0, c);\n                g.addColorStop(1, \"transparent\");\n                ctx.fillStyle = g;\n                ctx.fillRect(0, 0, w, h);\n            });\n        }\n        else {\n            const g = ctx.createLinearGradient(0, 0, w, h);\n            g.addColorStop(0, \"#134b9a\");\n            g.addColorStop(0.5, options.accent || \"#6fb3e6\");\n            g.addColorStop(1, \"#2a7fd2\");\n            ctx.fillStyle = g;\n            ctx.fillRect(0, 0, w, h);\n            for (let i = 0; i < 13; i++) {\n                ctx.beginPath();\n                ctx.ellipse(w * 0.63, h * 0.48, w * (0.05 + i * 0.055 + ((t * 0.025) % 0.055)), h * (0.035 + i * 0.038 + ((t * 0.017) % 0.038)), -0.25, 0, Math.PI * 2);\n                ctx.strokeStyle = `rgba(225,249,255,${0.32 - i * 0.018})`;\n                ctx.lineWidth = Math.max(1, w * 0.002);\n                ctx.stroke();\n            }\n        }\n        const color = s === \"mesh\" ? \"#332533\" : \"#f4f8fe\";\n        text(s === \"mesh\" ? \"colorfield\" : \"tidal\", w * 0.05, h * 0.1, w * 0.025, color);\n        text(options.title || (s === \"mesh\" ? \"Feel\" : \"Beneath\"), w * 0.055, h * 0.48, w * 0.13, color);\n        text(s === \"mesh\" ? \"something.\" : \"the surface.\", w * 0.055, h * 0.69, w * 0.13, color);\n    }\n    else if (s === \"orbit\" || s === \"particles\") {\n        for (let i = 0; i < 70; i++) {\n            const a = i * 2.39996 + t * 0.09, radius = Math.sqrt(i / 70);\n            const x = w * (0.58 + Math.cos(a) * 0.35 * radius), y = h * (0.5 + Math.sin(a) * 0.4 * radius);\n            ellipse(x, y, w * (0.0015 + (i % 4) * 0.001), w * (0.0015 + (i % 4) * 0.001), accent);\n        }\n        if (s === \"orbit\") {\n            for (let i = 0; i < 4; i++) {\n                ctx.beginPath();\n                ctx.ellipse(w * 0.64, h * 0.48, w * 0.12 + i * w * 0.065, h * 0.12 + i * h * 0.065, -0.4, 0, Math.PI * 2);\n                ctx.strokeStyle = \"#65708c\";\n                ctx.lineWidth = 1;\n                ctx.stroke();\n            }\n            const g = ctx.createRadialGradient(w * 0.61, h * 0.4, 1, w * 0.64, h * 0.48, w * 0.085);\n            g.addColorStop(0, \"#faf5ef\");\n            g.addColorStop(0.4, \"#d6d9e9\");\n            g.addColorStop(1, \"#48516f\");\n            ellipse(w * 0.64, h * 0.48, w * 0.085, w * 0.085, \"#d6d9e9\");\n            ctx.fillStyle = g;\n            ctx.fill();\n        }\n        text(s === \"orbit\" ? \"satellite ◌\" : \"drift\", w * 0.05, h * 0.1, w * 0.025, \"#e5eddd\");\n        text(options.title || (s === \"orbit\" ? \"A world\" : \"A quieter\"), w * 0.055, h * 0.48, w * 0.11, \"#e5eddd\");\n        text(s === \"orbit\" ? \"of possibility.\" : \"kind of motion.\", w * 0.055, h * 0.68, w * 0.11, \"#e5eddd\");\n    }\n    else if (s === \"parallax\") {\n        const g = ctx.createLinearGradient(0, 0, 0, h);\n        g.addColorStop(0, \"#bcbd9b\");\n        g.addColorStop(1, \"#637a61\");\n        ctx.fillStyle = g;\n        ctx.fillRect(0, 0, w, h);\n        ellipse(w * 0.71, h * 0.31, h * 0.11, h * 0.11, accent);\n        [\"#748775\", \"#4c6957\", \"#2d493b\", \"#193629\"].forEach((c, i) => {\n            ctx.fillStyle = c;\n            ctx.beginPath();\n            ctx.moveTo(0, h);\n            for (let x = 0; x <= w; x += 8) {\n                const y = h * (0.35 + i * 0.12) +\n                    Math.sin((x / w) * 9 + i * 3 + t * 0.09 * (i + 1)) * h * 0.11 +\n                    Math.cos((x / w) * 18 + i) * h * 0.055;\n                ctx.lineTo(x, y);\n            }\n            ctx.lineTo(w, h);\n            ctx.fill();\n        });\n        text(\"elsewhere\", w * 0.05, h * 0.1, w * 0.028, \"#edf0d7\");\n        text(options.title || \"Find your\", w * 0.06, h * 0.5, w * 0.14, \"#edf0d7\");\n        text(\"elsewhere.\", w * 0.06, h * 0.74, w * 0.14, \"#edf0d7\");\n    }\n    else if (s === \"chrome\" || s === \"torus\" || s === \"objects\") {\n        const cx = w * 0.73, cy = h * 0.5, angle = t * 0.3;\n        if (s === \"objects\") {\n            const g = ctx.createRadialGradient(cx - w * 0.06, cy - h * 0.09, 1, cx, cy, w * 0.15);\n            g.addColorStop(0, \"#9bb8ff\");\n            g.addColorStop(0.5, accent);\n            g.addColorStop(1, \"#103ca8\");\n            ctx.fillStyle = g;\n            ctx.beginPath();\n            ctx.arc(cx, cy - Math.sin(t) * h * 0.025, w * 0.15, 0, Math.PI * 2);\n            ctx.fill();\n            ctx.save();\n            ctx.translate(w * 0.57, h * 0.76);\n            ctx.rotate(0.25 + Math.sin(t * 0.7) * 0.1);\n            roundRect(-w * 0.08, -w * 0.08, w * 0.16, w * 0.16, w * 0.015, \"#2854e8\");\n            ctx.restore();\n        }\n        else {\n            ctx.save();\n            ctx.translate(cx, cy);\n            ctx.rotate(-0.5 + Math.sin(angle) * 0.3);\n            ctx.scale(1, 0.78 + Math.sin(angle) * 0.15);\n            const gradient = ctx.createLinearGradient(-w * 0.2, -w * 0.2, w * 0.2, w * 0.2);\n            const colors = s === \"torus\"\n                ? [\"#ffbfdc\", accent, \"#ffe0ee\", accent, \"#9d2e6b\"]\n                : [\"#f4f8fa\", \"#5c646d\", \"#d7dfe7\", \"#ffffff\", options.accent && options.accent.toLowerCase() !== template.color.toLowerCase() ? accent : \"#555f69\", \"#f4f9fb\"];\n            colors.forEach((c, i) => gradient.addColorStop(i / (colors.length - 1), c));\n            ctx.strokeStyle = gradient;\n            ctx.lineWidth = w * 0.092;\n            ctx.beginPath();\n            ctx.ellipse(0, 0, w * 0.16, w * 0.18, 0, 0, Math.PI * 2);\n            ctx.stroke();\n            ctx.restore();\n        }\n        const color = s === \"torus\" ? \"#f4deee\" : \"#292b2a\";\n        text(s === \"chrome\"\n            ? \"aether\"\n            : s === \"objects\"\n                ? \"shape theory™\"\n                : \"orbit / one\", w * 0.05, h * 0.1, w * 0.025, color);\n        text(options.title ||\n            (s === \"chrome\"\n                ? \"Ideas into\"\n                : s === \"objects\"\n                    ? \"Not so\"\n                    : \"Get into\"), w * 0.055, h * 0.44, w * 0.105, color);\n        text(s === \"chrome\"\n            ? \"otherworldly.\"\n            : s === \"objects\"\n                ? \"ordinary.\"\n                : \"the loop.\", w * 0.055, h * 0.63, w * 0.105, color);\n    }\n    else if (s === \"editorial\") {\n        text(\"forme.\", w * 0.05, h * 0.1, w * 0.03, \"#f5e8e0\");\n        ellipse(w * 0.78, h * 0.5, w * 0.16, h * 0.36, \"#b9b0a4\", 0.18);\n        ellipse(w * 0.78, h * 0.51, w * 0.095, h * 0.31, \"#d6d0c7\", 0.18);\n        text(\"Less ordinary.\", w * 0.05, h * 0.25, w * 0.035, \"#f5e8e0\");\n        text(options.title || \"More\", w * 0.05 + Math.sin(t) * 3, h * 0.52, w * 0.17, \"#f5e8e0\");\n        text(\"perspective.\", w * 0.05, h * 0.78, w * 0.15, \"#f5e8e0\");\n    }\n    else if (s === \"lime\") {\n        text(\"onda ◉\", w * 0.05, h * 0.1, w * 0.028, \"#29311e\");\n        ctx.save();\n        ctx.strokeStyle = accent;\n        ctx.lineWidth = w * .004;\n        for (let ring = 0; ring < 3; ring++) {\n            ctx.globalAlpha = .3 - ring * .07;\n            ctx.beginPath();\n            ctx.ellipse(w * .75, h * .5, w * (.2 + ring * .025), h * (.35 + ring * .045), .15, 0, Math.PI * 2);\n            ctx.stroke();\n        }\n        ctx.restore();\n        ctx.save();\n        ctx.translate(w * 0.75, h * 0.5 + Math.sin(t * 1.4) * h * 0.018);\n        ctx.rotate(0.15);\n        ctx.strokeStyle = \"#2e3527\";\n        ctx.lineWidth = w * 0.035;\n        ctx.beginPath();\n        ctx.arc(0, 0, w * 0.16, Math.PI, Math.PI * 2);\n        ctx.stroke();\n        roundRect(-w * 0.185, -h * 0.03, w * 0.07, h * 0.25, w * 0.025, \"#32392a\");\n        roundRect(w * 0.115, -h * 0.03, w * 0.07, h * 0.25, w * 0.025, \"#32392a\");\n        ctx.restore();\n        text(options.title || \"Find your\", w * 0.05, h * 0.43, w * 0.105, \"#29311e\");\n        text(\"frequency.\", w * 0.05, h * 0.63, w * 0.105, \"#29311e\");\n        roundRect(w * 0.05, h * 0.72, w * 0.2, h * 0.08, h * 0.04, \"#29311e\");\n        text(\"Meet Onda ↗\", w * 0.15, h * 0.773, w * 0.02, \"#eaf0dd\", \"600\", \"center\");\n    }\n    else if (s === \"cards\") {\n        text(options.title || \"Everything.\", w * 0.05, h * 0.17, w * 0.06, \"#302c38\");\n        text(\"In its right place.\", w * 0.05, h * 0.29, w * 0.06, \"#302c38\");\n        const colors = [accent, \"#fba07f\", \"#332d3d\", \"#d9ef9b\"];\n        colors.forEach((c, i) => {\n            const x = w * (0.05 + (i % 2) * 0.46), y = h * (0.38 + Math.floor(i / 2) * 0.29) +\n                Math.sin(t * 1.8 + i) * h * 0.008;\n            roundRect(x, y, w * 0.44, h * 0.26, w * 0.02, c);\n            text([\n                \"A LITTLE MORE SPACE.\",\n                \"MAKE IT COUNT.\",\n                \"ALWAYS IN SYNC.\",\n                \"ROOM TO GROW.\",\n            ][i], x + w * 0.025, y + h * 0.055, w * 0.012, i === 2 ? \"#e6d9fe\" : \"#302c38\", \"600\");\n            text([\"✳\", \"128+\", \"▂▅▃▇▅▂\", \"↗\"][i], x + w * 0.025, y + h * 0.21, w * 0.085, i === 2 ? \"#d6c4ff\" : \"#302c38\");\n        });\n    }\n    else if (s === \"magnetic\") {\n        text(\"Interactions, with feeling.\", w * 0.05, h * 0.1, w * 0.028, \"#252525\");\n        for (let i = 1; i < 4; i++) {\n            ctx.beginPath();\n            ctx.ellipse(w * 0.5, h * 0.5, w * 0.15 + i * w * 0.065, h * 0.1 + i * h * 0.08, -0.15, 0, Math.PI * 2);\n            ctx.strokeStyle = \"#d9d3c8\";\n            ctx.lineWidth = 1;\n            ctx.stroke();\n        }\n        const x = w * 0.3 + Math.sin(t) * w * 0.015, y = h * 0.42 + Math.cos(t) * h * 0.01;\n        roundRect(x, y, w * 0.4, h * 0.17, h * 0.085, accent);\n        text(options.title || \"Make your move ↗\", x + w * 0.2, y + h * 0.108, w * 0.031, \"#fff7f1\", \"600\", \"center\");\n    }\n    else {\n        text(s === \"gallery\"\n            ? \"FRAME / SHIFT\"\n            : s === \"stack\"\n                ? \"papertrail\"\n                : \"depth\", w * 0.05, h * 0.1, w * 0.025, s === \"hero\" ? \"#ddedc4\" : \"#2b2930\");\n        const colors = s === \"hero\"\n            ? [\"#678762\", \"#97b680\", accent]\n            : s === \"gallery\"\n                ? [\"#f48950\", \"#b8acf2\", accent]\n                : [\"#eee6d8\", \"#e7f0ae\", accent];\n        for (let i = 0; i < 3; i++) {\n            ctx.save();\n            ctx.translate(w * (0.38 + i * 0.13), h * (0.45 + i * 0.055) + Math.sin(t + i) * h * 0.02);\n            ctx.rotate((i - 1) * 0.13 + Math.sin(t * 0.5) * 0.02);\n            roundRect(-w * 0.15, -h * 0.23, w * 0.3, h * 0.53, w * 0.015, colors[i]);\n            text([\"EXPLORE.\", \"DISCOVER.\", \"GO FURTHER.\"][i], -w * 0.12, -h * 0.16, w * 0.015, \"#292c28\", \"600\");\n            text([\"Make\", \"some\", \"room.\"][i], -w * 0.12, h * 0.08, w * 0.06, \"#292c28\");\n            ctx.restore();\n        }\n        if (options.title)\n            text(options.title, w * 0.05, h * 0.92, w * 0.05, s === \"hero\" ? \"#ddedc4\" : \"#2b2930\");\n    }\n    ctx.restore();\n};const canvas=document.querySelector('.export-canvas');let frame=0,last=performance.now(),elapsed=0;const ctx=canvas&&canvas.getContext('2d');function resize(){if(!canvas)return;const dpr=Math.min(devicePixelRatio||1,2);canvas.width=canvas.clientWidth*dpr;canvas.height=canvas.clientHeight*dpr;}resize();addEventListener('resize',resize);function animate(now){const dt=Math.min((now-last)/1000,.05);last=now;if(!paused)elapsed+=dt;if(ctx)drawMotionFrame(ctx,template,elapsed,canvas.width,canvas.height,options);frame=requestAnimationFrame(animate);}frame=requestAnimationFrame(animate);addEventListener('pagehide',()=>cancelAnimationFrame(frame));\n\nlet scrollQueued=false;function onScroll(){if(scrollQueued||reduce)return;scrollQueued=true;requestAnimationFrame(()=>{const story=document.querySelector('.export-scroll-story');const range=story?story.offsetHeight-innerHeight:innerHeight;const p=Math.max(0,Math.min(1,scrollY/Math.max(1,range)));stage.style.setProperty('--scene-progress',String(p));scrollQueued=false;});}addEventListener('scroll',onScroll,{passive:true});onScroll();\nconst magnetic=document.querySelector('.scene-magnetic-button');if(magnetic){magnetic.addEventListener('pointermove',e=>{if(reduce||paused)return;const r=magnetic.getBoundingClientRect();magnetic.style.transform='translate('+(e.clientX-r.left-r.width/2)*.16+'px,'+(e.clientY-r.top-r.height/2)*.2+'px)';});magnetic.addEventListener('pointerleave',()=>magnetic.style.transform='');magnetic.addEventListener('click',()=>document.querySelector('#contact').scrollIntoView({behavior:reduce?'auto':'smooth'}));}\nconst depth=document.querySelector('.scene-depth-front');if(depth){stage.addEventListener('pointermove',e=>{if(paused||reduce)return;const r=stage.getBoundingClientRect();depth.style.transform='perspective(900px) rotate(8deg) rotateY('+((e.clientX-r.left)/r.width-.5)*16+'deg) rotateX('+(-((e.clientY-r.top)/r.height-.5)*12)+'deg)';});stage.addEventListener('pointerleave',()=>depth.style.transform='');}\nconst form=document.querySelector('.export-contact-form');form.addEventListener('submit',e=>{e.preventDefault();if(!form.reportValidity())return;const data=new FormData(form);const enquiry='Project enquiry — '+template.title+'\\n\\nName: '+data.get('name')+'\\nEmail: '+data.get('email')+'\\n\\n'+data.get('message');const link=document.createElement('a');link.href=URL.createObjectURL(new Blob([enquiry],{type:'text/plain;charset=utf-8'}));link.download='project-enquiry.txt';link.textContent='Save your enquiry ↗';const status=document.querySelector('.export-contact-status');status.textContent='Your enquiry is ready to share. ';status.appendChild(link);});\n\n</script></body></html>","assets":[],"license":"MotionVault end-project license","licenseURL":"https://motionvault.site/license","formSetup":"Exported forms prepare an enquiry file. Configure data-contact-endpoint to connect your own submission service."}