/* ============================================================================
   claudia-poseology.css
   Scene staging for The Japanese Gengo mascot cast.
   Keeps the original mascot sheets intact and adds versioned poseology sheets.
   ========================================================================== */

.mascot--tsuki-poseology { background-image: url('../assets/mascots/tsuki_poseology_v1.png'); }
.mascot--selene-poseology { background-image: url('../assets/mascots/selene_poseology_v1.png'); }
.mascot--marina-poseology { background-image: url('../assets/mascots/marina_poseology_v1.png'); }
.mascot--sol-poseology { background-image: url('../assets/mascots/sol_poseology_v1.png'); }
.mascot--fuku-poseology { background-image: url('../assets/mascots/fuku_poseology_v1.png'); }

.mascot--tsuki-poseology-v2 { background-image: url('../assets/mascots/tsuki_poseology_v2.png'); }
.mascot--selene-poseology-v2 { background-image: url('../assets/mascots/selene_poseology_v2.png'); }
.mascot--marina-poseology-v2 { background-image: url('../assets/mascots/marina_poseology_v2.png'); }
.mascot--sol-poseology-v2 { background-image: url('../assets/mascots/sol_poseology_v2.png'); }
.mascot--fuku-poseology-v2 { background-image: url('../assets/mascots/fuku_poseology_v2.png'); }

.mascot--tsuki-poseology-v3 { background-image: url('../assets/mascots/tsuki_poseology_v3.png'); }
.mascot--selene-poseology-v3 { background-image: url('../assets/mascots/selene_poseology_v3.png'); }
.mascot--marina-poseology-v3 { background-image: url('../assets/mascots/marina_poseology_v3.png'); }
.mascot--sol-poseology-v3 { background-image: url('../assets/mascots/sol_poseology_v3.png'); }
.mascot--fuku-poseology-v3 { background-image: url('../assets/mascots/fuku_poseology_v3.png'); }

.pose-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: var(--pose-h, 132px);
  isolation: isolate;
  overflow: visible;
}

.pose-stage .mascot {
  image-rendering: auto;
}

.pose-actor {
  position: absolute;
  left: 50%;
  bottom: var(--pose-floor, 0);
  transform-origin: 50% 100%;
  transform:
    translate(var(--pose-x, 0), var(--pose-y, 0))
    scale(var(--pose-scale, 1))
    rotate(var(--pose-rotate, 0deg));
  z-index: var(--pose-z, 1);
  filter: drop-shadow(0 5px 4px rgba(45,41,38,.14));
}

.pose-actor.is-flipped {
  transform:
    translate(var(--pose-x, 0), var(--pose-y, 0))
    scaleX(-1)
    scale(var(--pose-scale, 1))
    rotate(var(--pose-rotate, 0deg));
}

.pose-focus {
  position: absolute;
  left: 50%;
  top: var(--focus-top, 0);
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
}

.pose-focus--gengo {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(43,76,62,.22);
  background: rgba(255,255,255,.72);
  color: var(--matcha);
  font-family: var(--f-serif-jp);
  font-size: 2.65rem;
  font-weight: 900;
  line-height: 1;
}

.pose-focus--kanji {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--f-serif-jp);
  font-size: 3rem;
  font-weight: 900;
  box-shadow: 5px 5px 0 rgba(51,65,85,.14);
}

.pose-focus--badge {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: #fff8df;
  color: var(--matcha);
  font-family: var(--f-mono);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 3px rgba(199,154,58,.24);
}

.pose-focus--horizon {
  left: 8%;
  right: 8%;
  top: 10px;
  width: auto;
  height: 44px;
  transform: none;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 50% 100%, rgba(254,180,123,.72) 0 22%, transparent 23%),
    linear-gradient(180deg, rgba(255,227,234,.95), rgba(232,237,227,.45));
  border-bottom: 2px solid rgba(199,154,58,.5);
}

.pose-focus--horizon span {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--matcha);
  white-space: nowrap;
}

.pose-focus--talk {
  min-width: 84px;
  padding: 7px 10px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--matcha);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(51,65,85,.14);
}

.pose-focus--sign {
  min-width: 96px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--matcha);
  font-family: var(--f-serif-jp);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 5px 5px 0 rgba(51,65,85,.14);
}

.pose-focus--note {
  width: 86px;
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 2px dashed rgba(51,65,85,.5);
  background: #fffdf7;
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.pose-focus--route {
  left: 10%;
  right: 10%;
  top: 58px;
  width: auto;
  height: 8px;
  transform: none;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    rgba(43,76,62,.78) 0 14px,
    transparent 14px 25px
  );
}

.pose-focus--route::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 16px solid rgba(43,76,62,.78);
  transform: translateY(-50%);
}

.pose--shared-focus .pose-focus { --focus-top: 0; }
.pose--shared-focus .pose-actor--tsuki { --pose-x: -102px; --pose-y: 7px; --pose-scale: .82; --pose-z: 2; }
.pose--shared-focus .pose-actor--selene { --pose-x: -20px; --pose-y: 14px; --pose-scale: .8; --pose-z: 1; }
.pose--shared-focus .pose-actor--marina { --pose-x: 58px; --pose-y: 7px; --pose-scale: .82; --pose-z: 2; }

.pose--study-circle .pose-focus { --focus-top: 7px; }
.pose--study-circle .pose-actor--tsuki { --pose-x: -108px; --pose-y: 8px; --pose-scale: .86; --pose-z: 3; }
.pose--study-circle .pose-actor--selene { --pose-x: -20px; --pose-y: 2px; --pose-scale: .88; --pose-z: 2; }
.pose--study-circle .pose-actor--marina { --pose-x: 68px; --pose-y: 9px; --pose-scale: .86; --pose-z: 3; }

.pose--trio-talk .pose-focus { --focus-top: 14px; }
.pose--trio-talk .pose-actor--tsuki { --pose-x: -128px; --pose-y: 4px; --pose-scale: .94; --pose-z: 3; --pose-rotate: -2deg; }
.pose--trio-talk .pose-actor--selene { --pose-x: -22px; --pose-y: 12px; --pose-scale: .88; --pose-z: 2; }
.pose--trio-talk .pose-actor--marina { --pose-x: 75px; --pose-y: 4px; --pose-scale: .92; --pose-z: 3; --pose-rotate: 2deg; }

.pose--shared-horizon { --pose-h: 126px; }
.pose--shared-horizon .pose-actor--tsuki { --pose-x: -106px; --pose-y: 8px; --pose-scale: .82; --pose-z: 3; }
.pose--shared-horizon .pose-actor--selene { --pose-x: -24px; --pose-y: 5px; --pose-scale: .82; --pose-z: 2; }
.pose--shared-horizon .pose-actor--marina { --pose-x: 60px; --pose-y: 8px; --pose-scale: .82; --pose-z: 3; }

.pose--completion-cluster { --pose-h: 116px; }
.pose--completion-cluster .pose-focus { --focus-top: 5px; }
.pose--completion-cluster .pose-actor--tsuki { --pose-x: -100px; --pose-y: 3px; --pose-scale: .76; --pose-z: 2; }
.pose--completion-cluster .pose-actor--selene { --pose-x: -18px; --pose-y: 12px; --pose-scale: .74; --pose-z: 1; }
.pose--completion-cluster .pose-actor--marina { --pose-x: 56px; --pose-y: 3px; --pose-scale: .76; --pose-z: 2; }

.pose--motion-line { --pose-h: 138px; }
.pose--motion-line .pose-actor--tsuki { --pose-x: -116px; --pose-y: 8px; --pose-scale: .82; --pose-z: 3; }
.pose--motion-line .pose-actor--selene { --pose-x: -28px; --pose-y: 0; --pose-scale: .82; --pose-z: 2; }
.pose--motion-line .pose-actor--marina { --pose-x: 56px; --pose-y: 11px; --pose-scale: .82; --pose-z: 3; }

.pose--sol-guide { --pose-h: 152px; }
.pose--sol-guide .pose-focus { --focus-top: 3px; }
.pose--sol-guide .pose-actor--sol { --pose-x: 20px; --pose-y: 9px; --pose-scale: .96; --pose-z: 3; }
.pose--sol-guide .pose-actor--fuku { --pose-x: 105px; --pose-y: 10px; --pose-scale: .58; --pose-z: 4; }
.pose--sol-guide .pose-actor--tsuki { --pose-x: -132px; --pose-y: 0; --pose-scale: .75; --pose-z: 2; }
.pose--sol-guide .pose-actor--selene { --pose-x: -80px; --pose-y: 12px; --pose-scale: .7; --pose-z: 1; }
.pose--sol-guide .pose-actor--marina { --pose-x: -28px; --pose-y: 2px; --pose-scale: .72; --pose-z: 2; }

.pose--fuku-listening { --pose-h: 132px; }
.pose--fuku-listening .pose-focus { --focus-top: 10px; }
.pose--fuku-listening .pose-actor--sol { --pose-x: -86px; --pose-y: 2px; --pose-scale: .82; --pose-z: 2; }
.pose--fuku-listening .pose-actor--fuku { --pose-x: 34px; --pose-y: 8px; --pose-scale: .72; --pose-z: 3; }
.pose--fuku-listening .pose-actor--selene { --pose-x: 96px; --pose-y: 7px; --pose-scale: .66; --pose-z: 1; }

/* ==== Poseology II — Year Two scene verbs (P11–P16) ==================== */

/* P11 · pair talk — two friends face each other; the casual-speech beat */
.pose--pair-talk { --pose-h: 132px; }
.pose--pair-talk .pose-focus { --focus-top: 6px; }
.pose--pair-talk .pose-actor--a { --pose-x: -96px; --pose-y: 6px; --pose-scale: .9; --pose-z: 2; --pose-rotate: 2deg; }
.pose--pair-talk .pose-actor--b { --pose-x: 22px; --pose-y: 6px; --pose-scale: .9; --pose-z: 2; --pose-rotate: -2deg; }
.pose--pair-talk .pose-actor--b.is-flipped { --pose-rotate: 2deg; }

/* P12 · teach-back — one classmate presents; the growth beat */
.pose--teach-back { --pose-h: 140px; }
.pose--teach-back .pose-focus { --focus-top: 4px; transform: none; left: 18%; }
.pose--teach-back .pose-actor--teacher { --pose-x: -28px; --pose-y: 4px; --pose-scale: .94; --pose-z: 3; }
.pose--teach-back .pose-actor--pupil-1 { --pose-x: 58px; --pose-y: 12px; --pose-scale: .7; --pose-z: 2; }
.pose--teach-back .pose-actor--pupil-2 { --pose-x: 110px; --pose-y: 16px; --pose-scale: .66; --pose-z: 1; }

/* P13 · stroll talk — walking and talking; casual momentum */
.pose--stroll-talk { --pose-h: 140px; }
.pose--stroll-talk .pose-focus { --focus-top: 2px; }
.pose--stroll-talk .pose-actor--tsuki { --pose-x: -124px; --pose-y: 14px; --pose-scale: .8; --pose-z: 3; --pose-rotate: -2deg; }
.pose--stroll-talk .pose-actor--selene { --pose-x: -30px; --pose-y: 6px; --pose-scale: .82; --pose-z: 2; }
.pose--stroll-talk .pose-actor--marina { --pose-x: 58px; --pose-y: 0; --pose-scale: .84; --pose-z: 1; --pose-rotate: 2deg; }

/* P14 · discovery — one inspects the focus card; the new-grammar reveal */
.pose--discovery { --pose-h: 140px; }
.pose--discovery .pose-focus { --focus-top: 10px; transform: none; left: 24%; }
.pose--discovery .pose-actor--finder { --pose-x: -22px; --pose-y: 4px; --pose-scale: .92; --pose-z: 3; --pose-rotate: -3deg; }
.pose--discovery .pose-actor--watch-1 { --pose-x: 56px; --pose-y: 10px; --pose-scale: .74; --pose-z: 2; }
.pose--discovery .pose-actor--watch-2 { --pose-x: 106px; --pose-y: 15px; --pose-scale: .68; --pose-z: 1; }

/* P15 · cheer-up — a slip in the middle, support on both sides; mistake-positive */
.pose--cheer-up { --pose-h: 132px; }
.pose--cheer-up .pose-focus { --focus-top: 2px; }
.pose--cheer-up .pose-actor--slipped { --pose-x: -34px; --pose-y: 12px; --pose-scale: .84; --pose-z: 2; }
.pose--cheer-up .pose-actor--support-1 { --pose-x: -112px; --pose-y: 5px; --pose-scale: .82; --pose-z: 3; --pose-rotate: 3deg; }
.pose--cheer-up .pose-actor--support-2 { --pose-x: 46px; --pose-y: 5px; --pose-scale: .82; --pose-z: 3; --pose-rotate: -3deg; }

/* P16 · year two — the N4 cover lineup: badge held high, trio ready */
.pose--year-two { --pose-h: 150px; }
.pose--year-two .pose-focus { --focus-top: 0; }
.pose--year-two .pose-actor--tsuki { --pose-x: -118px; --pose-y: 6px; --pose-scale: .88; --pose-z: 3; --pose-rotate: -2deg; }
.pose--year-two .pose-actor--selene { --pose-x: -22px; --pose-y: 14px; --pose-scale: .84; --pose-z: 2; }
.pose--year-two .pose-actor--marina { --pose-x: 66px; --pose-y: 6px; --pose-scale: .88; --pose-z: 3; --pose-rotate: 2deg; }

.pose-stage--cover { --pose-h: 162px; max-width: 360px; margin: 18px auto 0; }
.pose-stage--marketing { --pose-h: 148px; min-width: 156px; }
.pose-stage--hero { --pose-h: 150px; max-width: 260px; margin-left: auto; }
.pose-stage--vol-opener { --pose-h: 132px; max-width: 300px; margin: 12px auto 0; }
.pose-stage--diploma { --pose-h: 112px; max-width: 270px; margin: 6px auto 2px; }
.pose-stage--demo { --pose-h: 168px; max-width: 380px; margin: 0 auto; }

@media screen and (max-width: 760px) {
  .pose-stage--hero,
  .pose-stage--marketing {
    margin: 0 auto;
  }
}