/* ═══════════ GLOBAL ANIMATIONS ═══════════ */
@keyframes fadeUp   {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes slideUp  {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes popIn    {0%{transform:scale(0);opacity:0}65%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
@keyframes pulse    {0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes glow     {0%,100%{box-shadow:0 0 18px rgba(59,130,246,.3)}50%{box-shadow:0 0 38px rgba(99,102,241,.6)}}
@keyframes xpFloat  {0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-52px) scale(1.3)}}
@keyframes shimmer  {0%{background-position:-400% 0}100%{background-position:400% 0}}
@keyframes blink    {50%{opacity:.25}}
@keyframes celebrate{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.22) rotate(-6deg)}70%{transform:scale(1.18) rotate(5deg)}}

/* ── ARICO (Dog) ── */
@keyframes arico-breathe{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.05) translateY(-2.5px)}}
@keyframes arico-head{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-5px) rotate(3.5deg)}65%{transform:translateY(-2px) rotate(-2deg)}}
@keyframes arico-tail{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(38deg)}}
@keyframes arico-ear-l{0%,100%{transform:rotate(0)}35%{transform:rotate(-24deg)}65%{transform:rotate(14deg)}}
@keyframes arico-ear-r{0%,100%{transform:rotate(0)}35%{transform:rotate(24deg)}65%{transform:rotate(-14deg)}}
@keyframes arico-blink{0%,82%,100%{transform:scaleY(1)}87%{transform:scaleY(.07)}91%{transform:scaleY(1)}}
@keyframes arico-paw-l{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(12deg)}}
@keyframes arico-paw-r{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-10deg)}}
@keyframes arico-tongue{0%,75%,100%{transform:scaleY(0) translateY(-4px);opacity:0}80%,95%{transform:scaleY(1) translateY(0);opacity:1}}
@keyframes arico-nose-sniff{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes arico-jump{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-24px) rotate(-6deg)}50%{transform:translateY(-16px) rotate(5deg)}75%{transform:translateY(-20px) rotate(-3deg)}}
@keyframes arico-shake{0%,100%{transform:rotate(0) translateX(0)}15%{transform:rotate(-10deg) translateX(-5px)}35%{transform:rotate(10deg) translateX(5px)}55%{transform:rotate(-8deg) translateX(-4px)}75%{transform:rotate(8deg) translateX(4px)}}

/* ── POLICE ── */
@keyframes pol-real-walk{
  0%  {transform:rotate(-1.5deg) translateY(0) translateX(-1px)}
  100%{transform:rotate(1.5deg) translateY(-4px) translateX(1px)}
}
@keyframes pol-real-breathe{
  0%  {transform:scaleY(1) translateY(0)}
  100%{transform:scaleY(1.015) translateY(-2px)}
}
@keyframes pol-leg-l{
  0%  {transform:rotate(-24deg) translateY(0)}
  100%{transform:rotate(20deg) translateY(4px)}
}
@keyframes pol-leg-r{
  0%  {transform:rotate(20deg) translateY(4px)}
  100%{transform:rotate(-24deg) translateY(0)}
}
@keyframes pol-torso{
  0%  {transform:rotate(-1.8deg) translateX(-2px)}
  100%{transform:rotate(1.8deg) translateX(2px) translateY(-1px)}
}
@keyframes pol-head-walk{
  0%  {transform:translateY(0) rotate(-1.5deg)}
  100%{transform:translateY(-3px) rotate(1.5deg)}
}
@keyframes pol-arm-l{
  0%  {transform:rotate(32deg)}
  100%{transform:rotate(-26deg)}
}
@keyframes pol-arm-r{
  0%  {transform:rotate(-26deg)}
  100%{transform:rotate(32deg)}
}
@keyframes pol-brow-l{
  0%  {transform:rotate(0)}
  100%{transform:rotate(-3deg) translateY(-1px)}
}
@keyframes pol-brow-r{
  0%  {transform:rotate(0)}
  100%{transform:rotate(3deg) translateY(-1px)}
}
@keyframes pol-blink-eye{
  0%,78%,100%{transform:scaleY(1)}
  83%{transform:scaleY(.05)}
  87%{transform:scaleY(1)}
}
@keyframes pol-mouth{
  0%,38%,72%,100%{transform:scaleY(1)}
  18%{transform:scaleY(1.45)}
  55%{transform:scaleY(1.2)}
}
@keyframes pol-jaw{
  0%,38%,72%,100%{transform:scaleY(0);opacity:0}
  18%{transform:scaleY(1);opacity:1}
  55%{transform:scaleY(.65);opacity:.85}
}
@keyframes pol-whistle-anim{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.1)}
}
@keyframes pol-shadow{
  0%  {transform:scaleX(.8);opacity:.35}
  100%{transform:scaleX(1.15);opacity:.65}
}
@keyframes pol-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-6px) rotate(.5deg); }
  75%      { transform: translateY(-3px) rotate(-.5deg); }
}

/* ── CAR ── */
@keyframes car-bounce{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(.6deg)}75%{transform:translateY(-1.5px) rotate(-.4deg)}}
@keyframes car-wheel{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes car-light{0%,100%{opacity:.65;filter:none}50%{opacity:1;filter:drop-shadow(0 0 6px #fef08a)}}
@keyframes car-antenna{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(9deg)}}
@keyframes car-eyes-blink{0%,84%,100%{transform:scaleY(1)}89%{transform:scaleY(.08)}}
@keyframes car-smile{0%,100%{d:path("M30 52 Q38 58 46 52")}50%{d:path("M30 52 Q38 62 46 52")}}
@keyframes car-honk{0%,80%,100%{transform:scale(1)}10%{transform:scale(1.3)}}

/* ── COACH ── */
@keyframes coa-breathe{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.04) translateY(-2px)}}
@keyframes coa-head{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes coa-pointer{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
@keyframes coa-blink{0%,80%,100%{transform:scaleY(1)}86%{transform:scaleY(.06)}90%{transform:scaleY(1)}}
@keyframes coa-shine{0%,78%,100%{opacity:0}85%{opacity:.6}}
@keyframes coa-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}

/* ── STUDENT ── */
@keyframes stu-bounce{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-20px) scaleY(1.07)}60%{transform:translateY(-13px) scaleY(.95)}80%{transform:translateY(-17px) scaleY(1.03)}}
@keyframes stu-hair{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes stu-book{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-11deg) translateY(-4px)}}
@keyframes stu-blink{0%,80%,100%{transform:scaleY(1)}86%{transform:scaleY(.07)}90%{transform:scaleY(1)}}
@keyframes stu-star{0%,100%{transform:scale(0) rotate(0);opacity:0}30%,60%{transform:scale(1.2) rotate(160deg);opacity:1}90%{opacity:0}}
@keyframes stu-cheek{0%,100%{opacity:.22}50%{opacity:.42}}
/* ── STUDENT GIRL PNG ── */
.char-png-wrap{position:relative;animation:stu-float 2.5s ease-in-out infinite;filter:drop-shadow(0 4px 14px rgba(99,102,241,.3))}
.stu-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.stu-idle{animation:stu-pose-idle 10s ease-in-out infinite}
.stu-book{opacity:0;animation:stu-pose-book 10s ease-in-out infinite}
.stu-pen {opacity:0;animation:stu-pose-pen  10s ease-in-out infinite}
@keyframes stu-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* 12s cycle: 0-3s idle | 3-6s book | 6-9s pen | 9-12s cross */
@keyframes stu-pose-idle {0%,22%{opacity:1}27%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes stu-pose-book {0%,22%{opacity:0}27%,47%{opacity:1}52%,100%{opacity:0}}
@keyframes stu-pose-pen  {0%,47%{opacity:0}52%,72%{opacity:1}77%,100%{opacity:0}}
@keyframes stu-pose-cross{0%,72%{opacity:0}77%,92%{opacity:1}97%,100%{opacity:0}}

/* ── STUDENT BOY ── */
@keyframes stb-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-18px)}70%{transform:translateY(-10px)}}
@keyframes stb-blink{0%,82%,100%{transform:scaleY(1)}88%{transform:scaleY(.07)}92%{transform:scaleY(1)}}
@keyframes stb-head{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes stb-key{0%,100%{transform:rotate(0)}40%{transform:rotate(-15deg)}70%{transform:rotate(8deg)}}

/* ── REACTION CLASSES ── */
.char-react-correct{animation:arico-jump .9s ease forwards!important}
.char-react-wrong  {animation:arico-shake .7s ease forwards!important}

@keyframes char-react-correct{
  0%  {transform:translateY(0) rotate(0) scale(1)}
  22% {transform:translateY(-26px) rotate(-7deg) scale(1.12)}
  45% {transform:translateY(-16px) rotate(6deg) scale(1.08)}
  68% {transform:translateY(-22px) rotate(-4deg) scale(1.1)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes char-react-wrong{
  0%  {transform:rotate(0) translateX(0)}
  14% {transform:rotate(-11deg) translateX(-6px)}
  28% {transform:rotate(11deg) translateX(6px)}
  42% {transform:rotate(-9deg) translateX(-5px)}
  56% {transform:rotate(9deg) translateX(5px)}
  72% {transform:rotate(-5deg) translateX(-3px)}
  100%{transform:rotate(0) translateX(0)}
}

/* ── NAVBAR ROAD ── */
@keyframes road-dash{
  from{transform:translateX(100px)}
  to{transform:translateX(-30px)}
}
@keyframes plight{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes road-scroll{
  from{background-position:0 0}
  to{background-position:-30px 0}
}
@keyframes car-drive-nav{
  0%   {left:-40px;opacity:0}
  8%   {opacity:1}
  80%  {left:calc(100% + 5px);opacity:1}
  81%  {opacity:0;left:calc(100% + 5px)}
  100% {left:-40px;opacity:0}
}
@keyframes wh-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hl-pulse{0%,100%{opacity:.7}50%{opacity:1;filter:drop-shadow(0 0 3px #fef08a)}}

/* ── QUIZ PROGRESS BAR CAR ── */
@keyframes prog-car-bump{
  0%  {transform:translateY(-50%) scale(1)}
  30% {transform:translateY(-65%) scale(1.1)}
  100%{transform:translateY(-50%) scale(1)}
}
@keyframes prog-car-bounce{
  from{transform:translateY(-50%)}
  to  {transform:translateY(-58%)}
}

/* ── ROADMAP ── */
@keyframes rm-pulse {
  0%,100% { box-shadow:0 4px 20px currentColor; transform:scale(1); }
  50% { box-shadow:0 6px 28px currentColor; transform:scale(1.06); }
}
@keyframes rm-arr { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-5px)} }
@keyframes rm-road-scroll { from{transform:translateX(0)} to{transform:translateX(-38px)} }
@keyframes rm-char-walk {
  from { transform:translate(-50%,-50%) translateY(0) rotate(-2deg); }
  to   { transform:translate(-50%,-50%) translateY(-5px) rotate(2deg); }
}

/* ── FUEL ── */
@keyframes fuelPulse{0%,100%{opacity:1}50%{opacity:.5}}