/* PIP — the ARLI companion. Vector implementation of the character kit.
   One component for every ARLI surface: arliwork.com, Studio, Match, Connect.ARLI.
   Motion is transform and opacity only: it scales, prints, and survives a dark background. */

.pip {
  --pip-size: 160px;
  --pip-orange: #ff772e;
  --pip-mint: #46cdb4;
  --pip-shell: #f6f0e7;
  display: inline-block;
  width: var(--pip-size);
  line-height: 0;
  vertical-align: bottom;
  -webkit-user-select: none;
  user-select: none;
}
.pip svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pip .pip-shadow { transform-origin: 120px 264px; animation: pipShadow 3.6s ease-in-out infinite; }
.pip .pip-body { transform-origin: 120px 230px; animation: pipBob 3.6s ease-in-out infinite; }
.pip .pip-ears { transform-origin: 120px 208px; animation: pipSway 5.4s ease-in-out infinite; }
.pip .pip-eyes { transform-origin: 120px 140px; animation: pipBlink 5.6s steps(1, end) infinite; }
.pip .pip-core { transform-origin: 120px 222px; animation: pipPulse 3.4s ease-in-out infinite; }
.pip .pip-arm-l { transform-origin: 44px 194px; }
.pip .pip-arm-r { transform-origin: 196px 194px; }
.pip .pip-leg-l { transform-origin: 100px 238px; }
.pip .pip-leg-r { transform-origin: 140px 238px; }
.pip .pip-badge { opacity: 0; transform-origin: 196px 86px; }
.pip .pip-dots { opacity: 0; }
.pip .pip-dust { opacity: 0; }
.pip .pip-arm-l { animation: pipArmL 4.6s ease-in-out infinite; }
.pip .pip-arm-r { animation: pipArmR 4.6s ease-in-out infinite; }

@keyframes pipBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pipShadow { 0%, 100% { transform: scaleX(1); opacity: 0.12; } 50% { transform: scaleX(0.9); opacity: 0.09; } }
@keyframes pipSway { 0%, 100% { transform: rotate(0deg); } 28% { transform: rotate(-2.2deg); } 62% { transform: rotate(1.6deg); } }
@keyframes pipBlink { 0%, 91% { transform: scaleY(1); } 93% { transform: scaleY(0.08); } 96% { transform: scaleY(1); } }
@keyframes pipPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.94; } }
@keyframes pipArmL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
@keyframes pipArmR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } }

/* think: the head tilts, the ear perks, three dots arrive one after another */
.pip[data-state="think"] .pip-body { animation: pipTilt 3.4s ease-in-out infinite; }
.pip[data-state="think"] .pip-ears { animation: pipPerk 3.4s ease-in-out infinite; }
.pip[data-state="think"] .pip-dots { animation: pipDots 2.4s ease-in-out infinite; }
.pip[data-state="think"] .pip-core { animation: pipPulse 2.1s ease-in-out infinite; }
@keyframes pipTilt { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-4.5deg); } 75% { transform: rotate(-1.5deg); } }
@keyframes pipPerk { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-5deg); } }
@keyframes pipDots {
  0%, 12% { opacity: 0; }
  24%, 74% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

/* work: both arms type, the body leans into the job */
.pip[data-state="work"] .pip-body { animation: pipLean 1.1s ease-in-out infinite; }
.pip[data-state="work"] .pip-arm-l { animation: pipTypeL 0.44s ease-in-out infinite; }
.pip[data-state="work"] .pip-arm-r { animation: pipTypeR 0.44s ease-in-out infinite; }
.pip[data-state="work"] .pip-core { animation: pipPulse 1.2s ease-in-out infinite; }
@keyframes pipLean { 0%, 100% { transform: translateY(1px) rotate(1deg); } 50% { transform: translateY(-2px) rotate(1.6deg); } }
@keyframes pipTypeL { 0%, 100% { transform: rotate(-14deg) translateY(2px); } 50% { transform: rotate(-2deg) translateY(-2px); } }
@keyframes pipTypeR { 0%, 100% { transform: rotate(2deg) translateY(-2px); } 50% { transform: rotate(14deg) translateY(2px); } }

/* approve: a nod toward the mint check, because nothing leaves without a person */
.pip[data-state="approve"] .pip-body { animation: pipNod 2.8s ease-in-out infinite; }
.pip[data-state="approve"] .pip-badge { animation: pipBadge 2.8s ease-in-out infinite; }
.pip[data-state="approve"] .pip-core { animation: pipPulse 2.8s ease-in-out infinite; }
@keyframes pipNod { 0% { transform: rotate(0deg); } 22% { transform: rotate(6deg) translateY(3px); } 40% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes pipBadge { 0%, 14% { opacity: 0; transform: scale(0.6); } 30%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } }

/* run: moving to the next step */
.pip[data-state="run"] .pip-body { animation: pipRunBody 0.42s ease-in-out infinite; }
.pip[data-state="run"] .pip-leg-l { animation: pipLegA 0.42s ease-in-out infinite; }
.pip[data-state="run"] .pip-leg-r { animation: pipLegB 0.42s ease-in-out infinite; }
.pip[data-state="run"] .pip-ears { animation: pipEarsBack 0.42s ease-in-out infinite; }
.pip[data-state="run"] .pip-dust { animation: pipDust 0.6s ease-out infinite; }
.pip[data-state="run"] .pip-arm-l { animation: pipArmL 0.42s ease-in-out infinite; }
.pip[data-state="run"] .pip-arm-r { animation: pipArmR 0.42s ease-in-out infinite; }
@keyframes pipRunBody { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-5px) rotate(8deg); } }
@keyframes pipLegA { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(24deg); } }
@keyframes pipLegB { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-26deg); } }
@keyframes pipEarsBack { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(10deg); } }
@keyframes pipDust { 0% { opacity: 0.7; transform: translate(0, 0) scale(0.8); } 100% { opacity: 0; transform: translate(-22px, 6px) scale(1.3); } }

/* happy: one hop, arms up */
.pip[data-state="happy"] .pip-body { animation: pipHop 0.9s cubic-bezier(0.3, 0.9, 0.3, 1) 2; }
.pip[data-state="happy"] .pip-arm-l { animation: pipUpL 0.9s ease-in-out 2; }
.pip[data-state="happy"] .pip-arm-r { animation: pipUpR 0.9s ease-in-out 2; }
.pip[data-state="happy"] .pip-badge { animation: pipBadgeOnce 1.8s ease-out 1; }
.pip[data-state="happy"] .pip-shadow { animation: pipShadowHop 0.9s ease-in-out 2; }
@keyframes pipHop { 0%, 100% { transform: translateY(0) scaleY(1); } 12% { transform: translateY(2px) scaleY(0.94); } 45% { transform: translateY(-18px) scaleY(1.04); } 80% { transform: translateY(0) scaleY(0.98); } }
@keyframes pipUpL { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-52deg) translateY(-6px); } }
@keyframes pipUpR { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(52deg) translateY(-6px); } }
@keyframes pipBadgeOnce { 0% { opacity: 0; transform: scale(0.5); } 30%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes pipShadowHop { 0%, 100% { transform: scaleX(1); opacity: 0.12; } 45% { transform: scaleX(0.7); opacity: 0.06; } }

/* sad: ears down, eyes low, core dimmed. Used for a failed run and for an empty state, not for decoration */
.pip[data-state="sad"] .pip-body { animation: pipDroop 4.6s ease-in-out infinite; }
.pip[data-state="sad"] .pip-ears { animation: pipEarsDown 4.6s ease-in-out infinite; }
.pip[data-state="sad"] .pip-eyes { animation: pipEyesDown 4.6s ease-in-out infinite; }
.pip[data-state="sad"] .pip-core { animation: pipDim 4.6s ease-in-out infinite; }
.pip[data-state="sad"] .pip-arm-l { animation: none; transform: rotate(10deg); }
.pip[data-state="sad"] .pip-arm-r { animation: none; transform: rotate(-10deg); }
@keyframes pipDroop { 0%, 100% { transform: translateY(2px) rotate(0deg); } 50% { transform: translateY(4px) rotate(-1deg); } }
@keyframes pipEarsDown { 0%, 100% { transform: rotate(10deg) translateY(5px); } 50% { transform: rotate(13deg) translateY(7px); } }
@keyframes pipEyesDown { 0%, 100% { transform: translateY(3px) scaleY(0.92); } 50% { transform: translateY(4px) scaleY(0.88); } }
@keyframes pipDim { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.42; } }

/* hover: pip notices the pointer. Click: one hop (wired in pip.js) */
.pip:hover .pip-ears { animation-duration: 2.2s; }

@media (prefers-reduced-motion: reduce) {
  .pip *, .pip *::before, .pip *::after { animation: none !important; }
  .pip .pip-badge, .pip .pip-dots, .pip .pip-dust { opacity: 0; }
}

/* small sizes: below 64px the face is all that matters */
.pip[data-size="tiny"] { --pip-size: 44px; }
.pip[data-size="small"] { --pip-size: 72px; }
.pip[data-size="medium"] { --pip-size: 120px; }
.pip[data-size="large"] { --pip-size: 180px; }

.arli-pip{display:inline-flex;align-items:flex-end;justify-content:center;line-height:0}
.arli-pip-image{width:auto;height:var(--pip-size,72px);max-width:100%;object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(25,40,27,.16));animation:arliPipFloat 4.2s ease-in-out infinite}
@keyframes arliPipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.pip-companion{position:fixed;right:20px;bottom:20px;z-index:6;pointer-events:none}
.pip-companion .arli-pip-image{--pip-size:84px;opacity:.94}
@media(max-width:700px){.pip-companion{display:none}}
@media(prefers-reduced-motion:reduce){.arli-pip-image{animation:none}}