/**
 * Chorca Avatar Engine — Complete Micro-Animations & Builder UI Stylesheet
 * 100% Fidelity Migration of all Chorca SVG keyframe animations & responsive builder layout.
 */

@keyframes chorcaBreathe {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2.5px); }
}

.chorca-bust {
  transform-origin: bottom center;
  animation: chorcaBreathe 4.5s ease-in-out infinite;
}

.chorca-head {
  transform-origin: 180px 220px;
  animation: chorcaBreathe 4.5s ease-in-out infinite 0.15s;
}

/* Hanging Durag & Turban Left Tail Sway (hat_4) */
.chorca-hat-tail-sway {
  transform-box: fill-box;
  transform-origin: top right;
  will-change: transform;
  animation: chorca-hat-tail-pendulum 4.6s infinite ease-in-out;
}

@keyframes chorca-hat-tail-pendulum {
  0%, 72%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(1.6deg); }
}

/* =========================================================
   1. EYE BLINK & PUPIL DART MICRO-ANIMATIONS
   ========================================================= */
.chorca-eyes-blink-wrap,
.chorca-eyes-group,
.avatar-eyes-group,
.chorca-eyes,
.chorca-eye-blink {
  transform-origin: 100px 108px;
  will-change: transform, opacity;
  animation: chorca-eye-blink 5.8s infinite ease-in-out;
}

.chorca-pupil-dart,
.chorca-pupil {
  transform-origin: 100px 108px;
  will-change: transform;
  animation: chorca-pupil-glance 5.4s infinite ease-in-out;
}

.chorca-hat-crown,
.chorca-hat-tail-sway,
.chorca-glasses-group,
.chorca-brows-group,
.chorca-brow-sassy-right,
.chorca-lip-smirk,
.chorca-lip-smile,
.chorca-lip-laugh,
.chorca-tongue-bob,
.chorca-tongue-wag,
.chorca-lip-pout,
.chorca-lip-shine,
.chorca-lip-grin,
.chorca-lip-ooh,
.chorca-lip-umm {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
}

/* Crisp Single Blink Cycle (Every ~5.8s, hides white sclera at closure peak so zero white slit) */
@keyframes chorca-eye-blink {
  0%, 94%, 99.5%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  95.4%, 98.2% {
    opacity: 1;
  }
  96.8% {
    transform: scaleY(0.1);
    opacity: 0;
  }
}

/* Subtle Pupil Side-to-Side Glance */
@keyframes chorca-pupil-glance {
  0%, 28%, 72%, 100% {
    transform: translate(0px, 0px);
  }
  36%, 48% {
    transform: translate(2.2px, -0.5px);
  }
  56%, 66% {
    transform: translate(-2px, -0.3px);
  }
}

/* =========================================================
   2. BALANCED EYEBROW MICRO-ANIMATIONS (80% Rest, 20% Subtle Lift)
   ========================================================= */
.chorca-brows-group,
.avatar-brows-group {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-brow-lift 4.4s infinite ease-in-out;
}

.chorca-brow-sassy-right,
.chorca-brow-raised {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-sassy-perk 4.4s infinite ease-in-out;
}

@keyframes chorca-brow-lift {
  0%, 78%, 98%, 100% { transform: translateY(0px); }
  88% { transform: translateY(-1.1px); }
}

@keyframes chorca-sassy-perk {
  0%, 76%, 98%, 100% { transform: translateY(0px) rotate(0deg); }
  87% { transform: translateY(-1.3px) rotate(1.2deg); }
}

/* =========================================================
   3. BALANCED LIP & TONGUE MICRO-ANIMATIONS (Short & Subtle)
   ========================================================= */
.chorca-lip-smirk {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-smirk-perk 4.2s infinite ease-in-out;
}

.chorca-lip-smile,
.avatar-mouth-group {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-smile-pulse 4.4s infinite ease-in-out;
}

.chorca-lip-laugh {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-laugh-chuckle 4.2s infinite ease-in-out;
}

.chorca-tongue-bob {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-tongue-bounce 4.2s infinite ease-in-out;
}

.chorca-tongue-wag {
  transform-box: fill-box;
  transform-origin: top center;
  will-change: transform;
  animation: chorca-tongue-wiggle 4s infinite ease-in-out;
}

.chorca-lip-pout {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-pout-breathe 4.4s infinite ease-in-out;
}

.chorca-lip-shine {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-gloss-shimmer 4.4s infinite ease-in-out;
}

.chorca-lip-grin {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-grin-beam 4.5s infinite ease-in-out;
}

.chorca-lip-ooh {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-ooh-breathe 4.4s infinite ease-in-out;
}

.chorca-lip-umm {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  animation: chorca-umm-twitch 4.6s infinite ease-in-out;
}

@keyframes chorca-smirk-perk {
  0%, 78%, 98%, 100% { transform: rotate(0deg) translateY(0px) scaleX(1); }
  88% { transform: rotate(-1.1deg) translateY(-0.5px) scaleX(1.02); }
}

@keyframes chorca-smile-pulse {
  0%, 78%, 98%, 100% { transform: scaleX(1) translateY(0px); }
  88% { transform: scaleX(1.022) translateY(-0.4px); }
}

@keyframes chorca-laugh-chuckle {
  0%, 76%, 98%, 100% { transform: scale(1, 1); }
  84% { transform: scale(1.015, 1.035); }
  91% { transform: scale(1, 0.99); }
}

@keyframes chorca-tongue-bounce {
  0%, 76%, 98%, 100% { transform: translateY(0px); }
  86% { transform: translateY(-0.9px); }
}

@keyframes chorca-tongue-wiggle {
  0%, 76%, 98%, 100% { transform: rotate(0deg); }
  84% { transform: rotate(-3deg); }
  91% { transform: rotate(2.5deg); }
}

@keyframes chorca-pout-breathe {
  0%, 78%, 98%, 100% { transform: scale(1, 1); }
  88% { transform: scale(1.02, 1.03); }
}

@keyframes chorca-gloss-shimmer {
  0%, 76%, 98%, 100% { transform: translateX(0px); opacity: 0.65; }
  88% { transform: translateX(0.8px); opacity: 0.9; }
}

@keyframes chorca-grin-beam {
  0%, 78%, 98%, 100% { transform: scale(1, 1); }
  88% { transform: scale(1.02, 1.015); }
}

@keyframes chorca-ooh-breathe {
  0%, 78%, 98%, 100% { transform: scale(1, 1); }
  88% { transform: scale(1.035, 1.04); }
}

@keyframes chorca-umm-twitch {
  0%, 80%, 98%, 100% { transform: translateX(0px) rotate(0deg); }
  89% { transform: translateX(0.8px) rotate(-0.7deg); }
}

/* =========================================================
   4. CHORCA BODY MICRO-ANIMATION
   ========================================================= */
.avatar-body-group {
  transform-origin: 100px 240px;
  animation: chorca-body-breathe 6s infinite ease-in-out;
}

@keyframes chorca-body-breathe {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.012) scaleX(1.008); }
}

/* =========================================================
   5. CHORCA HAIR & FACIAL HAIR MICRO-ANIMATIONS
   ========================================================= */
.chorca-hair-swoop {
  transform-origin: 100px 56px;
  animation: chorca-breeze-swoop 4.8s infinite ease-in-out;
}

.chorca-curtain-left {
  transform-origin: 100px 48px;
  animation: chorca-curtain-l 4.5s infinite ease-in-out;
}

.chorca-curtain-right {
  transform-origin: 100px 48px;
  animation: chorca-curtain-r 4.5s infinite ease-in-out;
}

.chorca-hair-afro {
  transform-origin: 100px 75px;
  animation: chorca-afro-puff 5.2s infinite ease-in-out;
}

.chorca-hair-tuft {
  transform-origin: 105px 50px;
  animation: chorca-tuft-perk 3.8s infinite ease-in-out;
}

.chorca-hair-spikes {
  transform-origin: 100px 58px;
  animation: chorca-spikes-pulse 4.2s infinite ease-in-out;
}

.chorca-hair-curl {
  transform-origin: 105px 55px;
  animation: chorca-curl-spring 3.4s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chorca-breeze-swoop {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  50% { transform: rotate(-1.1deg) translateY(-1px); }
}

@keyframes chorca-curtain-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.4deg) translateY(-0.8px); }
}

@keyframes chorca-curtain-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.4deg) translateY(-0.8px); }
}

@keyframes chorca-afro-puff {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.018, 1.024); }
}

@keyframes chorca-tuft-perk {
  0%, 70%, 100% { transform: rotate(0deg) scale(1); }
  82% { transform: rotate(2.4deg) scale(1.03); }
}

@keyframes chorca-spikes-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.028); }
}

@keyframes chorca-curl-spring {
  0%, 65%, 100% { transform: rotate(0deg) scaleY(1); }
  78% { transform: rotate(-5.5deg) scaleY(1.06); }
  88% { transform: rotate(3.2deg) scaleY(0.96); }
}

/* Long straight & peekaboo back curtains (hair_13, hair_19, hair_21) */
.chorca-hair-curtain-back {
  transform-origin: 100px 60px;
  animation: chorca-curtain-pendulum 5.2s infinite ease-in-out;
}

/* Voluminous wavy clouds (hair_14, hair_17) */
.chorca-hair-waves-back {
  transform-origin: 100px 65px;
  animation: chorca-waves-breathe 4.8s infinite ease-in-out;
}

/* Loose right-cheek curly face tendril (hair_14, hair_15) */
.chorca-hair-tendril {
  transform-origin: 134px 52px;
  animation: chorca-tendril-sway 3.6s infinite ease-in-out;
}

/* High curly pineapple updo bun (hair_15) */
.chorca-hair-bun {
  transform-origin: 105px 52px;
  animation: chorca-bun-bobble 4.2s infinite ease-in-out;
}

/* High arched fountain pigtails (hair_18) */
.chorca-pigtail-left {
  transform-origin: 44px 62px;
  animation: chorca-pigtail-l 3.8s infinite ease-in-out;
}

.chorca-pigtail-right {
  transform-origin: 156px 62px;
  animation: chorca-pigtail-r 3.8s infinite ease-in-out;
}

/* Asymmetric peekaboo curtain (hair_19) & heavy emo bang (hair_21) */
.chorca-hair-peekaboo,
.chorca-hair-emo-bang {
  transform-origin: 80px 48px;
  animation: chorca-bang-float 4.6s infinite ease-in-out;
}

/* Flared wing bob (hair_20) */
.chorca-hair-bob-flare {
  transform-origin: 100px 66px;
  animation: chorca-bob-flare 4.5s infinite ease-in-out;
}

/* Hijab gentle drape breathing (hair_16) */
.chorca-hijab-drape {
  transform-origin: 100px 110px;
  animation: chorca-hijab-breathe 5.5s infinite ease-in-out;
}

/* Shaggy Mullet back wings flare (hair_33) */
.chorca-hair-mullet-back {
  transform-origin: 100px 104px;
  animation: chorca-mullet-flare 4.4s infinite ease-in-out;
}

/* Heavy diagonal side-shaved swoop (hair_34, hair_35) */
.chorca-hair-emo-swoop {
  transform-origin: 90px 50px;
  animation: chorca-emo-swoop-sway 4.6s infinite ease-in-out;
}

.chorca-mustache-twitch {
  transform-origin: 100px 134px;
  animation: chorca-stache-wiggle 5.2s infinite ease-in-out;
}

.chorca-beard-breathe {
  transform-origin: 100px 134px;
  animation: chorca-beard-idle 5s infinite ease-in-out;
}

.chorca-goatee-perk {
  transform-origin: 100px 168px;
  animation: chorca-goatee-bounce 5s infinite ease-in-out;
}

@keyframes chorca-stache-wiggle {
  0%, 45%, 100% { transform: rotate(0deg) scale(1); }
  52% { transform: rotate(-1.5deg) scale(1.02); }
  60% { transform: rotate(1.2deg) scale(1.02); }
}

@keyframes chorca-beard-idle {
  0%, 45%, 100% { transform: scale(1, 1); }
  55%, 70% { transform: scale(1.012, 0.99); }
}

@keyframes chorca-goatee-bounce {
  0%, 45%, 100% { transform: translateY(0px); }
  55%, 70% { transform: translateY(1px); }
}

@keyframes chorca-mullet-flare {
  0%, 100% { transform: scaleX(1) rotate(0deg); }
  50% { transform: scaleX(1.025) rotate(0.6deg); }
}

@keyframes chorca-emo-swoop-sway {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  50% { transform: rotate(1.4deg) translateY(-1.2px); }
}

@keyframes chorca-curtain-pendulum {
  0%, 100% { transform: rotate(0deg) scaleX(1); }
  50% { transform: rotate(0.8deg) scaleX(1.012); }
}

@keyframes chorca-waves-breathe {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  50% { transform: scale(1.018, 1.01) rotate(-0.7deg); }
}

@keyframes chorca-tendril-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3.2deg) translateX(1px); }
}

@keyframes chorca-bun-bobble {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-1.8px) rotate(1.5deg); }
}

@keyframes chorca-pigtail-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3.5deg) translateY(-1px); }
}

@keyframes chorca-pigtail-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3.5deg) translateY(-1px); }
}

@keyframes chorca-bang-float {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  50% { transform: rotate(-1.2deg) translateY(-1px); }
}

@keyframes chorca-bob-flare {
  0%, 100% { transform: scaleX(1) translateY(0px); }
  50% { transform: scaleX(1.022) translateY(-1px); }
}

@keyframes chorca-hijab-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.008, 1.005); }
}

@media (prefers-reduced-motion: reduce) {
  .chorca-eyes-blink-wrap,
  .chorca-eyes-group,
  .chorca-eye-blink,
  .chorca-pupil-dart,
  .avatar-body-group,
  .chorca-bust,
  .chorca-head,
  .avatar-eyes-group,
  .chorca-eyes,
  .chorca-pupil,
  .chorca-sparkle-star,
  .chorca-heart-eye,
  .chorca-brows-group,
  .avatar-brows-group,
  .chorca-brow-sassy-right,
  .chorca-brow-raised,
  .avatar-mouth-group,
  .chorca-lip-smirk,
  .chorca-lip-smile,
  .chorca-lip-laugh,
  .chorca-tongue-bob,
  .chorca-tongue-wag,
  .chorca-lip-pout,
  .chorca-lip-shine,
  .chorca-lip-grin,
  .chorca-lip-ooh,
  .chorca-lip-umm,
  .avatar-hair-group,
  .avatar-hair-back,
  .avatar-hair-front,
  .chorca-hair-swoop,
  .chorca-curtain-left,
  .chorca-curtain-right,
  .chorca-hair-afro,
  .chorca-hair-tuft,
  .chorca-hair-spikes,
  .chorca-hair-curl,
  .chorca-hair-curtain-back,
  .chorca-hair-waves-back,
  .chorca-hair-tendril,
  .chorca-hair-bun,
  .chorca-pigtail-left,
  .chorca-pigtail-right,
  .chorca-hair-peekaboo,
  .chorca-hair-emo-bang,
  .chorca-hair-bob-flare,
  .chorca-hijab-drape,
  .chorca-hair-mullet-back,
  .chorca-hair-emo-swoop,
  .chorca-hat-crown,
  .chorca-hat-tail-sway,
  .chorca-glasses-group,
  .chorca-mustache-twitch,
  .chorca-beard-breathe,
  .chorca-goatee-perk {
    animation: none !important;
  }
}

/* =========================================================
   6. SHORTCODE AVATAR BUILDER UI STYLES ([chorca_avatar_builder])
   ========================================================= */
.chorca-avatar-builder-root {
  max-width: 1024px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
  color: #111827;
}

.chorca-avatar-builder-card {
  display: flex;
  flex-direction: row;
  height: 580px;
  max-height: 580px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.chorca-avatar-preview-pane {
  width: 50%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-right: 1px solid #e5e7eb;
  overflow: hidden;
  position: relative;
}

.chorca-avatar-options-pane {
  width: 50%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
}

.chorca-avatar-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f4f6;
  padding: 0 12px;
  overflow-x: auto;
  flex-shrink: 0;
}

.chorca-avatar-tab-btn {
  flex: 1;
  min-width: 48px;
  padding: 14px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-weight: 700;
  font-size: 13px;
}

.chorca-avatar-tab-btn.is-active {
  color: #1cb0f6;
}

.chorca-avatar-tab-btn.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  background: #1cb0f6;
  border-radius: 999px 999px 0 0;
}

.chorca-avatar-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.chorca-avatar-swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  gap: 10px;
  margin-bottom: 20px;
}

.chorca-avatar-swatch-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.chorca-avatar-swatch-btn.is-selected {
  border-color: #1cb0f6;
  box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.35);
  transform: scale(1.06);
}

.chorca-avatar-part-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.chorca-avatar-part-btn {
  height: 112px;
  border-radius: 16px;
  padding: 8px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.15s ease;
}

.chorca-avatar-part-btn.is-selected {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.chorca-avatar-save-bar {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

.chorca-avatar-done-btn {
  background: #1cb0f6;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  padding: 12px 28px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 0 #1899d6;
  transition: transform 0.1s ease;
}

.chorca-avatar-done-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1899d6;
}

@media (max-width: 768px) {
  .chorca-avatar-builder-card {
    flex-direction: column;
    height: calc(100dvh - 60px);
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .chorca-avatar-preview-pane {
    width: 100%;
    height: 240px;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .chorca-avatar-options-pane {
    width: 100%;
  }
}