/* Hero banner 3D scene */
.hero-scene-wrap {
  position: relative;
  overflow: hidden;
  perspective: 800px;
}
.hero-scene-wrap * { transform-style: preserve-3d; }
.hero-scene {
  position: absolute;
  top: 50%; left: 50%;
  transform: rotateX(-30deg) rotateY(-60deg);
  font-size: 60px;
  pointer-events: none;
  animation: heroSceneRotate 60s infinite linear;
}
@keyframes heroSceneRotate {
  from { transform: rotateX(-30deg) rotateY(0deg); }
  to { transform: rotateX(-30deg) rotateY(360deg); }
}
.hero-col {
  position: absolute;
  transform: rotateY(var(--ry)) translateX(2.8em);
}
.hero-col:nth-child(1) { --ry: 0deg; }
.hero-col:nth-child(1) .hero-box {
  animation: heroB0 12s var(--delay) infinite ease-in-out, heroT0 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB0 {
  0%, 36% { rotate: 0.25turn; }
  41%, 44%, 47%, 49%, 52% { rotate: -0.25turn; animation-timing-function: step-end; }
  41%, 44%, 47%, 49%, 52% { rotate: 0turn; }
  56%, 100% { rotate: -0.5turn; }
}
@keyframes heroT0 {
  0%, 36% { top: 0; }
  41% { top: -1em; }
  44% { top: -2em; }
  47% { top: -3em; }
  49% { top: -4em; }
  52% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(2) { --ry: 30deg; }
.hero-col:nth-child(2) .hero-box {
  animation: heroB1 12s var(--delay) infinite ease-in-out, heroT1 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB1 {
  0%, 30% { rotate: 0.25turn; }
  34%, 37%, 40%, 42%, 44% { rotate: -0.25turn; animation-timing-function: step-end; }
  34%, 37%, 40%, 42%, 44% { rotate: 0turn; }
  48%, 100% { rotate: -0.5turn; }
}
@keyframes heroT1 {
  0%, 30% { top: 0; }
  34% { top: -1em; }
  37% { top: -2em; }
  40% { top: -3em; }
  42% { top: -4em; }
  44% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(3) { --ry: 60deg; }
.hero-col:nth-child(3) .hero-box {
  animation: heroB2 12s var(--delay) infinite ease-in-out, heroT2 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB2 {
  0%, 16% { rotate: 0.25turn; }
  23%, 26%, 28%, 32%, 36% { rotate: -0.25turn; animation-timing-function: step-end; }
  23%, 26%, 28%, 32%, 36% { rotate: 0turn; }
  42%, 100% { rotate: -0.5turn; }
}
@keyframes heroT2 {
  0%, 16% { top: 0; }
  23% { top: -1em; }
  26% { top: -2em; }
  28% { top: -3em; }
  32% { top: -4em; }
  36% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(4) { --ry: 90deg; }
.hero-col:nth-child(4) .hero-box {
  animation: heroB3 12s var(--delay) infinite ease-in-out, heroT3 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB3 {
  0%, 38% { rotate: 0.25turn; }
  42%, 45%, 49%, 51%, 54% { rotate: -0.25turn; animation-timing-function: step-end; }
  42%, 45%, 49%, 51%, 54% { rotate: 0turn; }
  61%, 100% { rotate: -0.5turn; }
}
@keyframes heroT3 {
  0%, 38% { top: 0; }
  42% { top: -1em; }
  45% { top: -2em; }
  49% { top: -3em; }
  51% { top: -4em; }
  54% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(5) { --ry: 120deg; }
.hero-col:nth-child(5) .hero-box {
  animation: heroB4 12s var(--delay) infinite ease-in-out, heroT4 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB4 {
  0%, 29% { rotate: 0.25turn; }
  34%, 37%, 40%, 42%, 45% { rotate: -0.25turn; animation-timing-function: step-end; }
  34%, 37%, 40%, 42%, 45% { rotate: 0turn; }
  51%, 100% { rotate: -0.5turn; }
}
@keyframes heroT4 {
  0%, 29% { top: 0; }
  34% { top: -1em; }
  37% { top: -2em; }
  40% { top: -3em; }
  42% { top: -4em; }
  45% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(6) { --ry: 150deg; }
.hero-col:nth-child(6) .hero-box {
  animation: heroB5 12s var(--delay) infinite ease-in-out, heroT5 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB5 {
  0%, 18% { rotate: 0.25turn; }
  25%, 28%, 31%, 33%, 37% { rotate: -0.25turn; animation-timing-function: step-end; }
  25%, 28%, 31%, 33%, 37% { rotate: 0turn; }
  42%, 100% { rotate: -0.5turn; }
}
@keyframes heroT5 {
  0%, 18% { top: 0; }
  25% { top: -1em; }
  28% { top: -2em; }
  31% { top: -3em; }
  33% { top: -4em; }
  37% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(7) { --ry: 180deg; }
.hero-col:nth-child(7) .hero-box {
  animation: heroB6 12s var(--delay) infinite ease-in-out, heroT6 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB6 {
  0%, 9% { rotate: 0.25turn; }
  14%, 18%, 22%, 26%, 29% { rotate: -0.25turn; animation-timing-function: step-end; }
  14%, 18%, 22%, 26%, 29% { rotate: 0turn; }
  34%, 100% { rotate: -0.5turn; }
}
@keyframes heroT6 {
  0%, 9% { top: 0; }
  14% { top: -1em; }
  18% { top: -2em; }
  22% { top: -3em; }
  26% { top: -4em; }
  29% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(8) { --ry: 210deg; }
.hero-col:nth-child(8) .hero-box {
  animation: heroB7 12s var(--delay) infinite ease-in-out, heroT7 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB7 {
  0%, 26% { rotate: 0.25turn; }
  33%, 37%, 39%, 43%, 47% { rotate: -0.25turn; animation-timing-function: step-end; }
  33%, 37%, 39%, 43%, 47% { rotate: 0turn; }
  52%, 100% { rotate: -0.5turn; }
}
@keyframes heroT7 {
  0%, 26% { top: 0; }
  33% { top: -1em; }
  37% { top: -2em; }
  39% { top: -3em; }
  43% { top: -4em; }
  47% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(9) { --ry: 240deg; }
.hero-col:nth-child(9) .hero-box {
  animation: heroB8 12s var(--delay) infinite ease-in-out, heroT8 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB8 {
  0%, 5% { rotate: 0.25turn; }
  13%, 16%, 20%, 24%, 26% { rotate: -0.25turn; animation-timing-function: step-end; }
  13%, 16%, 20%, 24%, 26% { rotate: 0turn; }
  33%, 100% { rotate: -0.5turn; }
}
@keyframes heroT8 {
  0%, 5% { top: 0; }
  13% { top: -1em; }
  16% { top: -2em; }
  20% { top: -3em; }
  24% { top: -4em; }
  26% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(10) { --ry: 270deg; }
.hero-col:nth-child(10) .hero-box {
  animation: heroB9 12s var(--delay) infinite ease-in-out, heroT9 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB9 {
  0%, 32% { rotate: 0.25turn; }
  36%, 38%, 41%, 43%, 46% { rotate: -0.25turn; animation-timing-function: step-end; }
  36%, 38%, 41%, 43%, 46% { rotate: 0turn; }
  51%, 100% { rotate: -0.5turn; }
}
@keyframes heroT9 {
  0%, 32% { top: 0; }
  36% { top: -1em; }
  38% { top: -2em; }
  41% { top: -3em; }
  43% { top: -4em; }
  46% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(11) { --ry: 300deg; }
.hero-col:nth-child(11) .hero-box {
  animation: heroB10 12s var(--delay) infinite ease-in-out, heroT10 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB10 {
  0%, 26% { rotate: 0.25turn; }
  33%, 35%, 39%, 43%, 46% { rotate: -0.25turn; animation-timing-function: step-end; }
  33%, 35%, 39%, 43%, 46% { rotate: 0turn; }
  52%, 100% { rotate: -0.5turn; }
}
@keyframes heroT10 {
  0%, 26% { top: 0; }
  33% { top: -1em; }
  35% { top: -2em; }
  39% { top: -3em; }
  43% { top: -4em; }
  46% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
.hero-col:nth-child(12) { --ry: 330deg; }
.hero-col:nth-child(12) .hero-box {
  animation: heroB11 12s var(--delay) infinite ease-in-out, heroT11 12s var(--delay) infinite step-end, heroMove 12s var(--delay) infinite linear;
}
@keyframes heroB11 {
  0%, 28% { rotate: 0.25turn; }
  33%, 37%, 39%, 41%, 43% { rotate: -0.25turn; animation-timing-function: step-end; }
  33%, 37%, 39%, 41%, 43% { rotate: 0turn; }
  50%, 100% { rotate: -0.5turn; }
}
@keyframes heroT11 {
  0%, 28% { top: 0; }
  33% { top: -1em; }
  37% { top: -2em; }
  39% { top: -3em; }
  41% { top: -4em; }
  43% { top: -5em; }
}
.hero-box:nth-child(1) { --delay: 0s; }
.hero-box:nth-child(2) { --delay: -2s; }
.hero-box:nth-child(3) { --delay: -4s; }
.hero-box:nth-child(4) { --delay: -6s; }
.hero-box:nth-child(5) { --delay: -8s; }
.hero-box:nth-child(6) { --delay: -10s; }
@keyframes heroMove {
  from { translate: 0 1em; }
  to { translate: 0 7em; }
}
.hero-box {
  position: absolute;
  width: 1em; height: 1em;
  transform-origin: top left;
}
.hero-box i {
  --gap: 0.05em;
  position: absolute;
  inset: var(--gap);
  background-color: rgba(0,13,221,0.08);
  border: 2px solid dodgerblue;
  box-shadow: 0 0 0.5em dodgerblue inset;
}
.hero-box i:nth-child(1) { transform: translateZ(calc(0.5em - var(--gap))); }
.hero-box i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(0.5em - var(--gap))); }
.hero-box i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(0.5em - var(--gap))); }
.hero-box i:nth-child(4) { transform: rotateY(270deg) translateZ(calc(0.5em - var(--gap))); }
.hero-box i:nth-child(5) { transform: rotateX(270deg) translateZ(calc(0.5em - var(--gap))); }
.hero-box i:nth-child(6) { transform: rotateX(90deg) translateZ(calc(0.5em - var(--gap))); }