/* =========================================================
   BRENDA SINAIS · V21 MOTION UX
   Motion layer only. No business logic changes.
   ========================================================= */
:root{
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-ease-spring:cubic-bezier(.2,.9,.2,1.08);
  --motion-ease-soft:cubic-bezier(.22,.78,.22,1);
}

/* ---------- Launch / first fold ---------- */
body.v20-native-ui.motion-v21 .topbar.native-app-header{
  animation:v21HeaderIn 460ms var(--motion-ease-out) both;
}
body.v20-native-ui.motion-v21 .native-intro{
  animation:v21IntroIn 480ms var(--motion-ease-out) 35ms both;
}
body.v20-native-ui.motion-v21 .native-action-main{
  animation:v21ActionIn 520ms var(--motion-ease-spring) 90ms both;
}
body.v20-native-ui.motion-v21 .action-secondary-row{
  animation:v21ActionIn 520ms var(--motion-ease-spring) 145ms both;
}
body.v20-native-ui.motion-v21 .native-live-row{
  animation:v21ActionIn 480ms var(--motion-ease-out) 205ms both;
}
@keyframes v21HeaderIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:none}
}
@keyframes v21IntroIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes v21ActionIn{
  0%{opacity:0;transform:translateY(18px) scale(.975)}
  72%{opacity:1;transform:translateY(-1px) scale(1.003)}
  100%{opacity:1;transform:none}
}

/* ---------- Main CTA has subtle life ---------- */
body.v20-native-ui.motion-v21 .native-action-main::after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-70px;top:-78px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,230,72,.14),rgba(255,230,72,0) 67%);
  animation:v21GlowDrift 5.2s ease-in-out infinite;
}
body.v20-native-ui.motion-v21 .native-action-icon-main svg{
  transform-origin:50% 50%;
  animation:v21ZapBreath 3.2s ease-in-out 700ms infinite;
}
body.v20-native-ui.motion-v21 .native-action-arrow{
  animation:v21ArrowNudge 2.6s var(--motion-ease-soft) 1.1s infinite;
}
body.v20-native-ui.motion-v21 .native-play-action .native-action-icon svg{
  transform-origin:center;
  animation:v21GamepadFloat 4.4s ease-in-out 1s infinite;
}
body.v20-native-ui.motion-v21 .native-install-action .native-action-icon svg{
  animation:v21DownloadNudge 3.6s var(--motion-ease-soft) 1.3s infinite;
}
@keyframes v21GlowDrift{
  0%,100%{transform:translate3d(0,0,0) scale(.92);opacity:.55}
  50%{transform:translate3d(-18px,18px,0) scale(1.08);opacity:1}
}
@keyframes v21ZapBreath{
  0%,82%,100%{transform:scale(1) rotate(0)}
  88%{transform:scale(1.08) rotate(-2deg)}
  94%{transform:scale(1.02) rotate(1deg)}
}
@keyframes v21ArrowNudge{
  0%,72%,100%{transform:translateX(0)}
  82%{transform:translateX(3px)}
  90%{transform:translateX(0)}
}
@keyframes v21GamepadFloat{
  0%,76%,100%{transform:translateY(0) rotate(0)}
  84%{transform:translateY(-2px) rotate(-2deg)}
  92%{transform:translateY(0) rotate(1deg)}
}
@keyframes v21DownloadNudge{
  0%,72%,100%{transform:translateY(0)}
  82%{transform:translateY(3px)}
  90%{transform:translateY(0)}
}

/* ---------- Press feedback / ripple ---------- */
body.motion-v21 :is(.action-card,.native-live-card,.platform-card,.filter-chip,.bottom-nav button,.signal-btn,.play-btn,.rtp-play,.btn-yellow,.auth-submit,.rtp-activate-btn,.house-register-finished,.house-gate-primary,.house-gate-verify){
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
body.motion-v21 .touch-ripple{
  position:absolute;
  width:12px;height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  z-index:20;
  background:rgba(255,255,255,.24);
  transform:scale(0);
  animation:v21Ripple 520ms ease-out forwards;
}
@keyframes v21Ripple{
  0%{transform:scale(0);opacity:.65}
  100%{transform:scale(15);opacity:0}
}
body.v20-native-ui.motion-v21 .action-card:active,
body.v20-native-ui.motion-v21 .native-live-card:active{
  transform:scale(.975);
  transition-duration:70ms;
}
body.v20-native-ui.motion-v21 .signal-btn:active,
body.v20-native-ui.motion-v21 .play-btn:active,
body.v20-native-ui.motion-v21 .rtp-play:active,
body.v20-native-ui.motion-v21 .btn-yellow:active,
body.v20-native-ui.motion-v21 .auth-submit:active,
body.v20-native-ui.motion-v21 .house-register-finished:active{
  transform:scale(.97);
}

/* ---------- Scroll reveal ---------- */
body.motion-v21 .v21-reveal{
  opacity:0;
  transform:translateY(18px) scale(.992);
  filter:blur(2px);
  transition:
    opacity 480ms var(--motion-ease-out) var(--v21-delay,0ms),
    transform 560ms var(--motion-ease-out) var(--v21-delay,0ms),
    filter 420ms ease-out var(--v21-delay,0ms);
}
body.motion-v21 .v21-reveal.v21-visible{
  opacity:1;
  transform:none;
  filter:none;
}
body.motion-v21 .v21-reveal-item{
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity 360ms var(--motion-ease-out) var(--v21-item-delay,0ms),transform 420ms var(--motion-ease-out) var(--v21-item-delay,0ms);
}
body.motion-v21 .v21-visible .v21-reveal-item,
body.motion-v21 .v21-reveal-item.v21-visible{
  opacity:1;
  transform:none;
}

/* ---------- Game cards enter with stagger ---------- */
body.v20-native-ui.motion-v21 .game-card.card-enter{
  opacity:0;
  transform:translateY(16px) scale(.978);
  animation:v21GameCardIn 460ms var(--motion-ease-out) var(--stagger,0ms) forwards;
}
@keyframes v21GameCardIn{
  0%{opacity:0;transform:translateY(16px) scale(.978)}
  100%{opacity:1;transform:none}
}
body.v20-native-ui.motion-v21 .game-card .game-cover{
  transition:transform 420ms var(--motion-ease-out),filter 280ms ease-out;
}
body.v20-native-ui.motion-v21 .game-card:active .game-cover{transform:scale(1.035)}
body.v20-native-ui.motion-v21 .favorite-btn.on{
  animation:v21FavoritePop 320ms var(--motion-ease-spring);
}
@keyframes v21FavoritePop{
  0%{transform:scale(.72)}
  70%{transform:scale(1.14)}
  100%{transform:scale(1)}
}

/* ---------- Platforms / chips ---------- */
body.v20-native-ui.motion-v21 .platform-card,
body.v20-native-ui.motion-v21 .filter-chip{
  transition:transform 110ms ease-out,background 200ms ease-out,border-color 200ms ease-out,color 200ms ease-out;
}
body.v20-native-ui.motion-v21 .platform-card:active,
body.v20-native-ui.motion-v21 .filter-chip:active{transform:scale(.965)}
body.v20-native-ui.motion-v21 .platform-card.active,
body.v20-native-ui.motion-v21 .filter-chip.active{
  animation:v21SelectionPop 280ms var(--motion-ease-spring);
}
@keyframes v21SelectionPop{
  0%{transform:scale(.96)}
  70%{transform:scale(1.018)}
  100%{transform:scale(1)}
}

/* ---------- RTP motion ---------- */
body.v20-native-ui.motion-v21 .rtp-sync-badge i,
body.v20-native-ui.motion-v21 .dot.live{
  animation:v21LivePulse 1.8s ease-in-out infinite;
}
@keyframes v21LivePulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(66,215,125,.25)}
  50%{opacity:.72;box-shadow:0 0 0 5px rgba(66,215,125,0)}
}
body.v20-native-ui.motion-v21 .rtp-card.rtp-in{
  opacity:0;
  transform:translateY(14px) scale(.985);
  animation:v21RtpIn 470ms var(--motion-ease-out) var(--rtp-delay,0ms) forwards;
}
@keyframes v21RtpIn{to{opacity:1;transform:none}}
body.v20-native-ui.motion-v21 .rtp-update-track span{
  transition:width 650ms var(--motion-ease-out);
}
body.v20-native-ui.motion-v21 .rtp-number strong,
body.v20-native-ui.motion-v21 .rtp-number [data-rtp-value]{
  font-variant-numeric:tabular-nums;
}

/* ---------- Native tab bar feedback ---------- */
body.v20-native-ui.motion-v21 .bottom-nav.native-tab-bar{
  animation:v21TabBarIn 520ms var(--motion-ease-out) 160ms both;
}
@keyframes v21TabBarIn{
  from{opacity:0;transform:translate(-50%,18px) scale(.985)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}
body.v20-native-ui.motion-v21 .bottom-nav button.v21-tab-pop .tab-icon{
  animation:v21TabPop 360ms var(--motion-ease-spring);
}
body.v20-native-ui.motion-v21 .bottom-nav button.active small{
  position:relative;
}
body.v20-native-ui.motion-v21 .bottom-nav button.active small::after{
  content:"";
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--ios-yellow);
  left:50%;bottom:-7px;
  transform:translateX(-50%);
  animation:v21DotIn 260ms var(--motion-ease-spring) both;
}
@keyframes v21TabPop{
  0%{transform:translateY(1px) scale(.88)}
  68%{transform:translateY(-2px) scale(1.08)}
  100%{transform:none}
}
@keyframes v21DotIn{
  from{opacity:0;transform:translateX(-50%) scale(0)}
  to{opacity:1;transform:translateX(-50%) scale(1)}
}

/* ---------- Native sheets replay their enter motion ---------- */
body.motion-v21 .v21-sheet-enter{
  animation:v21SheetSpring 360ms var(--motion-ease-spring) both!important;
}
body.motion-v21 .v21-backdrop-enter{
  animation:v21BackdropIn 220ms ease-out both;
}
@keyframes v21SheetSpring{
  0%{opacity:.55;transform:translateY(34px) scale(.992)}
  72%{opacity:1;transform:translateY(-2px) scale(1.002)}
  100%{opacity:1;transform:none}
}
@keyframes v21BackdropIn{from{opacity:.2}to{opacity:1}}

/* ---------- Signal generation feels alive ---------- */
body.v20-native-ui.motion-v21 .ai-status .scanner{
  animation:v21ScannerBreath 1.4s ease-in-out infinite;
}
@keyframes v21ScannerBreath{
  0%,100%{transform:scale(.98);filter:drop-shadow(0 0 0 rgba(244,213,46,0))}
  50%{transform:scale(1.035);filter:drop-shadow(0 0 10px rgba(244,213,46,.12))}
}
body.v20-native-ui.motion-v21 .signal-results.signal-results-ready .result-row,
body.v20-native-ui.motion-v21 .signal-results.signal-results-ready .signal-result-card{
  opacity:0;
  transform:translateY(12px) scale(.985);
  animation:v21ResultIn 380ms var(--motion-ease-out) forwards;
}
body.v20-native-ui.motion-v21 .signal-results.signal-results-ready :is(.result-row,.signal-result-card):nth-child(2){animation-delay:55ms}
body.v20-native-ui.motion-v21 .signal-results.signal-results-ready :is(.result-row,.signal-result-card):nth-child(3){animation-delay:110ms}
@keyframes v21ResultIn{to{opacity:1;transform:none}}
body.v20-native-ui.motion-v21 .signal-play-btn:not([hidden]){
  animation:v21CtaReady 440ms var(--motion-ease-spring) 120ms both;
}
@keyframes v21CtaReady{
  0%{opacity:0;transform:translateY(8px) scale(.97)}
  70%{opacity:1;transform:translateY(-1px) scale(1.01)}
  100%{opacity:1;transform:none}
}

/* ---------- Toast ---------- */
body.motion-v21 .toast.show{
  animation:v21ToastIn 340ms var(--motion-ease-spring) both;
}
@keyframes v21ToastIn{
  0%{opacity:0;transform:translateY(14px) scale(.94)}
  70%{opacity:1;transform:translateY(-2px) scale(1.01)}
  100%{opacity:1;transform:none}
}

/* ---------- MesaVIP internal screen ---------- */
body.v20-native-ui.motion-v21 .house-modal.open .house-shell{
  animation:v21ScreenIn 360ms var(--motion-ease-out) both;
}
body.v20-native-ui.motion-v21 .house-modal.register-mode.open .house-register-guide{
  animation:v21RegisterGuideIn 380ms var(--motion-ease-out) 110ms both;
}
@keyframes v21ScreenIn{
  from{opacity:.35;transform:translateY(14px) scale(.992)}
  to{opacity:1;transform:none}
}
@keyframes v21RegisterGuideIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ---------- Fine pointer depth only; never on touch ---------- */
@media(hover:hover) and (pointer:fine){
  body.v20-native-ui.motion-v21 .native-action-main.v21-tilt{
    transform:perspective(900px) rotateX(var(--v21-tilt-x,0deg)) rotateY(var(--v21-tilt-y,0deg)) translateZ(0);
    transition:transform 120ms ease-out,border-color 180ms ease-out;
  }
  body.v20-native-ui.motion-v21 .native-action-main.v21-tilt:hover{border-color:rgba(244,213,46,.4)}
}

/* ---------- Prize screen motion ---------- */
body.motion-v21-prizes .prize-header{animation:v21HeaderIn 440ms var(--motion-ease-out) both}
body.motion-v21-prizes .prize-hero{animation:v21PrizeHeroIn 620ms var(--motion-ease-spring) 40ms both}
@keyframes v21PrizeHeroIn{
  from{opacity:0;transform:translateY(18px) scale(.988)}
  to{opacity:1;transform:none}
}
body.motion-v21-prizes .gift-stage{animation:v21GiftFloat 4.8s ease-in-out 900ms infinite}
@keyframes v21GiftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body.motion-v21-prizes .live-badge i{animation:v21LivePulse 1.8s ease-in-out infinite}
body.motion-v21-prizes .reward-card.v21-visible,
body.motion-v21-prizes .join-card.v21-visible{animation:v21SelectionPop 340ms var(--motion-ease-spring)}

/* ---------- Accessibility ---------- */
@media(prefers-reduced-motion:reduce){
  body.motion-v21 *,body.motion-v21 *::before,body.motion-v21 *::after,
  body.motion-v21-prizes *,body.motion-v21-prizes *::before,body.motion-v21-prizes *::after{
    animation:none!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  body.motion-v21 .v21-reveal,
  body.motion-v21 .v21-reveal-item{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  body.motion-v21 .touch-ripple{display:none!important}
}