/* ============================================================================
   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'); }

.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; }

.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;
  }
}