/* v24: dark iPhone-style frames, animated app demo, 3D shopping and prize motion. */
.app-phone-v24{position:relative;height:100%;aspect-ratio: .465;background:#151515;border:1px solid #686868;border-radius:13% / 6%;padding:5px;box-shadow:inset 0 0 0 1px #333,0 16px 30px #28001040;overflow:hidden;container-type:inline-size;color:#121212;font-family:var(--sans)}
.app-phone-v24:before{content:'';position:absolute;inset:5px;background:#fff;border-radius:12% / 5.5%}
.phone-status-v24{position:absolute;left:10%;right:8%;top:2.5%;display:flex;justify-content:space-between;align-items:center;font-size:3.4cqw;font-weight:700;z-index:4}
.phone-island-v24{position:absolute;top:2.2%;left:35%;width:30%;height:3.3%;border-radius:30px;background:#080808;z-index:5;box-shadow:inset -5px 0 4px #202020}
.phone-island-v24:after{content:'';position:absolute;right:10%;top:28%;height:44%;aspect-ratio:1;background:#142632;border-radius:50%}
.phone-viewport-v24{position:absolute;top:6.3%;bottom:2.4%;left:2.2%;right:2.2%;overflow:hidden;border-radius:0 0 9% 9%;background:#fff}
.phone-home-v24{position:absolute;inset:0;overflow:hidden}
.phone-home-v24>img{position:absolute;display:block;top:-6.5%;left:0;width:100%;height:106.5%;max-width:none;object-fit:cover;object-position:bottom}
.phone-home-indicator-v24{position:absolute;bottom:1.2%;left:33%;width:34%;height:.55%;background:#161616;border-radius:20px;z-index:6}

/* Footer phone and every card have their own float phase. */
.footer-reward-art{position:relative;width:100%;height:620px;isolation:isolate}
.footer-rewards-mount{width:100%}
.footer-phone-float{position:absolute;top:20px;left:50%;width:270px;height:580px;translate:-50% 0;--float-tilt:7deg;animation:essenzi-hover-v20 4.8s ease-in-out infinite}
.footer-perk{position:absolute;z-index:2;display:flex;align-items:center;gap:11px;max-width:215px;padding:15px 18px;border:1px solid #fff0bf;border-radius:11px;background:var(--essenzi-cta-gradient);color:#392313;box-shadow:0 12px 24px #50001624;animation:essenzi-hover-v20 4s ease-in-out infinite}
.footer-perk>svg{width:23px;height:23px;flex:none;color:#a30931}
.footer-perk strong{display:block;font:800 13px/1.4 var(--heading);text-shadow:none}
.footer-perk small{display:block;font-size:10px;line-height:1.5;margin-top:3px}
.footer-perk-early{top:15%;left:0;--float-tilt:-5deg;--float-rise:-14px;animation-duration:3.6s;animation-delay:-.8s}
.footer-perk-vip{top:51%;right:-1%;--float-tilt:4deg;--float-rise:-16px;animation-duration:4.4s;animation-delay:-2.2s}
.footer-perk-gifts{bottom:6%;left:6%;--float-tilt:-3deg;--float-rise:-12px;animation-duration:3.9s;animation-delay:-1.5s}

/* The scan phone follows the reference: splash → home → tap QR → member card. */
.scan-app-art{height:136px;width:64px;position:relative;animation:scan-phone-float-v24 4s ease-in-out infinite}
.scan-app-art .app-phone-v24{padding:1.5px;border-radius:9px;box-shadow:0 8px 10px #4b2b1529}
.scan-app-art .app-phone-v24:before{inset:1.5px;border-radius:7px}
.phone-launch-v24{position:absolute;inset:0;background:#fff;display:grid;place-items:center;z-index:3;animation:app-launch-v24 9s linear infinite}
.mini-app-logo{position:relative;display:grid;place-items:center;width:55%;aspect-ratio:1;border-radius:24%;background:linear-gradient(125deg,#fff0b2,#d5b54d 45%,#bc8e20);box-shadow:0 1cqw 7cqw #c5a44555;color:white;font:italic 54cqw/1 Georgia,serif;animation:app-logo-open-v24 9s ease-in-out infinite}
.mini-app-logo i{font:normal 12cqw/1 Georgia,serif;position:absolute;top:2%;right:17%}
.phone-qr-v24{position:absolute;inset:0;background:#fff;z-index:2;padding:5%;animation:app-qr-open-v24 9s ease-in-out infinite}
.mini-app-header{display:flex;flex-direction:column;gap:1cqw;border-bottom:1px solid #c9a849;padding-bottom:4cqw;font:700 7cqw/1.2 Georgia,serif}
.mini-app-header span{font:600 2.5cqw/1.4 var(--sans);letter-spacing:.6cqw;color:#a48330}
.mini-member-card{margin-top:7cqw;padding:7cqw 6cqw;background:linear-gradient(120deg,#ffe9a4,#d1ad40 50%,#f9e4a1);border-radius:4cqw;color:#fff}
.mini-member-card>small{font-size:3cqw;display:block}.mini-member-card>strong{display:block;font:800 6cqw/1.3 var(--sans);margin:2cqw 0 7cqw;color:#fff}
.mini-points{display:flex;align-items:center;justify-content:space-between;font-size:2.5cqw;border-top:1px solid #fff6;padding-top:4cqw}.mini-points b{font-size:4cqw}
.mini-member-card>svg{display:block;width:75%;height:auto;margin:8cqw auto 0;border:3cqw solid #fff;border-radius:3cqw}
.mini-available{display:flex;justify-content:space-between;padding:7cqw 1cqw;font-size:3.2cqw;color:#555}.mini-available b{color:#b38d2d}
.phone-qr-v24>p{font-size:2.5cqw;text-align:center;color:#888;margin:3cqw 0}
.mini-app-nav{position:absolute;bottom:3%;left:4%;right:4%;text-align:center;font-size:7cqw;word-spacing:5cqw;border-radius:6cqw;box-shadow:0 0 3cqw #c3a65022;color:#a17c22}.mini-app-nav b{display:inline-block;border-radius:50%;padding:2cqw;background:var(--essenzi-cta-gradient)}
.phone-tap-v24{position:absolute;left:44%;bottom:6%;width:12%;aspect-ratio:1;border:2px solid #d0aa43;border-radius:50%;background:#fff7;z-index:4;animation:app-qr-tap-v24 9s ease-in-out infinite}
@keyframes scan-phone-float-v24{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes app-launch-v24{0%,20%,100%{opacity:1}26%,94%{opacity:0}}
@keyframes app-logo-open-v24{0%{transform:scale(.25);opacity:0}6%{opacity:1}15%,20%{transform:scale(1);opacity:1}26%,94%{transform:scale(1.1);opacity:0}100%{transform:scale(.25);opacity:0}}
@keyframes app-qr-open-v24{0%,55%,100%{opacity:0;transform:translateY(8%)}62%,92%{opacity:1;transform:translateY(0)}98%{opacity:0;transform:translateY(0)}}
@keyframes app-qr-tap-v24{0%,43%,58%,100%{opacity:0;transform:scale(1.4)}47%{opacity:1;transform:scale(1.4)}52%{opacity:1;transform:scale(.8)}57%{opacity:0;transform:scale(1.5)}}

/* A single double-sided card: 2.5s hold + .6s turn on each face. */
.shop-flip-stage{width:100%;height:auto;aspect-ratio:1.68;max-height:90%;perspective:1400px;position:relative;margin:auto}
.shop-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:shop-flip-v24 6.2s cubic-bezier(.4,0,.2,1) infinite}
.shop-flip-face{position:absolute;inset:0;display:flex;flex-direction:column;border:2px solid #f2d78f;border-radius:18px;background:#fffaed;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 24px 35px #4c001a42;transform:rotateY(0deg) translateZ(1px)}
.shop-flip-face-back{transform:rotateY(180deg) translateZ(1px)}
.shop-flip-face>img{display:block;width:100%;height:0;flex:1;min-height:0;object-fit:contain;background:#fff8e9}
.shop-flip-face .shop-channel-label{flex:none;padding:15px 20px}
.shop-flip-face .shop-browser-bar{flex:none}
.shop-destinations-art:has(.shop-flip-stage){display:flex;align-items:center;padding-bottom:35px}
.shop-destinations-art:has(.shop-flip-stage):before{inset:0 -3% 3%}
@keyframes shop-flip-v24{0%,40.32258%{transform:rotateY(0)}50%,90.32258%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.campaign-banner[aria-hidden="true"] .shop-flip-inner{animation-play-state:paused}

/* One, two, three coupons, then start again. */
.lucky-coupon-stack{position:relative;width:220px;height:136px;flex:none}
.lucky-stack-layer{position:absolute;top:0;left:10px;width:200px;height:132px;object-fit:contain;filter:drop-shadow(0 6px 5px #653a1626)}
.lucky-stack-1{z-index:3;animation:coupon-front-v24 6s ease-in-out infinite}
.lucky-stack-2{z-index:2;animation:coupon-second-v24 6s ease-in-out infinite}
.lucky-stack-3{z-index:1;animation:coupon-third-v24 6s ease-in-out infinite}
.lucky-stack-count{position:absolute;z-index:4;bottom:0;left:65px;width:90px;height:20px;text-align:center;background:var(--essenzi-cta-gradient);border:1px solid #c3a350;border-radius:20px;color:#573512;font:800 8px/18px var(--heading)}
.lucky-stack-count>span{position:absolute;inset:0;animation:coupon-label-v24 6s steps(1,end) infinite}
.lucky-stack-count>span:nth-child(2){animation-delay:-4s}.lucky-stack-count>span:nth-child(3){animation-delay:-2s}
@keyframes coupon-label-v24{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes coupon-front-v24{0%,28%,100%{transform:translate(0,0) rotate(0)}36%,61%{transform:translate(-8px,2px) rotate(-4deg)}69%,90%{transform:translate(-16px,6px) rotate(-8deg)}}
@keyframes coupon-second-v24{0%,28%,100%{opacity:0;transform:translate(0,0) rotate(0)}36%,61%{opacity:1;transform:translate(14px,-8px) rotate(9deg)}69%,90%{opacity:1;transform:translate(3px,-7px) rotate(3deg)}}
@keyframes coupon-third-v24{0%,61%,100%{opacity:0;transform:translate(0,0) rotate(0)}69%,90%{opacity:1;transform:translate(26px,-19px) rotate(13deg)}}

/* Entry plays once per document, when Win first scrolls into view. */
body:has(.win-car-scene){overflow-x:clip}
.win-car-scene{position:relative;flex:none;width:230px;height:136px}
.win-car-drive,.win-car-float{position:relative;width:100%;height:100%}
.win-car-float>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 5px #43281824)}
.win-car-scene.is-waiting{opacity:0}
.win-car-scene.is-arriving .win-car-drive{animation:car-brake-v24 1.45s cubic-bezier(.12,.7,.14,1) both}
.win-car-scene.is-arriving .win-car-float{animation:car-float-v24 4s 1.45s ease-in-out infinite}
.win-car-scene.has-arrived .win-car-float{animation:car-float-v24 4s ease-in-out infinite}
.brake-smoke{position:absolute;bottom:10%;width:65px;height:28px;opacity:0;pointer-events:none;filter:blur(4px);background:radial-gradient(ellipse at 20% 65%,#b3aaa2cc,transparent 52%),radial-gradient(ellipse at 55% 35%,#eee9e0ee,transparent 59%),radial-gradient(ellipse at 80% 75%,#c2b8aeaa,transparent 55%)}
.brake-smoke-left{left:8%}.brake-smoke-right{right:2%}
.is-arriving .brake-smoke{animation:brake-smoke-v24 1.3s .7s ease-out both}
.is-arriving .brake-smoke-right{animation-delay:.83s}
@keyframes car-brake-v24{0%{transform:translateX(calc(100vw + 240px)) rotate(0)}62%{transform:translateX(-15px) rotate(-4deg)}78%{transform:translateX(5px) rotate(2deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes car-float-v24{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes brake-smoke-v24{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:.8}100%{opacity:0;transform:translate(40px,-20px) scale(2.2)}}

/* Same voucher gold/white finish as the campaign CTAs; mechanics unchanged. */
.retro-ticket{--paper:#f7df9d;--ticket-ink:#493017;background:linear-gradient(115deg,#b4842f 0%,#edcc76 12%,#fff3cd 30%,#fffdf1 45%,#e4bf61 66%,#f6e2ad 83%,#b68c3f 100%)}
.retro-ticket:before{opacity:.12;background:repeating-linear-gradient(0deg,#90662926 0 1px,transparent 1px 3px)}
.retro-ticket .ticket-stub,.retro-ticket .ticket-body{border-color:#9c732b99}
.retro-ticket .counter-unit strong{color:#493017;background:linear-gradient(#fff9e9 49.2%,#be984a 49.3%,#be984a 50.7%,#f8e3ad 50.8%);border-color:#ae833a88;box-shadow:0 3px 0 #a0793133}

.motion-managed:not(.motion-visible),.motion-managed:not(.motion-visible) *{animation-play-state:paused!important}
@media(min-width:701px) and (max-width:1100px){
 .footer-reward-art{height:570px}.footer-phone-float{height:520px;width:242px}
 .footer-perk{padding:10px 12px;gap:8px;max-width:180px}.footer-perk strong{font-size:11px}.footer-perk small{font-size:8px}.footer-perk>svg{width:18px;height:18px}
 .footer-perk-early{left:-3%}.footer-perk-vip{right:-4%}.footer-perk-gifts{left:0}
}
@media(max-width:700px){
 .mobile-footer-art{position:relative;display:block}
 .mobile-footer-art .footer-reward-art{height:100%;width:100%}
 .mobile-footer-art .footer-phone-float{top:0;left:50%;height:100%;width:auto;aspect-ratio:.465;max-width:56%;--float-tilt:-6deg;--float-rise:-7px}
 .mobile-footer-art .app-phone-v24{padding:.7cqw}
 .mobile-footer-art .app-phone-v24:before{inset:.7cqw}
 .footer-perk{padding:1.7cqw 2cqw;gap:1.5cqw;border-radius:1.5cqw;max-width:45cqw}
 .footer-perk strong{font-size:2.5cqw}.footer-perk small{font-size:1.8cqw;line-height:1.4;margin-top:.5cqw}
 .footer-perk>svg{width:4cqw;height:4cqw}
 .footer-perk-early{top:9%;left:0;--float-rise:-6px}.footer-perk-vip{top:46%;right:-1%;--float-rise:-7px}.footer-perk-gifts{bottom:3%;left:2%;--float-rise:-6px}
 .shop-flip-stage{height:88%;perspective:900px}
 .shop-destinations-art:has(.shop-flip-stage){padding-bottom:6cqw}
 .shop-flip-face{border-radius:2.6cqw;border-width:1px}
 .shop-flip-face .shop-channel-label{padding:2cqw 3cqw}
 .shop-flip-face .shop-channel-label>span{font-size:2.6cqw}.shop-flip-face .shop-channel-label small{font-size:2cqw}
}
@media(prefers-reduced-motion:reduce){
 .footer-phone-float,.footer-perk,.scan-app-art,.phone-launch-v24,.mini-app-logo,.phone-qr-v24,.phone-tap-v24,.shop-flip-inner,.lucky-stack-layer,.lucky-stack-count>span,.win-car-drive,.win-car-float,.brake-smoke{animation:none!important;transform:none}
 .phone-launch-v24,.phone-tap-v24,.brake-smoke{display:none}.phone-qr-v24{opacity:1}
 .win-car-scene.is-waiting{opacity:1}
 .lucky-stack-2{opacity:1;transform:translate(14px,-8px) rotate(9deg)}.lucky-stack-3{opacity:1;transform:translate(26px,-19px) rotate(13deg)}
 .lucky-stack-count>span{opacity:0}.lucky-stack-count>span:last-child{opacity:1}
 .shop-flip-inner{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .shop-flip-face{position:relative;transform:none;backface-visibility:visible;min-width:0}
}