/* BMW X6 campaign artwork. No shared reward, modal or checkout styling. */
.px-mystery-mercedes {
    border-color: rgba(255, 65, 65, .38);
    background: radial-gradient(70% 45% at 50% 43%, rgba(142, 16, 25, .19), transparent 80%), #050505;
    box-shadow: 0 30px 90px -38px #000, 0 0 70px -42px rgba(255, 47, 66, .45), inset 0 1px rgba(255, 255, 255, .05);
}
.px-mystery-mercedes .px-mystery__title {
    color: #fff1e9;
    background-image: linear-gradient(180deg, #fff 8%, #ffe5cf 53%, #cb916f);
    filter: drop-shadow(0 4px 0 #3c1714);
    animation: none;
    will-change: auto;
}
.px-mystery-mercedes__intro { position: relative; z-index: 2; margin: 29px auto -36px; }
.px-mystery-mercedes__kicker {
    display: block; color: #ff9694; font: 700 11px/1.4 "Orbitron", sans-serif;
    text-transform: uppercase; letter-spacing: .2em;
}
.px-mystery-mercedes__intro h3 {
    margin: 9px 0 0; color: #fff; font: 800 clamp(25px, 4.4vw, 50px)/1.18 "Orbitron", sans-serif;
    letter-spacing: -.035em; text-wrap: balance;
}
.px-mystery-mercedes__intro h3 span { color: #ffc5ba; }
.px-mystery-mercedes__intro p {
    display: flex; justify-content: center; gap: 11px; margin: 10px 0 0;
    color: #b9aaa5; font: 700 16px/1.4 "Rajdhani", sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.px-mystery-mercedes__intro p span { color: #fd635c; }
.px-mystery-mercedes__visual { position: relative; max-width: 1080px; margin: 0 auto; }
.px-mystery-mercedes__scene {
    position: relative; isolation: isolate; width: 100%; max-width: 1080px; margin: 0 auto;
    border-radius: 16px; outline-offset: -3px; overflow: clip;
}
.px-mystery-mercedes__scene[data-open-buymodal] { cursor: pointer; }
.px-mystery-mercedes__scene[data-open-buymodal]:focus-visible { outline: 2px solid #fff3c0; }
.px-mystery-mercedes__image, .px-mystery-mercedes__video {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 83%, transparent);
}
.px-mystery-mercedes__video {
    position: absolute; inset: 0; height: 100%; object-fit: cover;
    opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.px-mystery-mercedes[data-video-state="playing"] .px-mystery-mercedes__video { opacity: 1; }
/* Separate HTML reward cards keep both languages sharp over the cinematic scene. */
.px-mystery-mercedes .px-mystery__float {
    --orbit-x: 24px; --orbit-y: 14px; --orbit-angle: -5deg; --orbit-tilt: 13deg;
    --orbit-duration: 8s; --orbit-delay: -1s;
    box-sizing: border-box; width: 148px; min-width: 0; max-width: none; min-height: 78px;
    display: flex; flex-direction: column; gap: 9px; padding: 13px 11px;
    border: 1px solid currentColor; border-radius: 13px;
    background: linear-gradient(145deg, rgba(29, 32, 28, .97), rgba(3, 8, 7, .94));
    box-shadow: 0 8px 0 -4px #040605, 0 10px 0 -5px currentColor, 0 12px 26px #0008, inset 0 1px #ffffff29;
    backdrop-filter: none; font-size: 10px; line-height: 1.35; letter-spacing: .035em;
    pointer-events: none; translate: none; will-change: auto; overflow: hidden;
    animation: px-mercedes-card-orbit var(--orbit-duration) ease-in-out var(--orbit-delay) infinite;
    animation-play-state: paused;
}
.px-mystery-mercedes .px-mystery__float::before,
.px-mystery-mercedes .px-mystery__float::after {
    content: ""; position: absolute; pointer-events: none;
    animation-duration: var(--orbit-duration); animation-delay: var(--orbit-delay);
    animation-iteration-count: infinite; animation-play-state: paused;
}
.px-mystery-mercedes .px-mystery__float::before {
    inset: -30% -60%; background: linear-gradient(110deg, transparent 35%, #fff4 48%, #fff7 50%, transparent 65%);
    transform: translateX(-75%); animation-name: px-mercedes-card-shine;
}
.px-mystery-mercedes .px-mystery__float::after {
    inset: 3px; border: 1px solid currentColor; border-radius: 10px;
    box-shadow: inset 0 0 14px -7px currentColor; opacity: .15; animation-name: px-mercedes-card-edge;
}
.px-mystery-mercedes .px-mystery__float b { position: relative; color: #fff4df; }
.px-mystery-mercedes .px-mystery__float .px-ico { width: 26px; height: 26px; }
.px-mystery-mercedes .px-mystery__float > span { font-size: 27px; line-height: 1; }
.px-mystery-mercedes .px-mystery__float--bonus { top: 19%; left: 5%; right: auto; bottom: auto; }
.px-mystery-mercedes .px-mystery__float--surprise { top: max(14%, 80px); left: 46%; right: auto; bottom: auto; --orbit-angle: 4deg; --orbit-delay: -4s; --orbit-duration: 9s; }
.px-mystery-mercedes .px-mystery__float--x2 { top: 28%; right: 4%; left: auto; bottom: auto; --orbit-angle: 6deg; --orbit-x: -24px; --orbit-delay: -2s; --orbit-duration: 8.8s; }
.px-mystery-mercedes .px-mystery__float--discount { bottom: 8%; right: 40%; top: auto; left: auto; --orbit-angle: 5deg; --orbit-x: -22px; --orbit-delay: -5s; --orbit-duration: 9.4s; }
.px-mystery-mercedes .px-mystery__float--cash { bottom: 12%; left: 9%; top: auto; right: auto; --orbit-angle: -7deg; --orbit-delay: -3s; --orbit-duration: 8.3s; }
@keyframes px-mercedes-card-orbit {
    0%, 100% { transform: perspective(700px) translate3d(0, 0, 0) rotateY(calc(-1 * var(--orbit-tilt))) rotateZ(var(--orbit-angle)) scale(.95); }
    25% { transform: perspective(700px) translate3d(var(--orbit-x), calc(-1 * var(--orbit-y)), 0) rotateY(0deg) rotateZ(0deg) scale(1); }
    50% { transform: perspective(700px) translate3d(0, calc(-2 * var(--orbit-y)), 0) rotateY(var(--orbit-tilt)) rotateZ(calc(-1 * var(--orbit-angle))) scale(1.045); }
    75% { transform: perspective(700px) translate3d(calc(-1 * var(--orbit-x)), calc(-1 * var(--orbit-y)), 0) rotateY(0deg) rotateZ(0deg) scale(1); }
}
@keyframes px-mercedes-card-shine {
    0%, 30% { transform: translateX(-75%); opacity: 0; }
    40% { opacity: .7; }
    62%, 100% { transform: translateX(75%); opacity: 0; }
}
@keyframes px-mercedes-card-edge { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
.px-mystery-mercedes[data-motion-state="running"] .px-mystery__float,
.px-mystery-mercedes[data-motion-state="running"] .px-mystery__float::before,
.px-mystery-mercedes[data-motion-state="running"] .px-mystery__float::after { animation-play-state: running; }
.px-mystery-mercedes__reward-summary {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.px-mystery-mercedes__footer { position: relative; z-index: 3; margin: -22px 0 12px; }
.px-mystery-mercedes__motion-toggle {
    position: absolute; z-index: 4; right: 10px; bottom: 24px;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%;
    border: 1px solid #b5c4b94d; background: #09110ecc; color: #cfddd4;
    font: 600 13px/1.25 "Rajdhani", sans-serif; cursor: pointer;
}
.px-mystery-mercedes__motion-toggle[hidden] { display: none; }
.px-mystery-mercedes__motion-toggle:focus-visible { outline: 2px solid #8effb2; outline-offset: 4px; }
.px-mystery-mercedes__motion-icon { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.px-mystery-mercedes__motion-toggle[aria-pressed="true"] .px-mystery-mercedes__motion-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.px-mystery-mercedes__cta {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%;
    padding: 17px 23px; border: 1px solid #ff866c; border-radius: 13px;
    background: linear-gradient(120deg, #bf2b32, #84172c); color: #fff;
    box-shadow: 0 5px 0 #480b18, 0 12px 30px -14px #f52b35, inset 0 1px rgba(255, 255, 255, .3);
    font: 800 11px/1.5 "Orbitron", sans-serif; text-transform: uppercase; letter-spacing: .025em;
    cursor: pointer; transition: transform .2s ease, filter .2s ease;
}
.px-mystery-mercedes__cta-glow {
    --mystery-cta-glow-color: rgb(255, 61, 70);
    position: absolute; z-index: -1; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0;
    border: 2px solid var(--mystery-cta-glow-color);
    box-shadow: 0 0 18px var(--mystery-cta-glow-color), 0 0 38px -8px var(--mystery-cta-glow-color);
}
.px-mystery-mercedes__cta::after {
    content: ""; position: absolute; inset: auto 12px 2px; height: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, #fff2 46%, #fff4 50%, transparent 65%);
    background-size: 300% 100%; opacity: 0;
    animation: px-mercedes-cta-shine 8.04s ease-in-out infinite; animation-play-state: paused;
}
@keyframes px-mercedes-cta-shine {
    0%, 30% { background-position: 100% 0; opacity: 0; }
    42% { opacity: .65; }
    60%, 100% { background-position: 0 0; opacity: 0; }
}
.px-mystery-mercedes[data-motion-state="running"] .px-mystery-mercedes__cta::after { animation-play-state: running; }
.px-mystery-mercedes__cta > .px-ico { flex: 0 0 22px; }
.px-mystery-mercedes__cta > span:last-child { font: 700 23px/1 Arial, sans-serif; }
.px-mystery-mercedes__cta:focus-visible { outline: 2px solid #fff3c0; outline-offset: 4px; }
@media (hover: hover) {
    .px-mystery-mercedes__cta:hover { transform: translateY(-2px); filter: brightness(1.12); }
}
@media (max-width: 760px) {
    .px-mystery-mercedes__intro { margin: 25px auto 0; }
    .px-mystery-mercedes__kicker { font-size: 8px; letter-spacing: .12em; }
    .px-mystery-mercedes__intro h3 { margin-top: 8px; font-size: clamp(22px, 6.3vw, 36px); }
    .px-mystery-mercedes__intro p { margin-top: 7px; font-size: 13px; }
    .px-mystery-mercedes__scene { padding: 74px 0 70px; box-sizing: border-box; }
    .px-mystery-mercedes__video { top: 74px; bottom: auto; height: calc(100% - 144px); }
    .px-mystery-mercedes .px-mystery__float { --orbit-x: 6px; --orbit-y: 3px; --orbit-tilt: 9deg; width: clamp(78px, 21vw, 110px); min-height: 51px; padding: 7px 5px; gap: 4px; border-radius: 9px; font-size: clamp(7px, 1.5vw, 9px); letter-spacing: .01em; }
    .px-mystery-mercedes .px-mystery__float .px-ico { width: 18px; height: 18px; }
    .px-mystery-mercedes .px-mystery__float > span { font-size: 19px; }
    .px-mystery-mercedes .px-mystery__float::after { inset: 2px; border-radius: 6px; }
    .px-mystery-mercedes .px-mystery__float--bonus { top: 18px; left: 4%; }
    .px-mystery-mercedes .px-mystery__float--surprise { top: 15px; left: 50%; translate: -50% 0; }
    .px-mystery-mercedes .px-mystery__float--x2 { top: 18px; right: 4%; --orbit-x: -5px; }
    .px-mystery-mercedes .px-mystery__float--cash { bottom: 8px; left: 12%; }
    .px-mystery-mercedes .px-mystery__float--discount { bottom: 8px; right: 18%; --orbit-x: -6px; }
    .px-mystery-mercedes__motion-toggle { right: 2px; bottom: 14px; width: 36px; height: 36px; }
    .px-mystery-mercedes__footer { margin: 4px 0 12px; }
    .px-mystery-mercedes__cta { width: calc(100% - 16px); gap: 9px; padding: 14px 12px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .px-mystery-mercedes .px-mystery__float,
    .px-mystery-mercedes .px-mystery__float::before,
    .px-mystery-mercedes .px-mystery__float::after,
    .px-mystery-mercedes__cta::after { animation: none; }
    .px-mystery-mercedes__cta-glow { display: none; }
    .px-mystery-mercedes__video { display: none; transition: none; }
    .px-mystery-mercedes__motion-toggle { display: none; }
    .px-mystery-mercedes__cta { transition: none; }
    .px-mystery-mercedes__cta:hover { transform: none; }
}