/* Soft food photography in page backgrounds. Kept below content for readability. */
.screen.agl-food-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.screen.agl-food-background::before,
.screen.agl-food-background::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image: var(--agl-page-meal);
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  opacity: .085;
  filter: saturate(.72) contrast(.9);
  -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 75%);
  mask-image: radial-gradient(circle at center, #000 38%, transparent 75%);
}

.screen.agl-food-background::before {
  width: 330px;
  height: 330px;
  top: -92px;
  right: -112px;
}

.screen.agl-food-background::after {
  width: 270px;
  height: 270px;
  top: 48%;
  left: -128px;
  opacity: .055;
  transform: rotate(-8deg);
}

.screen.agl-food-background > * {
  position: relative;
  z-index: 1;
}

.screen.agl-bg-today {
  --agl-page-meal: url("../images/lemon-salmon.webp");
}

.screen.agl-bg-recipes {
  --agl-page-meal: url("../images/chicken-tinga-spaghetti-squash-boats.webp");
}

.screen.agl-bg-log {
  --agl-page-meal: url("../images/shrimp-scampi-zucchini-ribbons.webp");
}

.screen.agl-bg-weekly-plan {
  --agl-page-meal: url("../images/chicken-pesto-spaghetti-squash.webp");
}

.screen.agl-bg-profile {
  --agl-page-meal: url("../images/roasted-vegetable-quinoa.webp");
}

/* Meal planner and Safety Toolkit use different faded meals behind their cards. */
.mp-shell,
.agl-sheet {
  position: relative;
  isolation: isolate;
}

.mp-shell::before,
.agl-sheet::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 420px;
  height: 420px;
  right: -155px;
  top: 112px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  opacity: .07;
  filter: saturate(.7) contrast(.88);
  -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 76%);
  mask-image: radial-gradient(circle at center, #000 35%, transparent 76%);
}

.mp-shell::before {
  background-image: url("../images/turkey-bolognese-spaghetti-squash.webp");
}

.agl-sheet::before {
  background-image: url("../images/sesame-chicken-zucchini-ribbon-stir-fry.webp");
}

.mp-head,
.mp-main-tabs,
.mp-content,
.agl-head,
.agl-tabs,
.agl-body {
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .screen.agl-food-background::before {
    width: 440px;
    height: 440px;
    top: -145px;
    right: -120px;
  }

  .screen.agl-food-background::after {
    width: 360px;
    height: 360px;
    left: -165px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .screen.agl-food-background::before,
  .screen.agl-food-background::after,
  .mp-shell::before,
  .agl-sheet::before {
    display: none;
  }
}