/* Conejo animado de Tochtli (SVG en línea). Reposo = micromovimientos; .cosquillas = al pasar el mouse/dedo; .salto = al tocar. */
#conejo{width:100%;height:auto;display:block;overflow:visible}
#conejo .hit{touch-action:pan-y;cursor:pointer}
#conejo .p,#conejo .resp,#conejo .cuerpo{transform-box:view-box}
/* reposo */
#conejo .resp{transform-origin:394px 700px;animation:resp 4.6s ease-in-out infinite alternate,balanceo 7.5s ease-in-out infinite alternate}
@keyframes resp{from{transform:scale(1,1)}to{transform:scale(1.004,1.011)}}
@keyframes balanceo{from{rotate:-.5deg}to{rotate:.5deg}}
#conejo .orejaL{animation:oreja-l 3.3s ease-in-out infinite alternate,tic-l 9s linear infinite}
#conejo .orejaR{animation:oreja-r 3.9s ease-in-out infinite alternate,tic-r 7s linear infinite}
@keyframes oreja-l{from{transform:rotate(.6deg)}to{transform:rotate(-2.2deg)}}
@keyframes oreja-r{from{transform:rotate(-.6deg)}to{transform:rotate(2deg)}}
@keyframes tic-l{0%,82%,100%{rotate:0deg}85%{rotate:-6deg}88%{rotate:2deg}91%{rotate:-4deg}94%{rotate:0deg}}
@keyframes tic-r{0%,60%,100%{rotate:0deg}63%{rotate:5deg}66%{rotate:-2deg}69%{rotate:4deg}72%{rotate:0deg}}
#conejo .brazoR{animation:saludo 2.2s ease-in-out infinite alternate}
@keyframes saludo{from{transform:rotate(-3.5deg)}to{transform:rotate(4.5deg)}}
#conejo .brazoL{animation:brazo-l 3.4s ease-in-out infinite alternate}
@keyframes brazo-l{from{transform:rotate(-2.5deg)}to{transform:rotate(3deg)}}
#conejo .pieL{animation:pie-l 6s ease-in-out infinite}
#conejo .pieR{animation:pie-r 6s ease-in-out infinite 3s}
@keyframes pie-l{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(2.6deg)}82%{transform:rotate(0)}88%{transform:rotate(2deg)}94%{transform:rotate(0)}}
@keyframes pie-r{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-2.4deg)}82%{transform:rotate(0)}88%{transform:rotate(-1.8deg)}94%{transform:rotate(0)}}
#conejo .bigotesL{animation:bigotes-l 3.1s ease-in-out infinite alternate}
#conejo .bigotesR{animation:bigotes-r 3.7s ease-in-out infinite alternate}
@keyframes bigotes-l{from{transform:rotate(-.8deg)}to{transform:rotate(1.4deg)}}
@keyframes bigotes-r{from{transform:rotate(.8deg)}to{transform:rotate(-1.4deg)}}
#conejo .cola{animation:cola 5s ease-in-out infinite}
@keyframes cola{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(7deg)}72%{transform:rotate(-4deg)}78%{transform:rotate(6deg)}84%{transform:rotate(0)}}
#conejo .estrella{transform-box:fill-box;transform-origin:center;animation:titila 3.6s ease-in-out infinite}
#conejo .e1{animation-delay:-.7s;animation-duration:4.1s}#conejo .e2{animation-delay:-1.4s}#conejo .e3{animation-delay:-2.1s;animation-duration:3.2s}
#conejo .e4{animation-delay:-2.8s;animation-duration:4.4s}#conejo .e5{animation-delay:-.3s}#conejo .e6{animation-delay:-1.9s;animation-duration:3.8s}
@keyframes titila{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.88)}}
/* cosquillas */
#conejo.cosquillas .cuerpo{animation:tiembla .12s linear infinite alternate}
@keyframes tiembla{from{transform:translate(-1.6px,.4px) rotate(-.5deg)}to{transform:translate(1.6px,-.4px) rotate(.5deg)}}
#conejo.cosquillas .resp{animation:none}
#conejo.cosquillas .orejaL{animation:cq-oreja-l .17s ease-in-out infinite alternate}
#conejo.cosquillas .orejaR{animation:cq-oreja-r .19s ease-in-out infinite alternate}
@keyframes cq-oreja-l{from{transform:rotate(-8deg)}to{transform:rotate(5deg)}}
@keyframes cq-oreja-r{from{transform:rotate(8deg)}to{transform:rotate(-5deg)}}
#conejo.cosquillas .brazoR{animation:cq-brazo-r .2s ease-in-out infinite alternate}
#conejo.cosquillas .brazoL{animation:cq-brazo-l .22s ease-in-out infinite alternate}
@keyframes cq-brazo-r{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
@keyframes cq-brazo-l{from{transform:rotate(-9deg)}to{transform:rotate(10deg)}}
#conejo.cosquillas .pieL{animation:cq-pie-l .15s ease-in-out infinite alternate}
#conejo.cosquillas .pieR{animation:cq-pie-r .17s ease-in-out infinite alternate}
@keyframes cq-pie-l{from{transform:rotate(-1deg)}to{transform:rotate(4deg)}}
@keyframes cq-pie-r{from{transform:rotate(1deg)}to{transform:rotate(-4deg)}}
#conejo.cosquillas .bigotesL{animation:cq-big-l .13s ease-in-out infinite alternate}
#conejo.cosquillas .bigotesR{animation:cq-big-r .15s ease-in-out infinite alternate}
@keyframes cq-big-l{from{transform:rotate(-3deg)}to{transform:rotate(3.5deg)}}
@keyframes cq-big-r{from{transform:rotate(3deg)}to{transform:rotate(-3.5deg)}}
#conejo.cosquillas .cola{animation:cq-cola .14s ease-in-out infinite alternate}
@keyframes cq-cola{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
/* salto al tocar */
#conejo.salto .cuerpo{animation:salto .6s cubic-bezier(.3,.7,.4,1) 1}
@keyframes salto{0%{transform:translateY(0) scale(1,1)}15%{transform:translateY(3px) scale(1.03,.96)}45%{transform:translateY(-16px) scale(.98,1.03)}75%{transform:translateY(0) scale(1.02,.98)}100%{transform:translateY(0) scale(1,1)}}
#conejo.cosquillas.salto .cuerpo{animation:salto .6s cubic-bezier(.3,.7,.4,1) 1}
@media (prefers-reduced-motion:reduce){#conejo *{animation:none!important}}