@keyframes brandReveal {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.98);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.005);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes brandRevealLeft {
  0% {
    opacity: 0;
    transform: translateX(-32px) scale(0.98);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    transform: translateX(4px) scale(1.005);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes brandRevealRight {
  0% {
    opacity: 0;
    transform: translateX(32px) scale(0.98);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    transform: translateX(-4px) scale(1.005);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

.brandReveal {
  animation: brandReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity, filter;
}

@media screen and (max-width: 1024px) {
    .brandReveal.left  {
        animation: brandRevealLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .brandReveal.right  {
        animation: brandRevealRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}