/* ============================================================
   B2 CREATE — the chameleon (js/chameleon.js)
   Skin colours are registered custom properties so a palette
   change glides instead of snapping.
   ============================================================ */
@property --cm-c1 { syntax: '<color>'; inherits: true; initial-value: #79a7a1; }
@property --cm-c2 { syntax: '<color>'; inherits: true; initial-value: #eef2ea; }
@property --cm-c3 { syntax: '<color>'; inherits: true; initial-value: #eeb39c; }
@property --cm-c4 { syntax: '<color>'; inherits: true; initial-value: #1f3f3d; }
@property --cm-c5 { syntax: '<color>'; inherits: true; initial-value: #b2cdc5; }
@property --cm-iris { syntax: '<color>'; inherits: true; initial-value: #7fb86f; }
@property --cm-iris2 { syntax: '<color>'; inherits: true; initial-value: #d8eeb4; }

.cm {
  --cm-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --cm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cm-c1: #79a7a1; --cm-c2: #eef2ea; --cm-c3: #eeb39c; --cm-c4: #1f3f3d; --cm-c5: #b2cdc5; --cm-iris: #7fb86f; --cm-iris2: #d8eeb4;
  position: absolute; left: 0; top: 0; z-index: 58; width: 132px; height: 120px; display: none; pointer-events: none;
  transition: --cm-c1 1.3s var(--cm-ease), --cm-c2 1.3s var(--cm-ease), --cm-c3 1.3s var(--cm-ease), --cm-c4 1.3s var(--cm-ease), --cm-c5 1.3s var(--cm-ease), --cm-iris 1.3s var(--cm-ease), --cm-iris2 1.3s var(--cm-ease);
}
.cm.is-on { display: block; }
.cm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cm-fig { position: absolute; inset: 0; isolation: isolate; }
.cm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; }
.cm.pose-over .cm-over, .cm.pose-walk .cm-walk { display: block; }
.cm.face-left .cm-walk { transform: scaleX(-1); }

/* skin */
.cm-tex { mix-blend-mode: overlay; opacity: 0.62; }
.cm-fuzz { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 2.2; stroke-dasharray: 0.3 2.3; stroke-linecap: round; }
.cm-casque { fill: var(--cm-c4); opacity: 0.16; }
.cm-jaw { fill: var(--cm-c2); opacity: 0.5; }
.cm-bumps { fill: none; stroke: var(--cm-c3); stroke-width: 6.6; stroke-linecap: round; stroke-dasharray: 0.01 5.6; }
.cm-bumps.crest { stroke-width: 7.4; stroke-dasharray: 0.01 7.4; }
.cm-ridge { fill: none; stroke: var(--cm-c3); stroke-width: 4.6; stroke-linecap: round; opacity: 0.55; }
.cm-bumps.sm { stroke-width: 4.6; stroke-dasharray: 0.01 6.2; }
.cm-bumps.chin { stroke: var(--cm-c2); stroke-width: 4; stroke-dasharray: 0.01 7; opacity: 0.7; }
.cm-bumps.spine { stroke-width: 6.4; stroke-dasharray: 0.01 7.6; }
.cm-bumps.tail { stroke-width: 4.6; stroke-dasharray: 0.01 6.4; opacity: 0.9; }
.cm-crest, .cm-pad { fill: var(--cm-c3); }
.cm-nostril { fill: var(--cm-c4); opacity: 0.75; }
.cm-mouth { fill: none; stroke: var(--cm-c4); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.cm-mouth.thin { stroke-width: 1.6; opacity: 0.6; }
.cm-lip { fill: none; stroke: var(--cm-c3); stroke-width: 5.5; stroke-linecap: round; opacity: 0.7; }
.cm-lip.thin { stroke-width: 3.6; }
.cm-stripe { fill: none; stroke: var(--cm-c2); stroke-width: 6; opacity: 0.5; stroke-linecap: round; }
.cm-spot { fill: var(--cm-c3); opacity: 0.6; }
.cm-tail { fill: none; stroke: var(--cm-c1); stroke-linecap: round; }
.cm-limb { fill: none; stroke: var(--cm-c1); stroke-linecap: round; stroke-linejoin: round; }
.cm-limb.far-shade { stroke: var(--cm-c4); opacity: 0.42; }
.cm-limb.hi, .cm-tail.hi { stroke: var(--cm-c5); opacity: 0.75; }
.cm-toe { fill: var(--cm-c1); }
.cm-shadow { fill: #051414; opacity: 0.14; }
.cm-ao { fill: var(--cm-c4); opacity: 0.2; }
.cm-shadow.walk { opacity: 0; transition: opacity 0.4s; }
.cm.is-in .cm-shadow.walk { opacity: 0.1; }

/* eyes */
.cm-ring { fill: none; stroke: var(--cm-c4); stroke-width: 1.1; stroke-dasharray: 1.3 2.5; opacity: 0.3; }
.cm-socket { fill: var(--cm-c4); opacity: 0.4; }
.cm-fibre { fill: none; stroke: var(--cm-iris2); stroke-dasharray: 0.5 1.3; opacity: 0.45; }
.cm-limbal { fill: none; stroke: var(--cm-c4); stroke-width: 1.4; opacity: 0.55; }
.cm-pupil { fill: #0a0f10; }
.cm-spec { fill: #fff; opacity: 0.95; } .cm-spec.s2 { opacity: 0.7; }
.cm-refl { fill: none; stroke: #fff; stroke-width: 1.4; opacity: 0.35; stroke-linecap: round; }
.cm-lidline { fill: none; stroke: var(--cm-c4); stroke-width: 1.4; opacity: 0.5; }
.cm-lid { transform: scaleY(0.16); transform-box: fill-box; transform-origin: 50% 0%; transition: transform 0.09s ease-in; }
.cm.is-blink .cm-lid { transform: scaleY(1); }
.cm.is-happy .cm-lid { transform: scaleY(0.52); transition-duration: 0.25s; }

/* appear: the head rises from behind the edge, the hands grip first */
.cm .cm-rise { transform: translateY(var(--cm-sink, 130px)); transition: transform 0.75s var(--cm-spring); }
.cm-over { --cm-sink: 134px; } .cm-walk { --cm-sink: 112px; }
.cm.is-in .cm-rise { transform: none; transition-delay: 0.12s; }
.cm .cm-hands { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s, transform 0.45s var(--cm-spring); transition-delay: 0.25s; }
.cm.is-in .cm-hands { opacity: 1; transform: none; transition-delay: 0s; }
.cm-tilt { transform: rotate(var(--cm-tilt, 0deg)); transform-origin: 110px 150px; transition: transform 1.4s var(--cm-ease); }
.cm.is-happy .cm-tilt { transform: rotate(var(--cm-tilt, 0deg)) translateY(-4px); transition: transform 0.4s var(--cm-spring); }
.cm.is-shift .cm-fig { animation: cm-shift 1.3s var(--cm-ease); }
@keyframes cm-shift { 30% { filter: saturate(1.35) brightness(1.07); } }

/* walking */
.cm-leg { transform-box: view-box; }
.cm.is-walking .cm-leg.la { animation: cm-step 0.62s ease-in-out infinite alternate; }
.cm.is-walking .cm-leg.lb { animation: cm-step 0.62s ease-in-out infinite alternate-reverse; }
@keyframes cm-step { from { transform: rotate(-15deg); } to { transform: rotate(13deg); } }
.cm.is-walking .cm-bob { animation: cm-bob 0.31s ease-in-out infinite alternate; }
@keyframes cm-bob { to { transform: translateY(-1.6px); } }

/* tongue */
.cm-tongue-line { fill: none; stroke: #e98d99; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cm-tongue-tip { fill: #e98d99; opacity: 0; transform: translate(-90px, 9px); }
.cm.is-tongue .cm-tongue-line { animation: cm-tongue 0.52s ease-out; }
.cm.is-tongue .cm-tongue-tip { animation: cm-tip 0.52s ease-out; }
@keyframes cm-tongue { 0% { stroke-dashoffset: 1; } 38% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes cm-tip { 0% { opacity: 0; transform: translate(-90px, 9px); } 38% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-90px, 9px); } }

/* tap target over the head */
.cm-tap { position: absolute; left: 8%; top: 8%; width: 84%; height: 70%; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 46%; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.cm.pose-walk .cm-tap { left: 4%; top: 22%; width: 94%; height: 70%; border-radius: 40%; }
.cm:not(.is-in) .cm-tap { pointer-events: none; }
.cm-tap:focus-visible { outline: 2px solid #051414; outline-offset: 3px; }

/* hello bubble */
.cm-bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; width: min(250px, 78vw); box-sizing: border-box; padding: 14px 16px 12px; border-radius: 18px; background: #fff; color: #051414; box-shadow: 0 22px 50px -24px rgba(5, 20, 20, 0.45), 0 0 0 1px rgba(5, 20, 20, 0.06); font-family: "Poppins", system-ui, sans-serif; text-align: start; opacity: 0; transform: translateX(calc(-50% + var(--cm-bx, 0px))) translateY(6px) scale(0.96); transform-origin: 50% 100%; transition: opacity 0.3s, transform 0.45s var(--cm-spring); pointer-events: none; }
.cm-bubble[hidden] { display: none; }
.cm-bubble.below { bottom: auto; top: calc(100% + 8px); transform-origin: 50% 0%; }
.cm-bubble.is-open { opacity: 1; transform: translateX(calc(-50% + var(--cm-bx, 0px))) translateY(0) scale(1); pointer-events: auto; }
.cm-b-k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: "Montserrat", "Poppins", sans-serif; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: #3d4747; }
.cm-b-sw { display: inline-flex; gap: 3px; } .cm-b-sw i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(5, 20, 20, 0.12); }
.cm-b-t { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #051414; }
.cm-b-a { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-b-go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #051414; color: #f3efe7; font-size: 13px; font-weight: 600; text-decoration: none; }
.cm-b-x { min-height: 40px; padding: 0 10px; border: 0; background: none; color: #7b8585; font-family: "Montserrat", "Poppins", sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
html.is-ar .cm-b-k, html.is-ar .cm-b-x, html.is-ar .cm-b-t, html.is-ar .cm-b-go { font-family: "Noto Kufi Arabic", "Poppins", sans-serif; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) { .cm, .cm * { transition: none !important; animation: none !important; } }