.fragment-bridge {
  display: none;
}

html.has-fragment-bridge .fragment-bridge {
  --fragment-cream-progress: 0;
  --fragment-photo-opacity: 0;
  --fragment-release: 1;
  --fragment-left-y: 8vh;
  --fragment-center-y: -7vh;
  --fragment-right-y: 10vh;
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

html.has-fragment-bridge .opening-sequence {
  --opening-extent: 230svh;
}

html.has-fragment-bridge .opening-stage {
  background: #f9f6f2;
}

html.has-fragment-bridge .opening-stage__visual {
  opacity: var(--fragment-hero-opacity, 1);
  will-change: opacity;
}

.fragment-bridge__cream {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  background: #f9f6f2;
  transform: scaleX(var(--fragment-cream-progress));
  will-change: transform;
}

.fragment-bridge__cream--left {
  left: 0;
  width: 5%;
  transform-origin: left center;
}

.fragment-bridge__cream--gap-one {
  left: 29%;
  width: 3%;
  transform-origin: center;
}

.fragment-bridge__cream--gap-two {
  left: 70%;
  width: 3%;
  transform-origin: center;
}

.fragment-bridge__cream--right {
  right: 0;
  width: 5%;
  transform-origin: right center;
}

.fragment-bridge__photos,
.fragment-bridge__photo,
.fragment-bridge__photo img {
  position: absolute;
}

.fragment-bridge__photos {
  z-index: 1;
  inset: 0;
  opacity: calc(var(--fragment-photo-opacity) * var(--fragment-release));
  will-change: opacity;
}

.fragment-bridge__photo {
  top: clamp(96px, 11vh, 128px);
  bottom: clamp(42px, 6vh, 72px);
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 22px);
  background: #f9f6f2;
}

.fragment-bridge__photo--left {
  left: 5%;
  width: 24%;
}

.fragment-bridge__photo--center {
  left: 32%;
  width: 38%;
}

.fragment-bridge__photo--right {
  left: 73%;
  width: 22%;
}

.fragment-bridge__photo img {
  inset: -14vh 0;
  width: 100%;
  height: calc(100% + 28vh);
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

.fragment-bridge__photo--left img {
  object-position: 52% center;
  transform: translate3d(0, var(--fragment-left-y), 0);
}

.fragment-bridge__photo--center img {
  object-position: 50% center;
  transform: translate3d(0, var(--fragment-center-y), 0);
}

.fragment-bridge__photo--right img {
  object-position: 46% center;
  transform: translate3d(0, var(--fragment-right-y), 0);
}

html.has-fragment-bridge.fragment-header-on-cream .site-header {
  border-bottom: 1px solid rgba(44, 24, 16, 0.12);
  background: rgba(249, 246, 242, 0.96);
  color: var(--color-ink);
}

html.has-fragment-bridge.fragment-header-on-cream .site-brand__light {
  opacity: 0;
}

html.has-fragment-bridge.fragment-header-on-cream .site-brand__dark {
  opacity: 1;
}

html[data-motion="off"].has-fragment-bridge .fragment-bridge,
html[data-motion="off"].has-fragment-bridge .fragment-bridge__photos {
  display: none;
}

html[data-motion="off"].has-fragment-bridge .opening-sequence {
  --opening-extent: 170svh;
}

@media (max-width: 820px) {
  html.has-fragment-bridge .opening-sequence {
    --opening-extent: 190svh;
  }

  .fragment-bridge__photo {
    top: 88px;
    bottom: 44px;
    border-radius: 14px;
  }

  .fragment-bridge__cream--left,
  .fragment-bridge__cream--right {
    width: 0;
  }

  .fragment-bridge__cream--gap-one {
    left: calc(50% - 21vw - 12px);
    width: 12px;
  }

  .fragment-bridge__cream--gap-two {
    left: calc(50% + 21vw);
    width: 12px;
  }

  .fragment-bridge__photo--left {
    left: calc(50% - 49vw - 12px);
    width: 28vw;
  }

  .fragment-bridge__photo--center {
    left: calc(50% - 21vw);
    width: 42vw;
  }

  .fragment-bridge__photo--right {
    left: calc(50% + 21vw + 12px);
    width: 28vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-fragment-bridge .fragment-bridge {
    display: none;
  }

  html.has-fragment-bridge .opening-sequence {
    --opening-extent: 140svh;
  }
}