/* The food sits behind the editorial layer, like a pastry laid on the counter. */
.pastry-surface {
  --counter-backdrop: url("assets/pastry-counter-backdrop.jpg");
  --seasonal-backdrop: url("assets/pastry-seasonal-backdrop.jpg");
  --pastry-photo: var(--counter-backdrop);
  --pastry-position: center;
  --pastry-travel: clamp(22px, 3.3vw, 44px);
  --pastry-wash: linear-gradient(95deg, #f9f3e8 0%, #f9f3e8ed 42%, #f9f3e872 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

.pastry-surface::before,
.pastry-surface::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.pastry-surface::before {
  z-index: -2;
  inset: calc(-1 * var(--pastry-travel)) 0;
  background: var(--pastry-photo) var(--pastry-position) / cover no-repeat;
}

.pastry-surface::after {
  z-index: -1;
  inset: 0;
  background: var(--pastry-wash);
}

.counter-preview {
  --pastry-position: center 62%;
  --pastry-wash: linear-gradient(180deg, #fbf4e52a 0%, #f6ecd933 57%, #f8f3e9f5 100%);
}
.counter-preview > .section-heading {
  padding: clamp(18px, 3vw, 42px);
  margin-bottom: clamp(20px, 2.5vw, 36px);
  border: 1px solid #e9d9c2;
  border-radius: 12px;
  background: #fffaf2f5;
  box-shadow: 0 9px 28px #4d2f1612;
}

.collection-hero, .gifting-hero, .gifting-strip {
  --pastry-photo: var(--seasonal-backdrop);
}
.collection-hero {
  --pastry-position: center 42%;
  --pastry-wash: linear-gradient(97deg, #faf4e8f7 0%, #faf4e8e8 41%, #faf4e843 100%);
}
.bakery-intro {
  --pastry-position: right 52%;
  --pastry-wash: linear-gradient(108deg, #faf4e9fc 0%, #faf4e9ea 39%, #faf4e969 100%);
}
.gifting-hero {
  --pastry-position: right center;
  --pastry-wash: linear-gradient(104deg, #1b3025f7 0%, #20382ce9 46%, #243b2eae 100%);
}
.gifting-strip {
  --pastry-position: center 55%;
  --pastry-wash: linear-gradient(94deg, #621519d4, #811b20f4 50%, #621519d9);
}
.heritage-after, .visit-hero {
  --pastry-position: right 46%;
  --pastry-wash: linear-gradient(105deg, #f8f3e9 0%, #f8f3e9ef 54%, #f8f3e9ab 100%);
}

/* Purely scroll-driven. Browsers without the timeline keep the same still image. */
@supports (animation-timeline: view()) and (view-timeline-name: --pastry-drift) {
  .pastry-surface {
    view-timeline-name: --pastry-drift;
  }
  html[data-motion="on"] .pastry-surface::before {
    animation: pastry-drift linear both;
    animation-timeline: --pastry-drift;
    animation-range: entry 0% exit 100%;
  }
  @keyframes pastry-drift {
    from { transform: translateY(calc(-1 * var(--pastry-travel))); }
    to { transform: translateY(var(--pastry-travel)); }
  }
}

@media (max-width: 700px) {
  .pastry-surface {
    --counter-backdrop: url("assets/pastry-counter-backdrop-mobile.jpg");
    --seasonal-backdrop: url("assets/pastry-seasonal-backdrop-mobile.jpg");
    --pastry-position: 88% center;
    --pastry-travel: 16px;
  }
  .counter-preview {
    --pastry-position: right center;
    --pastry-wash: linear-gradient(180deg, #f8f3e94c, #f8f3e966 53%, #f8f3e9fa 94%);
  }
  .collection-hero, .bakery-intro, .heritage-after, .visit-hero {
    --pastry-wash: linear-gradient(180deg, #faf4e9f7, #faf4e9e8 47%, #faf4e9ab);
  }
  .gifting-hero {
    --pastry-wash: linear-gradient(180deg, #1c3428f5, #20382cec 51%, #243b2ec4);
  }
  .gifting-strip {
    --pastry-wash: linear-gradient(130deg, #66161be3, #811b20f2 55%, #66161bd9);
  }
}

@media print {
  .pastry-surface::before,
  .pastry-surface::after {
    display: none;
  }
}