/* Local SVG joints remain attached while the outer wrapper places each animal. */
#zodiac-intro .zodiac-animal.articulated { color: #e7cc86; fill: currentColor; }
#zodiac-intro .creature,
#zodiac-intro .animal-joint { transform-box: view-box; transform-origin: 0 0; }
#zodiac-intro .animal-joint { will-change: transform; }
#zodiac-intro .animal-far,
#zodiac-intro .far-part { fill: #b59a59; }
#zodiac-intro .animal-body { fill: #e9d291; }
#zodiac-intro .animal-cutout { fill: #102c38; }
#zodiac-intro .animal-engraving { fill: none; stroke: #395451; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
#zodiac-intro .zodiac-yinyang,
#zodiac-intro .zodiac-year-ring { transform-box: view-box; transform-origin: 300px 300px; }
#zodiac-intro.intro-awake .zodiac-animal.articulated { animation: none; }

/* Gallop: hindquarters gather, extend, then forelegs reach and receive weight. */
#zodiac-intro.intro-awake .creature-horse { animation: horse-body .82s -.08s cubic-bezier(.4,0,.6,1) infinite; }
#zodiac-intro.intro-awake .horse-front-near { animation: horse-front .82s linear infinite; }
#zodiac-intro.intro-awake .horse-front-far { animation: horse-front .82s -.13s linear infinite; }
#zodiac-intro.intro-awake .horse-front-near-knee { animation: horse-front-knee .82s linear infinite; }
#zodiac-intro.intro-awake .horse-front-far-knee { animation: horse-front-knee .82s -.13s linear infinite; }
#zodiac-intro.intro-awake .horse-back-near { animation: horse-back .82s linear infinite; }
#zodiac-intro.intro-awake .horse-back-far { animation: horse-back .82s -.12s linear infinite; }
#zodiac-intro.intro-awake .horse-back-near-knee { animation: horse-back-knee .82s linear infinite; }
#zodiac-intro.intro-awake .horse-back-far-knee { animation: horse-back-knee .82s -.12s linear infinite; }
#zodiac-intro.intro-awake .horse-head { animation: horse-head .82s -.05s ease-in-out infinite; }
#zodiac-intro.intro-awake .horse-tail { animation: horse-tail .82s -.15s ease-in-out infinite; }
@keyframes horse-body { 0%,100%{transform:translateY(1px) rotate(1deg)} 24%{transform:translateY(-7px) rotate(-3deg)} 48%{transform:translateY(-4px) rotate(-1deg)} 74%{transform:translateY(3px) rotate(2deg)} }
@keyframes horse-front { 0%,100%{transform:rotate(-32deg)} 23%{transform:rotate(-70deg)} 48%{transform:rotate(32deg)} 72%{transform:rotate(49deg)} }
@keyframes horse-front-knee { 0%,100%{transform:rotate(9deg)} 25%{transform:rotate(72deg)} 48%{transform:rotate(95deg)} 74%{transform:rotate(4deg)} }
@keyframes horse-back { 0%,100%{transform:rotate(54deg)} 26%{transform:rotate(4deg)} 52%{transform:rotate(-61deg)} 77%{transform:rotate(-18deg)} }
@keyframes horse-back-knee { 0%,100%{transform:rotate(-38deg)} 26%{transform:rotate(-9deg)} 52%{transform:rotate(-66deg)} 77%{transform:rotate(-92deg)} }
@keyframes horse-head { 0%,100%{transform:rotate(3deg)} 40%{transform:rotate(-6deg)} 78%{transform:rotate(4deg)} }
@keyframes horse-tail { 0%,100%{transform:rotate(9deg)} 40%{transform:rotate(-23deg)} 72%{transform:rotate(3deg)} }

/* Rabbit: anticipation, rear-leg drive, airborne tuck, forefoot landing. */
#zodiac-intro.intro-awake .creature-rabbit { animation: rabbit-leap 1.8s -.5s cubic-bezier(.35,0,.3,1) infinite; }
#zodiac-intro.intro-awake .rabbit-leg-back { animation: rabbit-drive 1.8s -.5s ease-in-out infinite; }
#zodiac-intro.intro-awake .rabbit-leg-front { animation: rabbit-reach 1.8s -.5s ease-in-out infinite; }
#zodiac-intro.intro-awake .rabbit-ear-front { animation: rabbit-ear 1.8s -.43s ease-in-out infinite; }
#zodiac-intro.intro-awake .rabbit-ear-back { animation: rabbit-ear 1.8s -.34s ease-in-out infinite; }
#zodiac-intro.intro-awake .rabbit-head { animation: rabbit-look 1.8s -.5s ease-in-out infinite; }
#zodiac-intro.intro-awake .rabbit-tail { animation: rabbit-tail 1.8s -.43s ease-in-out infinite; }
@keyframes rabbit-leap { 0%,16%,77%,100%{transform:translate(0,0)} 25%{transform:translate(-2px,4px) scale(1.06,.86)} 35%{transform:translate(1px,-10px) rotate(-6deg) scale(.97,1.04)} 47%{transform:translate(4px,-15px) rotate(-1deg)} 58%{transform:translate(6px,-3px) rotate(6deg)} 64%{transform:translate(5px,3px) scale(1.07,.88)} 72%{transform:translate(1px,0)} }
@keyframes rabbit-drive { 0%,20%,78%,100%{transform:rotate(0)} 28%{transform:rotate(-12deg)} 37%{transform:rotate(55deg)} 49%{transform:rotate(-38deg)} 59%{transform:rotate(-22deg)} 66%{transform:rotate(8deg)} }
@keyframes rabbit-reach { 0%,22%,78%,100%{transform:rotate(0)} 35%{transform:rotate(-53deg)} 47%{transform:rotate(-75deg)} 57%{transform:rotate(25deg)} 66%{transform:rotate(-8deg)} }
@keyframes rabbit-ear { 0%,17%,80%,100%{transform:rotate(-3deg)} 29%{transform:rotate(8deg)} 42%{transform:rotate(-33deg)} 57%{transform:rotate(-12deg)} 66%{transform:rotate(15deg)} 73%{transform:rotate(-10deg)} }
@keyframes rabbit-look { 0%,20%,78%,100%{transform:rotate(0)} 35%{transform:rotate(-7deg)} 57%{transform:rotate(8deg)} 66%{transform:rotate(-5deg)} }
@keyframes rabbit-tail { 0%,22%,78%,100%{transform:rotate(0)} 40%{transform:rotate(25deg)} 63%{transform:rotate(-15deg)} }

/* The wingless dragon swims through air: a travelling wave along the spine. */
#zodiac-intro.intro-awake .creature-dragon { animation: dragon-flight 3.1s -.65s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-tail { animation: dragon-tail 1.95s -.6s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-body-low { animation: dragon-spine 1.95s -.35s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-body-high { animation: dragon-spine 1.95s ease-in-out infinite reverse; }
#zodiac-intro.intro-awake .dragon-neck { animation: dragon-neck 1.95s -.15s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-head { animation: dragon-head 1.95s -.3s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-whiskers { animation: dragon-whiskers 1.95s -.5s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-leg-front { animation: dragon-claws 1.95s -.25s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-leg-back { animation: dragon-claws 1.95s -1.4s ease-in-out infinite; }
#zodiac-intro.intro-awake .dragon-clouds { animation: dragon-clouds 3.1s -.65s ease-in-out infinite; }
@keyframes dragon-flight { 0%,100%{transform:translate(-2px,3px) rotate(-4deg)} 45%{transform:translate(3px,-10px) rotate(4deg)} 75%{transform:translate(2px,-3px) rotate(1deg)} }
@keyframes dragon-tail { 0%,100%{transform:rotate(-17deg)} 50%{transform:rotate(21deg)} }
@keyframes dragon-spine { 0%,100%{transform:rotate(-7deg) translateY(-1px)} 50%{transform:rotate(7deg) translateY(1px)} }
@keyframes dragon-neck { 0%,100%{transform:rotate(10deg)} 50%{transform:rotate(-13deg)} }
@keyframes dragon-head { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
@keyframes dragon-whiskers { 0%,100%{transform:rotate(-12deg) scale(1,.9)} 50%{transform:rotate(10deg) scale(1,1.08)} }
@keyframes dragon-claws { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(20deg)} }
@keyframes dragon-clouds { 0%,100%{transform:translateX(3px);opacity:.3} 50%{transform:translateX(-4px);opacity:.65} }

/* Small quadrupeds: paired, offset footfalls and follow-through at ears/tails. */
#zodiac-intro.intro-awake .creature-rat { animation: rat-scamper 1.8s -.35s ease-in-out infinite; }
#zodiac-intro.intro-awake .rat-front-near,
#zodiac-intro.intro-awake .rat-back-far { animation: quick-step .34s linear infinite; }
#zodiac-intro.intro-awake .rat-front-far,
#zodiac-intro.intro-awake .rat-back-near { animation: quick-step .34s -.17s linear infinite; }
#zodiac-intro.intro-awake .rat-tail { animation: rat-tail 1.1s ease-in-out infinite; }
#zodiac-intro.intro-awake .rat-ear { animation: ear-listen 2.2s -1.35s ease-in-out infinite; }
#zodiac-intro.intro-awake .rat-whiskers { animation: whisker-twitch .7s ease-in-out infinite; }
@keyframes rat-scamper { 0%,100%{transform:translate(-4px,1px) rotate(-1deg)} 24%{transform:translate(4px,-2px) rotate(1deg)} 47%{transform:translate(5px,1px)} 74%{transform:translate(-1px,-1px)} }
@keyframes quick-step { 0%,100%{transform:rotate(-32deg)} 50%{transform:rotate(34deg)} }
@keyframes rat-tail { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(12deg)} }
@keyframes ear-listen { 0%,65%,100%{transform:rotate(0)} 72%{transform:rotate(-16deg)} 79%{transform:rotate(10deg)} 87%{transform:rotate(-5deg)} }
@keyframes whisker-twitch { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }

#zodiac-intro.intro-awake .creature-dog { animation: dog-trot .84s -.1s ease-in-out infinite; }
#zodiac-intro.intro-awake .dog-front-near,
#zodiac-intro.intro-awake .dog-back-far { animation: trot-leg .84s linear infinite; }
#zodiac-intro.intro-awake .dog-front-far,
#zodiac-intro.intro-awake .dog-back-near { animation: trot-leg .84s -.42s linear infinite; }
#zodiac-intro.intro-awake [class*="dog-"][class*="-knee"] { animation: trot-knee .84s ease-in-out infinite; }
#zodiac-intro.intro-awake .animal-joint.dog-front-far-knee,
#zodiac-intro.intro-awake .animal-joint.dog-back-near-knee { animation-delay: -.42s; }
#zodiac-intro.intro-awake .dog-tail { animation: dog-wag .44s ease-in-out infinite; }
#zodiac-intro.intro-awake .dog-head { animation: dog-nod .84s -.1s ease-in-out infinite; }
#zodiac-intro.intro-awake .dog-ear { animation: dog-ear .84s -.2s ease-in-out infinite; }
@keyframes dog-trot { 0%,50%,100%{transform:translateY(1px)} 25%,75%{transform:translateY(-5px)} }
@keyframes trot-leg { 0%,100%{transform:rotate(-32deg)} 50%{transform:rotate(33deg)} }
@keyframes trot-knee { 0%,50%,100%{transform:rotate(0)} 25%{transform:rotate(35deg)} 75%{transform:rotate(-10deg)} }
@keyframes dog-wag { 0%,100%{transform:rotate(-23deg)} 50%{transform:rotate(29deg)} }
@keyframes dog-nod { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(6deg)} }
@keyframes dog-ear { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(13deg)} }

#zodiac-intro.intro-awake .creature-pig { animation: pig-waddle 1.5s -.2s ease-in-out infinite; }
#zodiac-intro.intro-awake .pig-head { animation: pig-snuffle 2.1s -.45s ease-in-out infinite; }
#zodiac-intro.intro-awake .pig-tail { animation: pig-tail 1s -.2s ease-in-out infinite; }
#zodiac-intro.intro-awake .pig-front-near,
#zodiac-intro.intro-awake .pig-back-far { animation: small-step 1.5s linear infinite; }
#zodiac-intro.intro-awake .pig-front-far,
#zodiac-intro.intro-awake .pig-back-near { animation: small-step 1.5s -.75s linear infinite; }
@keyframes pig-waddle { 0%,50%,100%{transform:translateY(1px) rotate(-1deg)} 25%,75%{transform:translateY(-2px) rotate(1deg)} }
@keyframes pig-snuffle { 0%,100%{transform:rotate(-4deg)} 26%{transform:rotate(16deg) translateY(2px)} 37%{transform:rotate(8deg)} 49%{transform:rotate(16deg)} 70%{transform:rotate(-6deg)} }
@keyframes pig-tail { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(15deg)} }
@keyframes small-step { 0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(16deg)} }

#zodiac-intro.intro-awake .creature-rooster { animation: rooster-strut 1.25s -.12s ease-in-out infinite; }
#zodiac-intro.intro-awake .rooster-leg-near { animation: rooster-step 1.25s linear infinite; }
#zodiac-intro.intro-awake .rooster-leg-far { animation: rooster-step 1.25s -.625s linear infinite; }
#zodiac-intro.intro-awake .rooster-head { animation: rooster-neck 1.25s -.1s ease-in-out infinite; }
#zodiac-intro.intro-awake .rooster-wing { animation: rooster-wing 2.1s -1.35s ease-in-out infinite; }
#zodiac-intro.intro-awake .rooster-tail { animation: rooster-tail 1.25s -.25s ease-in-out infinite; }
@keyframes rooster-strut { 0%,50%,100%{transform:translateY(1px)} 25%,75%{transform:translateY(-2px)} }
@keyframes rooster-step { 0%,100%{transform:rotate(-18deg)} 35%{transform:rotate(24deg) translateY(-4px)} 65%{transform:rotate(12deg)} }
@keyframes rooster-neck { 0%,50%,100%{transform:rotate(3deg)} 25%,75%{transform:rotate(-9deg)} }
@keyframes rooster-wing { 0%,57%,100%{transform:rotate(0)} 66%{transform:rotate(-34deg)} 74%{transform:rotate(4deg)} 83%{transform:rotate(-27deg)} 92%{transform:rotate(0)} }
@keyframes rooster-tail { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(8deg)} }

#zodiac-intro.intro-awake .creature-monkey { animation: monkey-bounce 1.85s -.3s ease-in-out infinite; }
#zodiac-intro.intro-awake .monkey-arm-front { animation: monkey-reach 1.85s ease-in-out infinite; }
#zodiac-intro.intro-awake .monkey-arm-back { animation: monkey-reach 1.85s -.925s ease-in-out infinite reverse; }
#zodiac-intro.intro-awake .monkey-leg-near { animation: monkey-step 1.85s ease-in-out infinite; }
#zodiac-intro.intro-awake .monkey-leg-far { animation: monkey-step 1.85s -.925s ease-in-out infinite; }
#zodiac-intro.intro-awake .monkey-tail { animation: monkey-tail 1.85s -.3s ease-in-out infinite; }
#zodiac-intro.intro-awake .monkey-head { animation: monkey-look 2.5s -.5s ease-in-out infinite; }
@keyframes monkey-bounce { 0%,50%,100%{transform:translateY(2px) rotate(-3deg)} 25%,75%{transform:translateY(-7px) rotate(3deg)} }
@keyframes monkey-reach { 0%,100%{transform:rotate(-21deg)} 50%{transform:rotate(42deg)} }
@keyframes monkey-step { 0%,100%{transform:rotate(-17deg)} 50%{transform:rotate(17deg)} }
@keyframes monkey-tail { 0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(18deg)} }
@keyframes monkey-look { 0%,100%{transform:rotate(-7deg)} 45%{transform:rotate(8deg)} 65%{transform:rotate(2deg)} }

#zodiac-intro.intro-awake .creature-sheep { animation: sheep-bound 2.1s -.35s ease-in-out infinite; }
#zodiac-intro.intro-awake .sheep-head { animation: sheep-graze 2.6s -.6s ease-in-out infinite; }
#zodiac-intro.intro-awake .sheep-tail { animation: sheep-tail 1s ease-in-out infinite; }
#zodiac-intro.intro-awake .sheep-front-near,
#zodiac-intro.intro-awake .sheep-back-far { animation: sheep-bound-leg 2.1s -.35s linear infinite; }
#zodiac-intro.intro-awake .sheep-front-far,
#zodiac-intro.intro-awake .sheep-back-near { animation: sheep-bound-leg 2.1s -.42s linear infinite; }
@keyframes sheep-bound { 0%,100%{transform:translateY(1px)} 18%{transform:translateY(3px) scale(1.02,.97)} 39%{transform:translateY(-7px) rotate(-2deg)} 58%{transform:translateY(-4px) rotate(2deg)} 75%{transform:translateY(2px) scale(1.02,.98)} }
@keyframes sheep-bound-leg { 0%,100%{transform:rotate(-8deg)} 20%{transform:rotate(12deg)} 40%{transform:rotate(-24deg)} 62%{transform:rotate(21deg)} 78%{transform:rotate(-5deg)} }
@keyframes sheep-graze { 0%,100%{transform:rotate(-3deg)} 45%,65%{transform:rotate(19deg)} 53%{transform:rotate(15deg)} }
@keyframes sheep-tail { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(18deg)} }

#zodiac-intro.intro-awake .snake-coil-back { animation: snake-back 2.35s ease-in-out infinite; }
#zodiac-intro.intro-awake .snake-coil-front { animation: snake-front 2.35s -.7s ease-in-out infinite; }
#zodiac-intro.intro-awake .snake-neck { animation: snake-neck 2.35s -.4s ease-in-out infinite; }
#zodiac-intro.intro-awake .snake-head { animation: snake-head 2.35s -.7s ease-in-out infinite; }
#zodiac-intro.intro-awake .snake-tongue { animation: snake-tongue 2.35s -1.4s ease-in-out infinite; }
@keyframes snake-back { 0%,100%{transform:scale(1.04,.93)} 50%{transform:scale(.95,1.07)} }
@keyframes snake-front { 0%,100%{transform:translateX(-3px) scaleX(.96)} 50%{transform:translateX(3px) scaleX(1.05)} }
@keyframes snake-neck { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(11deg)} }
@keyframes snake-head { 0%,100%{transform:rotate(7deg)} 50%{transform:rotate(-8deg)} }
@keyframes snake-tongue { 0%,68%,86%,100%{transform:scaleX(.05);opacity:0} 73%,81%{transform:scaleX(1);opacity:1} 77%{transform:scaleX(.3);opacity:.7} }

#zodiac-intro.intro-awake .creature-tiger { animation: tiger-prowl 1.55s -.18s ease-in-out infinite; }
#zodiac-intro.intro-awake .tiger-front-near,
#zodiac-intro.intro-awake .tiger-back-far { animation: prowl-leg 1.55s linear infinite; }
#zodiac-intro.intro-awake .tiger-front-far,
#zodiac-intro.intro-awake .tiger-back-near { animation: prowl-leg 1.55s -.775s linear infinite; }
#zodiac-intro.intro-awake [class*="tiger-"][class*="-knee"] { animation: prowl-knee 1.55s ease-in-out infinite; }
#zodiac-intro.intro-awake .animal-joint.tiger-front-far-knee,
#zodiac-intro.intro-awake .animal-joint.tiger-back-near-knee { animation-delay: -.775s; }
#zodiac-intro.intro-awake .tiger-head { animation: tiger-head 1.55s ease-in-out infinite; }
#zodiac-intro.intro-awake .tiger-tail { animation: tiger-tail 2.4s -.35s ease-in-out infinite; }
@keyframes tiger-prowl { 0%,100%{transform:translate(-2px,2px) rotate(-1deg)} 28%{transform:translate(1px,-3px) rotate(-2deg)} 52%{transform:translate(3px,1px) rotate(1deg)} 76%{transform:translate(0,-2px)} }
@keyframes prowl-leg { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(26deg)} }
@keyframes prowl-knee { 0%,50%,100%{transform:rotate(0)} 25%{transform:rotate(22deg)} 75%{transform:rotate(-8deg)} }
@keyframes tiger-head { 0%,100%{transform:rotate(4deg)} 45%{transform:rotate(-7deg)} 72%{transform:rotate(-2deg)} }
@keyframes tiger-tail { 0%,100%{transform:rotate(-16deg)} 50%{transform:rotate(19deg)} }

#zodiac-intro.intro-awake .creature-ox { animation: ox-weight 2.7s -.3s ease-in-out infinite; }
#zodiac-intro.intro-awake .ox-head { animation: ox-nod 2.7s -.4s ease-in-out infinite; }
#zodiac-intro.intro-awake .ox-tail { animation: ox-tail 2.1s -.6s ease-in-out infinite; }
#zodiac-intro.intro-awake .ox-front-near,
#zodiac-intro.intro-awake .ox-back-far { animation: ox-step 2.7s linear infinite; }
#zodiac-intro.intro-awake .ox-front-far,
#zodiac-intro.intro-awake .ox-back-near { animation: ox-step 2.7s -1.35s linear infinite; }
@keyframes ox-weight { 0%,50%,100%{transform:translateY(2px) rotate(.7deg)} 25%,75%{transform:translateY(-1px) rotate(-.7deg)} }
@keyframes ox-step { 0%,100%{transform:rotate(-18deg)} 42%{transform:rotate(20deg)} 65%{transform:rotate(12deg)} }
@keyframes ox-nod { 0%,100%{transform:rotate(-3deg)} 45%,60%{transform:rotate(10deg)} }
@keyframes ox-tail { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(14deg)} }

#zodiac-intro.intro-still .creature,
#zodiac-intro.intro-still .animal-joint,
body.motion-paused #zodiac-intro .creature,
body.motion-paused #zodiac-intro .animal-joint { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #zodiac-intro .creature,
  #zodiac-intro .animal-joint,
  #zodiac-intro .dragon-clouds { animation: none !important; }
}