/* Three separate glass accents, with open space around the product and copy. */
.shard-sculpture{position:absolute;inset:0 0 auto;height:520px;pointer-events:none;z-index:-1}
.shard-sculpture img{position:absolute;display:block;object-fit:contain;max-width:none;user-select:none;-webkit-user-drag:none}
.sculpture-right{width:150px;height:230px;right:15px;top:112px;transform:rotate(12deg);opacity:.94}
.sculpture-left{width:90px;height:153px;left:24px;top:335px;transform:rotate(-18deg);opacity:.78}
.sculpture-small{width:57px;height:52px;left:24%;top:28px;transform:rotate(-12deg);opacity:.68}
@media(max-width:1000px){.sculpture-right{width:96px;height:152px;right:8px;top:132px;opacity:.75}.sculpture-left{width:66px;height:114px;left:5px;top:345px}.sculpture-small{left:18%;width:43px;height:40px;top:22px}}
@media(max-width:600px){.sculpture-right{width:38px;height:65px;right:0;top:224px;opacity:.77}.sculpture-left{width:36px;height:66px;left:3px;top:390px;opacity:.62}.sculpture-small{left:9%;top:19px;width:30px;height:28px;opacity:.5}}
/* Independent horizontal drift, buoyancy and tilt never stop at shared
   waypoints. Different periods and phases keep the floating path organic. */
.shard-sculpture img {
  animation:
    shard-drift var(--drift-duration) cubic-bezier(.37,0,.63,1) var(--drift-delay) infinite alternate,
    shard-buoyancy var(--bob-duration) cubic-bezier(.37,0,.63,1) var(--bob-delay) infinite alternate,
    shard-sway var(--sway-duration) ease-in-out var(--sway-delay) infinite alternate;
}
.sculpture-right {
  --rest-angle:12deg; --tilt:2deg; --float-x:18px; --float-y:24px;
  --drift-duration:13s; --bob-duration:8.5s; --sway-duration:11s;
  --drift-delay:-4s; --bob-delay:-9s; --sway-delay:-3s;
}
.sculpture-left {
  --rest-angle:-18deg; --tilt:2.5deg; --float-x:14px; --float-y:20px;
  --drift-duration:15s; --bob-duration:9.5s; --sway-duration:12.5s;
  --drift-delay:-17s; --bob-delay:-2s; --sway-delay:-13s;
}
.sculpture-small {
  --rest-angle:-12deg; --tilt:1.8deg; --float-x:10px; --float-y:14px;
  --drift-duration:12s; --bob-duration:7.5s; --sway-duration:10.5s;
  --drift-delay:-9s; --bob-delay:-4s; --sway-delay:-16s;
}
@keyframes shard-drift {
  from { translate:calc(-1 * var(--float-x)) 0; }
  to { translate:var(--float-x) 0; }
}
@keyframes shard-buoyancy {
  from { transform:translateY(calc(-1 * var(--float-y))) rotate(var(--rest-angle)); }
  to { transform:translateY(var(--float-y)) rotate(var(--rest-angle)); }
}
@keyframes shard-sway {
  from { rotate:calc(-1 * var(--tilt)); }
  to { rotate:var(--tilt); }
}
@media(max-width:600px){.shard-sculpture img{--tilt:1.2deg}.sculpture-right{--float-x:5px;--float-y:8px}.sculpture-left{--float-x:4px;--float-y:7px}.sculpture-small{--float-x:4px;--float-y:6px}}
@media(prefers-reduced-motion:reduce){.shard-sculpture img{animation:none;translate:0 0;rotate:0deg;transform:rotate(var(--rest-angle))}}