/* Login-only effects: transform and opacity keep motion off the layout path. */
.member-login::before { animation: login-drift 12s ease-in-out infinite alternate; }
.login-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.member-login > .login-brand, .member-login > .login-content, .member-login > .login-footer { position: relative; z-index: 1; }
.login-halo { position: absolute; inset: -35%; background: radial-gradient(ellipse at 23% 42%, #d6b47450, transparent 44%), radial-gradient(ellipse at 68% 20%, #d4e1ff20, transparent 34%); animation: login-light 7s ease-in-out infinite alternate; }
.login-orbit { position: absolute; top: 24%; left: -16%; width: 79%; height: 36%; border: 1px solid #e4d7bb30; border-top: 2px solid #f9e3a7b0; border-radius: 50%; box-shadow: 0 -6px 24px #e4bb6630; transform: rotate(-27deg); animation: login-orbit 7s ease-in-out infinite alternate; }
.login-beam { position: absolute; inset: -60%; background: linear-gradient(112deg, transparent 38%, #ead3a808 42%, #fff0ca35 44%, #d6b96e12 46%, transparent 49%); animation: login-beam 6s ease-in-out infinite; }
.login-sparks { position: absolute; inset: 0; }
.login-sparks i { position: absolute; top: 25%; left: 10%; width: 4px; height: 4px; border-radius: 50%; background: #fff2d3; box-shadow: 0 0 12px 3px #eed4a580; opacity: 0; animation: login-spark 5s ease-in-out infinite; }
.login-sparks i::before, .login-sparks i::after { position: absolute; content: ""; inset: -9px 1px; background: linear-gradient(transparent, #fff4d7, transparent); }
.login-sparks i::after { transform: rotate(90deg); }
.login-sparks i:nth-child(2) { top: 74%; left: 19%; animation-delay: -3s; animation-duration: 13s; }
.login-sparks i:nth-child(3) { top: 41%; left: 34%; animation-delay: -7s; }
.login-sparks i:nth-child(4) { top: 18%; left: 46%; animation-delay: -5s; animation-duration: 15s; }
.login-sparks i:nth-child(5) { top: 83%; left: 56%; animation-delay: -9s; }
.login-sparks i:nth-child(6) { top: 62%; left: 4%; animation-delay: -1s; animation-duration: 14s; }
.login-sparks i:nth-child(7) { top: 9%; left: 83%; animation-delay: -6s; }
.login-sparks i:nth-child(8) { top: 81%; left: 93%; animation-delay: -4s; animation-duration: 16s; }
.login-brand { animation: login-reveal 1.1s ease-out both; }
.login-content { animation: login-reveal .85s .12s ease-out both, login-panel-glow 4s 1s ease-in-out infinite alternate; }
.login-content::before { position: absolute; inset: -1px; padding: 1px; content: ""; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--login-angle), transparent 0deg 260deg, #f6d692 300deg, #fff8df 325deg, transparent 355deg); -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: login-border 5s linear infinite; }
.login-content .eyebrow, .login-content h1, .login-copy, .login-form, .login-membership { animation: login-reveal .7s ease-out both; }
.login-content .eyebrow { animation-delay: .18s; }
.login-content h1 { animation-delay: .26s; }
.login-copy { animation-delay: .34s; }
.login-form { animation-delay: .4s; }
.login-membership { animation-delay: .5s; }
.login-form input { transition: border-color .2s, box-shadow .2s, background-color .2s; }
.login-form label:focus-within { color: #e8cf98; }
.primary-button { position: relative; isolation: isolate; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.primary-button::after { content: ""; pointer-events: none; position: absolute; inset: -50% auto -50% -70%; width: 35%; background: linear-gradient(90deg, transparent, #fff9, transparent); transform: skewX(-24deg); animation: login-sheen 3.6s .5s ease-in-out infinite; }
.primary-button span { transition: transform .25s; }
.primary-button:active { transform: scale(.985); }
.primary-button:focus-visible { outline: 2px solid #edd49f; outline-offset: 4px; }
.member-login.motion-paused *, .member-login.motion-paused::before, .member-login.motion-paused *::before, .member-login.motion-paused *::after { animation-play-state: paused !important; }
/* Pausing during entrance must leave the form immediately usable and visible. */
.member-login.motion-paused .login-brand, .member-login.motion-paused .login-content, .member-login.motion-paused .login-content > *, .member-login.motion-paused .login-form { animation: none; opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover { transform: translateY(-2px); box-shadow: 0 6px 28px #c9a45c30; }
  .primary-button:hover span { transform: translate(2px, -2px); }
}
@media (max-width: 680px) {
  .login-orbit { width: 110%; top: 15%; height: 23%; left: -35%; }
  .login-footer { flex-wrap: wrap; gap: 16px 8px; }
}
@property --login-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes login-border { to { --login-angle: 360deg; } }
@keyframes login-beam { 0% { transform: translateX(-23%) rotate(-4deg); opacity: 0; } 18%, 76% { opacity: .85; } 100% { transform: translateX(29%) rotate(4deg); opacity: 0; } }
@keyframes login-drift { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.2%, -.8%); } }
@keyframes login-light { from { transform: translate(-8%, 2%) rotate(-8deg); opacity: .45; } to { transform: translate(9%, -3%) rotate(6deg); opacity: 1; } }
@keyframes login-orbit { from { transform: rotate(-30deg) translate(-3%, 0); opacity: .35; } to { transform: rotate(-14deg) translate(6%, 8%); opacity: .95; } }
@keyframes login-spark { 0%, 100% { transform: translate(0, 18px) scale(.4); opacity: 0; } 35% { opacity: .95; transform: translate(6px, -8px) scale(1.1); } 70% { opacity: .5; } 95% { transform: translate(22px, -68px) scale(.5); opacity: 0; } }
@keyframes login-reveal { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes login-panel-glow { from { border-color: #c4a66b52; box-shadow: 0 24px 90px #0009, 0 0 15px #e2bd6810; } to { border-color: #d9bc7dc0; box-shadow: 0 24px 90px #0009, 0 0 38px #e2bd6828; } }
@keyframes login-sheen { 0%, 35% { left: -70%; } 85%, 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) {
  .member-login:not(.motion-enabled) *, .member-login:not(.motion-enabled)::before, .member-login:not(.motion-enabled) *::before, .member-login:not(.motion-enabled) *::after { animation: none !important; transition: none !important; }
}