/* app/public/vendor/imweb/logo-motion.css
 *
 * made more 워드마크 드로잉 애니메이션 (site/partials/wordmark.blade.php,
 * .mm-draw). mirror.blade.php(P2, @vite 미사용)와 base.blade.php(Tailwind)
 * 양쪽 레이아웃이 이 파일 하나를 그대로 공유한다 — mirror-extra.css와
 * 같은 관례로 <link>만 걸면 되는 순정 CSS이며, 빌드 파이프라인을 타지
 * 않으므로 Tailwind 유틸리티 클래스나 @apply 등 빌드 필요 문법을 쓰지
 * 않는다.
 *
 * 절대 규칙: 기본 상태(.mm-draw만 있고 .is-running이 없는 상태)는 완성된
 * 로고여야 한다. stroke-dashoffset으로 획을 감추는 규칙은 반드시
 * ".mm-draw.is-running"에만 걸어야 한다 — logo-motion.js가 JS 실행
 * 시점에 is-running을 붙였다가 애니메이션 종료 후 뗀다. JS가 실패하거나
 * 느린 환경에서도 헤더 로고가 항상 보이게 하기 위한 순서다(절대 뒤집지
 * 말 것).
 *
 * path 길이는 logo-motion.js가 getTotalLength()로 실측해 --mm-len(글자별)
 * / --mm-smile-len(미소) CSS 변수로 각 요소에 주입한다. 변수가 없으면
 * (JS 미실행) 아래 dasharray/dashoffset 규칙 자체가 걸리지 않으므로
 * 완성 상태 그대로 유지된다.
 */
.mm-draw.is-running .mm-letter {
    stroke-dasharray: var(--mm-len, 0);
    stroke-dashoffset: var(--mm-len, 0);
    animation: mm-draw-letter 0.62s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: var(--mm-delay, 0s);
}

.mm-draw.is-running .mm-dot {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: mm-draw-dot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--mm-dot-delay, 0.78s);
}

.mm-draw.is-running .mm-smile {
    stroke-dasharray: var(--mm-smile-len, 80);
    stroke-dashoffset: var(--mm-smile-len, 80);
    animation: mm-draw-smile 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: var(--mm-smile-delay, 1.12s);
}

@keyframes mm-draw-letter {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mm-draw-dot {
    to {
        transform: scale(1);
    }
}

@keyframes mm-draw-smile {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-draw.is-running .mm-letter,
    .mm-draw.is-running .mm-dot,
    .mm-draw.is-running .mm-smile {
        animation: none !important;
        stroke-dashoffset: 0 !important;
        transform: none !important;
    }
}