Welcome back

<div class="mascot-wrapper">
  <svg class="mascot-svg">
    <!-- Ears, Head, Eyes -->
    <g class="mascot-eyes">
      <circle class="pupil"
        cx="76" cy="91" r="7"/>
    </g>
    <!-- Paws over card edge -->
    <g class="mascot-paws">...</g>
  </svg>
</div>

<button class="btn-signin">
  <div class="door-scene">
    <div class="door-frame">
      <div class="door-panel">
        <span class="door-knob"></span>
      </div>
    </div>
    <svg class="stickman">...</svg>
  </div>
</button>

.door-scene {
  perspective: 600px;
}
.door-panel {
  transform-origin: left center;
  transition: transform 0.8s
    cubic-bezier(.4,0,.2,1);
}
.is-open .door-panel {
  transform: rotateY(-72deg);
}
.is-open .door-glow {
  opacity: 1;
  background: radial-gradient(
    #fffbe6, #fbbf24 70%
  );
}
@keyframes walk {
  0%,100% { rotate: -15deg; }
  50%     { rotate: 15deg;  }
}
.is-walking .stick-leg-l,
.is-walking .stick-leg-r {
  animation: walk 0.3s infinite
    alternate;
}

document.addEventListener(
  'mousemove', (e) => {
  const rect =
    mascot.getBoundingClientRect();
  const dx = e.clientX - rect.x;
  const dy = e.clientY - rect.y;
  const angle = Math.atan2(dy, dx);
  const dist = Math.min(
    Math.hypot(dx, dy) / 80, 1
  );
  pupils.forEach(p => {
    p.style.transform =
      `translate(
        ${Math.cos(angle)*5*dist}px,
        ${Math.sin(angle)*5*dist}px
      )`;
  });
});

form.addEventListener('submit', () => {
  btn.classList.add('is-open');
  stickman.classList.add('is-walking');
  mascot.classList.add('is-happy');
});