.hero-canvas { width:100%; height:100%; display:block; touch-action:pan-y; cursor:crosshair; }
.hero-canvas--fallback { visibility:hidden; }
.hero-sculpture-fallback { position:absolute; inset:0; display:grid; place-items:center; perspective:800px; pointer-events:none; }
.hero-sculpture-fallback i { position:absolute; width:47%; aspect-ratio:1; border:clamp(25px,4.5vw,64px) solid #191b18; border-radius:50%; background:transparent; box-shadow:inset 8px 5px 14px #ffffff7a,inset -8px -8px 12px #000,8px 9px 0 #0000000b; transform:rotateY(50deg) rotateZ(-25deg); }
.hero-sculpture-fallback i:nth-child(2) { transform:rotateY(-50deg) rotateZ(25deg); }
.hero-sculpture-fallback i:nth-child(3) { transform:rotateX(58deg) rotateZ(40deg); }
.hero-sculpture-fallback span { position:absolute; bottom:8%; font:10px monospace; letter-spacing:.18em; }
.hero-sculpture-fallback.is-playing i { border-color:#667329; }
@media(prefers-reduced-motion:no-preference) { .hero-sculpture-fallback i { transition:transform 1s,border-color .7s; } .hero-sculpture-fallback.is-playing i:first-child { transform:rotateY(75deg) rotateZ(10deg); } }