/* Home Hero only: incoming signal -> precise alignment -> settled direction. */
.hero-stage .hero-signal-card {
  --hero-final-angle: 4deg;
  --hero-flip: 1;
  animation: bodaFrameAlign 5.6s cubic-bezier(.22,.61,.36,1) .35s 1 both;
  transform-origin: 50% 50%;
  translate: var(--hero-card-x, 0px) var(--hero-card-y, 0px);
  transition: translate 650ms cubic-bezier(.22,.61,.36,1);
}

body[dir="rtl"] .hero-stage .hero-signal-card {
  --hero-final-angle: -4deg;
  --hero-flip: -1;
}

.hero-stage .orbit-one {
  animation: bodaSignalOne 6.8s cubic-bezier(.22,.61,.36,1) .05s 1 both;
  translate: var(--hero-orbit-one-x, 0px) var(--hero-orbit-one-y, 0px);
  transition: translate 780ms cubic-bezier(.22,.61,.36,1);
}

.hero-stage .orbit-two {
  animation: bodaSignalTwo 7s cubic-bezier(.22,.61,.36,1) .12s 1 both;
  translate: var(--hero-orbit-two-x, 0px) var(--hero-orbit-two-y, 0px);
  transition: translate 850ms cubic-bezier(.22,.61,.36,1);
}

.hero-stage .signal-cross {
  animation: bodaSignalConnect 4.7s cubic-bezier(.22,.61,.36,1) .9s 1 both;
  transform-origin: 50% 50%;
}

@keyframes bodaSignalOne {
  0% { transform: rotate(8deg) scaleY(.56) translate(-16px, 8px); opacity: .42; }
  27% { transform: rotate(34deg) scaleY(.56) translate(12px, -8px); opacity: .9; }
  57% { transform: rotate(13deg) scaleY(.56) translate(-5px, 3px); opacity: .76; }
  82% { transform: rotate(19deg) scaleY(.56) translate(1px, 0); opacity: .82; }
  100% { transform: rotate(18deg) scaleY(.56) translate(0, 0); opacity: .76; }
}

@keyframes bodaSignalTwo {
  0% { transform: rotate(-39deg) scaleY(.56) translate(13px, -9px); opacity: .36; }
  31% { transform: rotate(-12deg) scaleY(.56) translate(-11px, 7px); opacity: .84; }
  63% { transform: rotate(-30deg) scaleY(.56) translate(5px, -3px); opacity: .72; }
  84% { transform: rotate(-25deg) scaleY(.56) translate(-1px, 0); opacity: .78; }
  100% { transform: rotate(-26deg) scaleY(.56) translate(0, 0); opacity: .72; }
}

@keyframes bodaFrameAlign {
  0% { transform: translate3d(0, 7px, 0) rotate(calc(var(--hero-final-angle) + 1.8deg)) scaleX(var(--hero-flip)) scale(.992); }
  30% { transform: translate3d(0, 3px, 0) rotate(calc(var(--hero-final-angle) - .55deg)) scaleX(var(--hero-flip)) scale(.998); }
  62% { transform: translate3d(0, -1px, 0) rotate(calc(var(--hero-final-angle) + .22deg)) scaleX(var(--hero-flip)) scale(1.002); }
  84% { transform: translate3d(0, 0, 0) rotate(calc(var(--hero-final-angle) - .04deg)) scaleX(var(--hero-flip)) scale(1); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--hero-final-angle)) scaleX(var(--hero-flip)) scale(1); }
}

@keyframes bodaSignalConnect {
  0% { transform: scaleX(.9); opacity: .45; }
  48% { transform: scaleX(1.035); opacity: .92; }
  78% { transform: scaleX(.99); opacity: .78; }
  100% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 700px) {
  .hero-stage .hero-signal-card {
    animation-name: bodaFrameAlignMobile;
    animation-duration: 5s;
    animation-delay: .25s;
  }

  .hero-stage .orbit-one {
    animation-name: bodaSignalOneMobile;
    animation-duration: 5.8s;
    translate: var(--hero-orbit-one-x, 0px) var(--hero-orbit-one-y, 0px);
    transition-duration: 900ms;
  }

  .hero-stage .orbit-two {
    animation-name: bodaSignalTwoMobile;
    animation-duration: 6s;
    translate: var(--hero-orbit-two-x, 0px) var(--hero-orbit-two-y, 0px);
    transition-duration: 950ms;
  }

  .hero-stage .signal-cross {
    animation-name: bodaSignalConnectMobile;
    animation-duration: 4.2s;
    animation-delay: .7s;
  }

  @keyframes bodaFrameAlignMobile {
    0% { transform: translate3d(0, 2px, 0) rotate(calc(var(--hero-final-angle) + .65deg)) scaleX(var(--hero-flip)) scale(.998); }
    36% { transform: translate3d(0, 1px, 0) rotate(calc(var(--hero-final-angle) - .2deg)) scaleX(var(--hero-flip)) scale(1); }
    72% { transform: translate3d(0, 0, 0) rotate(calc(var(--hero-final-angle) + .06deg)) scaleX(var(--hero-flip)) scale(1); }
    100% { transform: translate3d(0, 0, 0) rotate(var(--hero-final-angle)) scaleX(var(--hero-flip)) scale(1); }
  }

  @keyframes bodaSignalOneMobile {
    0% { transform: rotate(13deg) scaleY(.56) translate(-6px, 4px); opacity: .48; }
    30% { transform: rotate(25deg) scaleY(.56) translate(5px, -3px); opacity: .84; }
    66% { transform: rotate(16deg) scaleY(.56) translate(-2px, 1px); opacity: .76; }
    100% { transform: rotate(18deg) scaleY(.56) translate(0, 0); opacity: .76; }
  }

  @keyframes bodaSignalTwoMobile {
    0% { transform: rotate(-34deg) scaleY(.56) translate(6px, -4px); opacity: .42; }
    32% { transform: rotate(-19deg) scaleY(.56) translate(-5px, 3px); opacity: .82; }
    68% { transform: rotate(-29deg) scaleY(.56) translate(2px, -1px); opacity: .72; }
    100% { transform: rotate(-26deg) scaleY(.56) translate(0, 0); opacity: .72; }
  }

  @keyframes bodaSignalConnectMobile {
    0% { transform: scaleX(.96); opacity: .6; }
    55% { transform: scaleX(1.015); opacity: .9; }
    100% { transform: scaleX(1); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage .hero-signal-card,
  .hero-stage .orbit-one,
  .hero-stage .orbit-two,
  .hero-stage .signal-cross {
    animation: none !important;
    translate: none !important;
    transition: none !important;
  }
}