/**
 * Premium animated sponsor/demo ad effects.
 */

.sl-demo-ad--fx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Christmas-light border sweep */
.sl-demo-ad--lights {
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, var(--sl-surface-2) 0%, var(--sl-surface-3) 100%) padding-box,
    linear-gradient(90deg, #ef4444, #facc15, #22c55e, #38bdf8, #a855f7, #f472b6, #ef4444) border-box;
  background-size: auto, 320% 100%;
  animation: sl-ad-lights-travel 2.8s linear infinite;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.12);
}

.sl-demo-ad--lights::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 10% 50%, rgba(239, 68, 68, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 50%, rgba(250, 204, 21, 0.65) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 50%, rgba(56, 189, 248, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 50%, rgba(168, 85, 247, 0.55) 0 2px, transparent 3px);
  opacity: 0.85;
  animation: sl-ad-lights-twinkle 1.4s ease-in-out infinite alternate;
}

@keyframes sl-ad-lights-travel {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 320% 50%; }
}

@keyframes sl-ad-lights-twinkle {
  0% { opacity: 0.45; filter: brightness(0.92); }
  100% { opacity: 1; filter: brightness(1.25); }
}

/* Shine sweep left → right */
.sl-demo-ad--sweep::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 42%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  transform: skewX(-18deg);
  animation: sl-ad-sweep-pass 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sl-ad-sweep-pass {
  0%, 18% { left: -70%; opacity: 0; }
  28% { opacity: 1; }
  52% { left: 130%; opacity: 1; }
  62%, 100% { left: 130%; opacity: 0; }
}

/* Pulse boom */
.sl-demo-ad--boom {
  animation: sl-ad-boom-pulse 2.6s ease-in-out infinite;
}

.sl-demo-ad--boom::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.75) 0%, rgba(250, 204, 21, 0) 72%);
  opacity: 0;
  animation: sl-ad-boom-flash 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes sl-ad-boom-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); }
  48% { transform: scale(1.018); box-shadow: 0 10px 30px rgba(250, 204, 21, 0.28); }
  56% { transform: scale(0.996); }
}

@keyframes sl-ad-boom-flash {
  0%, 40%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(14); }
  58% { opacity: 0; transform: scale(18); }
}

/* Glide elements */
.sl-demo-ad--glide .sl-demo-ad-badge {
  animation: sl-ad-glide-x 4.2s ease-in-out infinite alternate;
}

.sl-demo-ad--glide .sl-demo-ad-cta {
  animation: sl-ad-glide-y 3.6s ease-in-out infinite alternate;
}

.sl-demo-ad--glide strong {
  animation: sl-ad-glide-x 5s ease-in-out infinite alternate-reverse;
}

@keyframes sl-ad-glide-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(6px); }
}

@keyframes sl-ad-glide-y {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* Mobile header slot — keep animations contained, no float */
body.sl-front-shell-active .sl-front-mobile-ad-slot .sl-demo-ad--fx,
body.sl-streamlumi-shell-active .sl-front-ad-unit .sl-demo-ad--fx {
  transform-origin: center center;
  will-change: transform, box-shadow;
}

body.sl-front-shell-active .sl-front-shell .sl-front-mobile-ad-slot,
body.sl-front-shell-active .sl-front-shell .sl-front-token-promo-lane {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sl-demo-ad--lights,
  .sl-demo-ad--lights::before,
  .sl-demo-ad--sweep::after,
  .sl-demo-ad--boom,
  .sl-demo-ad--boom::before,
  .sl-demo-ad--glide .sl-demo-ad-badge,
  .sl-demo-ad--glide .sl-demo-ad-cta,
  .sl-demo-ad--glide strong {
    animation: none !important;
  }
}