/* =========================================================================
   Pity — the PyTeach snake.

   One markup block (templates/pity/pity.html) posed entirely from here.

   Two rules:
     1. Motion is transform/opacity only, so it stays on the compositor and
        never costs layout — there can be several Pitys on a page.
     2. Everything obeys prefers-reduced-motion at the bottom of this file.
        A kid who gets motion sick should still get the mascot, just still.
   ========================================================================= */

.pity-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pity {
  --pity-size: 140px;
  inline-size: var(--pity-size);
  block-size: auto;
  overflow: visible;
  /* Pity is a character, not a mirrored UI element: she faces the same way in
     Persian as in English. Without this she flips inside [dir=rtl]. */
  direction: ltr;
}

.pity-shadow { fill: rgba(34, 165, 88, 0.16); }

/* ---- idle life: everyone breathes, blinks and flicks --------------------- */
.pity-all { transform-origin: 60px 112px; animation: pity-sway 4.2s ease-in-out infinite; }
@keyframes pity-sway {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(-3px); }
}

.pity-head { transform-origin: 74px 34px; animation: pity-nod 4.2s ease-in-out infinite; }
@keyframes pity-nod {
  0%, 100% { transform: rotate(2deg); }
  50%      { transform: rotate(-2deg); }
}

/* Lids sit folded up out of the way, then sweep down for a blink. */
.pity-lid { transform-origin: center 26px; transform: scaleY(0); }
.pity--wave .pity-lid,
.pity--cheer .pity-lid,
.pity--climb .pity-lid,
.pity--think .pity-lid,
.pity--trophy .pity-lid { animation: pity-blink 5.4s infinite; }
.pity--oops .pity-lid { animation: pity-blink 3.4s infinite; }
@keyframes pity-blink {
  0%, 92%, 100% { transform: scaleY(0); }
  95%           { transform: scaleY(1); }
}

.pity-pupil { animation: pity-look 6s ease-in-out infinite; }
@keyframes pity-look {
  0%, 40%, 100% { transform: translate(0, 0); }
  50%, 70%      { transform: translate(-1.6px, 0.4px); }
}

.pity-tongue { transform-origin: 75px 44px; animation: pity-flick 3.6s ease-in-out infinite; }
@keyframes pity-flick {
  0%, 78%, 100% { transform: scaleY(0.15); opacity: 0; }
  84%, 92%      { transform: scaleY(1); opacity: 1; }
}

/* The belly dashes crawl along the coil — reads as Pity gently slithering. */
.pity-coil-belly { animation: pity-crawl 5s linear infinite; }
@keyframes pity-crawl { to { stroke-dashoffset: -44; } }

.pity-tail { transform-origin: 34px 108px; animation: pity-wag 2.4s ease-in-out infinite; }
@keyframes pity-wag {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(10deg); }
}


/* ---- mouths: exactly one visible per pose ------------------------------- */
.pity-mouth--grin,
.pity-mouth--frown { display: none; }
.pity--cheer .pity-mouth--smile,
.pity--trophy .pity-mouth--smile { display: none; }
.pity--cheer .pity-mouth--grin,
.pity--trophy .pity-mouth--grin { display: block; }
.pity--oops .pity-mouth--smile { display: none; }
.pity--oops .pity-mouth--frown { display: block; }

/* ---- pose extras are hidden unless the pose asks for them ---------------- */
.pity-zzz, .pity-think, .pity-sparks, .pity-cup { display: none; }

/* ---- cheer: bouncing, sparkles ------------------------------------------ */
.pity--cheer .pity-all { animation: pity-bounce 0.72s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)) infinite; }
@keyframes pity-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30%      { transform: translateY(-16px) scale(0.96, 1.05); }
  60%      { transform: translateY(0) scale(1.06, 0.94); }
}
.pity--cheer .pity-sparks { display: block; }
.pity-spark { fill: #ffd23f; transform-origin: center; }
.pity-spark1 { animation: pity-twinkle 1.5s ease-in-out infinite; }
.pity-spark2 { animation: pity-twinkle 1.5s ease-in-out 0.35s infinite; }
.pity-spark3 { animation: pity-twinkle 1.5s ease-in-out 0.7s infinite; }
@keyframes pity-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(35deg); }
}

/* ---- oops: slumped, worried, slow ---------------------------------------- */
.pity--oops .pity-all { animation: pity-slump 5s ease-in-out infinite; }
@keyframes pity-slump {
  0%, 100% { transform: rotate(-3deg) translateY(2px); }
  50%      { transform: rotate(-1deg) translateY(5px); }
}
.pity--oops .pity-head { animation: pity-tilt-sad 5s ease-in-out infinite; }
@keyframes pity-tilt-sad {
  0%, 100% { transform: rotate(-11deg); }
  50%      { transform: rotate(-7deg); }
}
/* Brows angle inward — the whole "worried" read lives in these two strokes. */
.pity--oops .pity-brow--l { transform: rotate(15deg); transform-origin: 66px 17px; }
.pity--oops .pity-brow--r { transform: rotate(-15deg); transform-origin: 84px 17px; }
.pity--oops .pity-tongue { display: none; }
.pity--oops .pity-tail { animation: pity-wag 4.5s ease-in-out infinite; }

/* ---- sleep: eyes shut, z's drifting -------------------------------------- */
.pity--sleep .pity-lid { transform: scaleY(1); animation: none; }
.pity--sleep .pity-all { animation: pity-breathe 4.5s ease-in-out infinite; }
@keyframes pity-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.03) translateY(-2px); }
}
.pity--sleep .pity-head { animation: none; transform: rotate(-14deg); }
.pity--sleep .pity-tongue,
.pity--sleep .pity-mouth { display: none; }
.pity--sleep .pity-zzz { display: block; }
.pity-z { font: 800 13px/1 "Estedad", system-ui, sans-serif; fill: #9b96c7; }
.pity-z1 { animation: pity-drift 3s ease-out infinite; }
.pity-z2 { animation: pity-drift 3s ease-out 0.6s infinite; }
.pity-z3 { animation: pity-drift 3s ease-out 1.2s infinite; }
@keyframes pity-drift {
  0%   { opacity: 0; transform: translate(0, 6px) scale(0.7); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -14px) scale(1.15); }
}

/* ---- think: tilted, thought bubbles -------------------------------------- */
.pity--think .pity-head { animation: pity-ponder 4s ease-in-out infinite; }
@keyframes pity-ponder {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(-3deg); }
}
.pity--think .pity-think { display: block; }
.pity-dot { fill: #b9b2f0; }
.pity-dot1 { animation: pity-pop 1.8s ease-in-out infinite; }
.pity-dot2 { animation: pity-pop 1.8s ease-in-out 0.22s infinite; }
.pity-dot3 { animation: pity-pop 1.8s ease-in-out 0.44s infinite; }
@keyframes pity-pop {
  0%, 100% { opacity: 0.25; transform: scale(0.75); }
  50%      { opacity: 1; transform: scale(1); }
}

/* ---- climb: stretched upward --------------------------------------------- */
.pity--climb .pity-all { animation: pity-reach 2.6s ease-in-out infinite; }
@keyframes pity-reach {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-7px) scaleY(1.05); }
}

/* ---- trophy -------------------------------------------------------------- */
.pity--trophy .pity-cup { display: block; animation: pity-hoist 2.8s ease-in-out infinite; }
@keyframes pity-hoist {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-5px) rotate(4deg); }
}
.pity--trophy .pity-sparks { display: block; }

/* ---- placements ---------------------------------------------------------- */
.pity-hero { --pity-size: clamp(120px, 22vw, 190px); flex: none; }
.pity-spot { display: grid; place-items: center; margin-block: 1.2rem; }
.pity-spot .pity { --pity-size: clamp(140px, 34vw, 220px); }

/* Pity greets you from the corner of an empty state. */
.pity-empty { --pity-size: 128px; margin-inline: auto; display: block; }

/* She peeks over the top edge of a card. */
.pity-peek {
  --pity-size: 76px;
  position: absolute;
  inset-block-start: -46px;
  inset-inline-end: 14px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pity *,
  .pity {
    animation: none !important;
    transition: none !important;
  }
  /* Sleep still needs shut eyes; without the animation the lid must be set. */
  .pity--sleep .pity-lid { transform: scaleY(1); }
  .pity-tongue { opacity: 1; transform: none; }
}

/* =========================================================================
   Pity's placements around the app
   ========================================================================= */

/* Hero — she stands beside the headline and waves. */
.hero-mascot {
  flex: none;
  display: grid;
  place-items: center;
}
.hero-mascot .pity { --pity-size: clamp(110px, 20vw, 180px); }

/* On a phone the hero card fills the width and she ends up behind the
   buttons with only her edges showing, which reads as a rendering fault
   rather than a mascot. She is decoration here, so she steps out.
   This lives in pity.css deliberately: main.css already hides her at 700px,
   but this file loads afterwards and re-declares display, so the hide has to
   sit beside the declaration it is overriding. */
@media (max-width: 720px) {
  .hero-mascot { display: none; }
}

/* 404 — question marks float up around a lost Pity. */
.pity-lost { position: relative; display: inline-grid; place-items: center; }
.pity-qmark {
  position: absolute;
  font-weight: 900;
  color: var(--brand);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.pity-qmark--1 { inset-block-start: 6%;  inset-inline-end: 2%;  font-size: 1.5rem; animation: pity-float 3.2s ease-in-out infinite; }
.pity-qmark--2 { inset-block-start: -4%; inset-inline-end: 18%; font-size: 2.1rem; animation: pity-float 3.2s ease-in-out 0.5s infinite; }
.pity-qmark--3 { inset-block-start: 14%; inset-inline-end: 30%; font-size: 1.2rem; animation: pity-float 3.2s ease-in-out 1s infinite; }
@keyframes pity-float {
  0%, 100% { opacity: 0; transform: translateY(6px) rotate(-8deg) scale(0.8); }
  45%      { opacity: 0.9; transform: translateY(-8px) rotate(6deg) scale(1); }
  75%      { opacity: 0; transform: translateY(-18px) rotate(12deg) scale(1.05); }
}

/* Empty states already centre their contents; just give Pity some room. */
.empty .pity { margin-inline: auto; }
.empty--pity h1 { margin-block-start: 0.4rem; }

/* Certificate-locked: Pity climbing toward the medal she hasn't earned yet. */
.cert-locked .pity { margin-inline: auto; }

/* Helper bot — Pity replaces the robot emoji in the FAB and the panel head. */
.robot-fab-pity { display: grid; place-items: center; line-height: 0; }
.robot-fab-pity .pity { --pity-size: 44px; }
.robot-head-pity { display: grid; place-items: center; line-height: 0; flex: none; }
.robot-head-pity .pity { --pity-size: 38px; }

/* Celebration — she bursts in with the card. */
.celebrate-pity { display: grid; place-items: center; margin-block-end: 0.2rem; }
.celebrate-pity .pity { --pity-size: 150px; }

@media (prefers-reduced-motion: reduce) {
  .pity-qmark { animation: none !important; opacity: 0.8; }
}