/* About subpages — unified blur crossfade on live content */

#about-motion-hero,
#about-motion-stage {
  position: relative;
  overflow: hidden;
}

#about-motion-hero.is-animating,
#about-motion-stage.is-animating {
  pointer-events: none;
}

#about-hero-inner,
#about-panel {
  will-change: opacity, filter;
}

/* Stacked hero images — crossfade without blanking to white */
.about-hero-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-hero-bg-layer--visible {
  opacity: 1;
}

html.about-is-transitioning {
  overflow-anchor: none;
}

@keyframes lgAboutCrossOut {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes lgAboutCrossIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.about-blur-out {
  animation: lgAboutCrossOut 0.26s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

.about-blur-in {
  animation: lgAboutCrossIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  #about-motion-hero.is-animating,
  #about-motion-stage.is-animating {
    pointer-events: auto;
  }

  .about-blur-out,
  .about-blur-in {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .about-hero-bg-layer {
    transition: none;
  }
}