/* Sign-in, forgot and reset pages: a calm morning in the paddy fields. Pure CSS + inline SVG, no scripts. */
body { background: #cdeab4; }
.scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #eaf8dc 0%, #cfeab6 42%, #a9db8c 100%);
}
.scene > * { position: absolute; pointer-events: none; }

/* sun and clouds */
.sun {
  top: 5%; right: 9%; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, #fffbd6 0%, #ffe58f 38%, rgba(255, 229, 143, 0) 70%);
  animation: glow 7s ease-in-out infinite;
}
.cloud { width: 190px; opacity: .8; filter: blur(.4px); }
.cloud.c1 { top: 11%; left: -220px; animation: float 70s linear infinite; }
.cloud.c2 { top: 22%; left: -220px; width: 140px; opacity: .6; animation: float 95s linear infinite; animation-delay: -38s; }

/* drifting leaves */
.leaves { inset: 0; }
.leaves span {
  position: absolute; bottom: -40px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.7);
  background: linear-gradient(135deg, #8fdc78, #3f9a3a); border-radius: 0 100% 0 100%; opacity: 0;
  animation: drift var(--d) linear infinite; animation-delay: var(--delay);
}

/* hills and rice */
.hills { left: -2%; width: 104%; bottom: 0; height: 46%; }
.hills.h1 { fill: #9bd486; animation: slide 26s ease-in-out infinite alternate; }
.hills.h2 { fill: #77bf67; height: 36%; animation: slide 20s ease-in-out infinite alternate-reverse; }
.field { left: 0; width: 100%; bottom: -2px; height: 34%; }
.field .stalk { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite; }
.field path { fill: none; stroke-linecap: round; }
.field.back { height: 26%; opacity: .85; }
.field.back path { stroke: #5fae55; stroke-width: 2.2; }
.field.back ellipse { fill: #d9c36a; }
.field.front path { stroke: #3a8c3a; stroke-width: 3; }
.field.front .blade { stroke: #4aa044; stroke-width: 2.4; }
.field.front .grain ellipse { fill: #e2c96b; }

@keyframes sway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes glow { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.09); opacity: 1; } }
@keyframes float { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 460px)); } }
@keyframes slide { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .75; }
  88% { opacity: .55; }
  100% { transform: translate3d(70px, -105vh, 0) rotate(320deg); opacity: 0; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shine { from { transform: translateX(-120%); } to { transform: translateX(220%); } }

/* the sign-in card */
.auth { position: relative; z-index: 1; min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 20px 16px 90px; gap: 14px; }
.auth-lang { position: fixed; top: 14px; right: 16px; z-index: 2; }
.auth-lang .lang-btn { color: #24591f; border-color: rgba(36, 89, 31, .35); background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.auth-card {
  width: min(400px, 92vw); padding: 26px 26px 24px; border-radius: 22px;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(31, 90, 38, .22), 0 2px 6px rgba(31, 90, 38, .1);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.auth-brand img { display: block; filter: drop-shadow(0 2px 4px rgba(29, 42, 77, .18)); }
.auth-brand b { display: block; font-size: 1.7rem; letter-spacing: .32em; color: #1d2a4d; line-height: 1.1; }
.auth-brand span { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #9a6b1f; margin-top: 2px; }
.auth-card h1 { font-size: 1.35rem; color: #1d3b22; }
.auth-card .muted { margin: .3rem 0 1rem; color: #4d6b4f; }
.auth-card .field { margin: .9rem 0 1rem; }
.auth-card input { background: rgba(255, 255, 255, .9); border-color: #cfe3c3; transition: border-color .2s, box-shadow .2s; }
.auth-card input:focus { outline: none; border-color: #4aa044; box-shadow: 0 0 0 4px rgba(74, 160, 68, .22); }
.auth-card a { color: #2b6b2b; }
.auth-card .btn.primary {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: linear-gradient(135deg, #3f9a3a, #2f7a33); box-shadow: 0 6px 16px rgba(47, 122, 51, .35);
  transition: transform .15s, box-shadow .2s;
}
.auth-card .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(47, 122, 51, .42); }
.auth-card .btn.primary::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-120%);
}
.auth-card .btn.primary:hover::after { animation: shine .9s ease; }
.auth-card .flash { margin: .6rem 0; }
.auth-tag { margin: 0; color: #2e5a2e; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); animation: rise .9s .25s both; }

/* evening version */
@media (prefers-color-scheme: dark) {
  body { background: #0e2418; }
  .scene { background: linear-gradient(180deg, #0c1f2e 0%, #14392c 45%, #1c4d33 100%); }
  .sun { background: radial-gradient(circle, #f3f1d6 0%, #cfd8a6 35%, rgba(207, 216, 166, 0) 70%); opacity: .7; }
  .cloud { opacity: .18; }
  .leaves span { background: linear-gradient(135deg, #6cc15b, #2e7a35); }
  .hills.h1 { fill: #1f5a3a; } .hills.h2 { fill: #174a30; }
  .field.back path { stroke: #2f7a4a; } .field.back ellipse { fill: #a89a54; }
  .field.front path { stroke: #2a7d3f; } .field.front .blade { stroke: #318a45; } .field.front .grain ellipse { fill: #c9b45e; }
  .auth-card { background: rgba(16, 38, 26, .78); border-color: rgba(120, 200, 130, .22); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
  .auth-brand img { background: #fff; border-radius: 16px; padding: 4px; box-sizing: content-box; width: 48px; height: 48px; }
  .auth-brand b { color: #e9eefc; } .auth-brand span { color: #e0b66d; }
  .auth-card h1 { color: #e6f4e3; } .auth-card .muted { color: #a9c9ac; } .auth-card a { color: #8fdc78; }
  .auth-card label { color: #d9ecd6; }
  .auth-card input { background: rgba(10, 28, 18, .7); border-color: #2f5a3d; color: #e6f4e3; }
  .auth-tag { color: #bfe3b8; text-shadow: none; }
  .auth-lang .lang-btn { color: #bfe3b8; background: rgba(16, 38, 26, .7); border-color: rgba(120, 200, 130, .35); }
}

@media (max-width: 520px) { .sun { width: 130px; height: 130px; } .field.front { height: 28%; } }

/* motion is decoration only – keep it still when the visitor asks for that */
@media (prefers-reduced-motion: reduce) {
  .scene *, .auth-card, .auth-tag, .auth-card .btn.primary::after { animation: none !important; }
  .cloud.c1 { left: 12%; } .cloud.c2 { left: 55%; }
  .leaves span { opacity: .45; bottom: auto; top: calc(var(--x) * 0.8); }
}