@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fx-fyah-out 320ms ease both;
}
::view-transition-new(root) {
  animation: fx-fyah-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.fx-teal::view-transition-old(root) {
  animation-name: fx-teal-out;
}
html.fx-teal::view-transition-new(root) {
  animation-name: fx-teal-in;
}

@keyframes fx-fyah-out {
  to {
    opacity: 0;
    filter: brightness(1.55) saturate(1.45) hue-rotate(-10deg);
    transform: scale(1.035);
  }
}
@keyframes fx-fyah-in {
  from {
    opacity: 0;
    filter: brightness(1.3) saturate(1.2);
    transform: scale(0.975);
  }
}
@keyframes fx-teal-out {
  to {
    opacity: 0;
    filter: brightness(1.25) saturate(1.35) hue-rotate(18deg);
    transform: scale(1.03);
  }
}
@keyframes fx-teal-in {
  from {
    opacity: 0;
    filter: brightness(1.15) saturate(1.15);
    transform: scale(0.98);
  }
}

.logo img,
.vx-brand {
  view-transition-name: sun-mark;
}

.page-title,
.pl-hero h1,
.vx-kb > h1,
.vx-hub-hero h1 {
  view-transition-name: page-title;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .logo img,
  .vx-brand,
  .page-title,
  .pl-hero h1,
  .vx-kb > h1,
  .vx-hub-hero h1 {
    view-transition-name: none;
  }
}

#sun-fx-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: visible;
}
#sun-fx-layer canvas[data-flame-output] {
  pointer-events: none;
  display: block;
}

[data-flame-wrap] {
  position: relative;
}

[data-vhs] {
  position: relative;
}

[data-vhs] canvas[data-vhs-output] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  border-radius: inherit;
}

.is-burning {
  border-color: transparent;
}

body.page-licensing .page-hero-media::after {
  background:
    linear-gradient(180deg, rgba(5, 5, 16, 0.78) 0%, rgba(5, 5, 16, 0.86) 48%, var(--color-bg) 100%);
}
body.page-licensing .page-title,
body.page-licensing .page-lede {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.75);
}

.pl-card.is-hidden { display: none; }
.pl-empty[hidden] { display: none; }

.footer-bottom p + p {
  margin-top: 0.35rem;
}