/* lm-hub-authscene-css-20261101 - decorative overlay for /login, /signup, /pricing.
   Pseudo-elements only (content:"", pointer-events:none), transform/opacity animation only,
   no animation under prefers-reduced-motion. Scoped by page-unique form/heading markers. */

/* Login: "moonlit return" */
.lm-auth:has(input[name="website"]):has(input[autocomplete="current-password"]) .lm-auth-scene::before {
  content: ""; position: absolute; pointer-events: none;
  inset-block-start: 18%; inset-inline-end: 12%;
  inline-size: 64px; block-size: 64px; border-radius: 50%;
  background: radial-gradient(circle at 36% 36%, #fff6df 0%, #ffe4a8 40%, #ffd27a 62%, rgba(255,210,122,0) 72%);
  box-shadow: 0 0 46px 12px rgba(255,210,122,.16);
  animation: lm-ov-moonrise 2.6s ease-out 1 both;
}
.lm-auth:has(input[name="website"]):has(input[autocomplete="current-password"]) .lm-auth-scene::after {
  content: ""; position: absolute; pointer-events: none; inset: -10% 0 0 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 30%, rgba(246,242,234,.9), transparent 60%),
    radial-gradient(1px 1px at 22% 12%, rgba(246,242,234,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 37% 40%, rgba(255,210,122,.8), transparent 60%),
    radial-gradient(1px 1px at 55% 22%, rgba(246,242,234,.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 46%, rgba(243,180,188,.75), transparent 60%),
    radial-gradient(1px 1px at 93% 34%, rgba(246,242,234,.6), transparent 60%);
  animation: lm-ov-drift 24s ease-in-out infinite alternate;
}

/* Sign-up: "first ripple" */
.lm-auth:has(input[name="website"]):has(input[autocomplete="new-password"]) .lm-auth-scene::before,
.lm-auth:has(input[name="website"]):has(input[autocomplete="new-password"]) .lm-auth-scene::after {
  content: ""; position: absolute; pointer-events: none;
  inset-block-end: 2px; inset-inline-start: calc(50% - 150px);
  inline-size: 300px; block-size: 46px; border-radius: 50%;
  border: 2px solid rgba(95,179,154,.7);
  box-shadow: 0 0 18px rgba(85,168,221,.25);
  opacity: 0; transform: scale(.3);
  animation: lm-ov-ripple 5s ease-out infinite;
}
.lm-auth:has(input[name="website"]):has(input[autocomplete="new-password"]) .lm-auth-scene::after {
  border-color: rgba(228,136,154,.6); animation-delay: 2.5s;
}

/* Pricing: "tide band" */
.lm-night:has(#plan-free-h) > .lm-night-hero::after {
  content: ""; display: block; pointer-events: none;
  block-size: 6px; max-inline-size: 420px; margin: 28px auto 0; border-radius: 999px;
  background: linear-gradient(90deg, rgba(22,38,58,0) 0%, #5fb39a 25%, #55a8dd 45%, #e4889a 68%, #ffd27a 85%, rgba(22,38,58,0) 100%);
  transform-origin: 50% 50%;
  animation: lm-ov-tide 8s ease-in-out infinite alternate;
}

@keyframes lm-ov-moonrise { 0% { opacity: 0; transform: translateY(22px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes lm-ov-drift { 0% { opacity: .55; transform: translate3d(0, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 6%, 0); } }
@keyframes lm-ov-ripple { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: .95; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes lm-ov-tide { 0% { opacity: .55; transform: scaleX(.7); } 100% { opacity: 1; transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .lm-auth .lm-auth-scene::before, .lm-auth .lm-auth-scene::after, .lm-night > .lm-night-hero::after { animation: none !important; }
  .lm-auth:has(input[autocomplete="new-password"]) .lm-auth-scene::before { opacity: .5; transform: scale(1); }
  .lm-auth:has(input[autocomplete="new-password"]) .lm-auth-scene::after { opacity: 0; }
}

/* lm-dockpad-20261101: stopgap (hot-patch). Keeps the last content clear of the floating Need Help button at phone width.
   Remove when the source rebuild adds this padding (expiry 2026-12-01, L-HOTPATCH-EXPIRY-1). */
@media (max-width: 640px) { #root > .min-h-screen { padding-bottom: 76px; } }