/* Clarity Mascot — base styles for ClarityMascot.mount() containers.
 * Hosts (FAB, cmd-palette mark, AI chat empty state) size the mount
 * element themselves; this stylesheet only handles the inner SVG layout
 * and the per-piece transform driven by the physics loop. data-mode is
 * set by clarity-mascot.js and toggles tick visibility. */
.clarity-mascot-mount {
    line-height: 0;
    position: relative;
}
.clarity-mascot-mount > svg {
    width: 100%;
    height: 100%;
    display: block;
    /* Pieces drift slightly past the SVG viewBox during animation; the
     * host container clips them (circular FAB, circular palette mark). */
    overflow: visible;
}

.clarity-mascot-mount .hex,
.clarity-mascot-mount .tick {
    --tx: 0px;
    --ty: 0px;
    --r: 0deg;
    --s: 1;
    transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(var(--s));
    pointer-events: none;
    will-change: transform;
    transition: opacity 320ms ease;
}

.clarity-mascot-mount[data-mode="drift"] .tick { opacity: 0; }
.clarity-mascot-mount[data-mode="reforming"] .tick { opacity: 1; }
.clarity-mascot-mount[data-mode="reformed"] .tick { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .clarity-mascot-mount .hex,
    .clarity-mascot-mount .tick {
        transform: none;
    }
}