@view-transition {
  navigation: auto;
}

:root {
  --webexpo-view-transition-duration: 400ms;
}

html.webexpo-view-transition #speakers,
html.webexpo-view-transition #speakersGroup {
  view-transition-name: webexpo-speakers;
}

html.webexpo-view-transition header#webexpo-header {
  view-transition-name: webexpo-header;
}

html.webexpo-view-transition footer#site-footer {
  view-transition-name: webexpo-footer;
}

html.webexpo-view-transition::view-transition-old(root) {
  animation: webexpo-vt-fade-out var(--webexpo-view-transition-duration) ease forwards;
}

html.webexpo-view-transition::view-transition-new(root) {
  animation: webexpo-vt-fade-in var(--webexpo-view-transition-duration) ease forwards;
}

html.webexpo-view-transition::view-transition-old(webexpo-speakers),
html.webexpo-view-transition::view-transition-new(webexpo-speakers),
html.webexpo-view-transition::view-transition-old(webexpo-header),
html.webexpo-view-transition::view-transition-new(webexpo-header),
html.webexpo-view-transition::view-transition-old(webexpo-footer),
html.webexpo-view-transition::view-transition-new(webexpo-footer) {
  animation: none;
}

html.webexpo-view-transition::view-transition-old(webexpo-header),
html.webexpo-view-transition::view-transition-new(webexpo-header),
html.webexpo-view-transition::view-transition-old(webexpo-footer),
html.webexpo-view-transition::view-transition-new(webexpo-footer) {
  opacity: 1;
}

html.webexpo-view-transition::view-transition-old(speaker-image),
html.webexpo-view-transition::view-transition-new(speaker-image),
html.webexpo-view-transition::view-transition-old(speaker-name),
html.webexpo-view-transition::view-transition-new(speaker-name) {
  animation-duration: var(--webexpo-view-transition-duration);
  animation-timing-function: ease;
  animation-fill-mode: both;
}

html.webexpo-view-transition::view-transition-old(speaker-image) {
  animation-name: webexpo-vt-image-out;
}

html.webexpo-view-transition::view-transition-new(speaker-image) {
  animation-name: webexpo-vt-image-in;
}

html.webexpo-view-transition::view-transition-old(speaker-name) {
  animation-name: webexpo-vt-name-out;
}

html.webexpo-view-transition::view-transition-new(speaker-name) {
  animation-name: webexpo-vt-name-in;
}

@keyframes webexpo-vt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes webexpo-vt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes webexpo-vt-image-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.2;
    transform: scale(0.98);
  }
}

@keyframes webexpo-vt-image-in {
  from {
    opacity: 0.2;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes webexpo-vt-name-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes webexpo-vt-name-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}