/*
 * esagaming.com overrides for this copy of https://demo.esagaming.it/ (shown in the EasySwipe phone mockup).
 * ESGLobby.js injects its own <style> after this file, so selectors are prefixed with `html` to win.
 */

/* No scrollbars inside the phone screen. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* Drawer slides in from the left and back out, instead of jumping open/closed. */
html .esalobby-slideout-menu {
  left: 0;
  transform: translateX(-100%);
  visibility: hidden;
  box-shadow: 12px 0 40px rgba(0, 0, 0, .6);
  transition: transform .55s cubic-bezier(.32, .72, 0, 1), visibility 0s .55s;
}
html.esalobby-slideout-open .esalobby-slideout-menu {
  transform: none;
  visibility: visible;
  transition: transform .55s cubic-bezier(.32, .72, 0, 1);
}
/* The sportsbook drifts aside underneath, like a native drawer. */
html #main { transition: transform .55s cubic-bezier(.32, .72, 0, 1), filter .55s; }
html.esalobby-slideout-open #main { transform: translateX(25%); filter: brightness(.4); }

/* Close (football) tab rides on the drawer's right edge. */
html .ESGLobbyObj-btn-arrow-left,
html.esalobby-slideout-open .ESGLobbyObj-btn-arrow-left { right: 0; }

/* Open (cherry) tab: every few seconds the tab glows and the cherry swings from its stem, so visitors
   notice it can be pulled (class toggled by esa-www.js). The cherry is a separate layer of the sprite. */
html .ESGLobbyObj-btn-arrow-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/swipe-cherry.png) no-repeat right center;
  transform-origin: 25px 31px; /* top of the stem */
}
html .ESGLobbyObj-btn-arrow-right.esa-nudge { animation: esa-glow 1.4s ease-out; }
html .ESGLobbyObj-btn-arrow-right.esa-nudge::after { animation: esa-swing 1.4s cubic-bezier(.36, .07, .19, .97); }
@keyframes esa-swing {
  0%   { transform: rotate(0) scale(1); }
  12%  { transform: rotate(-16deg) scale(1.12); }
  28%  { transform: rotate(12deg) scale(1.08); }
  44%  { transform: rotate(-8deg) scale(1.04); }
  60%  { transform: rotate(5deg) scale(1.02); }
  76%  { transform: rotate(-2deg) scale(1); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes esa-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(138, 197, 67, 0)); }
  25%      { filter: drop-shadow(0 0 10px rgba(138, 197, 67, .85)); }
}

@media (prefers-reduced-motion: reduce) {
  html .esalobby-slideout-menu,
  html.esalobby-slideout-open .esalobby-slideout-menu,
  html #main { transition: none; }
  html .ESGLobbyObj-btn-arrow-right.esa-nudge,
  html .ESGLobbyObj-btn-arrow-right.esa-nudge::after { animation: none; }
}