[data-portfolio-mascot] { position: fixed; inset: auto 0 max(6px, env(safe-area-inset-bottom)); height: 150px; z-index: 90; pointer-events: none; --pm-x: 18px; --pm-tilt: 0deg; --pm-look-x: 0px; --pm-look-y: 0px; }
[data-portfolio-mascot] .pm-position { position: absolute; bottom: 0; left: 0; width: 64px; transform: translateX(var(--pm-x)); }
[data-portfolio-mascot] .pm-bubble { position: absolute; bottom: calc(100% + 8px); left: var(--pm-bubble-left, 0px); width: max-content; max-width: min(170px, calc(100vw - 24px)); padding: 9px 12px; border: 1px solid #d9e0ee; border-radius: 14px 14px 14px 4px; background: #f5f7fc; color: #263144; box-shadow: 0 3px 12px #0002; font: 500 12px/1.5 system-ui, sans-serif; text-align: left; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none; }
[data-portfolio-mascot][data-speaking="true"] .pm-bubble { opacity: 1; visibility: visible; transform: none; }
[data-portfolio-mascot][data-bubble-kind="thought"] .pm-bubble { border-radius: 18px; }
[data-portfolio-mascot][data-bubble-kind="thought"] .pm-bubble::after { content: ""; position: absolute; left: 16px; bottom: -7px; width: 5px; height: 5px; border-radius: 50%; background: #f5f7fc; box-shadow: 5px 6px 0 -1px #f5f7fc; }
[data-portfolio-mascot][data-state="thinking"] .pm-head { transform: rotate(-5deg); }
[data-portfolio-mascot][data-state="thinking"] .pm-arm-right { transform: rotate(-20deg); }
[data-portfolio-mascot][data-state="look"] .pm-head { transform: rotate(3deg); }
[data-portfolio-mascot] .pm-robot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
[data-portfolio-mascot] svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-portfolio-mascot] button:focus-visible { outline: 2px solid #80f5ce; outline-offset: 2px; border-radius: 12px; }
[data-portfolio-mascot] .pm-alert { display: none; transform-origin: 140px 34px; }
[data-portfolio-mascot][data-state="surprised"] .pm-alert { display: block; animation: pm-alert-in .18s ease-out both; }
@keyframes pm-alert-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
[data-portfolio-mascot] .pm-float { animation: pm-float 3.4s ease-in-out infinite; }
[data-portfolio-mascot] .pm-shadow { transform-origin: 80px 169px; animation: pm-shadow 3.4s ease-in-out infinite; }
[data-portfolio-mascot] .pm-tilt { transform-origin: 80px 115px; transform: rotate(var(--pm-tilt)); transition: transform .4s ease; }
[data-portfolio-mascot] .pm-head { transform-origin: 80px 95px; transition: transform .4s ease; }
[data-portfolio-mascot] .pm-eyes { transform: translate(var(--pm-look-x), var(--pm-look-y)); }
[data-portfolio-mascot] .pm-eye { transform-box: fill-box; transform-origin: center; animation: pm-blink 5.4s infinite; }
[data-portfolio-mascot] .pm-arm-left { transform-origin: 48px 106px; }
[data-portfolio-mascot] .pm-arm-right { transform-origin: 112px 106px; }
[data-portfolio-mascot] .pm-arm { transition: transform .4s ease; }
[data-portfolio-mascot] .pm-mouth-surprised, [data-portfolio-mascot] .pm-sleep { display: none; }
[data-portfolio-mascot][data-state="happy"] .pm-eye { animation: none; transform: scaleY(.55); }
[data-portfolio-mascot][data-state="happy"] .pm-reaction { animation: pm-hop 1s ease both; }
[data-portfolio-mascot][data-state="happy"] .pm-arm-left { transform: rotate(24deg); }
[data-portfolio-mascot][data-state="happy"] .pm-arm-right { transform: rotate(-32deg); }
[data-portfolio-mascot][data-state="surprised"] .pm-eye { animation: none; transform: scaleY(1.12); }
[data-portfolio-mascot][data-state="surprised"] .pm-mouth-normal { display: none; }
[data-portfolio-mascot][data-state="surprised"] .pm-mouth-surprised { display: block; }
[data-portfolio-mascot][data-state="sleep"] .pm-eye { animation: none; transform: scaleY(.1); }
[data-portfolio-mascot][data-state="sleep"] .pm-head { transform: translateY(2px) rotate(3deg); }
[data-portfolio-mascot][data-state="sleep"] .pm-sleep { display: block; }
[data-portfolio-mascot][data-state="sleep"] .pm-float, [data-portfolio-mascot][data-state="sleep"] .pm-shadow { animation-duration: 5s; }
[data-portfolio-mascot][data-hidden="true"] * { animation-play-state: paused !important; }
@keyframes pm-float { 50% { transform: translateY(-5px); } }
@keyframes pm-shadow { 50% { transform: scaleX(.8); opacity: .55; } }
@keyframes pm-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes pm-hop { 40% { transform: translateY(-7px); } 70% { transform: translateY(1px); } }
@media (max-width: 900px) { [data-portfolio-mascot] .pm-position { width: 58px; } }
@media (max-width: 600px) { [data-portfolio-mascot] .pm-position { width: 52px; } [data-portfolio-mascot] { height: 90px; } }
@media (prefers-reduced-motion: reduce) { [data-portfolio-mascot] *, [data-portfolio-mascot] *::before { animation: none !important; transition: none !important; } [data-portfolio-mascot] .pm-tilt, [data-portfolio-mascot] .pm-head, [data-portfolio-mascot] .pm-eyes { transform: none !important; } }