* {
  box-sizing: border-box;
}

button {
  border: 0;
}

a,
button {
  position: relative;
}

a:focus-visible,
button:focus-visible {
  outline: none; /* the span is the ring now */
}

.focus-ring {
  position: absolute;
  inset: -6px;
  border: 2px solid deeppink;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
}

/* Visible + named only when the parent is focused */
:is(a, button):focus-visible > .focus-ring {
  opacity: 1;
  view-transition-name: focus-ring;
}

/* movement */
::view-transition-group(focus-ring) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* resizing */
::view-transition-old(focus-ring),
::view-transition-new(focus-ring) {
  animation-duration: 250ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/ */
  /* Break aspect ratio at an element level */
  height: 100%;
  /* But maintain it within the image itself */
  object-fit: none;
  /* And hide parts of the image that go out of bounds */
  overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(focus-ring),
  ::view-transition-old(focus-ring),
  ::view-transition-new(focus-ring) {
    animation: none;
  }
}