/**
 * MarketingBanner floating — shell entrance + inner content choreography.
 * Set `data-motion="off"` on the root to disable (catalog previews).
 * Respects prefers-reduced-motion.
 */

:root {
  --marketing-banner-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes marketing-banner-enter-br {
  0% {
    opacity: 0;
    transform: translate3d(0.375rem, 1.125rem, 0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes marketing-banner-enter-bl {
  0% {
    opacity: 0;
    transform: translate3d(-0.375rem, 1.125rem, 0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes marketing-banner-media-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes marketing-banner-content-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.625rem, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes marketing-banner-collage-in {
  0% {
    opacity: 0;
    transform: rotate(-6deg) translate3d(0, 1.25rem, 0) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: rotate(-6deg) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes marketing-banner-badge-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes marketing-banner-icon-in {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes marketing-banner-dismiss-in {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-slot="marketing-banner"][data-layout="floating"]:not([data-motion="off"]) {
  animation: marketing-banner-enter-br 640ms var(--marketing-banner-ease) both;
  transform-origin: bottom right;
}

[data-slot="marketing-banner"][data-layout="floating"][data-corner="bottom-left"]:not([data-motion="off"]) {
  animation-name: marketing-banner-enter-bl;
  transform-origin: bottom left;
}

[data-slot="marketing-banner"][data-layout="floating"][data-corner="bottom-right"]:not([data-motion="off"]) {
  animation-name: marketing-banner-enter-br;
  transform-origin: bottom right;
}

[data-slot="marketing-banner-media"]:not([data-motion="off"]) {
  animation: marketing-banner-media-reveal 520ms var(--marketing-banner-ease) 120ms both;
}

[data-slot="marketing-banner-illustration"]:not([data-motion="off"]) {
  animation: marketing-banner-icon-in 480ms var(--marketing-banner-ease) 160ms both;
}

[data-slot="marketing-banner-title"]:not([data-motion="off"]) {
  animation: marketing-banner-content-rise 500ms var(--marketing-banner-ease) 200ms both;
}

[data-slot="marketing-banner-description"]:not([data-motion="off"]) {
  animation: marketing-banner-content-rise 500ms var(--marketing-banner-ease) 280ms both;
}

[data-slot="marketing-banner-actions"]:not([data-motion="off"]) {
  animation: marketing-banner-content-rise 500ms var(--marketing-banner-ease) 360ms both;
}

[data-slot="marketing-banner-dismiss"]:not([data-motion="off"]) {
  animation: marketing-banner-dismiss-in 420ms var(--marketing-banner-ease) 420ms both;
}

[data-slot="marketing-banner-collage"]:not([data-motion="off"]) {
  animation: marketing-banner-collage-in 560ms var(--marketing-banner-ease) 200ms both;
}

[data-slot="marketing-banner-collage-badge"]:not([data-motion="off"]) {
  animation: marketing-banner-badge-in 480ms var(--marketing-banner-ease) 440ms both;
}

[data-slot="marketing-banner-restore"]:not([data-motion="off"]) {
  animation: marketing-banner-enter-br 520ms var(--marketing-banner-ease) both;
  transform-origin: bottom right;
}

[data-slot="marketing-banner"][data-motion="off"],
[data-slot="marketing-banner"][data-motion="off"] [data-slot^="marketing-banner"] {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-slot="marketing-banner"][data-layout="floating"],
  [data-slot="marketing-banner-media"],
  [data-slot="marketing-banner-illustration"],
  [data-slot="marketing-banner-title"],
  [data-slot="marketing-banner-description"],
  [data-slot="marketing-banner-actions"],
  [data-slot="marketing-banner-dismiss"],
  [data-slot="marketing-banner-collage"],
  [data-slot="marketing-banner-collage-badge"],
  [data-slot="marketing-banner-restore"] {
    animation: none !important;
  }
}