/* TraderCab branding (logo + name) for the OTP verification modal */
.otp-brand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:14px;
  animation:otpBrandIn .55s cubic-bezier(.22,.61,.36,1) both;
}
.otp-brand-logo{
  width:34px; height:34px; border-radius:22%; flex-shrink:0;
  box-shadow:0 4px 14px rgba(124,92,252,0.45), 0 0 0 1px rgba(124,92,252,0.25);
  animation:otpLogoFloat 3.4s ease-in-out infinite, otpLogoGlow 3.4s ease-in-out infinite;
}
.otp-brand-name{
  font-family:'Space Grotesk','Rubik',sans-serif; font-weight:900;
  font-size:21px; letter-spacing:.12em; line-height:1;
  background:linear-gradient(90deg,#7C5CFC 0%,#A78BFA 25%,#22d3ee 50%,#A78BFA 75%,#7C5CFC 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:otpNameShimmer 3.5s linear infinite;
}
@keyframes otpBrandIn{ from{opacity:0; transform:translateY(-10px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes otpLogoFloat{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-4px) rotate(-3deg);} }
@keyframes otpLogoGlow{ 0%,100%{ box-shadow:0 4px 14px rgba(124,92,252,0.40), 0 0 0 1px rgba(124,92,252,0.25);} 50%{ box-shadow:0 6px 22px rgba(124,92,252,0.65), 0 0 0 1px rgba(34,211,238,0.35);} }
@keyframes otpNameShimmer{ to{ background-position:200% center;} }
@media (prefers-reduced-motion: reduce){
  .otp-brand,.otp-brand-logo,.otp-brand-name{ animation:none !important; }
  .otp-brand-name{ background-position:0 center; }
}