/* Plixwin logo loader used while a game or the sportsbook opens. */
/* ---------- LOADER CSS START ---------- */
.pgl-loader{
  --gold:#D9B672;
  --size:min(170px,42vw);        /* logo width */
  display:flex;justify-content:center;
}
.pgl-logo{
  position:relative;width:var(--size);aspect-ratio:1021/312;
}
.pgl-piece{position:absolute;display:block}
.pgl-piece img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* 1) entrance — letters rise out from the X, X pieces fly in and lock */
.pgl-letter{animation:pgl-letter-in .7s calc(.25s + var(--d) * .07s) cubic-bezier(.2,.8,.2,1) both}
.pgl-letter img{animation:pgl-wave 1.8s calc(.9s + var(--d) * .09s) ease-in-out infinite backwards}

.pgl-xl {animation:pgl-xl-in  .65s cubic-bezier(.25,1.35,.4,1) both}
.pgl-xtr{animation:pgl-xtr-in .65s .06s cubic-bezier(.25,1.35,.4,1) both}
.pgl-xbr{animation:pgl-xbr-in .65s .06s cubic-bezier(.25,1.35,.4,1) both}

/* 2) loop — the X opens and snaps shut, sending a soft wave through the letters */
.pgl-xl  img{animation:pgl-xl-loop  1.8s .9s infinite}
.pgl-xtr img{animation:pgl-xtr-loop 1.8s .9s infinite}
.pgl-xbr img{animation:pgl-xbr-loop 1.8s .9s infinite}

@keyframes pgl-letter-in{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
@keyframes pgl-xl-in {from{opacity:0;transform:translateX(-70%)}to{opacity:1;transform:none}}
@keyframes pgl-xtr-in{from{opacity:0;transform:translate(90%,-60%)}to{opacity:1;transform:none}}
@keyframes pgl-xbr-in{from{opacity:0;transform:translate(90%,60%)}to{opacity:1;transform:none}}

@keyframes pgl-xl-loop{
  0%,8%{transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  34%{transform:translateX(-9%);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  44%{transform:translateX(1.5%)}
  52%,100%{transform:none}
}
@keyframes pgl-xtr-loop{
  0%,8%{transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  34%{transform:translate(13%,-8%);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  44%{transform:translate(-2%,1%)}
  52%,100%{transform:none}
}
@keyframes pgl-xbr-loop{
  0%,8%{transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  34%{transform:translate(13%,8%);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  44%{transform:translate(-2%,-1%)}
  52%,100%{transform:none}
}
@keyframes pgl-wave{0%,40%{opacity:.42}56%{opacity:.78}100%{opacity:.42}}


@media (prefers-reduced-motion:reduce){
  .pgl-letter,.pgl-x,.pgl-piece img{animation:none!important}
  .pgl-letter img{opacity:.6}
}
.pgl-loader+p{margin-top:18px}