/* ═══════════════════════════════════════════════
   HAND CRICKET — transitions.css
   Screen transitions, easing curves, stagger
   (Real game-quality motion design)
   ═══════════════════════════════════════════════ */

/* ═══ Custom easing curves (game-quality) ═══ */
:root{
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-back: cubic-bezier(0.6, -0.3, 0.4, 1.3);
}

/* ═══ Screen transitions ═══ */
.screen{
  animation: screenEnter .4s var(--ease-bounce);
}
@keyframes screenEnter{
  0%{opacity:0;transform:scale(0.96) translateY(8px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* Screen exit (for smoother transitions) */
.screen.exiting{
  animation: screenExit .2s var(--ease-accel) forwards;
}
@keyframes screenExit{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(0.98);}
}

/* ═══ Page transitions (lobby sub-pages) ═══ */
.lobby-page{
  animation: pageEnter .35s var(--ease-bounce);
}
@keyframes pageEnter{
  0%{opacity:0;transform:translateX(20px);}
  100%{opacity:1;transform:translateX(0);}
}

/* ═══ Stagger utilities ═══ */
.stagger-1{animation-delay:0.05s !important;}
.stagger-2{animation-delay:0.1s !important;}
.stagger-3{animation-delay:0.15s !important;}
.stagger-4{animation-delay:0.2s !important;}
.stagger-5{animation-delay:0.25s !important;}
.stagger-6{animation-delay:0.3s !important;}

/* ═══ Modal/overlay transitions ═══ */
.overlay.show .over-box{
  animation: modalEnter .4s var(--ease-bounce);
}
@keyframes modalEnter{
  0%{opacity:0;transform:scale(0.85) translateY(20px);}
  60%{opacity:1;transform:scale(1.03) translateY(-2px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

.overlay.show{
  animation: overlayFadeIn .25s var(--ease-smooth);
}
@keyframes overlayFadeIn{
  from{opacity:0;backdrop-filter:blur(0);}
  to{opacity:1;backdrop-filter:blur(6px);}
}

/* ═══ Card entrance (staggered children) ═══ */
.card,.settings-card,.mode-big-btn{
  animation: cardEnter .4s var(--ease-bounce) both;
}
@keyframes cardEnter{
  0%{opacity:0;transform:translateY(12px) scale(0.98);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* ═══ Button press feedback (squash & stretch) ═══ */
.btn-main,.btn-accent,.btn-sec,.btn-ghost,.btn-sm{
  transition: transform .12s var(--ease-smooth), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn-main:active,.btn-accent:active{
  transform: scale(0.94) !important;
  transition: transform .06s var(--ease-accel);
}
.btn-sec:active,.btn-ghost:active,.btn-sm:active{
  transform: scale(0.92) !important;
}

/* ═══ Input focus glow ═══ */
.field input,.inp,.sel,.verify-input{
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus,.inp:focus,.sel:focus,.verify-input:focus{
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}

/* ═══ Tab switch animation ═══ */
.tab,.itab,.mode-opt{
  transition: all .2s var(--ease-smooth);
}

/* ═══ Drawer slide ═══ */
.drawer{
  transition: transform .35s var(--ease-smooth);
}

/* ═══ Theme color morph ═══ */
body, .btn-main, .btn-accent, .mode-big-btn, .topbar, .scoreboard, .turn-card, .feed, .status-box, .verify-box, .role-banner, .auth-card, .drawer, .over-box, .sb-popup-box, .card, .settings-card{
  transition: background .4s var(--ease-smooth), color .4s var(--ease-smooth), border-color .4s var(--ease-smooth);
}

/* ═══ Slow-motion effect (for dramatic moments) ═══ */
.slowmo *{
  animation-duration: 1.5s !important;
  transition-duration: 1.5s !important;
}
.slowmo .nb{
  animation-duration: 0.8s !important;
}

/* ═══ Pulsing glow for active elements ═══ */
.pulse-glow{
  animation: pulseGlow 2s var(--ease-smooth) infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.4);}
  50%{box-shadow:0 0 0 8px rgba(249,115,22,0);}
}

/* ═══ Bounce-in for important notifications ═══ */
.bounce-in{
  animation: bounceIn .6s var(--ease-bounce);
}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(0.3);}
  50%{opacity:1;transform:scale(1.1);}
  70%{transform:scale(0.95);}
  100%{transform:scale(1);}
}

/* ═══ Slide-in from top ═══ */
.slide-down{
  animation: slideDown .4s var(--ease-bounce);
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-20px);}
  to{opacity:1;transform:translateY(0);}
}

/* ═══ Slide-in from bottom ═══ */
.slide-up{
  animation: slideUp .4s var(--ease-bounce);
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

/* ═══ Hamburger to X morph ═══ */
.hamburger{
  transition:transform .3s var(--ease-bounce);
}
.hamburger:hover{
  transform:scale(1.1);
}

/* ═══ Button hover lift ═══ */
.btn-main,.btn-accent{
  position:relative;
  overflow:hidden;
}
.btn-main::before,.btn-accent::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  transform:translate(-50%,-50%);
  transition:width .4s,height .4s;
}
.btn-main:hover::before,.btn-accent:hover::before{
  width:300px;height:300px;
}

/* ═══ Card hover with glow ═══ */
.card,.settings-card,.mode-big-btn{
  position:relative;
  transition:transform .25s var(--ease-bounce),box-shadow .25s,border-color .25s;
}
.card:hover,.settings-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(var(--accent-rgb),0.15);
  border-color:rgba(var(--accent-rgb),0.3);
}

/* ═══ Input focus ring expand ═══ */
.field input,.inp,.sel,.verify-input{
  position:relative;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.field input:focus,.inp:focus,.sel:focus,.verify-input:focus{
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.12);
  border-color:var(--accent);
}

/* ═══ Tab slide indicator ═══ */
.tab,.itab,.mode-opt{
  position:relative;
  transition:all .2s var(--ease-smooth);
}
.tab.active,.itab.active{
  animation:tabPop .3s var(--ease-bounce);
}
@keyframes tabPop{
  0%{transform:scale(0.9);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

/* ═══ Toggle switch bounce ═══ */
.toggle::after{
  transition:left .3s var(--ease-bounce),background .2s;
}
.toggle{
  transition:background .3s var(--ease-smooth);
}

/* ═══ Score number pulse on update ═══ */
.sb-score{
  transition:transform .15s var(--ease-bounce),color .3s;
}

/* ═══ Feed item entrance ═══ */
.fi{
  animation:feedSlideIn .3s var(--ease-bounce);
}
@keyframes feedSlideIn{
  from{opacity:0;transform:translateX(20px) scale(0.95);}
  to{opacity:1;transform:translateX(0) scale(1);}
}

/* ═══ Number button entrance stagger ═══ */
.nb{
  animation:nbPop .35s var(--ease-bounce) both;
}
@keyframes nbPop{
  0%{opacity:0;transform:scale(0.3) rotate(-10deg);}
  60%{opacity:1;transform:scale(1.1) rotate(3deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}

/* ═══ Over-box result bounce ═══ */
.over-box .over-emoji{
  animation:resultBounce 1.4s ease infinite,emojiSpin 3s var(--ease-smooth) infinite;
}
@keyframes emojiSpin{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-14px) rotate(10deg);}
}

/* ═══ Toast slide ═══ */
#toast.show{
  animation:toastSlide .3s var(--ease-bounce);
}
@keyframes toastSlide{
  from{opacity:0;transform:translateX(-50%) translateY(30px) scale(0.8);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}

/* ═══ Badge pop ═══ */
.elo-badge,.drawer-badge{
  transition:transform .2s var(--ease-bounce);
}
.elo-badge:hover,.drawer-badge:hover{
  transform:scale(1.1);
}

/* ═══ User logo hover spin ═══ */
.user-logo{
  transition:transform .3s var(--ease-bounce),border-color .2s;
}
.user-logo:hover{
  transform:scale(1.1) rotate(10deg);
  border-color:var(--accent);
}

/* ═══ Back button hover ═══ */
.back-btn{
  transition:transform .2s var(--ease-bounce),color .2s,border-color .2s;
}
.back-btn:hover{
  transform:translateX(-4px);
  color:var(--accent);
  border-color:var(--accent);
}

/* ═══ Score popup entry ═══ */
.sb-popup-box{
  animation:sbPopupIn .35s var(--ease-bounce) !important;
}
@keyframes sbPopupIn{
  0%{opacity:0;transform:scale(0.8) translateY(-20px);}
  60%{opacity:1;transform:scale(1.03) translateY(2px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}