/* ==========================================================================
   SUWON ALPACA — rig styles (moods · poses · idle life · one-shot acts)
   Every transform-origin is written in viewBox units on the part itself,
   so all parts rotate around real joints (neck, shoulders, ear roots).
   ========================================================================== */

.alpaca { display: block; position: relative; line-height: 0; }
.alpaca .alp-svg { width: 100%; height: auto; overflow: visible; display: block; }
.alp-svg * { transform-box: view-box; }

/* ---- parts hidden until a mood or hat asks for them -------------------- */
.alp-m-open, .alp-m-flat, .alp-m-o,
.alp-eye-joy, .alp-eye-squint, .alp-eye-flat,
.alp-sweat, .alp-steam, .alp-crown, .alp-slice { display: none; }
.alp-brow { opacity: 0; transition: opacity 160ms ease, transform 220ms var(--ease-smooth, ease); }

.alp-svg[data-hat="crown"] .alp-beret { display: none; }
.alp-svg[data-hat="crown"] .alp-crown { display: inline; }

/* ---- moods ------------------------------------------------------------- */
.alp-svg[data-mood="joy"] .alp-eye-look,
.alp-svg[data-mood="love"] .alp-eye-look,
.alp-svg[data-mood="joy"] .alp-lash,
.alp-svg[data-mood="love"] .alp-lash { display: none; }
.alp-svg[data-mood="joy"] .alp-eye-joy,
.alp-svg[data-mood="love"] .alp-eye-joy { display: inline; }
.alp-svg[data-mood="joy"] .alp-m-smile,
.alp-svg[data-mood="open"] .alp-m-smile { display: none; }
.alp-svg[data-mood="joy"] .alp-m-open,
.alp-svg[data-mood="open"] .alp-m-open { display: inline; }
.alp-svg[data-mood="love"] .alp-cheeks ellipse { fill: #ff97a0; }

.alp-svg[data-mood="wow"] .alp-m-smile { display: none; }
.alp-svg[data-mood="wow"] .alp-m-o { display: inline; }
.alp-svg[data-mood="wow"] .alp-brow { opacity: 1; transform: translateY(-5px); }

.alp-svg[data-mood="think"] .alp-brow { opacity: 1; }
.alp-svg[data-mood="think"] .alp-brow-l { transform: translateY(-4px) rotate(-10deg); }
.alp-svg[data-mood="think"] .alp-brow-r { transform: translateY(-1px) rotate(8deg); }
.alp-svg[data-mood="think"] .alp-mouth { transform: scale(0.78) translateX(6px); }

.alp-svg[data-mood="serious"] .alp-brow { opacity: 1; }
.alp-svg[data-mood="serious"] .alp-brow-l { transform: translateY(3px) rotate(16deg); }
.alp-svg[data-mood="serious"] .alp-brow-r { transform: translateY(3px) rotate(-16deg); }
.alp-svg[data-mood="serious"] .alp-m-smile { display: none; }
.alp-svg[data-mood="serious"] .alp-m-flat { display: inline; }

.alp-svg[data-mood="spicy"] .alp-eye-look,
.alp-svg[data-mood="spicy"] .alp-lash,
.alp-svg[data-mood="spicy"] .alp-m-smile { display: none; }
.alp-svg[data-mood="spicy"] .alp-eye-squint,
.alp-svg[data-mood="spicy"] .alp-m-open,
.alp-svg[data-mood="spicy"] .alp-sweat,
.alp-svg[data-mood="spicy"] .alp-steam { display: inline; }
.alp-svg[data-mood="spicy"] .alp-cheeks ellipse { fill: #ff4d3a; opacity: 0.75; }
.alp-svg[data-mood="spicy"] .alp-face { fill: #f8c9a6; }

/* ---- poses (arms hang from the shoulders; poses only rotate them) ------ */
.alp-arm { transition: transform 420ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.alp-svg[data-pose="stand"] .alp-arm-l { transform: rotate(12deg); }
.alp-svg[data-pose="stand"] .alp-arm-r { transform: rotate(-12deg); }
.alp-svg[data-pose="counter"] .alp-arm-l { transform: translate(0, -18px) rotate(-16deg); }
.alp-svg[data-pose="counter"] .alp-arm-r { transform: translate(0, -18px) rotate(16deg); }
.alp-svg[data-pose="hug"] .alp-arm-l { transform: translate(2px, -6px) rotate(-40deg); }
.alp-svg[data-pose="hug"] .alp-arm-r { transform: translate(-2px, -6px) rotate(40deg); }
.alp-svg[data-pose="cheer"] .alp-arm-l { transform: translateY(-10px) rotate(150deg); }
.alp-svg[data-pose="cheer"] .alp-arm-r { transform: translateY(-10px) rotate(-150deg); }
.alp-svg[data-pose="think"] .alp-arm-l { transform: rotate(12deg); }
.alp-svg[data-pose="think"] .alp-arm-r { transform: translate(0, -4px) rotate(160deg); }

/* ---- idle life (paused off-screen, off for reduced motion & stills) ---- */
.alp-torso { animation: alp-breathe 4.2s ease-in-out infinite; }
.alp-head { animation: alp-sway 6.4s ease-in-out infinite alternate; }
.alp-scarf-tail { animation: alp-flutter 3.4s ease-in-out infinite alternate; }
.alp-prop-heart { animation: alp-heartbeat 1.6s ease-in-out infinite; }
.alp-steam path { animation: alp-steam 0.9s ease-out infinite; }
.alp-steam-r { animation-delay: 0.3s !important; }

.alp-eye-lid { transition: transform 70ms ease-in; }
.alp-eye-lid.is-blink { transform: scaleY(0.08); }
.alp-ear.is-twitch { animation: alp-twitch 520ms ease-out; }
.alp-ear-r.is-twitch { animation-name: alp-twitch-r; }

.alp-offscreen *, .alp-still * { animation-play-state: paused !important; }
.alp-still * { animation: none !important; transition: none !important; }

@keyframes alp-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.008, 1.016); } }
@keyframes alp-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes alp-flutter { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes alp-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.07); } 28% { transform: scale(0.98); } 42% { transform: scale(1.05); } }
@keyframes alp-steam { from { transform: translateY(6px); opacity: 0; } 40% { opacity: 0.95; } to { transform: translateY(-14px); opacity: 0; } }
@keyframes alp-twitch { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 60% { transform: rotate(6deg); } }
@keyframes alp-twitch-r { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(14deg); } 60% { transform: rotate(-6deg); } }

/* ---- one-shot acts (class act-* on the svg) ---------------------------- */
.alp-svg.act-hop .alp-root { animation: alp-hop 680ms cubic-bezier(.3,.7,.4,1); }
@keyframes alp-hop {
  0% { transform: none; }
  16% { transform: scale(1.06, 0.92); }
  44% { transform: translateY(-26px) scale(0.96, 1.06); }
  72% { transform: translateY(0) scale(1.05, 0.95); }
  100% { transform: none; }
}

.alp-svg.act-chew .alp-mouth { animation: alp-chew 280ms ease-in-out 4; }
.alp-svg.act-chew .alp-cheeks { animation: alp-chew-cheek 280ms ease-in-out 4; transform-origin: 160px 210px; }
@keyframes alp-chew { 0%, 100% { transform: scale(1, 1); } 50% { transform: translateY(2px) scale(1.12, 0.7); } }
@keyframes alp-chew-cheek { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12, 1.06); } }

.alp-svg.act-nod .alp-head { animation: alp-nod 620ms ease-in-out; }
@keyframes alp-nod { 0%, 100% { transform: none; } 35% { transform: rotate(4deg) translateY(4px); } 70% { transform: rotate(-2deg); } }

.alp-svg.act-shake .alp-head { animation: alp-shake 560ms ease-in-out; }
@keyframes alp-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-6deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }

/* rolling the gimbap: hooves push the roll forward and back twice */
.alp-svg.act-roll .alp-roll { animation: alp-roll 1.2s ease-in-out; transform-origin: 162px 345px; }
.alp-svg.act-roll .alp-roll-seam { animation: alp-seam 1.2s linear; }
.alp-svg.act-roll[data-pose="counter"] .alp-arm-l { animation: alp-push-l 1.2s ease-in-out; }
.alp-svg.act-roll[data-pose="counter"] .alp-arm-r { animation: alp-push-r 1.2s ease-in-out; }
.alp-svg.act-roll .alp-head { animation: alp-nod 600ms ease-in-out 2; }
@keyframes alp-roll { 0%, 100% { transform: none; } 25% { transform: translateX(-14px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-8px); } }
@keyframes alp-seam { from { transform: none; } to { transform: translateX(42px); } }
@keyframes alp-push-l {
  0%, 100% { transform: translate(0, -18px) rotate(-16deg); }
  25% { transform: translate(-14px, -16px) rotate(-10deg); }
  50% { transform: translate(10px, -20px) rotate(-20deg); }
  75% { transform: translate(-8px, -17px) rotate(-13deg); }
}
@keyframes alp-push-r {
  0%, 100% { transform: translate(0, -18px) rotate(16deg); }
  25% { transform: translate(-14px, -16px) rotate(20deg); }
  50% { transform: translate(10px, -20px) rotate(12deg); }
  75% { transform: translate(-8px, -17px) rotate(18deg); }
}

/* a fresh slice pops out of the roll after rolling */
.alp-svg.act-slice .alp-slice { display: inline; animation: alp-slice 900ms cubic-bezier(.2,.8,.3,1) forwards; transform-origin: 292px 338px; }
@keyframes alp-slice {
  0% { transform: translate(-30px, 8px) scale(0.3) rotate(0); opacity: 0; }
  30% { opacity: 1; }
  55% { transform: translate(-6px, -58px) scale(1.15) rotate(200deg); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); opacity: 1; }
}

/* roulette: excited bobbing while the reels run */
.alp-svg.act-spin .alp-root { animation: alp-spin-bob 360ms ease-in-out infinite; }
.alp-svg.act-spin .alp-arm-l { animation: alp-pump-l 360ms ease-in-out infinite; }
.alp-svg.act-spin .alp-arm-r { animation: alp-pump-r 360ms ease-in-out infinite; }
@keyframes alp-spin-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) scale(1.01, 0.99); } }
@keyframes alp-pump-l { 0%, 100% { transform: rotate(120deg); } 50% { transform: rotate(160deg); } }
@keyframes alp-pump-r { 0%, 100% { transform: rotate(-160deg); } 50% { transform: rotate(-120deg); } }

/* ---- reduced motion: no loops, no bounces; moods and poses still swap -- */
@media (prefers-reduced-motion: reduce) {
  .alp-svg *, .alp-svg { animation: none !important; transition: none !important; }
}