/* Things react when they are tapped (tapItem in js/scenes/room.js, the act() parts in js/art/furniture.js).
   Only transforms and opacity are animated, so it stays smooth on older iPads. */

/* -------------------------------------------------- any item with nothing else to do: a squash bounce */
.room .it.boing > .it-in { transform-box: fill-box; transform-origin: 50% 100%; animation: itBoing .55s ease-out; }
@keyframes itBoing {
  0%, 100% { transform: scale(1, 1); }
  22% { transform: scale(1.06, .9); }
  48% { transform: scale(.97, 1.05); }
  74% { transform: scale(1.015, .985); }
}
/* rugs and mats lie flat: they puff up a little instead */
.room .it.boing-flat > .it-in { transform-box: fill-box; transform-origin: 50% 50%; animation: itPuff .45s ease-out; }
@keyframes itPuff { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.035); } 70% { transform: scale(.99); } }

/* -------------------------------------------------- tap: 'once' - parts marked act-<kind> play while the item is .acting */
.it [class^="act-"] { transform-box: fill-box; }
.act-swirl, .act-bounce, .act-ripple, .act-spin, .act-glow, .act-blink { transform-origin: 50% 50%; }
.act-hop, .act-shake, .act-jump, .act-fall, .act-fly { transform-origin: 50% 100%; }
.act-swing { transform-origin: 50% 0%; }
.act-feed { transform-origin: 50% 0%; }

/* a toilet flushing: the water swirls into the middle */
.it.acting .act-swirl { animation: actSwirl 1.3s ease-in both; }
@keyframes actSwirl {
  0% { opacity: 0; transform: rotate(0deg) scale(1.05); }
  14% { opacity: 1; }
  78% { opacity: 1; transform: rotate(560deg) scale(.45); }
  100% { opacity: 0; transform: rotate(720deg) scale(.15); }
}
/* fish food sprinkles down through the water */
.it.acting .act-feed { animation: actFeed 1.35s ease-out both; }
@keyframes actFeed {
  0% { opacity: 0; transform: translateY(-6px); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(46px) scaleY(1.3); }
}
/* a hop (the gnome, a fish swimming up for food): --d sets how high */
.it.acting .act-hop { animation: actHop .9s cubic-bezier(.3, .8, .4, 1) both; }
@keyframes actHop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.08, .9); }
  38% { transform: translateY(calc(var(--d, 34px) * -1)) scale(.95, 1.06); }
  62% { transform: translateY(0) scale(1.06, .92); }
  78% { transform: translateY(calc(var(--d, 34px) * -.3)) scale(1, 1); }
  90% { transform: translateY(0) scale(1.02, .98); }
}
/* a swing swinging high and slowing down */
.it.acting .act-swing { animation: actSwing 1.3s ease-in-out both; }
@keyframes actSwing {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(24deg); }
  40% { transform: rotate(-19deg); }
  60% { transform: rotate(12deg); }
  78% { transform: rotate(-6deg); }
  90% { transform: rotate(2deg); }
}
/* a trampoline mat giving under a jump */
.it.acting .act-bounce { animation: actBounce .9s ease-out both; }
@keyframes actBounce {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(.8); }
  42% { transform: scale(1.07); }
  62% { transform: scale(.94); }
  80% { transform: scale(1.02); }
}
/* plants, flowers, bushes and trees give a shake */
.it.acting .act-shake { animation: actShake .9s ease-in-out both; }
@keyframes actShake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(calc(var(--a, 6deg) * -1)); }
  32% { transform: rotate(calc(var(--a, 6deg) * .8)); }
  50% { transform: rotate(calc(var(--a, 6deg) * -.55)); }
  68% { transform: rotate(calc(var(--a, 6deg) * .3)); }
  84% { transform: rotate(calc(var(--a, 6deg) * -.12)); }
}
/* rings spreading over water */
.it.acting .act-ripple { animation: actRipple 1.1s ease-out both; }
@keyframes actRipple {
  0% { opacity: 0; transform: scale(.15); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.5); }
}
/* balls jumping up out of the ball pit */
.it.acting .act-jump { animation: actJump .75s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes actJump {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-46px) scale(1.06); }
  80% { transform: translateY(0) scale(1.08, .9); }
}
/* lights blinking (the security scanner) */
.it.acting .act-blink { animation: actBlink 1.2s steps(1, end) both; }
@keyframes actBlink {
  0%, 34%, 68% { opacity: 1; }
  17%, 51%, 85%, 100% { opacity: 0; }
}
/* a needle spinning round and settling (the scale) */
.it.acting .act-spin { animation: actSpin 1.35s cubic-bezier(.25, .8, .35, 1) both; }
@keyframes actSpin {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(430deg); }
  65% { transform: rotate(330deg); }
  82% { transform: rotate(385deg); }
  100% { transform: rotate(360deg); }
}
/* a soft flash of light (the X-ray machine) */
.it.acting .act-glow { animation: actGlow 1.3s ease-out both; }
@keyframes actGlow {
  0% { opacity: 0; transform: scale(.96); }
  30% { opacity: 0; }
  42% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
/* a butterfly fluttering out of a bush or a flower bed */
.it.acting .act-fly { animation: actFly 1.35s ease-out both; }
@keyframes actFly {
  0% { opacity: 0; transform: translate(0, 0) scale(.5, .5); }
  12% { opacity: 1; transform: translate(6px, -14px) scale(1, .5); }
  24% { transform: translate(14px, -30px) scale(1, 1); }
  36% { transform: translate(10px, -46px) scale(1, .45); }
  50% { transform: translate(24px, -62px) scale(1, 1); }
  64% { transform: translate(18px, -80px) scale(1, .45); }
  78% { opacity: 1; transform: translate(34px, -98px) scale(1, 1); }
  100% { opacity: 0; transform: translate(44px, -122px) scale(1, .5); }
}
/* something dropping down and bouncing on the ground (an apple from the tree): --d sets how far */
.it.acting .act-fall { animation: actFall 1.3s ease-in both; }
@keyframes actFall {
  0% { opacity: 0; transform: translateY(0); }
  8% { opacity: 1; }
  45% { transform: translateY(var(--d, 60px)); animation-timing-function: ease-out; }
  60% { transform: translateY(calc(var(--d, 60px) - 16px)); animation-timing-function: ease-in; }
  74% { opacity: 1; transform: translateY(var(--d, 60px)); }
  100% { opacity: 0; transform: translateY(var(--d, 60px)); }
}

/* -------------------------------------------------- a parasol folding up (door kind 'fold') */
.op-fold { transform-origin: 50% 50%; }
.op-fold.open { transform: scale(.28); }

/* -------------------------------------------------- things that keep going while switched on (tap: 'toggle') */
/* the check-in belt: the stripes run back and the suitcase rides off */
.belt-y { animation: beltY .5s linear infinite; }
@keyframes beltY { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.bag-away { animation: bagAway 2.4s ease-in infinite; }
@keyframes bagAway {
  0% { transform: translateY(26px); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}
/* warm air from the hair dryer hood */
.blow { animation: blow 1.2s linear infinite; opacity: 0; }
@keyframes blow { 0% { transform: translateY(-8px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(18px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .room .it.boing > .it-in, .room .it.boing-flat > .it-in, .it.acting [class^="act-"], .belt-y, .bag-away, .blow { animation: none !important; }
  .op-fold { transition-duration: .01s; }
}