/* Sync2VA Pulse — sign-in and the other plain pages (update 024): a slow aurora behind a glass card that rises in,
   a liquid logo and a button that shows it's working. Loaded after app.css by layout_plain.php. */
body.plain {
  position: relative; overflow-x: hidden; min-height: 100vh; color: #13203a;
  background: radial-gradient(120% 80% at 50% 0%, #1c2c49 0%, #111c30 55%, #0b1322 100%);
}
.p-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.p-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: p-drift 22s ease-in-out infinite alternate; }
.p-aurora .a1 { width: 620px; height: 620px; left: -180px; top: -220px; background: radial-gradient(circle, #f28c28, rgba(242, 140, 40, 0) 68%); }
.p-aurora .a2 { width: 700px; height: 700px; right: -260px; top: 10%; background: radial-gradient(circle, #3f7fd6, rgba(63, 127, 214, 0) 68%); animation-duration: 28s; animation-delay: -6s; }
.p-aurora .a3 { width: 560px; height: 560px; left: 25%; bottom: -320px; background: radial-gradient(circle, #d2b17c, rgba(210, 177, 124, 0) 68%); animation-duration: 34s; animation-delay: -12s; }
.p-aurora .grain { position: absolute; inset: 0; border-radius: 0; filter: none; opacity: .025; animation: none; background-image: radial-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px); background-size: 3px 3px; }
@keyframes p-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(80px, 50px, 0) scale(1.12); }
  100% { transform: translate3d(-50px, 90px, 0) scale(.94); }
}
.plain-main { position: relative; z-index: 1; }
.plain-brand { color: #fff; animation: p-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.plain-brand .brand-mark {
  position: relative; overflow: hidden; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; font: 700 22px Fraunces, Georgia, serif;
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 36%), linear-gradient(150deg, #ffbe6a, #e0700f);
  box-shadow: inset 0 -6px 12px rgba(120, 50, 0, .3), inset 0 5px 8px rgba(255, 255, 255, .4), 0 0 34px 2px rgba(242, 140, 40, .45);
  animation: p-liquid 7s ease-in-out infinite;
}
.plain-brand .brand-mark::after { content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: skewX(-20deg); animation: p-shine 5s ease-in-out 1s infinite; }
@keyframes p-liquid {
  0%, 100% { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; }
  50% { border-radius: 55% 45% 42% 58% / 45% 58% 42% 55%; }
}
@keyframes p-shine { 0%, 70% { left: -60%; } 100% { left: 140%; } }
.plain-main .card {
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .6); border-radius: 26px;
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  animation: p-card-in .9s cubic-bezier(.2, .9, .25, 1.15) .1s both;
}
.plain-main .card::before { height: 3px; background: linear-gradient(90deg, #d2b17c, #f28c28 50%, #d2b17c); background-size: 200% 100%; animation: p-line 4s linear infinite; }
@keyframes p-line { to { background-position: 200% 0; } }
@keyframes p-card-in { from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes p-rise { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.plain-main .card h1 { font-size: 34px; letter-spacing: -1px; }
.plain-main .card .form label { animation: p-rise .6s ease both; }
.plain-main .card .form label:nth-of-type(1) { animation-delay: .35s; }
.plain-main .card .form label:nth-of-type(2) { animation-delay: .45s; }
.plain-main .form input { border-radius: 14px; padding: 12px 14px; transition: border-color .2s, box-shadow .25s; }
.plain-main .form input:focus { outline: none; border-color: #d2b17c; box-shadow: 0 0 0 4px rgba(242, 140, 40, .16); }
.plain-main .btn-primary {
  position: relative; overflow: hidden; border-radius: 14px; padding: 13px 18px; font-size: 15px;
  background: radial-gradient(120% 120% at 30% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #2c4168, #14213a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 26px -12px rgba(20, 33, 58, .8);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.plain-main .btn-primary:hover { transform: translateY(-2px); }
.plain-main .btn-primary:active { transform: scale(.98); }
.plain-main .btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); transform: skewX(-20deg); transition: left .7s ease; }
.plain-main .btn-primary:hover::after { left: 130%; }
.plain-main .btn-primary.is-loading { color: transparent; pointer-events: none; }
.plain-main .btn-primary.is-loading::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: p-spin .7s linear infinite; }
@keyframes p-spin { to { transform: rotate(360deg); } }
.plain-main > .flash { border-radius: 16px; }
.plain-main .login-card .btn-block { margin-bottom: 16px; }
.plain-main .card + .muted, .plain-main > p.muted { color: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) {
  .p-aurora i, .plain-brand, .plain-brand .brand-mark, .plain-brand .brand-mark::after, .plain-main .card, .plain-main .card::before, .plain-main .card .form label { animation: none !important; }
}