/* v20: visibly independent, continuous motion. Preserve each cutout's tilt. */
.campaign-loyalty-art .reward-device,
.campaign-loyalty-art .loyalty-benefit {
  --float-rise:-14px;
  animation:essenzi-hover-v20 4.2s ease-in-out infinite;
  translate:none;
}
.campaign-loyalty-art .membership-device{--float-tilt:-9deg}
.campaign-loyalty-art .offers-device{--float-tilt:8deg;animation-duration:4.8s;animation-delay:-2.4s}
.campaign-loyalty-art .benefit-points{--float-tilt:-5deg;--float-rise:-18px;animation-duration:3.6s;animation-delay:-.8s}
.campaign-loyalty-art .benefit-cashback{--float-tilt:4deg;--float-rise:-16px;animation-duration:4.4s;animation-delay:-2.2s}
.campaign-loyalty-art .benefit-offers{--float-tilt:-3deg;--float-rise:-16px;animation-duration:3.9s;animation-delay:-1.5s}
@keyframes essenzi-hover-v20{
  0%,100%{transform:translateY(0) rotate(var(--float-tilt,0deg))}
  50%{transform:translateY(var(--float-rise,-14px)) rotate(var(--float-tilt,0deg))}
}

/* 5 seconds per complete cycle = a front/back exchange every 2.5 seconds.
   Transform-based movement also works on older mobile browsers. */
.shop-destinations-art .shop-store-photo{animation:store-swap-v20 5s ease-in-out infinite;translate:none;scale:none}
.shop-destinations-art .shop-online-photo{animation:online-swap-v20 5s ease-in-out infinite;translate:none;scale:none}
@keyframes store-swap-v20{
  0%,38%{z-index:1;transform:translate(0,0) rotate(-4deg)}
  20%{transform:translate(0,-7px) rotate(-4deg)}
  46%{z-index:1;transform:translate(-4%,-12%) rotate(-7deg) scale(.97)}
  49.99%{z-index:1}
  50%{z-index:4;transform:translate(-4%,-12%) rotate(-7deg) scale(.97)}
  58%,88%{z-index:4;transform:translate(0,5%) rotate(-4deg) scale(1.02)}
  73%{transform:translate(0,calc(5% - 7px)) rotate(-4deg) scale(1.02)}
  96%{z-index:4;transform:translate(-4%,-12%) rotate(-7deg) scale(.97)}
  99.99%{z-index:4}
  100%{z-index:1;transform:translate(0,0) rotate(-4deg)}
}
@keyframes online-swap-v20{
  0%,38%{z-index:4;transform:translate(0,0) rotate(5deg)}
  20%{transform:translate(0,-7px) rotate(5deg)}
  46%{z-index:4;transform:translate(4%,12%) rotate(8deg) scale(.97)}
  49.99%{z-index:4}
  50%{z-index:1;transform:translate(4%,12%) rotate(8deg) scale(.97)}
  58%,88%{z-index:1;transform:translate(3%,-3%) rotate(5deg) scale(.96)}
  73%{transform:translate(3%,calc(-3% - 7px)) rotate(5deg) scale(.96)}
  96%{z-index:1;transform:translate(4%,12%) rotate(8deg) scale(.97)}
  99.99%{z-index:1}
  100%{z-index:4;transform:translate(0,0) rotate(5deg)}
}
.campaign-banner[aria-hidden="true"] :is(.reward-device,.loyalty-benefit,.shop-store-photo,.shop-online-photo){animation-play-state:paused}

.winners-celebration .prize-podium>div .real-prize{animation:winners-hover-v20 4s ease-in-out infinite}
.winners-celebration .prize-podium>.podium-grand .real-prize{animation-delay:-1.3s}
.winners-celebration .prize-podium>.podium-cash-right .real-prize{animation-delay:-2.6s}
@keyframes winners-hover-v20{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-15px) rotate(3deg)}
}

/* Replace the two flat coupons in banner four with cutout shopping/prize art. */
.campaign-carousel .how-visual{height:500px}
.participation-prize-art{position:relative;isolation:isolate;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding-bottom:38px}
.participation-prize-art:before{content:'';position:absolute;inset:8% 0 18%;border-radius:50%;border:1px solid #f4cc7655;background:radial-gradient(ellipse,#ffe8b318,transparent 70%);z-index:-1}
.how-prize-object{margin:0;min-width:0;height:90%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.how-art-cutout{position:relative;width:100%;height:calc(100% - 74px);min-height:0}
.how-art-cutout>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 13px #4b001a55)}
.how-key-stage>.how-jac-key{width:77%;height:91%;position:absolute;left:-3%;top:0;transform:rotate(-9deg)}
.how-key-stage>.how-cash-ticket{width:76%;height:auto;position:absolute;right:-8%;bottom:2%;transform:rotate(5deg);z-index:1}
.how-prize-object figcaption{min-height:64px;padding-top:12px;text-align:center;color:#ffe6a5;font:800 16px/1.35 var(--heading)}
.how-prize-object figcaption small{display:block;font:500 10px/1.5 var(--sans);color:#fff1df;margin-top:5px}
.participation-prize-art .banner-mini-steps{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:18px;font-size:10px}
.date-row .draw-tile:not(.grand) .draw-prize-cutout{width:104px;height:78px;right:12px}
@media(min-width:701px) and (max-width:1100px){
  .campaign-carousel .how-visual{height:390px}
  .participation-prize-art{gap:10px}
  .how-prize-object figcaption{font-size:13px}
}
@media(max-width:700px){
  .campaign-loyalty-art .reward-device{--float-rise:-8px}
  .campaign-loyalty-art .loyalty-benefit{--float-rise:-10px}
  .banner-how .mobile-promo{gap:2cqw;padding:5cqw 6cqw}
  .banner-how .mobile-promo h2{font-size:6.5cqw;margin-bottom:2cqw}
  .banner-how .mobile-promo-copy>p{font-size:2.7cqw;line-height:1.55;margin-bottom:2.5cqw}
  .banner-how .mobile-promo .eyebrow{margin-bottom:2cqw}
  .participation-prize-art{gap:3cqw;padding-bottom:5cqw}
  .how-prize-object{height:100%}
  .how-art-cutout{height:calc(100% - 12cqw)}
  .how-prize-object figcaption{min-height:12cqw;font-size:2.7cqw;padding-top:1cqw}
  .how-prize-object figcaption small{font-size:2cqw;margin-top:1cqw}
  .how-key-stage>.how-cash-ticket{right:-3%}
  .participation-prize-art .banner-mini-steps{gap:3cqw;font-size:1.9cqw;bottom:0}
  .date-row .draw-tile:not(.grand) .draw-prize-cutout{width:84px;height:65px;right:7px}
}
@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{animation:none!important}
}