/* Reference geometry, placement, 100-second rotation and 10-second float. */
.hero-polygons { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; color:var(--muted-light); }
.polygon-float { position:absolute; inset:0; animation:lime-polygon-float 10s linear infinite paused; }
.hero-polygon { position:absolute; width:300px; height:300px; opacity:.24; }
.polygon-right { top:100px; right:100px; transform:scale(7); }
.polygon-left { top:-60px; left:15%; transform:scale(4); opacity:.18; }
.polygon-solid { position:relative; left:100px; top:40px; width:100px; height:223px; transform-style:preserve-3d; animation:lime-polygon-rotate 100s linear infinite paused; }
.polygon-left .polygon-solid { animation-delay:.5s; }
.polygon-face { position:absolute; width:100px; transform:rotateY(var(--face-turn)) translateZ(69px) rotateX(26.5deg); }
.polygon-face:nth-child(n+6):nth-child(-n+10) { bottom:0; transform:rotateY(var(--face-turn)) translateZ(-69px) rotateX(206.5deg); }
.polygon-face:nth-child(11) { transform:translateZ(69px) rotateX(-90deg); }
.polygon-face:nth-child(12) { bottom:0; transform:translateZ(-69px) rotateX(90deg); }
.polygon-face i { position:absolute; width:100px; height:69px; border-top:1px solid currentColor; transform-origin:bottom; transform:rotate(var(--edge-turn)); }
.hero-polygons.is-running .polygon-float, .hero-polygons.is-running .polygon-solid { animation-play-state:running; }
@keyframes lime-polygon-rotate {
    from { transform:rotateX(0deg) rotateY(360deg) rotateZ(360deg); }
    to { transform:rotateX(360deg) rotateY(0deg) rotateZ(-360deg); }
}
@keyframes lime-polygon-float {
    0%,100% { transform:translateY(-30px); }
    50% { transform:translateY(30px); }
}
/* Keep both shapes above the copy on smaller screens. */
@media (max-width:768px) {
    .polygon-right { top:30px; right:-50px; transform:scale(2); }
    .polygon-left { top:-80px; left:-55px; transform:scale(.8); }
    .hero-polygons { mask-image:linear-gradient(#000 0%,#000 20%,transparent 65%); }
}
@media (prefers-reduced-motion:reduce) {
    .polygon-float, .polygon-solid { animation:none; }
    .polygon-solid { transform:rotateX(-15deg) rotateY(28deg) rotateZ(12deg); }
    .polygon-right { transform:scale(3); }
    .polygon-left { transform:scale(1.5); }
}
@media (prefers-reduced-motion:reduce) and (max-width:768px) {
    .polygon-right { transform:scale(2); }
    .polygon-left { transform:scale(.8); }
}