/* ══════════════════════════════════════════════════════
   LOGIN PAGE — MASCOTS
   ══════════════════════════════════════════════════════
   Four mascots stand beside the login card: they sway at their own pace,
   blink, follow the pointer, look away when the password is revealed, tilt
   their heads for Caps Lock, and react to the login result.

   The markup is inline SVG in index.html (not an img tag — the JS needs the
   circles inside), and the code that drives it is js/login-animation.js.

   Colour: three of the mascots' body colours derive from `--primary`, so they
   pick up the brand colour automatically. The fourth (charcoal) is
   deliberately neutral — four of the same colour would make the group look flat.
   ────────────────────────────────────────────────────── */

/* Split screen: a coloured mascot panel on the left, the card on a clean
   background on the right. The panels take the full height, giving two clear
   halves — everything used to float in the middle with empty space on both
   sides. */
.login-shell{
  display:grid;
  grid-template-columns:1.16fr .84fr;
  min-height:100vh;
  position:relative;
  z-index:1;
}

.mascot-panel{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(24px,4vw,64px);
  /* Two layers:
       1. a soft spotlight right behind the mascots, so they lift off the panel
       2. a gradient darkening downwards, which reads deeper than a flat colour
     There used to be three drifting orbs here — fine across a whole page, but
     inside the panel they looked like smudges.
     Both layers mix with --background, so one rule works in light and dark. */
  background:
    radial-gradient(ellipse 60% 46% at 50% 64%,
      color-mix(in srgb,rgb(var(--brand-rgb)) 30%,var(--background)),
      transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb,rgb(var(--brand-rgb)) 7%,var(--background)),
      color-mix(in srgb,rgb(var(--brand-rgb)) 25%,var(--background)));
}

.form-panel{
  display:grid;
  place-items:center;
  padding:clamp(24px,3vw,48px);
  background:var(--background);
}

/* ── Mascots ── */
.mascots{
  /* clamp so that on a large monitor this reads much bigger than the card
     (that is what fills the empty space), while never pushing the card around
     on a laptop. At 820px the SVG is about 535px tall — comfortable on a
     1080 screen. */
  width:clamp(420px,44vw,820px);
  max-width:100%;
  height:auto;
  display:block;
  animation: mascotsIn .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mascotsIn {
  from { opacity:0; transform:translateY(26px) scale(.96); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* Each character sways to its own rhythm, or the whole group would move like
   a single block. */
.mascot{ animation: mascotFloat 4s ease-in-out infinite; transform-origin:center bottom; }
.mascot--1{ animation-delay:0s;   }
.mascot--2{ animation-delay:.5s;  }
.mascot--3{ animation-delay:1s;   }
.mascot--4{ animation-delay:1.5s; }
@keyframes mascotFloat {
  0%,100% { transform:translateY(0);    }
  50%     { transform:translateY(-9px); }
}

/* The JS moves the pupils; this only smooths that movement. */
.pupil{ transition:transform .13s cubic-bezier(.4,0,.2,1); }

/* ── The password is on screen: the mascots look away ──
   The JS puts `.is-hiding` on the SVG. The lean is applied to an inner .turn
   group because .mascot's transform already belongs to the bob — two
   animations cannot share one transform. */
.turn{
  transform-box:fill-box;
  transform-origin:50% 100%;      /* pivot at the floor, so they lean rather than slide */
  transition:transform .34s cubic-bezier(.34,1.4,.64,1);
}
.mascots.is-hiding .mascot--1 .turn{ transform:rotate(-14deg); }
.mascots.is-hiding .mascot--2 .turn{ transform:rotate(-10deg); }
.mascots.is-hiding .mascot--3 .turn{ transform:rotate(-17deg); }
.mascots.is-hiding .mascot--4 .turn{ transform:rotate(-11deg); }

.eye-open,.mouth-happy{ transition:opacity .14s ease; }
.eye-lid,.mouth-upset{ opacity:0; transition:opacity .14s ease; }
.mascots.is-hiding .eye-open,
.mascots.is-hiding .mouth-happy{ opacity:0; }
.mascots.is-hiding .eye-lid,
.mascots.is-hiding .mouth-upset{ opacity:1; }

/* Caps Lock — a quizzical head tilt, in the opposite direction to the
   turn-away. :not(.is-hiding) so a revealed password always wins. */
.mascots.is-alert:not(.is-hiding) .mascot--3 .turn{ transform:rotate(9deg); }

/* Blink. The same closed-eye arcs, but much faster than the reveal cross-fade. */
.mascot.is-blinking .eye-open{ opacity:0; }
.mascot.is-blinking .eye-lid { opacity:1; }
.mascot.is-blinking .eye-open,
.mascot.is-blinking .eye-lid { transition-duration:.07s; }

/* Login rejected: the group flinches and the smile drops */
.mascots.is-sad{ animation: mascotShake .5s cubic-bezier(.36,.07,.19,.97); }
.mascots.is-sad .mouth-happy{ opacity:0; }
.mascots.is-sad .mouth-upset{ opacity:1; }
@keyframes mascotShake {
  10%,90%      { transform:translateX(-3px); }
  20%,80%      { transform:translateX(5px);  }
  30%,50%,70%  { transform:translateX(-7px); }
  40%,60%      { transform:translateX(7px);  }
}

/* Login accepted: one hop before the redirect */
.mascots.is-happy .mascot{ animation: mascotJump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes mascotJump {
  0%   { transform:translateY(0);     }
  40%  { transform:translateY(-26px); }
  70%  { transform:translateY(0);     }
  85%  { transform:translateY(-8px);  }
  100% { transform:translateY(0);     }
}

/* The Caps Lock hint's CSS now lives in index.html's own <style>. The reason:
   it has nothing to do with the mascots, and where the animation is switched
   off this file is not loaded at all — `display:none` then disappeared and
   "Caps Lock is on" showed permanently. */

/* ── Jagah kam ho to ── */
/* Below 1080px the mascots move above the card (better than being squeezed
   beside it), and on a very small screen they disappear entirely — there is
   barely room for the card itself there. */
@media (max-width:1080px){
  /* No room for two panels — stack them. The mascots are deliberately smaller
     here: at 520px they ate half a tablet screen and pushed the form below the
     fold. Now both are visible at once, without scrolling. */
  .login-shell{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .mascot-panel{ padding:22px 20px 10px; }
  .mascots{ width:min(360px,56vw); }
  .form-panel{ padding:24px 20px 36px; }
}
@media (max-width:560px), (max-height:620px){
  .mascot-panel{ display:none; }
  .login-shell{ grid-template-rows:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .mascots,.mascot,.turn,.pupil{ animation:none!important; transition:none!important; }
}