/* =========================================================
   MOTION LAYER
   ========================================================= */

:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
}

@keyframes tt-rise{from{opacity:0;transform:translateY(var(--rise,8px))}}
@keyframes tt-card-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes tt-pop{from{opacity:0;transform:scale(.78) translateY(10px)}}
@keyframes tt-dropdown-in{from{opacity:0;transform:scale(.97) translateY(-6px)}}
@keyframes tt-modal-in{from{opacity:0;transform:scale(.95) translateY(16px)}}
@keyframes tt-modal-out{to{opacity:0;transform:scale(.95) translateY(-16px)}}
@keyframes tt-overlay-in{from{opacity:0;backdrop-filter:blur(0)}}
@keyframes tt-overlay-out{to{opacity:0;backdrop-filter:blur(0)}}
@keyframes tt-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Page entrance */
.rankings-page .info-strip{--rise:10px;animation:tt-rise .5s var(--ease-out-expo) 120ms backwards}
.rankings-page .toolbar{--rise:10px;animation:tt-rise .5s var(--ease-out-expo) 170ms backwards}
.rankings-page .table-card{--rise:14px;animation:tt-rise .6s var(--ease-out-expo) 220ms backwards}

[data-reveal]:not(.is-revealed){opacity:0}
.row[data-reveal].is-revealed{
  --rise:8px;
  animation:tt-rise .42s var(--ease-out-expo) backwards;
  animation-delay:var(--reveal-delay,0ms);
}
.mode-tier-column[data-reveal].is-revealed{
  animation:tt-card-in .5s var(--ease-out-expo) backwards;
  animation-delay:var(--reveal-delay,0ms);
}
.mode-tier-column.is-revealed .mode-board-player{
  --rise:6px;
  animation:tt-rise .36s var(--ease-out-expo) backwards;
  animation-delay:calc(var(--reveal-delay,0ms) + 120ms + min(var(--i,0),14) * 28ms);
}
.row[data-reveal].is-revealed[data-reveal-done],
.mode-tier-column[data-reveal].is-revealed[data-reveal-done],
.mode-tier-column.is-revealed[data-reveal-done] .mode-board-player{animation:none}

/* Overall row hover */
.table-card.overall-active .row .rank-plate{
  position:relative;
}
.table-card.overall-active .row .rank-plate::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;
  background-position:150% 0;
  opacity:.5;
}
.table-card.overall-active .row:hover .rank-plate::after{
  background-position:-60% 0;
  transition:background-position 1.4s var(--ease-out-expo);
}
.table-card.overall-active .row:hover .rank-plate{
  transform:none;
  margin-left:-15px;
  padding-left:14px;
  border-radius:4px 0 0 4px;
}
.table-card.overall-active .row .rank-plate .avatar{
  position:relative;
  z-index:1;
  align-self:flex-end;
  transform-origin:50% 100%;
  transition:transform .25s var(--ease-back);
}
.table-card.overall-active .row:hover .rank-plate .avatar{transform:scale(1.08)}
.mode-board-avatar{transition:transform .2s var(--ease-back)}
.mode-board-player:hover .mode-board-avatar{transform:scale(1.1)}

/* Avatar loading shimmer */
img.avatar:not(.is-loaded),
img.search-result-avatar:not(.is-loaded),
img.profile-avatar:not(.is-loaded){
  background:linear-gradient(110deg,#1a202b 40%,#2a3242 50%,#1a202b 60%) 0 0/200% 100%;
  animation:tt-shimmer 1.5s ease-in-out infinite;
}

/* Dropdowns */

.ranking-info-popover{
  transform-origin:100% 0;
  transform:translateY(-8px) scale(.94);
  transition:opacity .15s ease,visibility .15s ease,transform .15s ease-in;
}
.ranking-info-popover.show{
  transform:none;
  transition:opacity .2s ease,visibility .2s ease,transform .22s var(--ease-out-expo);
}
.ranking-info-popover.show .ranking-info-title-row{
  --rise:4px;
  animation:tt-rise .24s var(--ease-out-expo) backwards;
  animation-delay:calc(40ms + var(--i,0) * 22ms);
}

.search-results{animation:tt-dropdown-in .2s var(--ease-out-expo)}
.search-result-item{
  --rise:4px;
  animation:tt-rise .24s var(--ease-out-expo) backwards;
  animation-delay:calc(30ms + var(--i,0) * 18ms);
}

/* Dialogs */
dialog[open]{animation:tt-modal-in .28s var(--ease-out-expo)}
dialog[open]::backdrop{animation:tt-overlay-in .22s var(--ease-out-expo)}
dialog.is-closing{animation:tt-modal-out .16s var(--ease-out-expo) forwards}
dialog.is-closing::backdrop{animation:tt-overlay-out .16s ease-in forwards}

#profileDialog[open] .profile-hero,
#profileDialog[open] .profile-position-section,
#profileDialog[open] .profile-tiers-section{
  --rise:12px;
  animation:tt-rise .48s var(--ease-out-expo) backwards;
}
#profileDialog[open] .profile-position-section{animation-delay:90ms}
#profileDialog[open] .profile-tiers-section{animation-delay:160ms}
#profileDialog[open] .profile-avatar{animation:tt-pop .6s var(--ease-back) 70ms backwards}
#profileDialog[open] .profile-avatar:not(.is-loaded){
  animation:tt-pop .6s var(--ease-back) 70ms backwards,tt-shimmer 1.5s ease-in-out infinite;
}
#profileDialog[open] .profile-title-badge{--rise:6px;animation:tt-rise .4s var(--ease-out-expo) 140ms backwards}
#profileDialog[open] .namemc-button{--rise:6px;animation:tt-rise .4s var(--ease-out-expo) 190ms backwards}
#profileDialog[open] .profile-tier-item{
  --rise:8px;
  animation:tt-rise .42s var(--ease-out-expo) backwards;
  animation-delay:calc(220ms + var(--i,0) * 45ms);
}
.profile-tier-item{transition:transform .2s var(--ease-out-expo)}
.profile-tier-item:hover{transform:translateY(-4px)}
.namemc-button{transition:background .15s ease,color .15s ease,transform .2s var(--ease-out-expo)}
.namemc-button:hover{transform:translateY(-2px)}

.site-info-dialog[open] .site-info-hero{--rise:10px;animation:tt-rise .45s var(--ease-out-expo) 40ms backwards}
.site-info-dialog[open] .site-info-content>*{
  --rise:10px;
  animation:tt-rise .45s var(--ease-out-expo) backwards;
}
.site-info-dialog[open] .site-info-content>*:nth-child(1){animation-delay:90ms}
.site-info-dialog[open] .site-info-content>*:nth-child(2){animation-delay:130ms}
.site-info-dialog[open] .site-info-content>*:nth-child(3){animation-delay:170ms}
.site-info-dialog[open] .site-info-content>*:nth-child(n+4){animation-delay:210ms}
.site-info-dialog[open] .info-card,
.site-info-dialog[open] .discord-modal-card{animation:tt-card-in .45s var(--ease-out-expo) 120ms backwards}
.site-info-dialog[open] .info-card:nth-child(2){animation-delay:170ms}
.site-info-dialog[open] .info-card:nth-child(3){animation-delay:220ms}
.site-info-dialog[open] .info-card:nth-child(4){animation-delay:270ms}


/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]:not(.is-revealed){opacity:1}
}