.tab.active {
  color: #ffffff;
}

.tab.active::before {
  content: "";
  position: absolute;
  height: 100%;
  inset: 0;
  background: #000;
  border-radius: inherit;
  z-index: -1;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
  animation-timing-function: linear(0, 0.186 3.5%, 0.352 7.1%, 0.496 10.8%, 0.623 14.7%, 0.679 16.7%, 0.732 18.8%, 0.78 20.9%, 0.821 23%, 0.86 25.2%, 0.895 27.5%, 0.925 29.8%, 0.951 32.2%, 0.97 34.2%, 0.986 36.3%, 1 38.5%, 1.012 40.7%, 1.021 43%, 1.028 45.4%, 1.033 48%, 1.036 50.7%, 1.037 54.8%, 1.034 59.6%, 1.012 76.6%, 1.004 84.2%, 1.001 91.3%, 1);
}

::view-transition-group(tab-1),
::view-transition-group(tab-2),
::view-transition-group(tab-3),
::view-transition-group(tab-4) {
  z-index: 1;
}

::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
}

.tab::before {
  view-transition-name: tab-background;
}