.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy), #1d3f72);
  display: flex; align-items: center; justify-content: center;
}
.login-wrap {
  padding: 1.5rem 1.5rem 7rem; /* bottom room so the bear can run under the cards */
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem;
}

.login-card {
  background: #fff; border-radius: var(--radius); width: min(400px, 100%);
  padding: 1.75rem 1.75rem 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.login-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.login-card .brand { color: var(--navy); opacity: 1; }

.login-card h1 { margin: 0 0 .25rem; font-size: 1.4rem; color: var(--navy); }
.login-card .sub { margin: 0 0 1.25rem; color: var(--muted); font-size: .9rem; }
.login-card .sub strong { color: var(--navy); }

.login-error { color: var(--danger); font-size: .85rem; margin: -.25rem 0 .75rem; }

/* ---------- Running bear (chases the cursor, jumps up and hangs from it) ---------- */
:root {
  --stride: 0.44s;

  /* Bear proportions. Sizes are in drawing units: the bear is 100 units wide on screen. */
  --bear-width: 80px;    /* on-screen width */
  --body-width: 50;
  --body-height: 62;
  --head-size: 0.8;      /* head width as a fraction of body width */
  --arm-length: 32;
  --arm-thickness: 14;
  --paw-size: 16;
  --arm-raise: 40deg;    /* how far the arms are raised out from vertical */
  --arm-swing: 15deg;    /* how far they wave either side of that */
  --leg-length: 31;
  --leg-thickness: 15;
  --foot-size: 20;
}

/* Positioned entirely by bear.js. pointer-events: none so it never blocks the form. */
.character {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--bear-width);
  pointer-events: none;
  z-index: 50;
}

.facing.flipped { transform: scaleX(-1); }

.bear {
  display: block;
  overflow: visible;
  transform-origin: 50% 100%;
}
.running .bear { animation: bounce calc(var(--stride) / 2) linear infinite; }

/* Separate from the bear so it stays on the ground when the bear jumps */
.shadow {
  position: fixed;
  left: 0;
  top: 0;  /* bear.js moves it onto whatever is under the bear: a card or the floor */
  width: calc(var(--bear-width) * 0.62);
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  pointer-events: none;
}
.running + .shadow { animation: shadow calc(var(--stride) / 2) linear infinite; }

.head { transform-box: view-box; }

.arm {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.arm.left  { animation-name: wave-left; }
.arm.right { animation-name: wave-right; }
.running .arm { animation-duration: var(--stride); }

/* view-box so the hip/knee pivots stay fixed while the leg's bounding box changes */
.thigh, .shin {
  transform-box: view-box;
  transition: transform 0.3s ease-out;
}
.running .thigh, .running .shin {
  animation-duration: var(--stride);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.running .thigh { animation-name: thigh; }
.running .shin  { animation-name: shin; }
.running .right .thigh, .running .right .shin { animation-delay: calc(var(--stride) / -2); }

/* In the air: legs tucked */
.airborne .left .thigh  { transform: rotate(-35deg); }
.airborne .left .shin   { transform: rotate(55deg); }
.airborne .right .thigh { transform: rotate(15deg); }
.airborne .right .shin  { transform: rotate(45deg); }

/* Jumping for the cursor or hanging from it: bent arms go up round the head */
.reach-arms { display: none; }
.reaching .reach-arms { display: inline; }
.reaching .arm { display: none; }

/* Hanging: legs kick */
.hanging .thigh { animation: dangle 0.8s ease-in-out infinite alternate; }
.hanging .right .thigh { animation-direction: alternate-reverse; }
.hanging .shin { transform: rotate(20deg); }

@keyframes dangle {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

/* Climbing a card's side: paws reach up in turn and the legs push alternately */
.climbing .reach-arms .left, .climbing .reach-arms .right {
  transform-box: view-box;
  animation: climb-paw .45s ease-in-out infinite;
}
.climbing .reach-arms .right { animation-delay: -.225s; }
@keyframes climb-paw {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}
.climbing .thigh { animation: climb-leg .45s ease-in-out infinite; }
.climbing .right .thigh { animation-delay: -.225s; }
.climbing .shin { transform: rotate(45deg); }
@keyframes climb-leg {
  0%, 100% { transform: rotate(-40deg); }
  50%      { transform: rotate(5deg); }
}

/* Sitting after a fall: legs out in front (the script lowers the body to the floor) */
.sitting .left .thigh  { transform: rotate(-70deg); }
.sitting .right .thigh { transform: rotate(-85deg); }
.sitting .shin         { transform: rotate(-5deg); }

/* 0% = foot strike, 40% = mid-stance (lowest), 85% = flight (highest) */
@keyframes bounce {
  0%, 100% { transform: translateY(-1px) rotate(5deg); }
  40%      { transform: translateY(2px)  rotate(5deg); }
  85%      { transform: translateY(-4px) rotate(5deg); }
}
@keyframes shadow {
  0%, 100% { transform: scaleX(0.9);  opacity: 0.9; }
  40%      { transform: scaleX(1);    opacity: 1; }
  85%      { transform: scaleX(0.75); opacity: 0.65; }
}
@keyframes wave-left {
  0%, 100% { transform: rotate(calc(-1 * (var(--arm-raise) + var(--arm-swing)))); }
  50%      { transform: rotate(calc(var(--arm-swing) - var(--arm-raise))); }
}
@keyframes wave-right {
  0%, 100% { transform: rotate(calc(var(--arm-raise) - var(--arm-swing))); }
  50%      { transform: rotate(calc(var(--arm-raise) + var(--arm-swing))); }
}
/* Negative angles swing the leg forward (towards the direction of travel). */
@keyframes thigh {
  0%   { transform: rotate(-28deg); }
  20%  { transform: rotate(0deg); }
  40%  { transform: rotate(32deg); }
  62%  { transform: rotate(12deg); }
  85%  { transform: rotate(-38deg); }
  100% { transform: rotate(-28deg); }
}
@keyframes shin {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(10deg); }
  40%  { transform: rotate(20deg); }
  62%  { transform: rotate(80deg); }
  85%  { transform: rotate(35deg); }
  100% { transform: rotate(0deg); }
}

/* Demo finale buttons at the bottom of the login card */
.demo-tools { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed #d3d8e2; text-align: center; }
.demo-btn {
  width: 100%; background: #fff4d6; color: #8a6400; border: 1px solid #f2d27a; font-weight: 600; font-size: .88rem;
}
.demo-btn:hover { background: #ffecb8; }
.demo-reset { width: 100%; background: #e6e9ef; color: var(--text); font-size: .88rem; }
.admin-demo { margin-top: .5rem; background: #e8f0fe; color: #1d3f72; border-color: #b9cdf3; }
.admin-demo:hover { background: #d9e6fd; }
.demo-note { margin: .5rem 0 0; color: var(--muted); font-size: .75rem; }

/* Bear's party hat: hidden until the fundraising goal is reached */
.party-hat { display: none; }
.party .party-hat { display: inline; animation: hat-pop .45s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hat-pop { from { transform: scale(0); } to { transform: scale(1); } }