html,body{margin:0;min-height:100%;background:#17120d}main{width:100%;min-height:100svh;display:grid;align-content:center}*{box-sizing:border-box}

#copper-motion-demo{--ribbon-source:url('assets/hero-motion-4.webp');font-family:Arial,sans-serif;color:#f7f2e9}



#copper-motion-demo .ribbon-stage{position:relative;aspect-ratio:1414/738;overflow:hidden;background:#17120d}
#copper-motion-demo .ribbon-backplate{display:block;width:100%;height:100%}
#copper-motion-demo .ribbon-moving,#copper-motion-demo .ribbon-piece,#copper-motion-demo .ribbon-static{position:absolute;inset:0;pointer-events:none}
#copper-motion-demo .ribbon-piece,#copper-motion-demo .ribbon-static{background-image:var(--ribbon-source);background-size:100% 100%;background-repeat:no-repeat}
#copper-motion-demo .ribbon-moving{animation:copper-hover-only 5s ease-in-out infinite;will-change:transform;transform-origin:60% 50%}
#copper-motion-demo.is-paused .ribbon-moving{animation-play-state:paused}
#copper-motion-demo .ribbon-top{clip-path:polygon(42.9986% 10.2981%,45.1202% 7.9946%,47.3833% 5.6911%,50.0707% 3.5230%,53.3239% 2.4390%,56.0113% 2.3035%,58.7694% 2.8455%,61.1033% 3.9295%,63.6492% 5.9621%,65.7709% 8.4011%,67.1853% 10.7046%,69.0240% 14.4986%,64.0736% 13.5501%,63.5785% 11.3821%,61.9519% 8.4011%,60.2546% 6.6396%,58.9109% 5.6911%,57.6379% 5.4201%,55.9406% 6.2331%,54.1018% 7.7236%,52.2631% 9.7561%,50.9194% 11.3821%)}
#copper-motion-demo .ribbon-left{clip-path:polygon(20.1556% 45.7995%,18.3876% 47.0190%,16.5488% 48.7805%,14.8515% 50.9485%,13.8614% 53.2520%,13.4371% 55.4201%,13.6492% 58.2656%,14.0028% 60.8401%,14.9222% 64.0921%,16.3366% 66.6667%,17.9632% 68.5637%,19.4484% 68.2927%,18.3168% 65.7182%,16.9024% 63.4146%,15.7001% 60.9756%,14.8515% 58.6721%,14.8515% 56.5041%,15.4880% 54.6070%,16.7610% 52.7100%,18.3876% 51.2195%,20.1556% 50.1355%)}
#copper-motion-demo .ribbon-bottom{clip-path:polygon(14.2857% 59.3496%,15.0636% 61.7886%,16.8317% 64.2276%,18.8826% 66.3957%,21.3579% 68.6992%,24.3989% 71.4092%,27.7935% 74.1192%,31.1881% 76.5583%,34.6535% 78.5908%,38.3310% 80.0813%,41.4427% 80.7588%,44.2716% 80.0813%,47.1004% 78.4553%,50.1414% 75.8808%,53.1117% 73.5772%,61.5983% 74.6612%,58.6280% 76.4228%,55.7284% 78.7263%,52.6874% 81.3008%,49.6464% 82.9268%,46.7468% 83.8753%,43.8472% 84.0108%,40.5233% 83.1978%,36.9873% 82.3848%,33.5219% 81.1653%,29.9859% 79.5393%,26.6620% 77.7778%,23.6917% 75.7453%,21.0750% 73.7127%,18.6704% 71.4092%,16.6195% 68.9702%,15.3465% 66.3957%,14.6393% 63.8211%)}
#copper-motion-demo .ribbon-right{clip-path:polygon(56.5064% 74.5257%,59.6181% 74.5257%,62.4470% 75.6098%,65.2758% 77.9133%,68.2461% 80.4878%,71.2164% 83.0623%,74.0453% 84.9593%,76.6620% 85.9079%,78.7129% 86.0434%,80.6223% 85.3659%,82.2489% 83.8753%,83.5219% 81.8428%,84.1584% 79.4038%,84.4413% 76.0163%,88.8967% 75.7453%,88.1188% 78.8618%,87.0580% 81.9783%,85.5728% 84.6883%,83.8048% 86.5854%,81.6124% 88.0759%,79.0665% 88.8889%,76.3791% 88.8889%,73.7624% 88.0759%,71.0042% 86.3144%,68.1754% 84.0108%,65.3465% 81.1653%,62.7298% 78.4553%,60.1132% 76.2873%)}
#copper-motion-demo .ribbon-side{clip-path:polygon(79.2079% 33.6043%,80.1980% 34.8238%,81.5417% 37.2629%,79.2079% 38.3469%)}
#copper-motion-demo .ribbon-screen-main{clip-path:polygon(36.9165% 11.6531%,37.1994% 9.8916%,38.0481% 8.6721%,39.0382% 8.5366%,77.4399% 15.5827%,78.5007% 16.5312%,79.0665% 18.4282%,79.2079% 72.4932%,78.9958% 74.2547%,78.2178% 75.7453%,77.2984% 76.1518%,38.2603% 72.3577%,37.4823% 71.4092%,36.9165% 69.6477%)}
#copper-motion-demo .ribbon-screen-right{clip-path:polygon(79.4201% 38.8889%,80.0566% 37.6694%,94.0594% 34.2818%,94.9788% 34.4173%,95.6860% 35.6369%,95.8982% 37.2629%,95.8982% 73.0352%,95.4738% 74.7967%,94.6252% 75.8808%,80.2687% 76.0163%,79.4908% 75.4743%,78.9958% 74.5257%,79.1372% 40.7859%)}
@keyframes copper-hover-only{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#copper-motion-demo .ribbon-moving{animation-play-state:paused}}


#copper-motion-demo .ribbon-moving{animation-duration:8s}
#copper-motion-demo .ribbon-piece::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,219,169,.16) 45%,transparent 62%);background-size:230% 100%;animation:copper-light 12s ease-in-out infinite;mix-blend-mode:screen}
#copper-motion-demo.is-paused .ribbon-piece::after{animation-play-state:paused}
#copper-motion-demo .project-plane{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
#copper-motion-demo .project-interior{width:100%;height:100%;box-sizing:border-box;overflow:hidden;background:#111311;border:2px solid #8c6c51;border-radius:16px;color:#f5f0e7;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease-out;box-shadow:0 10px 24px #0005;font-family:Arial,sans-serif;display:flex;flex-direction:column}
#copper-motion-demo .project-bar{padding:20px 22px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#c9b8a8}
#copper-motion-demo .project-shot{display:block;width:100%;height:auto;flex:none}
#copper-motion-demo .project-caption{margin:auto 0;padding:22px;font-size:25px;letter-spacing:-.5px}
#copper-motion-demo .project-caption small{display:block;font-size:12px;letter-spacing:.2px;margin-top:9px;color:#b5aaa0}
#copper-motion-demo .project-plane-small .project-interior{background:#f3f7f4;color:#0e5142;border-color:#617466;border-radius:13px}
#copper-motion-demo .project-plane-small .project-bar{font-size:10px;line-height:1.5;color:#0e5142;padding:20px 14px;letter-spacing:1px}
#copper-motion-demo .project-plane-small .project-caption{font-size:20px;padding:18px}
#copper-motion-demo .project-plane-small small{color:#516b60;font-size:11px;line-height:1.5}
@keyframes copper-light{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){#copper-motion-demo .ribbon-piece::after{animation:none}#copper-motion-demo .project-interior{transform:none}}