/* Independent translate keeps entrances separate from existing rotations and carousel motion. */
[data-entrance="pending"] {
  opacity: 0;
  translate: 0 -28px;
}
.glass-diamond {
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(-9deg);
}
.glass-cube {
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(8deg);
}
.review-diamond {
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(-12deg);
}
/* Six pixels either side of the parallax position, in opposite phases at every size. */
.hero > .glass {
  --hero-tilt: -9deg;
  animation: hero-icon-float 3s ease-in-out infinite alternate;
}
.hero > .glass-cube {
  --hero-tilt: 8deg;
  animation-direction: alternate-reverse;
}
@keyframes hero-icon-float {
  from { transform: translate3d(0, calc(var(--parallax-y, 0px) - 6px), 0) rotate(var(--hero-tilt)); }
  to { transform: translate3d(0, calc(var(--parallax-y, 0px) + 6px), 0) rotate(var(--hero-tilt)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-entrance] { opacity: 1; translate: none; }
  .glass, .review-diamond { --parallax-y: 0px !important; }
  .hero > .glass { animation: none; }
}