@property --login-energy-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
body.aol-login .login-energy-canvas {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100dvh;
    pointer-events: none;
}
body.aol-login.login-energy-ready::before { opacity: 0; animation: none; }
body.aol-login.login-energy-ready .login-energy-canvas { display: block; }
body.aol-login .login-card::before {
    inset: -2px;
    width: auto;
    height: auto;
    padding: 2px;
    border-radius: 8px;
    background: conic-gradient(from var(--login-energy-angle), transparent 0deg 45deg, #88edff 68deg, #e6fcff 85deg, transparent 112deg 225deg, #e5bc69 253deg, transparent 280deg);
    box-shadow: none;
    filter: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: aol-login-energy-border 7s linear infinite;
}
body.aol-login .login-card::after { background: #e5bc69; }
body.aol-login.login-energy-paused::before,
body.aol-login.login-energy-paused .login-card::before { animation-play-state: paused; }
@keyframes aol-login-energy-border { to { --login-energy-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    body.aol-login .login-card::before { animation: none; }
    body.aol-login.login-energy-ready::before { opacity: 1; }
    body.aol-login.login-energy-ready .login-energy-canvas { display: none; }
}