/* Cormargin animated compass logo — SHARED component.
   Namespaced `cml-` so it cannot collide. Add `.cml-play` to animate in.
   Retheme via --cml-* on the .cml-logo element. */

.cml-logo{--cml-teal:#00b4c8;--cml-teal-lt:#00cee4;--cml-ink:#fff;--cml-ring:#fff;--cml-size:150px;display:inline-flex;align-items:center;gap:calc(var(--cml-size) * .19);font-family:'Outfit',system-ui,sans-serif;-webkit-user-select:none;user-select:none}
.cml-logo.on-light{--cml-ink:#0d1c2e;--cml-ring:#0d1c2e}
.cml-mark{width:var(--cml-size);height:var(--cml-size);flex:none;display:block}
.cml-mark .cml-ring{stroke:var(--cml-ring)}
.cml-mark .cml-point{fill:var(--cml-ring)}
.cml-mark .cml-arc,.cml-mark .cml-dash{stroke:var(--cml-teal-lt)}
@keyframes cmlSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.cml-spin-slow{animation:cmlSpin 64s linear infinite;transform-origin:65px 65px}
.cml-spin-rev{animation:cmlSpin 44s linear infinite reverse;transform-origin:65px 65px}
.cml-arc{stroke-dasharray:1;stroke-dashoffset:1}
@keyframes cmlDraw{to{stroke-dashoffset:0}}
.cml-logo.cml-play .cml-arc{animation:cmlDraw 1.6s cubic-bezier(.45,.05,.2,1) forwards}
.cml-logo.cml-play .cml-arc.cml-arc-2{animation-delay:.35s}
.cml-word{font-size:calc(var(--cml-size) * .34);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--cml-ink);opacity:0}
.cml-word .cml-em{color:var(--cml-teal-lt)}
.cml-tag{margin-top:calc(var(--cml-size) * .07);font-size:calc(var(--cml-size) * .105);font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--cml-teal);opacity:0}
@keyframes cmlWord{from{opacity:0;transform:scale(1.14);letter-spacing:.16em}to{opacity:1;transform:scale(1);letter-spacing:-.03em}}
@keyframes cmlFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.cml-logo.cml-play .cml-word{animation:cmlWord 1.1s cubic-bezier(.2,.6,.2,1) .55s forwards}
.cml-logo.cml-play .cml-tag{animation:cmlFade .8s ease-out 1.15s forwards}
/* static instance (nav): no draw-in, marks visible immediately */
.cml-logo.cml-static .cml-arc{stroke-dashoffset:0}
.cml-logo.cml-static .cml-word,.cml-logo.cml-static .cml-tag{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){
  .cml-spin-slow,.cml-spin-rev{animation:none}
  .cml-logo .cml-arc{stroke-dashoffset:0}
  .cml-logo .cml-word,.cml-logo .cml-tag{opacity:1;animation:none}
}