/* ══════════════════════════════════════════════════════
   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);
  /* Reference swatch grid (green/blue/yellow/peach/pink) seedha ek diagonal
     gradient me — panel ka apna alag "rang-rang blocks" look, bina literal
     grid banaye (jo card ke upar text/mascots ke saath takrata). Mascots par
     isi wajah se stroke outline di gayi hai (index.html), taaki koi bhi
     mascot kisi bhi stop ke rang me ghule nahi. */
  background: linear-gradient(135deg,
    #c8e6c0 0%,
    #a9cbea 25%,
    #f7f3a5 50%,
    #f5ad8e 75%,
    #f2a0c9 100%);
}

.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 ki CSS ab index.html ki apni <style> me hai. Wajah: uska
   mascots se koi lena-dena nahi, aur jis copy me animation band ho wahan ye
   file jaati hi nahi — tab `display:none` gayab ho jaata aur "Caps Lock is on"
   hamesha dikhta rehta tha. */

/* ── 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. Mascots yahan
     jaan-boojh kar chhote hain: 520px par wo tablet ki aadhi screen kha lete
     the aur form fold ke neeche chala jaata tha. Ab dono ek saath dikhte
     hain, scroll kiye bina. */
  .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; }
}