/* Welcome popup ad: animated Christmas gift box -> product silhouette -> tap to log in.
   All sizes use --u (= card width / 100, set by welcome-popup.js) so the whole card scales as one piece.
   Base styles describe the FINAL state; the animation only plays when the card has the .play class,
   so reduced-motion users (and a failed script) see the finished artwork. */
.wp-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden;color:#fff}
.wp-dialog::backdrop{background:rgba(3,10,7,.82)}
.wp-dialog:not([open]){display:none}
.wp-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
.wp-card{--u:3.6px;position:relative;width:min(92vw,440px);width:min(92vw,calc(88vh * 100 / 190),440px);width:min(92vw,calc(88dvh * 100 / 190),440px);aspect-ratio:100/190;border-radius:calc(var(--u)*6);overflow:hidden;
  background:radial-gradient(120% 58% at 50% 40%,#1d5c3b 0%,#0f3a28 40%,#07150f 78%),#07150f;
  box-shadow:0 0 0 calc(var(--u)*.5) #FFD36B,0 0 0 calc(var(--u)*1.1) #1F4D3A,0 0 calc(var(--u)*9) rgba(255,211,107,.35),0 24px 70px rgba(0,0,0,.65);
  font-family:'DM Sans',system-ui,sans-serif;display:flex;flex-direction:column;isolation:isolate}
.wp-card *{box-sizing:border-box}
.wp-lights{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*7);z-index:6;pointer-events:none}
.wp-lights i{position:absolute;top:calc(var(--u)*1.6);width:calc(var(--u)*1.7);height:calc(var(--u)*2.3);border-radius:50%;animation:wp-twinkle 1.6s ease-in-out infinite}
.wp-lights i:nth-child(even){animation-delay:.8s}
.wp-lights svg{position:absolute;left:0;top:0;width:100%;height:100%}

.wp-close{position:absolute;z-index:8;right:calc(var(--u)*2);top:calc(var(--u)*3.2);width:max(44px,calc(var(--u)*9.5));height:max(44px,calc(var(--u)*9.5));border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:calc(var(--u)*6);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.wp-close:hover{background:rgba(255,255,255,.26)}
.wp-close:focus-visible,.wp-link:focus-visible,.wp-check input:focus-visible{outline:3px solid #fff;outline-offset:3px}

.wp-link{position:relative;z-index:3;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wp-brand{padding:calc(var(--u)*7) calc(var(--u)*13) 0 calc(var(--u)*5);font:700 calc(var(--u)*5)/1.1 Fredoka,sans-serif;color:#FFF4D6;letter-spacing:.01em}
.wp-brand b{color:#FFD36B}
.wp-brand::after{content:"";display:block;width:calc(var(--u)*30);height:calc(var(--u)*.7);margin-top:calc(var(--u)*1);border-radius:3px;background:linear-gradient(90deg,#FFD36B,#7CFF5A)}

.wp-stage{position:relative;flex:1 1 auto;min-height:0;margin-top:calc(var(--u)*1)}
.wp-rays{position:absolute;left:50%;top:56%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,102,.5) 0 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 62%);mask-image:radial-gradient(circle,#000 0,transparent 62%);animation:wp-spin 28s linear infinite;opacity:.85}
.wp-art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wp-art text{font-family:Fredoka,sans-serif}
.wp-products{filter:drop-shadow(0 0 7px rgba(150,255,80,.65)) drop-shadow(0 0 18px rgba(255,211,107,.45))}
.wp-gift,.wp-lid,.wp-prod,.wp-sp{transform-box:fill-box}
.wp-gift{transform-origin:50% 100%}
.wp-lid{transform-origin:50% 100%;opacity:0}
.wp-flash{opacity:0}
.wp-inner-glow{opacity:1}

/* copy (final state visible) */
.wp-copy{position:absolute;left:0;right:0;top:calc(var(--u)*5);text-align:center;pointer-events:none}
.wp-title{display:block;margin:0;font:700 calc(var(--u)*var(--tsize,14.2))/.95 Fredoka,sans-serif;letter-spacing:.02em;color:#FFE08A;
  background:linear-gradient(180deg,#FFF7C2 8%,#FFD36B 46%,#F29C2B 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:calc(var(--u)*.45) #7E1F1B;paint-order:stroke fill;filter:drop-shadow(0 calc(var(--u)*.8) 0 #7E1F1B) drop-shadow(0 0 calc(var(--u)*2) rgba(255,211,107,.6));transform:rotate(-3deg)}
.wp-sub{margin:calc(var(--u)*1.2) auto 0;max-width:86%;font:700 calc(var(--u)*4.2)/1.16 Fredoka,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#FFF4D6;text-shadow:0 2px 0 rgba(0,0,0,.45);transform:rotate(-3deg)}
.wp-sub em{font-style:normal;color:#7CFF5A}
.wp-hint{position:absolute;left:0;right:0;top:calc(var(--u)*4);text-align:center;font:700 calc(var(--u)*5)/1.2 Fredoka,sans-serif;letter-spacing:.06em;color:#FFE08A;opacity:0;text-shadow:0 0 calc(var(--u)*3) rgba(255,211,107,.7);pointer-events:none}

.wp-cta{position:relative;flex:0 0 auto;margin:0 calc(var(--u)*6);min-height:max(48px,calc(var(--u)*12.5));display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2);border-radius:calc(var(--u)*4);
  background:linear-gradient(180deg,#F25C54,#B8322E 60%,#8E211E);color:#fff;font:700 calc(var(--u)*5.4)/1 Fredoka,sans-serif;letter-spacing:.04em;
  box-shadow:0 calc(var(--u)*1) 0 #5E1512,0 0 0 calc(var(--u)*.6) #FFD36B,0 0 calc(var(--u)*5) rgba(255,211,107,.45)}
.wp-cta .arr{display:inline-block}
.wp-link:hover .wp-cta{filter:brightness(1.08)}
.wp-tag{flex:0 0 auto;margin:calc(var(--u)*2.4) 0 0;text-align:center;font:700 calc(var(--u)*3.3)/1.2 'DM Sans',sans-serif;letter-spacing:.14em;color:#BFF7B2;text-transform:uppercase}

.wp-bottom{position:relative;z-index:5;flex:0 0 auto;padding:calc(var(--u)*1.2) calc(var(--u)*5) 0}
.wp-check{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2.4);min-height:44px;cursor:pointer;font:500 max(11.5px,calc(var(--u)*3.3))/1.25 'DM Sans',sans-serif;color:#E9F4E4;text-align:left}
.wp-check input{flex:0 0 22px;width:22px;height:22px;margin:0;accent-color:#FFD36B;cursor:pointer}
.wp-foot{flex:0 0 auto;padding:0 0 calc(var(--u)*3.4);text-align:center;font:700 calc(var(--u)*4)/1.1 Fredoka,sans-serif;color:#fff;position:relative;z-index:5}
.wp-foot small{display:block;margin-top:calc(var(--u)*.8);font:500 calc(var(--u)*2.6)/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#8FB39A}

/* snow + burst particles */
.wp-snow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.wp-snow i{position:absolute;top:-6%;border-radius:50%;background:#fff;opacity:.8;animation:wp-fall linear infinite}
.wp-burst{position:absolute;left:50%;top:60%;width:0;height:0;z-index:4;pointer-events:none}
.wp-burst i{position:absolute;left:0;top:0;display:block;opacity:0}
.wp-burst .coin{width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);margin:calc(var(--u)*-2.7) 0 0 calc(var(--u)*-2.7);border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3B0 0 18%,#FFD36B 40%,#D9A441 75%,#A97B24);box-shadow:inset 0 0 0 calc(var(--u)*.45) #F0B84A,0 0 calc(var(--u)*2) rgba(255,211,107,.8)}
.wp-burst .star{width:calc(var(--u)*4.2);height:calc(var(--u)*4.2);margin:calc(var(--u)*-2.1) 0 0 calc(var(--u)*-2.1);background:#FFF7C2;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px #FFD36B)}
.wp-burst .conf{width:calc(var(--u)*2);height:calc(var(--u)*3.4);margin:calc(var(--u)*-1.7) 0 0 calc(var(--u)*-1);border-radius:1px}

/* ---------- the show ---------- */
.wp-card.play .wp-hint{animation:wp-hint 2.5s ease-in-out both}
.wp-card.play .wp-gift{animation:wp-drop .7s cubic-bezier(.3,1.5,.5,1) both,wp-shake 1.3s ease-in-out 1s both}
.wp-card.play .wp-lid{animation:wp-lid .95s cubic-bezier(.2,.9,.3,1) 2.3s both}
.wp-card.play .wp-flash{animation:wp-flash .7s ease-out 2.3s both}
.wp-card.play .wp-rays{animation:wp-rays-in 1s ease-out 2.3s backwards,wp-spin 28s linear 2.3s infinite}
.wp-card.play .wp-inner-glow{animation:wp-glow-in .6s ease-out 2.3s backwards}
.wp-card.play .wp-title{animation:wp-slam .6s cubic-bezier(.2,1.4,.4,1) var(--t-title,3.1s) backwards}
.wp-card.play .wp-sub{animation:wp-fadeup .6s ease-out var(--t-sub,3.4s) backwards}
.wp-card.play .wp-plate{animation:wp-plate .6s ease-out 3.2s backwards}
.wp-card.play .wp-cta{animation:wp-pop .6s cubic-bezier(.2,1.4,.4,1) var(--t-cta,3.7s) backwards,wp-pulse 1.8s ease-in-out calc(var(--t-cta,3.7s) + .7s) infinite}
.wp-card.play .wp-tag{animation:wp-fadeup .6s ease-out var(--t-tag,3.9s) backwards}
.wp-card.play .wp-burst i{animation:wp-burst 2.1s cubic-bezier(.15,.75,.3,1) both;animation-delay:calc(var(--t0,2.3s) + var(--d,0s))}
.wp-card .wp-prod{animation:wp-bob 3.2s ease-in-out infinite}
.wp-card.play .wp-prod{animation:wp-rise .85s cubic-bezier(.2,1.25,.4,1) both,wp-bob 3.2s ease-in-out 3.8s infinite}
.wp-card.play .wp-prod.p1{animation-delay:2.55s,3.8s}
.wp-card.play .wp-prod.p2{animation-delay:2.7s,3.9s}
.wp-card.play .wp-prod.p3{animation-delay:2.85s,4s}
.wp-sp{animation:wp-twinkle 2s ease-in-out infinite}

@keyframes wp-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes wp-fall{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--sx,10px),112vh,0)}}
@keyframes wp-hint{0%,18%{opacity:0;transform:translateY(8px)}30%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes wp-drop{0%{transform:translateY(-260px) scale(.9)}100%{transform:none}}
@keyframes wp-shake{0%,100%{transform:rotate(0)}8%{transform:rotate(-3deg) translateX(-1px)}18%{transform:rotate(4deg) translateX(2px)}28%{transform:rotate(-5deg) translateX(-2px)}40%{transform:rotate(6deg) translateX(2px) scale(1.02)}52%{transform:rotate(-7deg) translateX(-3px) scale(1.03)}64%{transform:rotate(7deg) translateX(3px) scale(1.04)}78%{transform:rotate(-4deg) scale(1.05)}90%{transform:rotate(3deg) scale(1.02)}}
@keyframes wp-lid{0%{opacity:1;transform:none}30%{opacity:1;transform:translate(-14px,-120px) rotate(-14deg)}100%{opacity:0;transform:translate(-120px,-250px) rotate(-48deg)}}
@keyframes wp-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes wp-rays-in{from{opacity:0;scale:.4}}
@keyframes wp-glow-in{from{opacity:0}}
@keyframes wp-rise{from{transform:translateY(200px) scale(.8)}}
@keyframes wp-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes wp-slam{0%{opacity:0;transform:rotate(-3deg) scale(2.6)}60%{opacity:1}100%{transform:rotate(-3deg) scale(1)}}
@keyframes wp-fadeup{from{opacity:0;transform:translateY(10px) rotate(0)}}
@keyframes wp-plate{from{opacity:0;transform:translateY(12px)}}
@keyframes wp-pop{from{opacity:0;transform:scale(.6)}}
@keyframes wp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes wp-burst{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}8%{opacity:1}38%{opacity:1;transform:translate(calc(var(--dx)*var(--u)),calc(var(--dy)*var(--u))) scale(1) rotate(var(--r))}100%{opacity:0;transform:translate(calc(var(--dx)*var(--u)*1.12),calc((var(--dy) + 70)*var(--u))) scale(.9) rotate(calc(var(--r)*2.4))}}

.wp-dialog[open] .wp-card{animation:wp-in .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes wp-in{from{opacity:0;transform:scale(.86) translateY(18px)}}

@media (prefers-reduced-motion:reduce){
  .wp-card,.wp-card *{animation:none!important;transition:none!important}
  .wp-burst,.wp-snow,.wp-rays{display:none}
}

/* Short screens (phone in landscape, tiny windows): keep the card readable and let it scroll instead of shrinking. */
@media (max-height:540px){
  .wp-wrap{align-items:flex-start;overflow-y:auto}
  .wp-card{width:min(92vw,380px);aspect-ratio:auto;height:auto;margin:auto}
  .wp-stage{flex:0 0 auto;height:calc(var(--u)*96)}
  .wp-close{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
}

.wp-scene{position:absolute;left:0;right:0;bottom:0;top:calc(var(--u)*6)}

.wp-tag:empty{display:none}