:root{
  --motion-fast:180ms;
  --motion-normal:360ms;
  --motion-slow:700ms;
  --ease-spring:cubic-bezier(.2,.8,.2,1.15);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
body::after{
  content:"";position:fixed;inset:-35%;z-index:-2;pointer-events:none;
  background:conic-gradient(from 90deg at 50% 50%,#075bd818,#16a34a12,#ffd32a18,#075bd818);
  animation:ambient-spin 26s linear infinite;
}
.topbar{isolation:isolate;animation:topbar-arrive .65s var(--ease-spring) both}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 15%,#ffffff18 38%,transparent 60%);
  transform:translateX(-120%);animation:nav-light 8s ease-in-out infinite 1s;
}
.cup{display:inline-block;filter:drop-shadow(0 7px 8px #0006);animation:cup-float 3.4s ease-in-out infinite}
.dynamic-badge{padding:8px 11px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff16;color:#fff;font-size:11px;font-weight:950;letter-spacing:.12em;white-space:nowrap;box-shadow:inset 0 0 18px #ffffff12}
.sidebar,.main-card,.rightbar{animation:panel-arrive .55s var(--ease-spring) both}
.main-card{animation-delay:.08s}.rightbar{animation-delay:.16s}
button,.filebtn,.country-item,.sticker,.action-card,.avatar-choice{transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,filter var(--motion-fast) ease,background-color var(--motion-normal) ease,border-color var(--motion-normal) ease}
button:active,.filebtn:active{transform:translateY(1px) scale(.97)}
.nav button{position:relative;overflow:hidden}.nav button::after{content:"";position:absolute;left:22%;right:22%;bottom:3px;height:3px;border-radius:99px;background:var(--blue);transform:scaleX(0);transition:transform var(--motion-normal) var(--ease-spring)}.nav button.active::after{transform:scaleX(1)}
.country-item:hover{transform:translateX(4px);box-shadow:0 9px 24px #0f172a12}.country-item.active{animation:country-selected .45s var(--ease-spring)}
.album-wrap{position:relative;isolation:isolate;transition:all .55s ease}.album-wrap::after{content:"";position:absolute;inset:0;border-radius:19px;pointer-events:none;background:linear-gradient(120deg,transparent 25%,#ffffff42 48%,transparent 70%);transform:translateX(-120%);animation:album-glint 9s ease-in-out infinite 2s}
.album-page{transition:background var(--motion-slow) ease,opacity var(--motion-normal) ease}
.sticker{transform-origin:center bottom;will-change:transform,opacity}.sticker.sticker-enter{animation:sticker-enter .5s var(--ease-spring) both;animation-delay:var(--stagger,0ms)}
.sticker:hover{transform:translateY(-7px) rotateX(2deg) scale(1.025);box-shadow:0 16px 30px #071a3330}
.sticker.owned{animation:owned-settle .42s var(--ease-spring)}
.sticker.owned::after{content:"";position:absolute;inset:-45%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fff9 49%,transparent 63%);transform:translateX(-70%) rotate(12deg);transition:transform .7s ease}.sticker.owned:hover::after{transform:translateX(70%) rotate(12deg)}
.qty-badge{animation:badge-pulse 2.2s ease-in-out infinite}
.progress span,.mini span{transition:width .75s var(--ease-spring)}
.sum b,.stats-card b{font-variant-numeric:tabular-nums;transition:transform .25s ease}.sum b.count-pop,.stats-card b.count-pop{animation:count-pop .38s var(--ease-spring)}
.modal.open{animation:modal-fade .22s ease both}.modal.open .sheet{animation:sheet-arrive .42s var(--ease-spring) both}
.toast{display:block!important;opacity:0;visibility:hidden;transform:translate(-50%,18px);transition:opacity .25s ease,transform .25s ease,visibility .25s}.toast.toast-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sticker-burst{position:fixed;z-index:100;pointer-events:none;width:12px;height:12px;border-radius:50%;background:#ffd32a;box-shadow:0 -34px #16a34a,28px -18px #075bd8,30px 15px #ffd32a,0 34px #fff,-28px 18px #df2336,-30px -15px #fff;animation:burst .7s ease-out forwards}
.celebration{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-30px;width:10px;height:18px;border-radius:3px;background:var(--confetti);left:var(--left);animation:confetti-fall var(--duration) cubic-bezier(.15,.7,.25,1) forwards;animation-delay:var(--delay)}
.completion-banner{position:fixed;left:50%;top:18%;z-index:121;transform:translate(-50%,-30px) scale(.8);padding:18px 26px;border-radius:20px;background:#071a33;color:white;font-size:clamp(18px,3vw,30px);font-weight:950;box-shadow:0 24px 70px #0007;animation:completion-pop 2.8s var(--ease-spring) forwards}

@keyframes ambient-spin{to{transform:rotate(360deg)}}
@keyframes topbar-arrive{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes panel-arrive{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes nav-light{0%,68%,100%{transform:translateX(-120%)}82%{transform:translateX(120%)}}
@keyframes cup-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@keyframes album-glint{0%,72%,100%{transform:translateX(-120%)}86%{transform:translateX(120%)}}
@keyframes sticker-enter{from{opacity:0;transform:translateY(24px) scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes owned-settle{0%{transform:scale(.92) rotate(-2deg)}65%{transform:scale(1.045) rotate(1deg)}100%{transform:none}}
@keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 #075bd855}50%{box-shadow:0 0 0 7px #075bd800}}
@keyframes count-pop{50%{transform:scale(1.25)}}
@keyframes country-selected{50%{transform:translateX(5px) scale(1.015)}}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes sheet-arrive{from{opacity:0;transform:translateY(32px) scale(.96)}to{opacity:1;transform:none}}
@keyframes burst{from{opacity:1;transform:scale(.25)}to{opacity:0;transform:scale(2.8) rotate(55deg)}}
@keyframes confetti-fall{to{transform:translate3d(var(--drift),110vh,0) rotate(720deg)}}
@keyframes completion-pop{0%{opacity:0;transform:translate(-50%,-30px) scale(.8)}18%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-15px) scale(.95)}}

@media(max-width:760px){.dynamic-badge{display:none}.sticker:hover{transform:translateY(-3px) scale(1.015)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.celebration,.sticker-burst{display:none!important}}