.portfolio.pixel-background {
  --pixel-base: 0;
}

.portfolio.pixel-background[data-pixel-page="about"] { --pixel-base: 0.20; }
.portfolio.pixel-background[data-pixel-page="work"] { --pixel-base: 0.40; }
.portfolio.pixel-background[data-pixel-page="experience"] { --pixel-base: 0.60; }

.portfolio.pixel-background > .ambient-backdrop {
  --pixel-mix: var(--pixel-base);
  background: none;
  mask-image: none;
  opacity: 0.45;
  transform: none;
  animation: portfolio-pixel-breathe 20s ease-in-out infinite;
  will-change: opacity;
}

.portfolio.pixel-background > .ambient-backdrop::before,
.portfolio.pixel-background > .ambient-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  min-height: 1100px;
  background: url("/img/pixel-field.svg") center top / cover no-repeat;
  image-rendering: pixelated;
  mask-image: none;
  animation: none;
  will-change: auto;
}

.portfolio.pixel-background > .ambient-backdrop::before {
  opacity: calc(1 - var(--pixel-mix, var(--pixel-base)));
  transform: none;
}

.portfolio.pixel-background > .ambient-backdrop::after {
  opacity: var(--pixel-mix, var(--pixel-base));
  transform: scaleX(-1);
}

@keyframes portfolio-pixel-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.70; }
}

@media (max-width: 800px) {
  .portfolio.pixel-background > .ambient-backdrop::before,
  .portfolio.pixel-background > .ambient-backdrop::after {
    background-position: 18% top;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 250ms; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio.pixel-background > .ambient-backdrop {
    opacity: 0.55;
    animation: none;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .portfolio.pixel-background > .ambient-backdrop::before,
  .portfolio.pixel-background > .ambient-backdrop::after {
    animation: none;
    transition: none;
    will-change: auto;
  }
}