/* ── Pixel Art Baby Coati (Nasenbär) Animation ────────────────── */ #coati-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 75px; pointer-events: none; z-index: 900; overflow: hidden; } #coati-toggle.active { color: var(--accent); background: var(--accent-light, rgba(99, 102, 241, 0.1)); } /* 2px pixel grid for high detail */ .coati { position: absolute; bottom: 4px; left: -100px; width: 2px; height: 2px; background: transparent; } /* ── Frame 1: stride apart ───────────────────────────────────── */ .coati.frame1 { box-shadow: /* ═══ TAIL (ringed, curving upward) ═══ */ /* Tip ring (dark) */ 2px -50px 0 #5c3a1e, 4px -50px 0 #5c3a1e, 4px -48px 0 #5c3a1e, /* Ring 2 (light) */ 4px -46px 0 #c4884d, 6px -46px 0 #c4884d, 6px -44px 0 #c4884d, /* Ring 3 (dark) */ 6px -42px 0 #5c3a1e, 8px -42px 0 #5c3a1e, 8px -40px 0 #5c3a1e, /* Ring 4 (light) */ 8px -38px 0 #c4884d, 10px -38px 0 #c4884d, 10px -36px 0 #c4884d, /* Ring 5 (dark) */ 10px -34px 0 #5c3a1e, 12px -34px 0 #5c3a1e, 12px -32px 0 #5c3a1e, /* Tail base */ 14px -32px 0 #a86f35, 14px -30px 0 #d4944f, 16px -30px 0 #d4944f, /* ═══ BODY (plump baby shape) ═══ */ /* Back top - row 16 (dark) */ 20px -32px 0 #a86f35, 22px -32px 0 #a86f35, 24px -32px 0 #a86f35, 26px -32px 0 #a86f35, 28px -32px 0 #a86f35, 30px -32px 0 #a86f35, 32px -32px 0 #a86f35, 34px -32px 0 #a86f35, /* Body upper - row 15 */ 18px -30px 0 #c4884d, 20px -30px 0 #c4884d, 22px -30px 0 #d4944f, 24px -30px 0 #d4944f, 26px -30px 0 #d4944f, 28px -30px 0 #d4944f, 30px -30px 0 #d4944f, 32px -30px 0 #d4944f, 34px -30px 0 #c4884d, 36px -30px 0 #c4884d, /* Body main - row 14 */ 16px -28px 0 #c4884d, 18px -28px 0 #d4944f, 20px -28px 0 #d4944f, 22px -28px 0 #e8a85c, 24px -28px 0 #e8a85c, 26px -28px 0 #e8a85c, 28px -28px 0 #e8a85c, 30px -28px 0 #d4944f, 32px -28px 0 #d4944f, 34px -28px 0 #c4884d, 36px -28px 0 #c4884d, 38px -28px 0 #c4884d, /* Body light - row 13 */ 16px -26px 0 #c4884d, 18px -26px 0 #d4944f, 20px -26px 0 #e8a85c, 22px -26px 0 #e8a85c, 24px -26px 0 #f0be78, 26px -26px 0 #f0be78, 28px -26px 0 #e8a85c, 30px -26px 0 #e8a85c, 32px -26px 0 #d4944f, 34px -26px 0 #c4884d, 36px -26px 0 #c4884d, 38px -26px 0 #c4884d, /* Belly (lightest) - row 12 */ 16px -24px 0 #c4884d, 18px -24px 0 #e8a85c, 20px -24px 0 #f0be78, 22px -24px 0 #f5d4a8, 24px -24px 0 #f5d4a8, 26px -24px 0 #f0be78, 28px -24px 0 #e8a85c, 30px -24px 0 #d4944f, 32px -24px 0 #c4884d, 34px -24px 0 #c4884d, 36px -24px 0 #c4884d, 38px -24px 0 #c4884d, /* Belly lower - row 11 */ 18px -22px 0 #c4884d, 20px -22px 0 #d4944f, 22px -22px 0 #e8a85c, 24px -22px 0 #f0be78, 26px -22px 0 #e8a85c, 28px -22px 0 #d4944f, 30px -22px 0 #d4944f, 32px -22px 0 #c4884d, 34px -22px 0 #c4884d, 36px -22px 0 #c4884d, 38px -22px 0 #c4884d, 40px -22px 0 #c4884d, /* Body lower - row 10 */ 18px -20px 0 #c4884d, 20px -20px 0 #c4884d, 22px -20px 0 #d4944f, 24px -20px 0 #d4944f, 26px -20px 0 #d4944f, 28px -20px 0 #c4884d, 30px -20px 0 #c4884d, 32px -20px 0 #c4884d, 34px -20px 0 #c4884d, /* Underside - row 9 */ 20px -18px 0 #c4884d, 22px -18px 0 #c4884d, 24px -18px 0 #c4884d, 26px -18px 0 #c4884d, 28px -18px 0 #c4884d, 30px -18px 0 #c4884d, 32px -18px 0 #c4884d, /* Underside fill between legs */ 22px -16px 0 #c4884d, 26px -16px 0 #c4884d, 30px -16px 0 #c4884d, /* ═══ NECK ═══ */ 36px -32px 0 #c4884d, 38px -32px 0 #c4884d, 38px -30px 0 #c4884d, /* ═══ HEAD (big, round — baby proportions) ═══ */ /* Ear */ 50px -42px 0 #c4884d, 52px -42px 0 #c4884d, 48px -40px 0 #c4884d, 50px -40px 0 #deb896, 52px -40px 0 #a86f35, /* Head top - row 19 */ 46px -38px 0 #c4884d, 48px -38px 0 #d4944f, 50px -38px 0 #d4944f, 52px -38px 0 #d4944f, 54px -38px 0 #c4884d, /* Head - row 18 */ 44px -36px 0 #c4884d, 46px -36px 0 #d4944f, 48px -36px 0 #d4944f, 50px -36px 0 #d4944f, 52px -36px 0 #d4944f, 54px -36px 0 #c4884d, 56px -36px 0 #c4884d, /* Head with eye (upper) - row 17 */ 42px -34px 0 #c4884d, 44px -34px 0 #d4944f, 46px -34px 0 #d4944f, 48px -34px 0 #5c3a1e, 50px -34px 0 #1a1a1a, 52px -34px 0 #ffffff, 54px -34px 0 #c4884d, 56px -34px 0 #c4884d, 58px -34px 0 #c4884d, /* Head with eye (lower) - row 16 */ 40px -32px 0 #c4884d, 42px -32px 0 #d4944f, 44px -32px 0 #d4944f, 46px -32px 0 #d4944f, 48px -32px 0 #5c3a1e, 50px -32px 0 #1a1a1a, 52px -32px 0 #1a1a1a, 54px -32px 0 #c4884d, 56px -32px 0 #c4884d, 58px -32px 0 #c4884d, /* Face upper - row 15 */ 40px -30px 0 #c4884d, 42px -30px 0 #d4944f, 44px -30px 0 #d4944f, 46px -30px 0 #d4944f, 48px -30px 0 #deb896, 50px -30px 0 #deb896, 52px -30px 0 #deb896, 54px -30px 0 #c4884d, 56px -30px 0 #c4884d, 58px -30px 0 #c4884d, /* Face + snout start - row 14 */ 40px -28px 0 #c4884d, 42px -28px 0 #d4944f, 44px -28px 0 #deb896, 46px -28px 0 #deb896, 48px -28px 0 #deb896, 50px -28px 0 #deb896, 52px -28px 0 #c4884d, 54px -28px 0 #c4884d, 56px -28px 0 #c4884d, 58px -28px 0 #c4884d, 60px -28px 0 #c4884d, /* Snout upper - row 13 */ 40px -26px 0 #c4884d, 42px -26px 0 #deb896, 44px -26px 0 #deb896, 46px -26px 0 #deb896, 48px -26px 0 #deb896, 50px -26px 0 #c4884d, 52px -26px 0 #deb896, 54px -26px 0 #deb896, 56px -26px 0 #deb896, 58px -26px 0 #deb896, 60px -26px 0 #c4884d, 62px -26px 0 #c4884d, 64px -26px 0 #a86f35, /* Snout middle (longest!) - row 12 */ 40px -24px 0 #c4884d, 42px -24px 0 #deb896, 44px -24px 0 #deb896, 46px -24px 0 #c4884d, 48px -24px 0 #deb896, 50px -24px 0 #deb896, 52px -24px 0 #deb896, 54px -24px 0 #deb896, 56px -24px 0 #deb896, 58px -24px 0 #c4884d, 60px -24px 0 #a86f35, 62px -24px 0 #a86f35, 64px -24px 0 #8b5e3c, 66px -24px 0 #8b5e3c, 68px -24px 0 #3d2010, /* Snout lower - row 11 */ 42px -22px 0 #c4884d, 44px -22px 0 #c4884d, 46px -22px 0 #c4884d, 48px -22px 0 #deb896, 50px -22px 0 #deb896, 52px -22px 0 #deb896, 54px -22px 0 #c4884d, 56px -22px 0 #a86f35, 58px -22px 0 #a86f35, 60px -22px 0 #a86f35, 62px -22px 0 #8b5e3c, 64px -22px 0 #3d2010, /* Chin - row 10 */ 42px -20px 0 #c4884d, 44px -20px 0 #c4884d, 46px -20px 0 #c4884d, 48px -20px 0 #c4884d, 50px -20px 0 #c4884d, 52px -20px 0 #c4884d, /* Lower jaw - row 9 */ 44px -18px 0 #c4884d, 46px -18px 0 #c4884d, 48px -18px 0 #c4884d, /* ═══ LEGS (stubby baby legs, stride apart) ═══ */ /* Back-far (angled back) */ 20px -16px 0 #8b5e3c, 20px -14px 0 #8b5e3c, 18px -12px 0 #8b5e3c, 18px -10px 0 #6b4423, 18px -8px 0 #5c3a1e, /* Back-near (straight) */ 24px -16px 0 #8b5e3c, 24px -14px 0 #8b5e3c, 24px -12px 0 #8b5e3c, 24px -10px 0 #6b4423, 24px -8px 0 #5c3a1e, /* Front-far (straight) */ 28px -16px 0 #8b5e3c, 28px -14px 0 #8b5e3c, 28px -12px 0 #8b5e3c, 28px -10px 0 #6b4423, 28px -8px 0 #5c3a1e, /* Front-near (angled forward) */ 32px -16px 0 #8b5e3c, 32px -14px 0 #8b5e3c, 34px -12px 0 #8b5e3c, 34px -10px 0 #6b4423, 34px -8px 0 #5c3a1e; } /* ── Frame 2: legs together (mid-stride) ─────────────────────── */ .coati.frame2 { box-shadow: /* ═══ TAIL (swayed slightly left) ═══ */ 0px -50px 0 #5c3a1e, 2px -50px 0 #5c3a1e, 2px -48px 0 #5c3a1e, 2px -46px 0 #c4884d, 4px -46px 0 #c4884d, 4px -44px 0 #c4884d, 6px -42px 0 #5c3a1e, 8px -42px 0 #5c3a1e, 8px -40px 0 #5c3a1e, 8px -38px 0 #c4884d, 10px -38px 0 #c4884d, 10px -36px 0 #c4884d, 10px -34px 0 #5c3a1e, 12px -34px 0 #5c3a1e, 12px -32px 0 #5c3a1e, 14px -32px 0 #a86f35, 14px -30px 0 #d4944f, 16px -30px 0 #d4944f, /* ═══ BODY (same as frame 1) ═══ */ 20px -32px 0 #a86f35, 22px -32px 0 #a86f35, 24px -32px 0 #a86f35, 26px -32px 0 #a86f35, 28px -32px 0 #a86f35, 30px -32px 0 #a86f35, 32px -32px 0 #a86f35, 34px -32px 0 #a86f35, 18px -30px 0 #c4884d, 20px -30px 0 #c4884d, 22px -30px 0 #d4944f, 24px -30px 0 #d4944f, 26px -30px 0 #d4944f, 28px -30px 0 #d4944f, 30px -30px 0 #d4944f, 32px -30px 0 #d4944f, 34px -30px 0 #c4884d, 36px -30px 0 #c4884d, 16px -28px 0 #c4884d, 18px -28px 0 #d4944f, 20px -28px 0 #d4944f, 22px -28px 0 #e8a85c, 24px -28px 0 #e8a85c, 26px -28px 0 #e8a85c, 28px -28px 0 #e8a85c, 30px -28px 0 #d4944f, 32px -28px 0 #d4944f, 34px -28px 0 #c4884d, 36px -28px 0 #c4884d, 38px -28px 0 #c4884d, 16px -26px 0 #c4884d, 18px -26px 0 #d4944f, 20px -26px 0 #e8a85c, 22px -26px 0 #e8a85c, 24px -26px 0 #f0be78, 26px -26px 0 #f0be78, 28px -26px 0 #e8a85c, 30px -26px 0 #e8a85c, 32px -26px 0 #d4944f, 34px -26px 0 #c4884d, 36px -26px 0 #c4884d, 38px -26px 0 #c4884d, 16px -24px 0 #c4884d, 18px -24px 0 #e8a85c, 20px -24px 0 #f0be78, 22px -24px 0 #f5d4a8, 24px -24px 0 #f5d4a8, 26px -24px 0 #f0be78, 28px -24px 0 #e8a85c, 30px -24px 0 #d4944f, 32px -24px 0 #c4884d, 34px -24px 0 #c4884d, 36px -24px 0 #c4884d, 38px -24px 0 #c4884d, 18px -22px 0 #c4884d, 20px -22px 0 #d4944f, 22px -22px 0 #e8a85c, 24px -22px 0 #f0be78, 26px -22px 0 #e8a85c, 28px -22px 0 #d4944f, 30px -22px 0 #d4944f, 32px -22px 0 #c4884d, 34px -22px 0 #c4884d, 36px -22px 0 #c4884d, 38px -22px 0 #c4884d, 40px -22px 0 #c4884d, 18px -20px 0 #c4884d, 20px -20px 0 #c4884d, 22px -20px 0 #d4944f, 24px -20px 0 #d4944f, 26px -20px 0 #d4944f, 28px -20px 0 #c4884d, 30px -20px 0 #c4884d, 32px -20px 0 #c4884d, 34px -20px 0 #c4884d, 20px -18px 0 #c4884d, 22px -18px 0 #c4884d, 24px -18px 0 #c4884d, 26px -18px 0 #c4884d, 28px -18px 0 #c4884d, 30px -18px 0 #c4884d, 32px -18px 0 #c4884d, 22px -16px 0 #c4884d, 26px -16px 0 #c4884d, 30px -16px 0 #c4884d, /* ═══ NECK ═══ */ 36px -32px 0 #c4884d, 38px -32px 0 #c4884d, 38px -30px 0 #c4884d, /* ═══ HEAD (same as frame 1) ═══ */ 50px -42px 0 #c4884d, 52px -42px 0 #c4884d, 48px -40px 0 #c4884d, 50px -40px 0 #deb896, 52px -40px 0 #a86f35, 46px -38px 0 #c4884d, 48px -38px 0 #d4944f, 50px -38px 0 #d4944f, 52px -38px 0 #d4944f, 54px -38px 0 #c4884d, 44px -36px 0 #c4884d, 46px -36px 0 #d4944f, 48px -36px 0 #d4944f, 50px -36px 0 #d4944f, 52px -36px 0 #d4944f, 54px -36px 0 #c4884d, 56px -36px 0 #c4884d, 42px -34px 0 #c4884d, 44px -34px 0 #d4944f, 46px -34px 0 #d4944f, 48px -34px 0 #5c3a1e, 50px -34px 0 #1a1a1a, 52px -34px 0 #ffffff, 54px -34px 0 #c4884d, 56px -34px 0 #c4884d, 58px -34px 0 #c4884d, 40px -32px 0 #c4884d, 42px -32px 0 #d4944f, 44px -32px 0 #d4944f, 46px -32px 0 #d4944f, 48px -32px 0 #5c3a1e, 50px -32px 0 #1a1a1a, 52px -32px 0 #1a1a1a, 54px -32px 0 #c4884d, 56px -32px 0 #c4884d, 58px -32px 0 #c4884d, 40px -30px 0 #c4884d, 42px -30px 0 #d4944f, 44px -30px 0 #d4944f, 46px -30px 0 #d4944f, 48px -30px 0 #deb896, 50px -30px 0 #deb896, 52px -30px 0 #deb896, 54px -30px 0 #c4884d, 56px -30px 0 #c4884d, 58px -30px 0 #c4884d, 40px -28px 0 #c4884d, 42px -28px 0 #d4944f, 44px -28px 0 #deb896, 46px -28px 0 #deb896, 48px -28px 0 #deb896, 50px -28px 0 #deb896, 52px -28px 0 #c4884d, 54px -28px 0 #c4884d, 56px -28px 0 #c4884d, 58px -28px 0 #c4884d, 60px -28px 0 #c4884d, 40px -26px 0 #c4884d, 42px -26px 0 #deb896, 44px -26px 0 #deb896, 46px -26px 0 #deb896, 48px -26px 0 #deb896, 50px -26px 0 #c4884d, 52px -26px 0 #deb896, 54px -26px 0 #deb896, 56px -26px 0 #deb896, 58px -26px 0 #deb896, 60px -26px 0 #c4884d, 62px -26px 0 #c4884d, 64px -26px 0 #a86f35, 40px -24px 0 #c4884d, 42px -24px 0 #deb896, 44px -24px 0 #deb896, 46px -24px 0 #c4884d, 48px -24px 0 #deb896, 50px -24px 0 #deb896, 52px -24px 0 #deb896, 54px -24px 0 #deb896, 56px -24px 0 #deb896, 58px -24px 0 #c4884d, 60px -24px 0 #a86f35, 62px -24px 0 #a86f35, 64px -24px 0 #8b5e3c, 66px -24px 0 #8b5e3c, 68px -24px 0 #3d2010, 42px -22px 0 #c4884d, 44px -22px 0 #c4884d, 46px -22px 0 #c4884d, 48px -22px 0 #deb896, 50px -22px 0 #deb896, 52px -22px 0 #deb896, 54px -22px 0 #c4884d, 56px -22px 0 #a86f35, 58px -22px 0 #a86f35, 60px -22px 0 #a86f35, 62px -22px 0 #8b5e3c, 64px -22px 0 #3d2010, 42px -20px 0 #c4884d, 44px -20px 0 #c4884d, 46px -20px 0 #c4884d, 48px -20px 0 #c4884d, 50px -20px 0 #c4884d, 52px -20px 0 #c4884d, 44px -18px 0 #c4884d, 46px -18px 0 #c4884d, 48px -18px 0 #c4884d, /* ═══ LEGS (together, mid-stride) ═══ */ /* Back pair (together) */ 22px -16px 0 #8b5e3c, 22px -14px 0 #8b5e3c, 22px -12px 0 #8b5e3c, 22px -10px 0 #6b4423, 22px -8px 0 #5c3a1e, 20px -16px 0 #8b5e3c, /* Front pair (together) */ 30px -16px 0 #8b5e3c, 30px -14px 0 #8b5e3c, 30px -12px 0 #8b5e3c, 30px -10px 0 #6b4423, 30px -8px 0 #5c3a1e, 32px -16px 0 #8b5e3c; } /* ── Movement across screen ───────────────────────────────────── */ @keyframes coati-run { from { transform: translateX(-100px); } to { transform: translateX(calc(100vw + 100px)); } } /* ── Sprite wrapper ───────────────────────────────────────────── */ .coati-sprite { position: absolute; bottom: 4px; left: -100px; animation: coati-run 14s linear infinite; } .coati-sprite .frame { position: absolute; top: 0; left: 0; width: 2px; height: 2px; background: transparent; } .coati-sprite .frame1 { animation: coati-frame1 0.35s steps(1) infinite; } .coati-sprite .frame2 { animation: coati-frame2 0.35s steps(1) infinite; } @keyframes coati-frame1 { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes coati-frame2 { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } } /* ── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .coati-sprite { animation: none; display: none; } }