@keyframes heroWaveDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-4.5%, -16px, 0); }
  100% { transform: translate3d(-9%, -2px, 0); }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ryoLogoTraceA {
  0% {
    opacity: 0;
    transform: translate(-52px, 24px) scale(0.78) rotate(-10deg);
  }
  22% {
    opacity: 0.18;
    transform: translate(-28px, 12px) scale(0.88) rotate(-5.5deg);
  }
  62% {
    opacity: 0.14;
    transform: translate(-7px, 3px) scale(0.98) rotate(-0.9deg);
  }
  100% {
    opacity: 0.035;
    transform: translate(-4px, 1px) scale(1) rotate(-0.3deg);
  }
}

@keyframes ryoLogoTraceB {
  0% {
    opacity: 0;
    transform: translate(44px, -22px) scale(0.84) rotate(9deg);
  }
  24% {
    opacity: 0.15;
    transform: translate(22px, -10px) scale(0.91) rotate(4.5deg);
  }
  58% {
    opacity: 0.1;
    transform: translate(5px, -2px) scale(0.99) rotate(0.9deg);
  }
  100% {
    opacity: 0.03;
    transform: translate(3px, -1px) scale(1) rotate(0.3deg);
  }
}

@keyframes ryoLogoSettle {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.88) rotate(-2.5deg);
  }
  30% {
    opacity: 0.48;
    transform: translateY(-5px) scale(1.04) rotate(0.7deg);
  }
  56% {
    opacity: 0.65;
    transform: translateY(2px) scale(0.99) rotate(-0.2deg);
  }
  78% {
    opacity: 0.69;
    transform: translateY(-1px) scale(1.004) rotate(0.1deg);
  }
  100% {
    opacity: 0.68;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes ryoLogoFloat {
  0%   { transform: translateY(0)    scale(1)     rotate(0deg); }
  18%  { transform: translateY(-5px) scale(1.006) rotate(0.18deg); }
  36%  { transform: translateY(-8px) scale(1.009) rotate(-0.12deg); }
  54%  { transform: translateY(-4px) scale(1.005) rotate(0.22deg); }
  72%  { transform: translateY(-9px) scale(1.01)  rotate(-0.08deg); }
  88%  { transform: translateY(-3px) scale(1.004) rotate(0.15deg); }
  100% { transform: translateY(0)    scale(1)     rotate(0deg); }
}
@keyframes ryo-girar { to { transform: rotate(360deg); } }
@keyframes ryo-barra {
  0%   { background-position: -45% 0; }
  100% { background-position: 145% 0; }
}