/* Hero illustrations for the Company pages (About, Leadership, Our Story,
   Careers, Contact). See inc/hero-illustrations-company.php. Shares the ih-*
   base classes from hero-illustrations-industries.css. Base styles draw each
   scene's finished state; all motion is inside the reduced-motion gate. */

/* People glyph */
.cm-person circle,
.cm-person path { fill: none; stroke-width: 2; stroke-linecap: round; }
.cm-person--navy circle, .cm-person--navy path { stroke: var(--navy); }
.cm-person--white circle, .cm-person--white path { stroke: var(--paper); }
.cm-person--lg { transform: scale(1.6); }
.cm-person--xl { transform: scale(2.1); }

/* ===== About ===== */
.cma-top, .cma-l, .cma-r { stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.cma-t-paper .cma-top { fill: var(--paper); }
.cma-t-paper .cma-l   { fill: #e3e8f2; }
.cma-t-paper .cma-r   { fill: #d0d8e8; }
.cma-t-tint  .cma-top { fill: var(--cyan-tint); }
.cma-t-tint  .cma-l   { fill: #bfe6f8; }
.cma-t-tint  .cma-r   { fill: #a5d9f2; }
.cma-t-navy  .cma-top { fill: var(--navy); stroke: var(--navy); }
.cma-t-navy  .cma-l   { fill: var(--navy-dark); stroke: var(--navy-dark); }
.cma-t-navy  .cma-r   { fill: #01124a; stroke: #01124a; }
.cma-cube { filter: drop-shadow(0 8px 12px rgba(1, 36, 126, 0.12)); }
.cma-stud  { fill: var(--cyan); opacity: 0.55; }
.cma-spark { fill: var(--cyan); }
.cma-shock { fill: none; stroke: var(--cyan); stroke-width: 3; opacity: 0; }
.cma-pole  { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.cma-pennant { fill: var(--cyan); transform-origin: left center; }
.cma-flag  { transform-origin: 50% 100%; }

/* ===== Leadership ===== */
.cml-conn { fill: none; stroke: var(--cyan-tint); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cml-lit  { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cml-ring { fill: none; stroke: var(--cyan); stroke-width: 3; opacity: 0; }
.cml-role-bg { fill: var(--cyan-tint); }
.cml-role-on { fill: var(--cyan); opacity: 0; }
.cml-role text { fill: var(--navy); font-size: 10px; font-weight: 600; text-anchor: middle; }

/* ===== Our story ===== */
.cms-rays { fill: none; stroke: var(--cyan); opacity: 0.5; stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.cms-sun-disc { fill: #bfe6f8; stroke: var(--cyan); stroke-width: 2; }
.cms-route     { fill: none; stroke: var(--cyan-tint); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.cms-route-lit { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cms-node  { fill: var(--cyan); stroke: var(--paper); stroke-width: 3; }
.cms-label { fill: var(--navy); font-size: 10.5px; font-weight: 600; }
.cms-traveller { opacity: 0; offset-rotate: 0deg; }
.cms-traveller-halo { fill: var(--cyan); opacity: 0.25; }
.cms-traveller-core { fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.8)); }
.cms-star  { fill: var(--cyan); opacity: 0.7; }

/* ===== Careers ===== */
.cmc-skill text { fill: var(--navy); font-size: 11px; font-weight: 600; text-anchor: middle; }
.cmc-ring-track { fill: none; stroke: var(--cyan-tint); stroke-width: 7; }
.cmc-ring { fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 4; transform: rotate(-90deg); transform-box: view-box; transform-origin: 237px 235px; }
.cmc-pct  { fill: var(--navy); font-size: 13px; font-weight: 700; text-anchor: middle; }
.cmc-role-ring { fill: none; stroke: var(--cyan); stroke-width: 3; opacity: 0; }
.cmc-role--1 .cmc-role-ring { opacity: 1; }
.cmc-slot { fill: none; stroke: var(--slate-light); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cmc-packet { fill: var(--cyan); opacity: 0; filter: drop-shadow(0 0 5px rgba(0, 159, 226, 0.8)); offset-rotate: 0deg; }
.cmc-confetti { fill: var(--cyan); opacity: 0; }
.cmc-confetti:nth-of-type(2n) { fill: var(--navy); }

/* ===== Contact ===== */
.cmt-send { fill: var(--cyan); opacity: 0; }
.cmt-dot  { fill: var(--navy); opacity: 0.22; }
.cmt-trail-track { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; }
.cmt-trail { fill: none; stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cmt-pin-body { fill: var(--cyan); filter: drop-shadow(0 6px 8px rgba(0, 159, 226, 0.4)); }
.cmt-pulse { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; }
.cmt-plane { opacity: 0; offset-rotate: auto; }
.cmt-plane path { fill: var(--cyan); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(0, 159, 226, 0.8)); }
.cmt-tdot { fill: var(--slate-light); }
.cmt-typing { opacity: 0; }
.cmt-type { transform-origin: left center; }
.cmt-tdot { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
	.cma-cube--0 { animation: cma-cube-0 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-cube--1 { animation: cma-cube-1 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-cube--2 { animation: cma-cube-2 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-cube--3 { animation: cma-cube-3 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-cube--4 { animation: cma-cube-4 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-cube--5 { animation: cma-cube-5 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-cube--6 { animation: cma-cube-6 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cma-shock { animation: cma-shock 10s ease-out infinite; }
	.cma-flag { animation: cma-flag 10s ease-out infinite; }
	.cma-pennant { animation: cma-wave 1.4s ease-in-out infinite; }
	.cma-orbit { animation: cma-spin 44s linear infinite; }
	.cma-avatar { animation: cma-unspin 44s linear infinite; }
	.cma-spark { animation: cma-twinkle 2.2s ease-in-out infinite; }
	.cml-card--0 { animation: cml-card-0 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.cml-card--1 { animation: cml-card-1 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.cml-card--2 { animation: cml-card-2 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.cml-card--3 { animation: cml-card-3 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.cml-conn { animation: cml-conn 10s ease-in-out infinite; }
	.cml-lift--0 { animation: cml-lift-0 10s ease-in-out infinite; }
	.cml-ring--0 { animation: cml-hl-0 10s ease-in-out infinite; }
	.cml-role-on--0 { animation: cml-hl-0 10s ease-in-out infinite; }
	.cml-lift--1 { animation: cml-lift-1 10s ease-in-out infinite; }
	.cml-ring--1 { animation: cml-hl-1 10s ease-in-out infinite; }
	.cml-role-on--1 { animation: cml-hl-1 10s ease-in-out infinite; }
	.cml-lift--2 { animation: cml-lift-2 10s ease-in-out infinite; }
	.cml-ring--2 { animation: cml-hl-2 10s ease-in-out infinite; }
	.cml-role-on--2 { animation: cml-hl-2 10s ease-in-out infinite; }
	.cml-lift--3 { animation: cml-lift-3 10s ease-in-out infinite; }
	.cml-ring--3 { animation: cml-hl-3 10s ease-in-out infinite; }
	.cml-role-on--3 { animation: cml-hl-3 10s ease-in-out infinite; }
	.cml-lit--1 { animation: cml-lit-0 10s ease-in-out infinite; }
	.cml-lit--2 { animation: cml-lit-1 10s ease-in-out infinite; }
	.cml-lit--3 { animation: cml-lit-2 10s ease-in-out infinite; }
	.cms-route-lit { animation: cms-lit 10s linear infinite; }
	.cms-traveller { animation: cms-travel 10s linear infinite; }
	.cms-sun { animation: cms-sun 10s ease-out infinite; }
	.cms-rays { animation: cms-spin 60s linear infinite; }
	.cms-node--0 { animation: cms-node-0 10s ease-out infinite; }
	.cms-card--0 { animation: cms-card-0 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.cms-node--1 { animation: cms-node-1 10s ease-out infinite; }
	.cms-card--1 { animation: cms-card-1 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.cms-node--2 { animation: cms-node-2 10s ease-out infinite; }
	.cms-card--2 { animation: cms-card-2 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.cms-node--3 { animation: cms-node-3 10s ease-out infinite; }
	.cms-card--3 { animation: cms-card-3 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.cms-node--4 { animation: cms-node-4 10s ease-out infinite; }
	.cms-card--4 { animation: cms-card-4 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.cms-star--0 { animation: cms-star-0 10s ease-out infinite; }
	.cms-star--1 { animation: cms-star-1 10s ease-out infinite; }
	.cms-star--2 { animation: cms-star-2 10s ease-out infinite; }
	.cmc-cand { animation: cmc-cand 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.cmc-role--0 { animation: cmc-role-0 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.cmc-role--1 { animation: cmc-role-1 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.cmc-role--2 { animation: cmc-role-2 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.cmc-tick--0 { animation: cmc-tick-0 10s ease-out infinite; }
	.cmc-tick--1 { animation: cmc-tick-1 10s ease-out infinite; }
	.cmc-tick--2 { animation: cmc-tick-2 10s ease-out infinite; }
	.cmc-packet--0 { animation: cmc-packet-0 10s ease-in-out infinite; }
	.cmc-packet--1 { animation: cmc-packet-1 10s ease-in-out infinite; }
	.cmc-ring { animation: cmc-ring 10s ease-in-out infinite; }
	.cmc-pct { animation: cmc-pct 10s ease-out infinite; }
	.cmc-role--1 .cmc-role-ring { animation: cmc-role-ring 10s ease-out infinite; }
	.cmc-match { animation: cmc-match 10s ease-out infinite; }
	.cmc-new { animation: cmc-new 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }
	.cmc-confetti { animation: cmc-confetti 10s ease-out infinite; }
	.cmc-welcome { animation: cmc-welcome 10s ease-out infinite; }
	.cmt-form { animation: cmt-form 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.cmt-map { animation: cmt-map 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.cmt-type--0 { animation: cmt-type-0 10s ease-out infinite; }
	.cmt-type--1 { animation: cmt-type-1 10s ease-out infinite; }
	.cmt-type--2 { animation: cmt-type-2 10s ease-out infinite; }
	.cmt-type--3 { animation: cmt-type-3 10s ease-out infinite; }
	.cmt-type--4 { animation: cmt-type-4 10s ease-out infinite; }
	.cmt-send { animation: cmt-send 10s ease-out infinite; }
	.cmt-plane { animation: cmt-plane 10s ease-in-out infinite; }
	.cmt-trail { animation: cmt-trail 10s ease-in-out infinite; }
	.cmt-pin { animation: cmt-pin 10s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
	.cmt-pulse--1 { animation: cmt-pulse-1 10s ease-out infinite; }
	.cmt-pulse--2 { animation: cmt-pulse-2 10s ease-out infinite; }
	.cmt-reply { animation: cmt-reply 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.cmt-typing { animation: cmt-typing 10s linear infinite; }
	.cmt-tdot--0 { animation: cmt-tdot 0.9s ease-in-out 0.0s infinite; }
	.cmt-tdot--1 { animation: cmt-tdot 0.9s ease-in-out 0.15s infinite; }
	.cmt-tdot--2 { animation: cmt-tdot 0.9s ease-in-out 0.3s infinite; }
	.cmt-answer { animation: cmt-answer 10s ease-out infinite; }
}

@keyframes cma-cube-0 {
	0%, 6% { opacity: 0; transform: translateY(-140px); }
	11% { opacity: 1; transform: translateY(4px); }
	13%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-cube-1 {
	0%, 12% { opacity: 0; transform: translateY(-140px); }
	17% { opacity: 1; transform: translateY(4px); }
	19%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-cube-2 {
	0%, 18% { opacity: 0; transform: translateY(-140px); }
	23% { opacity: 1; transform: translateY(4px); }
	25%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-cube-3 {
	0%, 24% { opacity: 0; transform: translateY(-140px); }
	29% { opacity: 1; transform: translateY(4px); }
	31%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-cube-4 {
	0%, 32% { opacity: 0; transform: translateY(-140px); }
	37% { opacity: 1; transform: translateY(4px); }
	39%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-cube-5 {
	0%, 38% { opacity: 0; transform: translateY(-140px); }
	43% { opacity: 1; transform: translateY(4px); }
	45%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-cube-6 {
	0%, 46% { opacity: 0; transform: translateY(-140px); }
	51% { opacity: 1; transform: translateY(4px); }
	53%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-140px); }
}

@keyframes cma-shock {
	0%, 50% { opacity: 0; transform: scale(1); }
	52% { opacity: 0.75; transform: scale(1); }
	64%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes cma-flag {
	0%, 52% { opacity: 0; transform: scaleY(0.2); }
	58% { opacity: 1; transform: scaleY(1.06); }
	61%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(0.2); }
}

@keyframes cma-wave {
	0%, 100% { transform: scaleX(1); }
	50% { transform: scaleX(0.82); }
}

@keyframes cma-spin {
	to { transform: rotate(360deg); }
}

@keyframes cma-unspin {
	to { transform: rotate(-360deg); }
}

@keyframes cma-twinkle {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes cml-card-0 {
	0%, 2% { opacity: 0; transform: translateY(-30px); }
	8%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateY(-30px); }
}

@keyframes cml-card-1 {
	0%, 14% { opacity: 0; transform: translateY(30px); }
	20%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateY(30px); }
}

@keyframes cml-card-2 {
	0%, 16% { opacity: 0; transform: translateY(30px); }
	22%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateY(30px); }
}

@keyframes cml-card-3 {
	0%, 18% { opacity: 0; transform: translateY(30px); }
	24%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateY(30px); }
}

@keyframes cml-conn {
	0%, 8% { stroke-dashoffset: 100; }
	16%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes cml-lift-0 {
	0%, 30% { transform: translateY(0); }
	32% { transform: translateY(-8px); }
	39% { transform: translateY(-8px); }
	41%, 100% { transform: translateY(0); }
}

@keyframes cml-hl-0 {
	0%, 30% { opacity: 0; }
	32% { opacity: 1; }
	39% { opacity: 1; }
	41%, 100% { opacity: 0; }
}

@keyframes cml-lift-1 {
	0%, 44% { transform: translateY(0); }
	46% { transform: translateY(-8px); }
	53% { transform: translateY(-8px); }
	55%, 100% { transform: translateY(0); }
}

@keyframes cml-hl-1 {
	0%, 44% { opacity: 0; }
	46% { opacity: 1; }
	53% { opacity: 1; }
	55%, 100% { opacity: 0; }
}

@keyframes cml-lift-2 {
	0%, 56% { transform: translateY(0); }
	58% { transform: translateY(-8px); }
	65% { transform: translateY(-8px); }
	67%, 100% { transform: translateY(0); }
}

@keyframes cml-hl-2 {
	0%, 56% { opacity: 0; }
	58% { opacity: 1; }
	65% { opacity: 1; }
	67%, 100% { opacity: 0; }
}

@keyframes cml-lift-3 {
	0%, 68% { transform: translateY(0); }
	70% { transform: translateY(-8px); }
	77% { transform: translateY(-8px); }
	79%, 100% { transform: translateY(0); }
}

@keyframes cml-hl-3 {
	0%, 68% { opacity: 0; }
	70% { opacity: 1; }
	77% { opacity: 1; }
	79%, 100% { opacity: 0; }
}

@keyframes cml-lit-0 {
	0%, 39% { stroke-dashoffset: 100; }
	44%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes cml-lit-1 {
	0%, 51% { stroke-dashoffset: 100; }
	56%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes cml-lit-2 {
	0%, 63% { stroke-dashoffset: 100; }
	68%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes cms-lit {
	0%, 8% { stroke-dashoffset: 100; }
	80%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes cms-travel {
	0%, 7% { offset-distance: 0%; opacity: 0; }
	8% { offset-distance: 0%; opacity: 1; }
	80% { offset-distance: 100%; opacity: 1; }
	82%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes cms-sun {
	0%, 3% { opacity: 0; transform: translateY(90px); }
	30%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(90px); }
}

@keyframes cms-spin {
	to { transform: rotate(360deg); }
}

@keyframes cms-node-0 {
	0%, 8% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
	9.5% { fill: var(--cyan); stroke: var(--paper); transform: scale(1.5); }
	12%, 92% { fill: var(--cyan); stroke: var(--paper); transform: scale(1); }
	97%, 100% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
}

@keyframes cms-card-0 {
	0%, 8% { opacity: 0; transform: scale(0.7); }
	10.5% { opacity: 1; transform: scale(1.08); }
	12.5%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes cms-node-1 {
	0%, 26% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
	27.5% { fill: var(--cyan); stroke: var(--paper); transform: scale(1.5); }
	30%, 92% { fill: var(--cyan); stroke: var(--paper); transform: scale(1); }
	97%, 100% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
}

@keyframes cms-card-1 {
	0%, 26% { opacity: 0; transform: scale(0.7); }
	28.5% { opacity: 1; transform: scale(1.08); }
	30.5%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes cms-node-2 {
	0%, 44% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
	45.5% { fill: var(--cyan); stroke: var(--paper); transform: scale(1.5); }
	48%, 92% { fill: var(--cyan); stroke: var(--paper); transform: scale(1); }
	97%, 100% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
}

@keyframes cms-card-2 {
	0%, 44% { opacity: 0; transform: scale(0.7); }
	46.5% { opacity: 1; transform: scale(1.08); }
	48.5%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes cms-node-3 {
	0%, 62% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
	63.5% { fill: var(--cyan); stroke: var(--paper); transform: scale(1.5); }
	66%, 92% { fill: var(--cyan); stroke: var(--paper); transform: scale(1); }
	97%, 100% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
}

@keyframes cms-card-3 {
	0%, 62% { opacity: 0; transform: scale(0.7); }
	64.5% { opacity: 1; transform: scale(1.08); }
	66.5%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes cms-node-4 {
	0%, 80% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
	81.5% { fill: var(--cyan); stroke: var(--paper); transform: scale(1.5); }
	84%, 92% { fill: var(--cyan); stroke: var(--paper); transform: scale(1); }
	97%, 100% { fill: var(--paper); stroke: var(--line); transform: scale(1); }
}

@keyframes cms-card-4 {
	0%, 80% { opacity: 0; transform: scale(0.7); }
	82.5% { opacity: 1; transform: scale(1.08); }
	84.5%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes cms-star-0 {
	0%, 80% { opacity: 0; transform: scale(0.3); }
	82% { opacity: 1; transform: scale(1.4); }
	88% { opacity: 0.7; transform: scale(1); }
	92% { opacity: 0.7; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes cms-star-1 {
	0%, 80% { opacity: 0; transform: scale(0.3); }
	84% { opacity: 1; transform: scale(1.4); }
	90% { opacity: 0.7; transform: scale(1); }
	92% { opacity: 0.7; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes cms-star-2 {
	0%, 80% { opacity: 0; transform: scale(0.3); }
	86% { opacity: 1; transform: scale(1.4); }
	92% { opacity: 0.7; transform: scale(1); }
	92% { opacity: 0.7; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes cmc-cand {
	0%, 0% { opacity: 0; transform: translateX(-26px); }
	6%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(-26px); }
}

@keyframes cmc-role-0 {
	0%, 4% { opacity: 0; transform: translateX(26px); }
	10%, 57% { opacity: 1; transform: none; }
	62%, 92% { opacity: 0.55; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(26px); }
}

@keyframes cmc-role-1 {
	0%, 7% { opacity: 0; transform: translateX(26px); }
	13%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(26px); }
}

@keyframes cmc-role-2 {
	0%, 10% { opacity: 0; transform: translateX(26px); }
	16%, 57% { opacity: 1; transform: none; }
	62%, 92% { opacity: 0.55; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(26px); }
}

@keyframes cmc-tick-0 {
	0%, 16% { opacity: 0; transform: scale(0.4); }
	19% { opacity: 1; transform: scale(1.25); }
	21%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmc-tick-1 {
	0%, 22% { opacity: 0; transform: scale(0.4); }
	25% { opacity: 1; transform: scale(1.25); }
	27%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmc-tick-2 {
	0%, 28% { opacity: 0; transform: scale(0.4); }
	31% { opacity: 1; transform: scale(1.25); }
	33%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmc-packet-0 {
	0%, 29% { offset-distance: 0%; opacity: 0; }
	30% { offset-distance: 0%; opacity: 1; }
	36% { offset-distance: 100%; opacity: 1; }
	37%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes cmc-packet-1 {
	0%, 49% { offset-distance: 0%; opacity: 0; }
	50% { offset-distance: 0%; opacity: 1; }
	56% { offset-distance: 100%; opacity: 1; }
	57%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes cmc-ring {
	0%, 36% { stroke-dashoffset: 100; }
	56%, 92% { stroke-dashoffset: 4; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes cmc-pct {
	0%, 54% { opacity: 0; transform: scale(0.4); }
	57% { opacity: 1; transform: scale(1.2); }
	59%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmc-role-ring {
	0%, 57% { opacity: 0; }
	61%, 92% { opacity: 1; }
	97%, 100% { opacity: 0; }
}

@keyframes cmc-match {
	0%, 60% { opacity: 0; transform: scale(0.4); }
	63% { opacity: 1; transform: scale(1.15); }
	65%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmc-new {
	0%, 66% { opacity: 0; transform: scale(0.4); }
	70% { opacity: 1; transform: scale(1.3); }
	73%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmc-confetti {
	0%, 68% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
	70% { opacity: 1; }
	82%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(200deg); }
}

@keyframes cmc-welcome {
	0%, 72% { opacity: 0; transform: scale(0.4); }
	75% { opacity: 1; transform: scale(1.1); }
	77%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes cmt-form {
	0%, 0% { opacity: 0; transform: translateX(-26px); }
	6%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(-26px); }
}

@keyframes cmt-map {
	0%, 4% { opacity: 0; transform: translateX(26px); }
	10%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(26px); }
}

@keyframes cmt-type-0 {
	0%, 8% { transform: scaleX(0); }
	14%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes cmt-type-1 {
	0%, 14% { transform: scaleX(0); }
	22%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes cmt-type-2 {
	0%, 22% { transform: scaleX(0); }
	28%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes cmt-type-3 {
	0%, 26% { transform: scaleX(0); }
	32%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes cmt-type-4 {
	0%, 30% { transform: scaleX(0); }
	34%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes cmt-send {
	0%, 37% { opacity: 0; transform: scale(1); }
	39% { opacity: 1; transform: scale(0.96); }
	42%, 50% { opacity: 1; transform: scale(1); }
	54%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes cmt-plane {
	0%, 41% { offset-distance: 0%; opacity: 0; }
	42% { offset-distance: 0%; opacity: 1; }
	56% { offset-distance: 100%; opacity: 1; }
	57%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes cmt-trail {
	0%, 42% { stroke-dashoffset: 100; }
	56%, 94% { stroke-dashoffset: 0; }
	99%, 100% { stroke-dashoffset: 100; }
}

@keyframes cmt-pin {
	0%, 55% { opacity: 0; transform: translateY(-44px); }
	60% { opacity: 1; transform: translateY(5px); }
	63%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-44px); }
}

@keyframes cmt-pulse-1 {
	0%, 58% { opacity: 0; transform: scale(0.6); }
	60% { opacity: 0.7; transform: scale(0.8); }
	72%, 100% { opacity: 0; transform: scale(2.4); }
}

@keyframes cmt-pulse-2 {
	0%, 62% { opacity: 0; transform: scale(0.6); }
	64% { opacity: 0.55; transform: scale(0.8); }
	76%, 100% { opacity: 0; transform: scale(2.4); }
}

@keyframes cmt-reply {
	0%, 60% { opacity: 0; transform: translateY(22px); }
	66%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(22px); }
}

@keyframes cmt-typing {
	0%, 66% { opacity: 0; }
	68%, 72% { opacity: 1; }
	73%, 100% { opacity: 0; }
}

@keyframes cmt-tdot {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-5px); }
}

@keyframes cmt-answer {
	0%, 72% { opacity: 0; transform: translateY(6px); }
	80%, 92% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(6px); }
}