/* primitives.css — real CSS implementations of the SonnRays primitive library.
 *
 * The engine applies classes to .srk-art (the portrait wrapper) and, for veil
 * effects, to .srk-stage (which owns .srk-veil). DNA parameterization flows
 * through two CSS variables the engine sets inline:
 *   --srk-amp : amplitude multiplier (0.3–1.5), from expressiveness/energy
 *   --srk-dur : duration override, from animation_frequency
 * One-shots are removed by the engine on animationend; loops persist per state.
 *
 * HONESTY: every primitive is a whole-image transform or filter. There are no
 * articulated limbs on flat portraits — "tail_sway" is an honest skew, not a
 * tail rig.
 */

.srk-stage { position: relative; display: inline-block; line-height: 0; }
.srk-art { display: block; transform-origin: 50% 55%; will-change: transform, filter, opacity; }
.srk-art img { display: block; width: 100%; height: auto; }
.srk-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.srk-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* ---------------- body ---------------- */
@keyframes srk-breath-soft { 0%,100% { transform: scale(1); } 50% { transform: scale(calc(1 + 0.015 * var(--srk-amp, 1))); } }
.srk-art.srk-p-breath_soft { animation: srk-breath-soft var(--srk-dur, 3s) ease-in-out infinite; }

@keyframes srk-breath-deep { 0%,100% { transform: scale(1); } 50% { transform: scale(calc(1 + 0.03 * var(--srk-amp, 1))); } }
.srk-art.srk-p-breath_deep { animation: srk-breath-deep var(--srk-dur, 3.8s) ease-in-out infinite; }

@keyframes srk-breath-heavy { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(calc(1 + 0.04 * var(--srk-amp, 1))) translateY(calc(3px * var(--srk-amp, 1))); } }
.srk-art.srk-p-breath_heavy { animation: srk-breath-heavy var(--srk-dur, 2.2s) ease-in-out infinite; }

@keyframes srk-stretch { 0% { transform: scaleY(1); } 40% { transform: scaleY(calc(1 + 0.06 * var(--srk-amp, 1))) translateY(-1%); } 100% { transform: scaleY(1); } }
.srk-art.srk-p-stretch { animation: srk-stretch var(--srk-dur, 2.2s) ease-in-out 1; }

@keyframes srk-yawn { 0% { transform: scaleY(1); opacity: 1; } 45% { transform: scaleY(calc(1 + 0.05 * var(--srk-amp, 1))); opacity: 0.92; } 100% { transform: scaleY(1); opacity: 1; } }
.srk-art.srk-p-yawn { animation: srk-yawn var(--srk-dur, 2.8s) ease-in-out 1; }

@keyframes srk-doze { 0%,100% { transform: rotate(-0.5deg) scale(0.99); } 50% { transform: rotate(0.5deg) scale(0.99); } }
.srk-art.srk-p-doze { animation: srk-doze var(--srk-dur, 5.2s) ease-in-out infinite; }

@keyframes srk-sleep-coil { 0%,100% { transform: scale(0.965) rotate(1deg); } 50% { transform: scale(0.955) rotate(1.2deg); } }
.srk-art.srk-p-sleep_coil { animation: srk-sleep-coil var(--srk-dur, 6s) ease-in-out infinite; }

@keyframes srk-rock-gentle { 0%,100% { transform: rotate(calc(-1deg * var(--srk-amp, 1))); } 50% { transform: rotate(calc(1deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-rock_gentle { animation: srk-rock-gentle var(--srk-dur, 4.2s) ease-in-out infinite; }

@keyframes srk-float-bob { 0%,100% { transform: translateY(calc(-6px * var(--srk-amp, 1))); } 50% { transform: translateY(calc(6px * var(--srk-amp, 1))); } }
.srk-art.srk-p-float_bob { animation: srk-float-bob var(--srk-dur, 3s) ease-in-out infinite; }

@keyframes srk-hover-sway { 0%,100% { transform: translateY(-4px) rotate(-0.5deg); } 50% { transform: translateY(4px) rotate(0.5deg); } }
.srk-art.srk-p-hover_sway { animation: srk-hover-sway var(--srk-dur, 4s) ease-in-out infinite; }

@keyframes srk-lean-in { 0% { transform: scale(1) translateY(0); } 100% { transform: scale(calc(1 + 0.03 * var(--srk-amp, 1))) translateY(1%); } }
.srk-art.srk-p-lean_in { animation: srk-lean-in var(--srk-dur, 1.4s) ease-out 1 forwards; }

@keyframes srk-lean-away { 0% { transform: scale(1) translateY(0); } 100% { transform: scale(calc(1 - 0.03 * var(--srk-amp, 1))) translateY(-1%); } }
.srk-art.srk-p-lean_away { animation: srk-lean-away var(--srk-dur, 1.4s) ease-out 1 forwards; }

@keyframes srk-approach { 0% { transform: scale(1); } 100% { transform: scale(calc(1 + 0.06 * var(--srk-amp, 1))); } }
.srk-art.srk-p-approach { animation: srk-approach var(--srk-dur, 1.8s) ease-in-out 1 forwards; }

@keyframes srk-retreat { 0% { transform: scale(1); } 100% { transform: scale(calc(1 - 0.06 * var(--srk-amp, 1))); } }
.srk-art.srk-p-retreat { animation: srk-retreat var(--srk-dur, 1.8s) ease-in-out 1 forwards; }

@keyframes srk-circle-slow {
  0% { transform: translate(0, 0); } 25% { transform: translate(calc(5px * var(--srk-amp, 1)), calc(-3px * var(--srk-amp, 1))); }
  50% { transform: translate(0, calc(-6px * var(--srk-amp, 1))); } 75% { transform: translate(calc(-5px * var(--srk-amp, 1)), calc(-3px * var(--srk-amp, 1))); }
  100% { transform: translate(0, 0); } }
.srk-art.srk-p-circle_slow { animation: srk-circle-slow var(--srk-dur, 8s) linear infinite; }

@keyframes srk-hop-small { 0%,100% { transform: translateY(0); } 45% { transform: translateY(calc(-8px * var(--srk-amp, 1))); } }
.srk-art.srk-p-hop_small { animation: srk-hop-small var(--srk-dur, 0.55s) ease-out 1; }

@keyframes srk-bounce { 0%,100% { transform: translateY(0) scaleY(1); } 40% { transform: translateY(calc(-14px * var(--srk-amp, 1))) scaleY(1.02); } 70% { transform: translateY(0) scaleY(0.94); } 85% { transform: scaleY(1.01); } }
.srk-art.srk-p-bounce { animation: srk-bounce var(--srk-dur, 0.85s) ease-out 1; }

@keyframes srk-bounce-small { 0%,100% { transform: translateY(0); } 45% { transform: translateY(calc(-7px * var(--srk-amp, 1))); } }
.srk-art.srk-p-bounce_small { animation: srk-bounce-small var(--srk-dur, 0.65s) ease-out 1; }

@keyframes srk-spin-playful { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.srk-art.srk-p-spin_playful { animation: srk-spin-playful var(--srk-dur, 1.1s) ease-in-out 1; }

@keyframes srk-startle { 0% { transform: scale(1) translateY(0); } 30% { transform: scale(calc(1 + 0.05 * var(--srk-amp, 1))) translateY(calc(-4px * var(--srk-amp, 1))); } 100% { transform: scale(1) translateY(0); } }
.srk-art.srk-p-startle { animation: srk-startle var(--srk-dur, 0.4s) ease-out 1; }

@keyframes srk-freeze { 0%,100% { filter: brightness(1.08); } }
.srk-art.srk-p-freeze { animation: srk-freeze var(--srk-dur, 0.6s) linear 1; }

@keyframes srk-shake-off { 0%,100% { transform: rotate(0); } 20% { transform: rotate(calc(3deg * var(--srk-amp, 1))); } 40% { transform: rotate(calc(-3deg * var(--srk-amp, 1))); } 60% { transform: rotate(calc(2deg * var(--srk-amp, 1))); } 80% { transform: rotate(calc(-2deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-shake_off { animation: srk-shake-off var(--srk-dur, 0.8s) ease-in-out 1; }

@keyframes srk-fidget { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(calc(2px * var(--srk-amp, 1)), -1px); } 50% { transform: translate(calc(-2px * var(--srk-amp, 1)), 1px); } 75% { transform: translate(1px, calc(-2px * var(--srk-amp, 1))); } }
.srk-art.srk-p-fidget { animation: srk-fidget var(--srk-dur, 1.7s) ease-in-out infinite; }

/* ---------------- head / eyes (abstract micro-transforms) ---------------- */
@keyframes srk-blink-slow { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.94); } }
.srk-art.srk-p-blink_slow { animation: srk-blink-slow var(--srk-dur, 0.5s) ease-in-out 1; }

@keyframes srk-blink-soft { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.97); } }
.srk-art.srk-p-blink_soft { animation: srk-blink-soft var(--srk-dur, 0.35s) ease-in-out 1; }

@keyframes srk-blink-fast { 0%,100% { transform: scaleY(1); } 25%,55% { transform: scaleY(0.92); } 40%,70% { transform: scaleY(1); } }
.srk-art.srk-p-blink_fast { animation: srk-blink-fast var(--srk-dur, 0.4s) ease-in-out 1; }

@keyframes srk-gaze-drift { 0%,100% { transform: translateX(calc(-4px * var(--srk-amp, 1))); } 50% { transform: translateX(calc(4px * var(--srk-amp, 1))); } }
.srk-art.srk-p-gaze_drift { animation: srk-gaze-drift var(--srk-dur, 6.2s) ease-in-out infinite; }

@keyframes srk-gaze-direct { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(1.02); filter: brightness(1.05); } }
.srk-art.srk-p-gaze_direct { animation: srk-gaze-direct var(--srk-dur, 2s) ease-out 1 forwards; }

@keyframes srk-gaze-avert { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(calc(-6px * var(--srk-amp, 1))); opacity: 0.96; } }
.srk-art.srk-p-gaze_avert { animation: srk-gaze-avert var(--srk-dur, 1.5s) ease-out 1 forwards; }

@keyframes srk-gaze-track { 0%,100% { transform: translate(0, 0); } 33% { transform: translate(calc(-6px * var(--srk-amp, 1)), -2px); } 66% { transform: translate(calc(6px * var(--srk-amp, 1)), -2px); } }
.srk-art.srk-p-gaze_track { animation: srk-gaze-track var(--srk-dur, 3.2s) ease-in-out infinite; }

@keyframes srk-head-tilt { 0%,100% { transform: rotate(0); } 50% { transform: rotate(calc(4deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-head_tilt { animation: srk-head-tilt var(--srk-dur, 1.2s) ease-in-out 1; }

@keyframes srk-head-turn { 0%,100% { transform: rotate(0) translateX(0); } 50% { transform: rotate(calc(-3deg * var(--srk-amp, 1))) translateX(calc(4px * var(--srk-amp, 1))); } }
.srk-art.srk-p-head_turn { animation: srk-head-turn var(--srk-dur, 1.2s) ease-in-out 1; }

@keyframes srk-look-up { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(-5px * var(--srk-amp, 1))); } }
.srk-art.srk-p-look_up { animation: srk-look-up var(--srk-dur, 1s) ease-in-out 1; }

@keyframes srk-look-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(5px * var(--srk-amp, 1))); } }
.srk-art.srk-p-look_down { animation: srk-look-down var(--srk-dur, 1s) ease-in-out 1; }

@keyframes srk-ear-twitch { 0%,100% { transform: skewX(0); } 25% { transform: skewX(calc(2deg * var(--srk-amp, 1))); } 50% { transform: skewX(calc(-2deg * var(--srk-amp, 1))); } 75% { transform: skewX(calc(2deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-ear_twitch { animation: srk-ear-twitch var(--srk-dur, 0.5s) ease-in-out 1; }

@keyframes srk-ear-perk { 0%,100% { transform: skewY(0) scale(1); } 50% { transform: skewY(calc(-2deg * var(--srk-amp, 1))) scale(1.01); } }
.srk-art.srk-p-ear_perk { animation: srk-ear-perk var(--srk-dur, 0.6s) ease-in-out 1; }

/* ---------------- limbs (abstract skew accents) ---------------- */
@keyframes srk-tail-sway { 0%,100% { transform: skewX(calc(-3deg * var(--srk-amp, 1))); } 50% { transform: skewX(calc(3deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-tail_sway { animation: srk-tail-sway var(--srk-dur, 4.2s) ease-in-out infinite; }

@keyframes srk-tail-flick { 0%,100% { transform: skewX(0); } 35% { transform: skewX(calc(6deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-tail_flick { animation: srk-tail-flick var(--srk-dur, 0.5s) ease-out 1; }

@keyframes srk-tail-curl { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.97) rotate(2deg); } }
.srk-art.srk-p-tail_curl { animation: srk-tail-curl var(--srk-dur, 2s) ease-in-out 1; }

@keyframes srk-wing-ruffle { 0%,100% { transform: skewY(0) scale(1); } 30% { transform: skewY(calc(2deg * var(--srk-amp, 1))) scale(1.02); } 60% { transform: skewY(calc(-2deg * var(--srk-amp, 1))) scale(1.01); } }
.srk-art.srk-p-wing_ruffle { animation: srk-wing-ruffle var(--srk-dur, 0.8s) ease-in-out 1; }

@keyframes srk-wing-fold { 0% { transform: scale(1); } 100% { transform: scale(0.96); } }
.srk-art.srk-p-wing_fold { animation: srk-wing-fold var(--srk-dur, 1.5s) ease-out 1 forwards; }

@keyframes srk-paw-shift { 0%,100% { transform: translateX(calc(-3px * var(--srk-amp, 1))); } 50% { transform: translateX(calc(3px * var(--srk-amp, 1))); } }
.srk-art.srk-p-paw_shift { animation: srk-paw-shift var(--srk-dur, 2.1s) ease-in-out infinite; }

@keyframes srk-claw-flex { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
.srk-art.srk-p-claw_flex { animation: srk-claw-flex var(--srk-dur, 0.7s) ease-in-out 1; }

/* ---------------- elemental (CSS) ---------------- */
@keyframes srk-glow-pulse { 0%,100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(calc(1 + 0.12 * var(--srk-amp, 1))) drop-shadow(0 0 12px rgba(255, 220, 150, 0.45)); } }
.srk-art.srk-p-glow_pulse { animation: srk-glow-pulse var(--srk-dur, 2.6s) ease-in-out infinite; }

@keyframes srk-glow-flare { 0%,100% { filter: brightness(1); } 30% { filter: brightness(calc(1 + 0.25 * var(--srk-amp, 1))); } }
.srk-art.srk-p-glow_flare { animation: srk-glow-flare var(--srk-dur, 0.8s) ease-out 1; }

@keyframes srk-glow-dim { 0%,100% { filter: brightness(0.85); } 50% { filter: brightness(0.9); } }
.srk-art.srk-p-glow_dim { animation: srk-glow-dim var(--srk-dur, 2s) ease-in-out infinite; }

@keyframes srk-light-sweep { 0% { transform: translateX(-120%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
.srk-stage.srk-p-light_sweep .srk-veil { opacity: 1; background: linear-gradient(105deg, transparent 40%, rgba(255, 245, 210, 0.5) 50%, transparent 60%); animation: srk-light-sweep var(--srk-dur, 1.8s) ease-in-out 1; }

@keyframes srk-shadow-pool { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
.srk-stage.srk-p-shadow_pool .srk-veil { background: radial-gradient(ellipse at 50% 85%, rgba(10, 8, 25, 0.55) 0%, transparent 65%); animation: srk-shadow-pool var(--srk-dur, 3.5s) ease-in-out infinite; }

@keyframes srk-ripple-kf { 0%,100% { transform: scale(1); } 50% { transform: scale(calc(1 + 0.02 * var(--srk-amp, 1))); } }
.srk-art.srk-p-ripple { animation: srk-ripple-kf var(--srk-dur, 1.6s) ease-in-out 1; }

@keyframes srk-wind-ruff { 0%,100% { transform: skewX(0); } 50% { transform: skewX(calc(1.2deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-wind_ruff { animation: srk-wind-ruff var(--srk-dur, 3.5s) ease-in-out infinite; }

@keyframes srk-crack-shift { 0%,100% { filter: brightness(1); } 20%,60% { filter: brightness(1.18); } 40%,80% { filter: brightness(0.94); } }
.srk-art.srk-p-crack_shift { animation: srk-crack-shift var(--srk-dur, 0.5s) linear 1; }

@keyframes srk-gear-tick { 0% { transform: rotate(0); } 100% { transform: rotate(calc(8deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-gear_tick { animation: srk-gear-tick var(--srk-dur, 1s) steps(4) infinite; }

@keyframes srk-piston-pump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(-3px * var(--srk-amp, 1))); } }
.srk-art.srk-p-piston_pump { animation: srk-piston-pump var(--srk-dur, 1.2s) steps(2) infinite; }

@keyframes srk-status-blink { 0%,30% { opacity: 1; } 31%,45% { opacity: 0.82; } 46%,75% { opacity: 1; } 76%,85% { opacity: 0.9; } 86%,100% { opacity: 1; } }
.srk-art.srk-p-status_blink { animation: srk-status-blink var(--srk-dur, 1.6s) steps(1) infinite; }

/* ---------------- social (abstract) ---------------- */
@keyframes srk-nuzzle { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(calc(1 + 0.02 * var(--srk-amp, 1))) rotate(1deg); } }
.srk-art.srk-p-nuzzle { animation: srk-nuzzle var(--srk-dur, 1.5s) ease-in-out 1; }

@keyframes srk-groom { 0%,100% { transform: skewX(calc(-1.5deg * var(--srk-amp, 1))); } 50% { transform: skewX(calc(1.5deg * var(--srk-amp, 1))); } }
.srk-art.srk-p-groom { animation: srk-groom var(--srk-dur, 3.2s) ease-in-out infinite; }

@keyframes srk-preen { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.01); filter: brightness(1.06); } }
.srk-art.srk-p-preen { animation: srk-preen var(--srk-dur, 2s) ease-in-out 1; }

@keyframes srk-play-bow { 0%,100% { transform: rotate(0) scaleY(1); } 50% { transform: rotate(3deg) scaleY(0.96); } }
.srk-art.srk-p-play_bow { animation: srk-play-bow var(--srk-dur, 1s) ease-in-out 1; }

@keyframes srk-hide-peek { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
.srk-art.srk-p-hide_peek { animation: srk-hide-peek var(--srk-dur, 1.5s) ease-out 1; }

@keyframes srk-show-off { 0% { transform: rotate(0); filter: brightness(1); } 60% { transform: rotate(180deg); filter: brightness(1.15); } 100% { transform: rotate(360deg); filter: brightness(1); } }
.srk-art.srk-p-show_off { animation: srk-show-off var(--srk-dur, 1.2s) ease-in-out 1; }

@keyframes srk-curl-protect { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.93) rotate(-2deg); } }
.srk-art.srk-p-curl_protect { animation: srk-curl-protect var(--srk-dur, 2.5s) ease-in-out 1; }

/* ---------------- state classes (subtle ambient tint per state) ---------------- */
.srk-stage.srk-state-sleepy .srk-art,
.srk-stage.srk-state-resting .srk-art { filter: saturate(0.92); }
.srk-stage.srk-state-angry .srk-art { filter: saturate(1.12) contrast(1.04); }
.srk-stage.srk-state-sad .srk-art { filter: saturate(0.88) brightness(0.97); }
.srk-stage.srk-state-happy .srk-art,
.srk-stage.srk-state-excited .srk-art { filter: saturate(1.08); }

/* ---------------- accessibility: reduced motion kills continuous motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .srk-art, .srk-stage .srk-veil { animation: none !important; }
  .srk-fx { display: none !important; }
}