/* ==========================================================================
   The CareHub - logo replay (Variant B)

   Scoped stylesheet for the inline copy of the mark. Every selector is
   namespaced .chlm-* and every rule sits under .chlm, because an inline
   SVG's own <style> element applies to the WHOLE document - the source
   file's class names (.top, .left, .right, .bottom) would collide with
   Bootstrap, which this theme uses. The JS strips that <style> and relies
   on this file instead.

   At rest the mark is the resolved green lock-up. Motion runs only while
   .chlm--play is present, so a replay is: remove class, reflow, re-add.
   ========================================================================== */

.chlm {
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  vertical-align: middle;
}

.chlm svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --- resting state -------------------------------------------------------- */
.chlm .chlm-face path { fill: #82c341; }   /* PMS 368 C */
.chlm .chlm-depth     { opacity: 0; }
.chlm .chlm-depth path{ fill: #095361; }   /* PMS 5473 C */
.chlm .chlm-sheen     { opacity: 0; }
.chlm .chlm-word      { fill: #000000; }

/* Pivot on the vector centroid, per the brand animation rule. */
.chlm .chlm-m,
.chlm .chlm-mi {
  transform-box: view-box;
  transform-origin: 16.895px 16.875px;
}

/* --- per-arm entry colours ----------------------------------------------- */
.chlm .chlm-top    { --from: #00b2cf; --i: 0; }  /* PMS 3125 C */
.chlm .chlm-right  { --from: #e31d93; --i: 1; }  /* PMS 225 C  */
.chlm .chlm-bottom { --from: #fbad18; --i: 2; }  /* PMS 137 C  */
.chlm .chlm-left   { --from: #592989; --i: 3; }  /* PMS 7680 C */

/* --- Variant B: Card Tumble ---------------------------------------------- */
.chlm--play .chlm-m {
  animation: chlm-tumble 1150ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes chlm-tumble {
  0%   { opacity: 0; transform: perspective(150px) rotateY(-108deg) scale(0.86); }
  16%  { opacity: 1; }
  74%  { transform: perspective(150px) rotateY(10deg) scale(1); }
  100% { opacity: 1; transform: perspective(150px) rotateY(0deg) scale(1); }
}

.chlm--play .chlm-face path {
  animation: chlm-tint 920ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes chlm-tint {
  0%, 42% { fill: var(--from); }
  100%    { fill: #82c341; }
}

.chlm--play .chlm-depth {
  animation: chlm-depth 1150ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes chlm-depth {
  0%   { opacity: 0.6; transform: translate(2.6px, 0px); }
  70%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translate(0px, 0px); }
}

.chlm--play .chlm-sheen {
  animation: chlm-sheen 1035ms cubic-bezier(0.25, 1, 0.5, 1) 207ms both;
}
@keyframes chlm-sheen {
  0%   { opacity: 0;    transform: translateX(-46px); }
  40%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateX(46px); }
}

.chlm--play .chlm-word {
  animation: chlm-word 805ms cubic-bezier(0.25, 1, 0.5, 1) 483ms both;
}
@keyframes chlm-word {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 -4% 0 0); }
}

/* --- accessibility -------------------------------------------------------- */
/* The script already refuses to mount under reduced-motion; this is the
   belt-and-braces layer in case the preference changes after mount. */
@media (prefers-reduced-motion: reduce) {
  .chlm--play .chlm-m,
  .chlm--play .chlm-face path,
  .chlm--play .chlm-depth,
  .chlm--play .chlm-sheen,
  .chlm--play .chlm-word { animation: none !important; }
  .chlm .chlm-m     { opacity: 1; transform: none; }
  .chlm .chlm-word  { opacity: 1; clip-path: none; }
  .chlm .chlm-depth,
  .chlm .chlm-sheen { opacity: 0; }
}