/* Current food page only. Geometry and reveal match superpower.com/biomarkers.
   Keep the reference's fluid rem sizing local so catalog/navigation type is unchanged. */
.fc-main--hero {
  display: flow-root;
  padding-top: 0;
}

.fc-hero--immersive.fc-hero--reveal {
  --fc-reference-rem: 16px;
  position: relative;
  display: block;
  isolation: auto;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  margin: calc(5.5 * var(--fc-reference-rem)) var(--fc-reference-rem) 0;
  /* Percentage padding deliberately uses the parent's full width, as in the reference. */
  padding: 40% 0 0;
  border: 0;
  border-radius: calc(.75 * var(--fc-reference-rem));
  overflow: hidden;
  overflow: clip;
  background: transparent;
  box-shadow: none;
}

.fc-hero--reveal > .fc-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  transform: none;
  filter: none;
  transform-origin: center;
}

.fc-hero--reveal > .fc-hero-image--desktop { display: none; }

@media (min-width: 480px) {
  .fc-hero--immersive.fc-hero--reveal { padding-top: 35%; }
}

@media (min-width: 969px) and (max-width: 1920px) {
  .fc-hero--immersive.fc-hero--reveal {
    --fc-reference-rem: calc(11.96638655462185px + .21008403361344538vw);
  }
}

@media (min-width: 992px) {
  .fc-hero--immersive.fc-hero--reveal { padding-top: 25%; }
  .fc-hero--reveal > .fc-hero-image--desktop { display: block; }
  .fc-hero--reveal > .fc-hero-image--mobile { display: none; }

  .fc-hero--reveal.is-reveal-pending > [data-fc-hero-reveal] {
    transform: scale(1.08);
    filter: blur(20px);
    will-change: transform, filter;
  }
  .fc-hero--reveal.is-reveal-playing > [data-fc-hero-reveal] {
    animation: fcHeroReferenceReveal 2s cubic-bezier(.22, 1, .36, 1) .3s both;
  }
}

@keyframes fcHeroReferenceReveal {
  from { transform: scale(1.08); filter: blur(20px); }
  to { transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-hero--reveal > [data-fc-hero-reveal] {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
}