/*
 * Animation moments (specs/005-meet-servers-calls R21, FR-056). Each moment is one custom
 * property naming a full `animation` shorthand, so a custom animation replaces it without
 * touching the markup or the drawer. See docs/animations.md.
 *
 *   --anim-drawer-enter    the profile drawer opening (dialog.is-entering)
 *   --anim-drawer-leave    the profile drawer closing (dialog.is-leaving)
 *   --anim-avatar-enter    a profile picture appearing in the drawer (.avatar--animated)
 *   --anim-avatar-hover    a profile picture under the pointer
 *   --anim-avatar-speaking a picture or call tile while that person speaks ([data-speaking])
 */

:root {
  --anim-drawer-enter: profile-drawer-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  --anim-drawer-leave: profile-drawer-leave 160ms ease-in both;
  --anim-avatar-enter: avatar-enter 320ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
  --anim-avatar-hover: avatar-hover 220ms ease-out both;
  --anim-avatar-speaking: avatar-speaking 1.2s ease-in-out infinite;
}

@keyframes profile-drawer-enter {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes profile-drawer-leave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

@keyframes avatar-enter {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes avatar-hover {
  from { transform: translateY(0); box-shadow: none; }
  to   { transform: translateY(-2px); box-shadow: var(--glow-purple); }
}

@keyframes avatar-speaking {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-pink); }
  50%      { box-shadow: var(--glow-pink), 0 0 0 2px var(--color-pink); }
}

/* The moments in use. Components add only these classes and attributes. */
dialog.is-entering { animation: var(--anim-drawer-enter); }
dialog.is-leaving  { animation: var(--anim-drawer-leave); }

.avatar--animated { animation: var(--anim-avatar-enter); }
.avatar--animated:hover { animation: var(--anim-avatar-hover); }

[data-speaking] .avatar,
.call-tile[data-speaking] { animation: var(--anim-avatar-speaking); }

/* Reduced motion: every moment off; state still shows through colour and borders. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-drawer-enter: none;
    --anim-drawer-leave: none;
    --anim-avatar-enter: none;
    --anim-avatar-hover: none;
    --anim-avatar-speaking: none;
  }

  [data-speaking] .avatar,
  .call-tile[data-speaking] { box-shadow: 0 0 0 2px var(--color-pink); }
}