body.fade-version {
  background:
    linear-gradient(180deg, rgba(255, 244, 247, 0.96), rgba(248, 232, 237, 0.96)),
    #f8e8ed;
}

.fade-version .hero {
  background: #f8e8ed;
}

.fade-version .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 250, 251, 0.22), rgba(255, 250, 251, 0));
  opacity: 0;
  pointer-events: none;
  animation: fadeSoftGlow 2.8s ease 0.15s forwards;
}

.fade-version .hero img {
  opacity: 0;
  filter: saturate(0.94) brightness(1.04);
  transform: scale(1.018);
  animation: fadeHeroImage 2.35s ease 0.12s forwards;
}

.fade-version .hero__shade {
  opacity: 0;
  animation: fadeInOnly 1.85s ease 0.72s forwards;
}

.fade-version .hero__content {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeRise 1.55s ease 1.0s forwards;
}

.fade-version .quick-nav {
  opacity: 0;
  animation: fadeInOnly 1.0s ease 1.65s forwards;
}

.fade-version .fade-item {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.72, 0.16, 1);
  transition-delay: var(--fade-delay, 0ms);
  will-change: opacity, transform;
}

.fade-version .fade-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-version .gallery-grid figure,
.fade-version .gallery-grid figure.fade-item {
  opacity: 1;
  transform: none;
}

.fade-version .ending img {
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 1.1s ease,
    transform 1.3s ease;
}

.fade-version .ending.is-visible img {
  opacity: 1;
  transform: scale(1);
}

@keyframes fadeHeroImage {
  to {
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: scale(1);
  }
}

@keyframes fadeInOnly {
  to {
    opacity: 1;
  }
}

@keyframes fadeRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSoftGlow {
  0% {
    opacity: 0;
  }

  42% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-version .hero img,
  .fade-version .hero__shade,
  .fade-version .hero__content,
  .fade-version .hero::after,
  .fade-version .quick-nav {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .fade-version .fade-item,
  .fade-version .gallery-grid figure.fade-item,
  .fade-version .ending img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}