/* ══════════════════════════════════════════════════════
   LOGIN PAGE — MASCOTS
   ══════════════════════════════════════════════════════
   Char mascots jo login card ke bagal me khade rehte hain: apni-apni chaal se
   jhoolte hain, palkein jhapakte hain, pointer ko dekhte hain, password
   dikhne par mooh pher lete hain, Caps Lock par sar tirchha karte hain, aur
   login ke nateeje par khush ya udaas hote hain.

   Markup index.html me inline SVG hai (img tag me nahi — JS ko andar ke
   circles chahiye) aur chalane wala code js/login-animation.js me hai.

   Rang: mascots ke teen body colours `--primary` se derive hote hain, isliye
   har client ki copy me ye apne aap uske apne rang me aa jaate hain. Chautha
   (charcoal) jaan-boojh kar neutral hai — chaaron ek hi rang ke hote to group
   flat dikhta.
   ────────────────────────────────────────────────────── */

/* Split screen: baayein mascots ka ranga hua panel, daayein saaf background
   par card. Panel poori oonchai lete hain, isliye do saaf hisse dikhte hain —
   pehle sab kuch beech me tairta tha aur dono taraf khaali maidan bacha
   rehta tha. */
.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);
  /* Do parat:
       1. mascots ke theek peeche ek narm spotlight, taaki wo panel se ubhrein
       2. upar se neeche gehra hota gradient, jo flat rang se zyada gehrai deta
     Pehle yahan teen drifting orbs the — poore page par theek the, par panel
     ke andar wo dhabbon jaise dikhte the.
     Dono parat --background ke saath mix hoti hain, isliye ek hi rule light
     aur dark dono me theek baithta hai. */
  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 isliye ki bade monitor par ye card se kaafi bada dikhe (wahi to
     khaali jagah bhar raha hai), par laptop par card ko dhakel na de.
     820px par SVG ~535px oonchi hoti hai — 1080 screen me aaram se aa jaati
     hai. */
  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);   }
}

/* Har character apni laya me jhoolta hai, warna poora group ek block ki tarah
   hilta hua dikhta hai. */
.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); }
}

/* Pupils JS hilata hai; yahan sirf uski chaal smooth ki jaati hai. */
.pupil{ transition:transform .13s cubic-bezier(.4,0,.2,1); }

/* ── Password screen par dikh raha hai: mascots mooh pher lete hain ──
   `.is-hiding` SVG par JS lagata hai. Lean ek andar wale .turn group par hai
   kyunki .mascot ka transform pehle se bob ke paas hai — ek hi transform par
   do animation ladti hain. */
.turn{
  transform-box:fill-box;
  transform-origin:50% 100%;      /* farsh par pivot, taaki jhukein — khisken nahi */
  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 — sawaliya sar-tirchha, turn-away se ulti disha me.
   :not(.is-hiding) isliye ki dikhta hua password hamesha jeete. */
.mascots.is-alert:not(.is-hiding) .mascot--3 .turn{ transform:rotate(9deg); }

/* Blink. Wahi band-aankh wale arcs, par reveal ki cross-fade se kaafi tez. */
.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 reject hua: group sihar jaata hai aur muskaan gir jaati hai */
.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 manzoor: redirect se pehle ek uchhaal */
.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);     }
}

/* ── Caps Lock hint ── */
.caps-hint{
  display:none;
  align-items:center;gap:5px;
  margin-top:6px;
  font-size:11.5px;font-weight:600;
  color:var(--accent-foreground);
}
.caps-hint.show{ display:flex; }

/* ── Jagah kam ho to ── */
/* 1080px se neeche mascots card ke upar aa jaate hain (bagal me dabne se
   behtar), aur bahut chhoti screen par bilkul hat jaate hain — wahan card ke
   liye hi mushkil se jagah hoti hai. */
@media (max-width:1080px){
  /* Do panel ki jagah nahi bachi — upar-neeche kar do. Mascot panel ko utni
     hi oonchai do jitni me wo dikh jaye, baaki card ke liye. */
  .login-shell{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .mascot-panel{ padding:28px 20px; }
  .mascots{ width:min(520px,88vw); }
  .form-panel{ padding:28px 20px 40px; }
}
@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; }
}