/* v19: motion stays in CSS, so route changes leave no repeating JS timers.
   Shopping cards swap every 2.5s; the complete out-and-back cycle is 5s. */
.campaign-loyalty-art .reward-device,.campaign-loyalty-art .loyalty-benefit{animation:loyalty-float-v19 4s ease-in-out infinite}
.campaign-loyalty-art .offers-device{animation-delay:-2s}
.campaign-loyalty-art .benefit-points{animation-duration:3.8s;animation-delay:-.7s}
.campaign-loyalty-art .benefit-cashback{animation-duration:4.4s;animation-delay:-2.2s}
.campaign-loyalty-art .benefit-offers{animation-duration:4.1s;animation-delay:-1.3s}
@keyframes loyalty-float-v19{0%,100%{translate:0 0}50%{translate:0 -9px}}

.shop-destinations-art .shop-store-photo{animation:store-swap-v19 5s ease-in-out infinite}
.shop-destinations-art .shop-online-photo{animation:online-swap-v19 5s ease-in-out infinite}
/* Long reading holds and brief outward arcs reveal the full front image.
   z-index changes at the midpoint of each arc, while the two cards separate. */
@keyframes store-swap-v19{
 0%,38%{z-index:1;translate:0 0;scale:1}
 20%{translate:0 -5px}
 46%{translate:-3% -12%;scale:.97;z-index:1}
 49.99%{z-index:1}
 50%{z-index:4;translate:-3% -12%;scale:.97}
 58%,88%{z-index:4;translate:0 5%;scale:1.02}
 73%{translate:0 calc(5% - 5px)}
 96%{z-index:4;translate:-3% -12%;scale:.97}
 99.99%{z-index:4}
 100%{z-index:1;translate:0 0;scale:1}
}
@keyframes online-swap-v19{
 0%,38%{z-index:4;translate:0 0;scale:1}
 20%{translate:0 -5px}
 46%{translate:4% 12%;scale:.97;z-index:4}
 49.99%{z-index:4}
 50%{z-index:1;translate:4% 12%;scale:.97}
 58%,88%{z-index:1;translate:3% -3%;scale:.96}
 73%{translate:3% calc(-3% - 5px)}
 96%{z-index:1;translate:4% 12%;scale:.97}
 99.99%{z-index:1}
 100%{z-index:4;translate:0 0;scale:1}
}
.shop-destinations-art .shop-channel-bridge{z-index:5}
/* Pause hidden carousel slides without changing their timing or appearance. */
.campaign-banner[aria-hidden="true"] :is(.reward-device,.loyalty-benefit,.shop-store-photo,.shop-online-photo){animation-play-state:paused}

/* Set the heading token used by the global heading rule, including its first line. */
.campaign-carousel .banner-shopping{--essenzi-heading-color:#f4d594;--essenzi-heading-shadow:none}
.campaign-carousel .banner-shopping :is(.banner-title,.mobile-promo h2),.campaign-carousel .banner-shopping :is(.banner-title,.mobile-promo h2) em{color:#f4d594!important;text-shadow:none}

/* Matching artwork canvases and top alignment for all four participation steps. */
.participation-v11 .section-heading{margin-bottom:108px}
.participation-v11 .step-illustration{height:136px;width:calc(100% - 22px);max-width:260px;top:-76px;display:flex;align-items:center;justify-content:center}
.participation-v11 .participation-object{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 7px #63331425);transform-origin:50% 80%;position:relative;z-index:1}
.participation-v11 .step-illustration:after{content:'';position:absolute;left:30%;right:30%;bottom:-6px;height:8px;border-radius:50%;background:#78402b20;filter:blur(3px)}
.participation-v11 .quick-step-copy{padding-top:77px}
@media(hover:hover){
 .participation-v11 .quick-step:hover .participation-object{animation:prize-float 2.4s ease-in-out infinite}
}
.participation-v11 .quick-step:focus-within .participation-object{animation:prize-float 2.4s ease-in-out infinite}

/* All three prizes float continuously, including while their podium is hovered. */
.winners-celebration .prize-podium>div .real-prize{animation:prize-float 4s ease-in-out infinite}
.winners-celebration .prize-podium>.podium-cash-right .real-prize{animation-delay:-2s}
.winners-celebration .prize-podium>.podium-grand .real-prize{animation-delay:-1s}
.winners-celebration .celebration-sparkles i{animation-name:confetti-rain-v19;animation-duration:6s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-delay:calc(var(--i)*.045s)}
@keyframes confetti-rain-v19{
 0%{opacity:0;translate:0 -65px;rotate:0deg}
 6%{opacity:.85}
 42%{opacity:.7}
 65%,100%{opacity:0;translate:35px 560px;rotate:190deg}
}

/* Gold cutouts sit partly above the date-card edge rather than inside the label. */
.date-row{overflow:visible;margin-top:52px}
.date-row .draw-tile{padding-top:43px;overflow:visible}
.draw-prize-cutout{position:absolute;right:17px;top:-34px;width:78px;height:78px;display:block;pointer-events:none;z-index:1}
.draw-prize-cutout>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 5px #77441730);transform:rotate(-7deg)}
.draw-tile.grand .draw-prize-cutout{width:86px;height:86px;top:-43px}
.draw-tile.grand .draw-prize-cutout>img{transform:rotate(5deg)}
@media(hover:hover){.draw-tile:hover .draw-prize-cutout>img{animation:prize-float 2.4s ease-in-out infinite}}
.draw-tile:focus-visible .draw-prize-cutout>img{animation:prize-float 2.4s ease-in-out infinite}
@media(max-width:1000px){.participation-v11 .quick-steps-grid{row-gap:110px}}
@media(max-width:800px){
 .date-row{row-gap:44px;background:transparent;border:0;box-shadow:none;column-gap:1px}
 .date-row .draw-tile{background:#fff;border:1px solid #ead8d0;border-radius:5px}
 .date-row .draw-tile.grand{background:linear-gradient(125deg,#b60220,#880018);border-top:3px solid #d9b15b}
}
@media(max-width:700px){
 .campaign-loyalty-art .reward-device,.campaign-loyalty-art .loyalty-benefit{animation-name:loyalty-float-mobile-v19}
 .draw-prize-cutout{right:10px;width:65px;height:65px;top:-27px}
 .draw-tile.grand .draw-prize-cutout{width:73px;height:73px;top:-35px}
 .participation-v11 .step-illustration{height:136px;top:-76px}
 .participation-v11 .quick-step-copy{padding-top:77px}
 @keyframes loyalty-float-mobile-v19{0%,100%{translate:0 0}50%{translate:0 -5px}}
}
@media(prefers-reduced-motion:reduce){
 .campaign-loyalty-art :is(.reward-device,.loyalty-benefit),.shop-destinations-art :is(.shop-store-photo,.shop-online-photo),.winners-celebration .prize-podium>div .real-prize,.winners-celebration .celebration-sparkles i,.participation-v11 .quick-step .participation-object,.draw-tile .draw-prize-cutout>img{animation:none!important;translate:none;scale:none}
 .winners-celebration .celebration-sparkles{display:none}
}

/* Normalize the transparent margins so every visible object is 136px high. */
.participation-v11 .participation-object-shop{height:140.41px;max-width:none;top:-0.7px}
.participation-v11 .participation-object-scan{height:147.63px;max-width:none;top:0.05px}
.participation-v11 .participation-object-coupon{height:160.81px;max-width:none;top:-1.73px}
.participation-v11 .participation-object-car{height:159.89px;max-width:none;top:-3.51px}
