/* Islora site: the kitten on the hero's Dock (assets/js/hero-pet.js). Two layers in the 1512 × 982-point stage:
   behind the bar (z 9, cut out where the bar is) and in front of it (z 11). Only the cat itself takes the pointer. */
.hpet-layer { position: absolute; inset: 0; pointer-events: none; }
.hpet-back { z-index: 9; }
.hpet-front { z-index: 11; }
.hpet-cat { position: absolute; left: 0; top: 0; background-repeat: no-repeat; will-change: transform; pointer-events: auto; cursor: pointer; -webkit-touch-callout: none; }
.hpet-shade { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: .9;
  background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,.16) 55%, rgba(0,0,0,0)); }
.hpet-yarn { position: absolute; left: 0; top: 0; width: 14px; height: 14px; }
.hpet-yarn svg { display: block; animation: hpet-spin .9s linear infinite; }
@keyframes hpet-spin { to { transform: rotate(360deg); } }
.hpet-bubble { position: absolute; left: 0; top: 0; width: 30px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.hpet-bubble i { position: absolute; background: #fff; border-radius: 9px; }
.hpet-bubble span { position: absolute; left: 4px; top: 2px; width: 26px; height: 18px; background: rgb(107,120,143);
  -webkit-mask: url('/assets/ui/sym-trash-fill.png') center / auto 9.5px no-repeat; mask: url('/assets/ui/sym-trash-fill.png') center / auto 9.5px no-repeat; }
.hpet-heart { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #ff6b94;
  -webkit-mask: url('/assets/ui/sym-heart-fill.png') center / 10px auto no-repeat; mask: url('/assets/ui/sym-heart-fill.png') center / 10px auto no-repeat;
  animation: hpet-heart 1.8s linear both; }
@keyframes hpet-heart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 10%, 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) scale(1.2); } }
/* an icon the kitten pats: it rocks (spring), tips over and falls off the bar, and comes back */
img.hpet-tip { transform-origin: 0 100%; transition: transform .35s cubic-bezier(.3,1.9,.45,1); }
img.hpet-fallen { transform: translateY(120px) rotate(75deg) !important; opacity: 0; transition: transform .55s cubic-bezier(.5,0,.9,.5), opacity .55s cubic-bezier(.5,0,.9,.5); }
img.hpet-back-in { animation: hpet-back .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes hpet-back { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }