/* Trial override: remove this stylesheet link from index.html to restore the old gallery background. */

.galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode) {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(90deg, rgba(26,80,111,.05), transparent 10%),
    #eee6d9 !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode)::before,
.galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode)::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode)::before {
  z-index: 0 !important;
  background-image: var(--bgTextureImage, url(/background-texture.webp)) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: var(--bgTextureOpacity, .26) !important;
  mix-blend-mode: luminosity !important;
}

.galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode)::after {
  z-index: 1 !important;
  background-image: var(--rainbowBackgroundImage, url(/rainbowbackgound.webp)) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: var(--rainbowBackgroundOpacity, .78) !important;
  mix-blend-mode: multiply !important;
}

.appShell.rainbowBackgroundOff .galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode)::after {
  display: none !important;
}

.galleryOverlay:has(.galleryViewer.conceptGallery.horizontalGalleryMode) > .galleryViewer.conceptGallery.horizontalGalleryMode {
  position: relative !important;
  z-index: 3 !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode {
  --galleryBookendEdgeBuffer: clamp(18px, 2vw, 46px);
  --galleryBookendInteriorBuffer: clamp(18px, 2.25vw, 54px);
}

.galleryViewer.conceptGallery.seamlessGalleryMode .horizontalGalleryTrack::before,
.galleryViewer.conceptGallery.seamlessGalleryMode .horizontalGalleryTrack::after {
  content: "" !important;
  display: block !important;
  flex: 0 0 var(--galleryBookendEdgeBuffer) !important;
  width: var(--galleryBookendEdgeBuffer) !important;
  height: 1px !important;
  pointer-events: none !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .horizontalGalleryPanel:first-child {
  margin-right: var(--galleryBookendInteriorBuffer) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .horizontalGalleryPanel:last-child {
  margin-left: var(--galleryBookendInteriorBuffer) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .horizontalGalleryNavigator {
  display: none !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .galleryFooter {
  position: fixed !important;
  left: 50% !important;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
  transform: translateX(-50%) !important;
  z-index: 125 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  pointer-events: none !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .galleryFooter .projectGalleryNav {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  order: -1 !important;
  min-height: 42px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(3,14,20,.72) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: .86 !important;
  pointer-events: auto !important;
  transition: opacity .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[hidden] {
  display: none !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls:focus-within {
  opacity: 1 !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls button {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  transition: color .16s ease, background .16s ease, opacity .16s ease !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls button:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls button:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggleIcon {
  display: none !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls.notesOff,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[data-notes-state="off"] {
  opacity: .86 !important;
  background: rgba(3,14,20,.72) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.38) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls.notesOff:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls.notesOff:focus-within,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[data-notes-state="off"]:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[data-notes-state="off"]:focus-within {
  opacity: .86 !important;
  background: rgba(3,14,20,.72) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls.notesOn,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[data-notes-state="on"] {
  opacity: 1 !important;
  background: rgba(3,14,20,.9) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls.notesOn:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls.notesOn:focus-within,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[data-notes-state="on"]:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls[data-notes-state="on"]:focus-within {
  background: rgba(3,14,20,.94) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggle.isOff {
  color: rgba(255,255,255,.88) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggle.isOn {
  color: #fff !important;
  background: transparent !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggle.isOff:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggle.isOff:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggle.isOn:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls .galleryNotesToggle.isOn:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .galleryClose {
  position: fixed !important;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
  z-index: 125 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(3,14,20,.72) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: .86 !important;
  transform: none !important;
  transition: opacity .18s ease, background .18s ease, color .16s ease !important;
}

.galleryViewer.conceptGallery.seamlessGalleryMode .galleryClose:hover,
.galleryViewer.conceptGallery.seamlessGalleryMode .galleryClose:focus-visible {
  outline: none !important;
  opacity: 1 !important;
  background: rgba(3,14,20,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .galleryViewer.conceptGallery.seamlessGalleryMode {
    --galleryBookendEdgeBuffer: clamp(14px, 4vw, 26px);
    --galleryBookendInteriorBuffer: clamp(16px, 4.5vw, 30px);
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .galleryFooter {
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    gap: 7px !important;
    max-width: calc(100vw - 18px) !important;
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls {
    min-height: 46px !important;
    padding: 3px 5px !important;
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls button {
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .galleryClose {
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px)) !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

@media (max-width: 430px) {
  .galleryViewer.conceptGallery.seamlessGalleryMode .galleryFooter {
    gap: 6px !important;
    max-width: calc(100vw - 12px) !important;
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .galleryFooter .projectGalleryNav {
    grid-template-columns: minmax(64px, auto) auto minmax(64px, auto) !important;
    padding: 3px 4px !important;
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .galleryFooter .projectGalleryNavButton,
  .galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls button {
    min-height: 36px !important;
    padding: 7px 7px !important;
    font-size: 10px !important;
    letter-spacing: .055em !important;
  }

  .galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls {
    min-height: 42px !important;
    padding: 3px 4px !important;
  }
}

/* Temporary: keep gallery notes hidden until the note direction is finalized. */
.galleryViewer.conceptGallery.seamlessGalleryMode .seamlessNoteControls {
  display: none !important;
}