[data-sumlino-character] { display: inline-block; width: var(--character-size, 72px); flex: none; line-height: 0; pointer-events: none; }
[data-sumlino-character] > img, .moment-mark { display: block; width: 100%; height: auto; }
.moment-mark { overflow: visible; transform-origin: 50% 90%; }
.moment-gaze { transform: translate(var(--moment-look-x, 0px), var(--moment-look-y, 0px)); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.moment-top { transform: rotate(var(--moment-tilt, 0deg)); transform-origin: 64px 40px; transition: transform var(--duration-slow) var(--ease-smooth-out); }
.moment-eye { transform-box: fill-box; transform-origin: center; }
.moment-blink .moment-eye { animation: moment-blink 210ms ease-in-out; }
.moment-blink .moment-eye-right { animation-delay: 20ms; }
.moment-visible[data-character-state="welcome"] .moment-mark { animation: moment-hello 700ms var(--ease-smooth-out) both; }
.moment-visible[data-character-state="loading"] .moment-top { animation: moment-unfold-top 650ms var(--ease-smooth-out) both; }
.moment-visible[data-character-state="loading"] .moment-bottom { animation: moment-unfold-bottom 650ms var(--ease-smooth-out) 80ms both; }
.moment-visible[data-character-state="celebrate"] .moment-mark { animation: moment-celebrate 850ms var(--ease-smooth-out) both; }
.moment-visible[data-character-state="celebrate"] .moment-eye { animation: moment-happy 850ms var(--ease-in-out) both; }
.logo-float:has([data-sumlino-character]), .auth-progress-mark:has([data-sumlino-character]) { animation: none; }
.intro-lockup [data-sumlino-character], .onboarding-brand [data-sumlino-character] { --character-size: 70px; }
.auth-progress-mark [data-sumlino-character] { --character-size: 52px; }
.complete-brand-mark [data-sumlino-character] { position: relative; z-index: 2; --character-size: 78px; }
.task-celebration > [data-sumlino-character] { display: block; --character-size: 44px; width: 44px; height: auto; border-radius: 0; background: none; box-shadow: none; }
@keyframes moment-blink { 0%,100% { transform: scaleY(1); } 40%,55% { transform: scaleY(.12); } }
@keyframes moment-hello { 0% { transform: translateY(6px) rotate(-4deg); } 45% { transform: translateY(-4px) rotate(2deg); } 100% { transform: none; } }
@keyframes moment-unfold-top { from { opacity: 0; transform: translateX(-8px) scaleY(.8); } to { opacity: 1; transform: none; } }
@keyframes moment-unfold-bottom { from { opacity: 0; transform: translateX(8px) scaleY(.8); } to { opacity: 1; transform: none; } }
@keyframes moment-celebrate { 0% { transform: scale(1); } 18% { transform: scale(1.04,.94); } 46% { transform: translateY(-10px) rotate(-5deg); } 68% { transform: scale(1.04,.96); } 100% { transform: none; } }
@keyframes moment-happy { 0%,100% { transform: scaleY(1); } 25%,65% { transform: scaleY(.35); } }
@media(max-width:560px) { .intro-lockup [data-sumlino-character], .onboarding-brand [data-sumlino-character] { --character-size: 56px; } .complete-brand-mark [data-sumlino-character] { --character-size: 68px; } }
@media(prefers-reduced-motion:reduce) { [data-sumlino-character] *, .moment-visible .moment-mark { animation: none !important; transition: none !important; } .moment-top, .moment-bottom, .moment-gaze, .moment-mark { transform: none !important; opacity: 1; } }