/* Round 82: login / signup motion. CSS only, no script. Everything sits inside no-preference so people who ask for
   reduced motion get the still page. */
@media (prefers-reduced-motion: no-preference) {
  .lx-shell { animation: amFade .5s ease both; }
  .lx-visual { animation: amSlideRight .7s cubic-bezier(.2,.7,.2,1) both; }
  .lx-card { animation: amRise .65s cubic-bezier(.2,.7,.2,1) .12s both; }

  .lx-badge { animation: amPop .6s cubic-bezier(.3,1.4,.5,1) .25s both; }
  .lx-logo { animation: amRise .6s ease .3s both; }
  .lx-points li { animation: amRise .55s ease both; }
  .lx-points li:nth-child(1) { animation-delay: .42s; }
  .lx-points li:nth-child(2) { animation-delay: .54s; }
  .lx-points li:nth-child(3) { animation-delay: .66s; }
  .lx-points li:nth-child(4) { animation-delay: .78s; }
  .lx-stage { animation: amRise .7s ease .8s both; }
  .lx-page-1 { animation: amFloat 6s ease-in-out infinite; }
  .lx-page-2 { animation: amFloat 7s ease-in-out -2s infinite; }
  .lx-page-3 { animation: amFloat 8s ease-in-out -4s infinite; }

  .lx-eyebrow, .lx-card h2, .lx-card .lx-sub { animation: amRise .5s ease both; }
  .lx-eyebrow { animation-delay: .22s; }
  .lx-card h2 { animation-delay: .30s; }
  .lx-card .lx-sub { animation-delay: .38s; }
  .lx-field, .lx-field-row, .lx-checkbox-row, .lx-forgot { animation: amRise .5s ease both; }
  .lx-form-side form > :nth-child(3) { animation-delay: .42s; }
  .lx-form-side form > :nth-child(4) { animation-delay: .50s; }
  .lx-form-side form > :nth-child(5) { animation-delay: .58s; }
  .lx-form-side form > :nth-child(6) { animation-delay: .66s; }
  .lx-form-side form > :nth-child(7) { animation-delay: .74s; }
  .lx-form-side form > :nth-child(8) { animation-delay: .82s; }
  .lx-form-side form > :nth-child(n+9) { animation-delay: .9s; }
  .lx-submit { animation: amRise .5s ease .9s both; }
  .lx-switch { animation: amFade .6s ease 1s both; }

  .lx-field label { transition: color .2s ease; }
  .lx-field:focus-within label { color: var(--accent); }
  .lx-input-group .input-icon { transition: color .2s ease, transform .25s ease; }
  .lx-input-group:focus-within .input-icon { color: var(--accent); transform: scale(1.12); }
  .lx-input-group input, .lx-field select, .lx-field input { transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
  .lx-input-group input:focus, .lx-field input:focus, .lx-field select:focus { transform: translateY(-1px); }

  .lx-submit { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .25s ease; }
  .lx-submit::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
    animation: amShine 4.5s ease-in-out 1.6s infinite; pointer-events: none; }
  .lx-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46,83,149,.28); }
  .lx-submit:active { transform: translateY(0); }
  .lx-submit svg { transition: transform .22s ease; }
  .lx-submit:hover svg { transform: translateX(5px); }
  .lx-switch a, .lx-forgot a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s ease; }
  .lx-switch a:hover, .lx-forgot a:hover { background-size: 100% 1.5px; }

  .lx-orb-a { animation: lxDrift 22s ease-in-out infinite, amPulse 7s ease-in-out infinite; }
  .lx-orb-b { animation: lxDrift 26s ease-in-out infinite reverse, amPulse 9s ease-in-out -3s infinite; }
}
@keyframes amFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes amRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes amSlideRight { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes amPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes amFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes amShine { 0%,70% { left: -60%; } 100% { left: 130%; } }
@keyframes amPulse { 0%,100% { opacity: .5; } 50% { opacity: .7; } }