/* Login variant 1 — original (not wide) layout. "Calma Community". Original SVG illustration, CSS-only motion.
   All motion is disabled under prefers-reduced-motion. */

body:has(.lg) {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(45, 212, 191, .25), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(251, 191, 36, .18), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
body:has(.lg) .wrap { padding-block-end: 24px; }
.topbar--bare { background: transparent; border: 0; box-shadow: none; position: absolute; inset-inline: 0; z-index: 5; }
.topbar--bare .iconbtn { background: rgba(255, 255, 255, .7); backdrop-filter: blur(8px); }

.lg { position: relative; display: flex; flex-direction: column; align-items: center; }

/* ---------- scene ---------- */
.lg__scene {
  width: calc(100% + 32px); margin-inline: -16px; margin-block-start: -16px;
  height: 300px; overflow: hidden; position: relative;
  border-end-start-radius: 36px; border-end-end-radius: 36px;
  box-shadow: 0 18px 40px -20px rgba(15, 118, 110, .55);
  animation: lg-drop .9s cubic-bezier(.2, .8, .2, 1) both;
}
.lg__svg { width: 100%; height: 100%; display: block; }
.sky-top    { stop-color: #7dd3fc; }
.sky-bottom { stop-color: #fef3c7; }
.sun      { fill: #fbbf24; }
.sun-glow { fill: #fde68a; opacity: .35; animation: lg-pulse 4s ease-in-out infinite; transform-origin: 320px 62px; }
.lg__stars { fill: #fff; opacity: 0; }
.lg__cloud { fill: #fff; opacity: .92; }
.lg__cloud--a { animation: lg-cloud 38s linear infinite; }
.lg__cloud--b { animation: lg-cloud 52s linear infinite -20s; opacity: .8; }
.lg__birds { stroke: #334155; animation: lg-birds 18s linear infinite; }
.hill-far { fill: #a7f3d0; }
.roof  { fill: #0f766e; }
.win   { fill: #bae6fd; }
.door  { fill: #b45309; }
.lawn  { fill: #4ade80; }
.pool  { stroke: #fff; stroke-width: 3; }
.ripple { stroke: rgba(255, 255, 255, .8); animation: lg-ripple 3s ease-in-out infinite; }
.trunk { stroke: #92400e; }
.leaves path { fill: none; stroke: #15803d; stroke-width: 5; stroke-linecap: round; }
.palm { animation: lg-sway 5s ease-in-out infinite alternate; }
.palm:nth-of-type(even) { animation-duration: 6.5s; }
.bld { animation: lg-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--d)); transform-box: fill-box; transform-origin: bottom; }
.lg__walker { fill: #0f766e; animation: lg-walk 22s linear infinite; }
.lg__walker--2 { fill: #db2777; animation-duration: 28s; animation-delay: -9s; }

/* night mode: dark theme turns the sky into evening with lit windows */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky-top    { stop-color: #0b1030; }
  :root:not([data-theme="light"]) .sky-bottom { stop-color: #3b2a5a; }
  :root:not([data-theme="light"]) .sun        { fill: #f1f5f9; }
  :root:not([data-theme="light"]) .sun-glow   { fill: #e2e8f0; opacity: .12; }
  :root:not([data-theme="light"]) .lg__stars  { opacity: 1; animation: lg-twinkle 3s ease-in-out infinite; }
  :root:not([data-theme="light"]) .lg__cloud  { opacity: .15; }
  :root:not([data-theme="light"]) .hill-far   { fill: #134e4a; }
  :root:not([data-theme="light"]) .lawn       { fill: #166534; }
  :root:not([data-theme="light"]) .win        { fill: #fcd34d; animation: lg-light 6s ease-in-out infinite; animation-delay: var(--w); }
  :root:not([data-theme="light"]) .lg__birds  { opacity: 0; }
  :root:not([data-theme="light"]) .topbar--bare .iconbtn { background: rgba(23, 26, 32, .7); }
}
[data-theme="dark"] .sky-top    { stop-color: #0b1030; }
[data-theme="dark"] .sky-bottom { stop-color: #3b2a5a; }
[data-theme="dark"] .sun        { fill: #f1f5f9; }
[data-theme="dark"] .sun-glow   { fill: #e2e8f0; opacity: .12; }
[data-theme="dark"] .lg__stars  { opacity: 1; animation: lg-twinkle 3s ease-in-out infinite; }
[data-theme="dark"] .lg__cloud  { opacity: .15; }
[data-theme="dark"] .hill-far   { fill: #134e4a; }
[data-theme="dark"] .lawn       { fill: #166534; }
[data-theme="dark"] .win        { fill: #fcd34d; animation: lg-light 6s ease-in-out infinite; animation-delay: var(--w); }
[data-theme="dark"] .lg__birds  { opacity: 0; }
[data-theme="dark"] .topbar--bare .iconbtn { background: rgba(23, 26, 32, .7); }

/* ---------- card ---------- */
.lg__card {
  position: relative; z-index: 2; width: 100%; max-width: 420px;
  margin-block-start: -64px; padding: 26px 22px 22px; text-align: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 26px; box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .35);
  animation: lg-up .8s cubic-bezier(.2, .8, .2, 1) .35s both;
}
.lg__logo {
  width: 72px; height: 72px; margin: -62px auto 12px; border-radius: 22px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0f766e 55%, #f59e0b);
  box-shadow: 0 12px 28px -10px rgba(15, 118, 110, .7), inset 0 0 0 3px rgba(255, 255, 255, .35);
  animation: lg-float 4s ease-in-out infinite;
}
.lg__logo svg { width: 40px; height: 40px; }
.lg__title {
  margin: 4px 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(90deg, #0f766e, #14b8a6, #f59e0b, #0f766e);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lg-shine 8s linear infinite;
}
.lg__tagline { margin: 0 0 20px; color: var(--text-muted); font-size: .98rem; line-height: 1.6; }

.lg__google, .lg__register {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; border-radius: 16px; font-weight: 700; font-size: 1rem;
  text-decoration: none !important; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.lg__google {
  background: #fff; color: #1f2937; border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .35);
}
.lg__google svg { width: 22px; height: 22px; }
.lg__google:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15, 23, 42, .45); }
.lg__register {
  margin-block-start: 12px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  box-shadow: 0 10px 24px -10px rgba(15, 118, 110, .8);
}
.lg__register::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  animation: lg-sheen 3.5s ease-in-out infinite 1.5s;
}
.lg__register:hover { transform: translateY(-2px); }
.lg__arrow { transition: transform .2s ease; }
.lg__register:hover .lg__arrow { transform: translateX(-4px); }
[dir="ltr"] .lg__register:hover .lg__arrow { transform: translateX(4px); }
.lg__google:active, .lg__register:active { transform: scale(.98); }

/* ---------- features ---------- */
.lg__features {
  list-style: none; padding: 0; margin: 22px 0 0; width: 100%; max-width: 420px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lg__features li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 14px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow); animation: lg-up .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.7s + var(--i) * .1s); transition: transform .2s ease;
}
.lg__features li:hover { transform: translateY(-3px); }
.lg__ficon { font-size: 1.6rem; line-height: 1.2; }
.lg__features b { font-size: .95rem; }
.lg__features small { color: var(--text-faint); font-size: .78rem; }
/* Own pill background so it stays readable over any part of the scene. */
.lg__foot {
  margin: 22px 0 0; padding: 6px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* ---------- keyframes ---------- */
@keyframes lg-drop   { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lg-up     { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lg-rise   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lg-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lg-shine  { to { background-position: 300% 0; } }
@keyframes lg-sheen  { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes lg-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes lg-cloud  { from { transform: translateX(-120px); } to { transform: translateX(460px); } }
@keyframes lg-birds  { from { transform: translate(-200px, 10px); } to { transform: translate(300px, -20px); } }
@keyframes lg-sway   { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes lg-ripple { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes lg-walk   { from { transform: translateX(-20px); } to { transform: translateX(420px); } }
@keyframes lg-twinkle{ 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lg-light  { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .lg *, .lg { animation: none !important; transition: none !important; }
}

.lg__app {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
  margin-block-start: 12px; border-radius: 16px; font-weight: 700; text-decoration: none !important;
  color: var(--brand, #0f766e); border: 2px dashed currentColor; background: transparent;
}
.lg__app:active { transform: scale(.98); }