html.pax-loader-skip #pax-device-loader{
    display:none !important;
}

#pax-device-loader{
    position:fixed;
    inset:0;
    z-index:999999;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 50% 45%, rgba(255,255,255,.34), rgba(17,161,242,.42) 30%, rgba(7,5,91,.18) 58%, transparent 76%),
      linear-gradient(135deg, #2724a4 0%, #1b75d6 48%, #8ad9ff 100%);
    transition:opacity .50s ease, visibility .50s ease;
}

#pax-device-loader.is-hidden{
    opacity:0;
    visibility:hidden;
}

#pax-device-loader:not(.is-started) .device,
#pax-device-loader:not(.is-started) .logo-stage,
#pax-device-loader:not(.is-started) .logo-white-circle,
#pax-device-loader:not(.is-started) .pax-logo,
#pax-device-loader:not(.is-started) .center-wave{
    animation-play-state:paused;
}

.loader-core{
    position:relative;
    width:min(820px, 96vw);
    height:min(580px, 76vh);
    display:flex;
    align-items:center;
    justify-content:center;
}

.center-wave{
    position:absolute;
    left:50%;
    top:50%;
    width:360px;
    height:360px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.30);
    transform:translate(-50%, -50%) scale(.35);
    opacity:0;
    animation:centerRipple 1.55s ease-out infinite;
    box-shadow:
      0 0 38px rgba(255,255,255,.20),
      inset 0 0 30px rgba(255,255,255,.10);
}

.center-wave-1{animation-delay:0s}
.center-wave-2{animation-delay:.34s}
.center-wave-3{animation-delay:.68s}

.device{
    position:absolute;
    max-width:330px;
    max-height:445px;
    object-fit:contain;
    opacity:0;
    filter:
      drop-shadow(0 24px 44px rgba(0,0,0,.32))
      drop-shadow(0 0 18px rgba(17,161,242,.20));
    will-change:transform, opacity;
}

.device-a6650{
    left:50%;
    top:50%;
    animation:deviceA6650 3.05s cubic-bezier(.22,1,.36,1) forwards;
}

.device-a80{
    left:50%;
    top:50%;
    animation:deviceA80 3.05s cubic-bezier(.22,1,.36,1) forwards;
}

.device-a920pro{
    left:50%;
    top:50%;
    animation:deviceA920 3.05s cubic-bezier(.22,1,.36,1) forwards;
}

.logo-stage{
    position:absolute;
    left:50%;
    top:50%;
    width:330px;
    height:330px;
    transform:translate(-50%, -50%) scale(.80);
    opacity:0;
    animation:logoStageIn .48s cubic-bezier(.22,1,.36,1) 2.92s forwards;
}

.logo-white-circle{
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#fff;
    box-shadow:
      0 26px 88px rgba(0,0,0,.20),
      0 0 82px rgba(255,255,255,.42),
      inset 0 0 0 1px rgba(255,255,255,.65);
    transform:scale(.86);
    opacity:0;
    animation:whiteCircleIn .48s cubic-bezier(.22,1,.36,1) 2.92s forwards;
}

.pax-logo{
    position:absolute;
    left:50%;
    top:50%;
    width:225px;
    height:auto;
    transform:translate(-50%, -50%);
    opacity:0;
    animation:logoFadeIn .32s ease 3.12s forwards;
    z-index:3;
}

@keyframes centerRipple{
    0%{opacity:0;transform:translate(-50%, -50%) scale(.35)}
    25%{opacity:.60}
    100%{opacity:0;transform:translate(-50%, -50%) scale(1.85)}
}

@keyframes deviceA6650{
    0%{opacity:0;transform:translate(-136%, -50%) scale(.74) rotate(-12deg)}
    9%{opacity:1;transform:translate(-50%, -50%) scale(1) rotate(-3deg)}
    20%{opacity:1;transform:translate(-50%, -50%) scale(1.04) rotate(1deg)}
    29%{opacity:0;transform:translate(38%, -50%) scale(.82) rotate(8deg)}
    100%{opacity:0;transform:translate(38%, -50%) scale(.82) rotate(8deg)}
}

@keyframes deviceA80{
    0%, 25%{opacity:0;transform:translate(82%, -50%) scale(.74) rotate(10deg)}
    35%{opacity:1;transform:translate(-50%, -50%) scale(1) rotate(3deg)}
    48%{opacity:1;transform:translate(-50%, -50%) scale(1.04) rotate(-2deg)}
    58%{opacity:0;transform:translate(-122%, -50%) scale(.82) rotate(-10deg)}
    100%{opacity:0;transform:translate(-122%, -50%) scale(.82) rotate(-10deg)}
}

@keyframes deviceA920{
    0%, 52%{opacity:0;transform:translate(-50%, 4%) scale(.74) rotate(-3deg)}
    65%{opacity:1;transform:translate(-50%, -50%) scale(1.06) rotate(0deg)}
    77%{opacity:1;transform:translate(-50%, -50%) scale(1) rotate(0deg)}
    90%{opacity:0;transform:translate(-50%, -52%) scale(.88) rotate(0deg)}
    100%{opacity:0;transform:translate(-50%, -52%) scale(.88) rotate(0deg)}
}

@keyframes logoStageIn{
    to{opacity:1;transform:translate(-50%, -50%) scale(1)}
}

@keyframes whiteCircleIn{
    0%{opacity:0;transform:scale(.86)}
    100%{opacity:1;transform:scale(1)}
}

@keyframes logoFadeIn{
    to{opacity:1}
}

@media(max-width:768px){
    .loader-core{transform:scale(.78)}
    .center-wave{width:300px;height:300px}
    .device{max-width:295px;max-height:400px}
    .logo-stage{width:280px;height:280px}
    .pax-logo{width:190px}
}

@media(prefers-reduced-motion:reduce){
    .center-wave,
    .device,
    .logo-stage,
    .logo-white-circle,
    .pax-logo{
        animation:none !important;
    }

    .device-a6650,
    .device-a80,
    .device-a920pro{
        display:none;
    }

    .logo-stage,
    .logo-white-circle,
    .pax-logo{
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
    }
}