/* Smoothness for the whole member site (included from components/head.php) */

/* page -> page: short cross-fade instead of a white flash (Chrome / Android; other browsers just ignore it) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s;animation-timing-function:ease-out}

/* no 300ms tap delay, no sideways rubber-band */
a,button,input,select,label,[role=button]{touch-action:manipulation}
html,body{overscroll-behavior-x:none}

/* while the finger scrolls (class set by smooth.js) or a card is off-screen, stop the endless card animations:
   dozens of rotating borders / light sweeps repainting every frame is what made scrolling stutter on phones */
html.is-scrolling .hc-card::before,
html.is-scrolling .hc-thumb::after,
html.is-scrolling .hc-thumb .thumb--placeholder,
html.is-scrolling .hw-win *{animation-play-state:paused!important}
.hc-card.hc-off::before,
.hc-card.hc-off .hc-thumb::after,
.hc-card.hc-off .thumb--placeholder{animation-play-state:paused!important}

/* the fixed bars and the popup layers get their own GPU layer so the page scrolls under them without repainting them */
.header,.bottom-nav,.bottomnav{will-change:transform}

/* images: soft fade-in once decoded instead of popping in (class set by smooth.js; without JS the image is simply shown) */
img.sm-fade{opacity:0;transition:opacity .28s ease}
img.sm-fade.sm-in{opacity:1}

/* pagination / tab switch: the new list fades in, the old one dims instead of vanishing */
.hc-grid{transition:opacity .18s ease}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  img.sm-fade{opacity:1;transition:none}
}

/* no jump on reload: the home page keeps the room of the banner / category row / game list while they are still loading,
   so the jackpot, the games and the footer do not slide down when the data arrives */
.banner{aspect-ratio:var(--banner-ar,2.2);background:#222}
.hc-cats{min-height:calc(var(--cat-h,53px) + 25px)}
.hc-wrap{min-height:420px}