/* Flooded-timber roost backdrop behind the logo (v2.1.5). */

@property --header-band {
  syntax: "<length>";
  inherits: true;
  initial-value: 200px;
}

:root {
  --header-band: 200px;
  --topbar-h: calc(env(safe-area-inset-top, 0px) + var(--header-band));
  --roost-image: image-set(
    url("../images/roost-header.webp") type("image/webp"),
    url("../images/roost-header.jpg") type("image/jpeg")
  );
  --roost-scrim: linear-gradient(
    to bottom,
    rgba(18, 17, 14, 0.32) 0%,
    rgba(18, 17, 14, 0.10) 14%,
    rgba(18, 17, 14, 0.00) 24%,
    rgba(18, 17, 14, 0.00) 82%,
    rgba(18, 17, 14, 0.32) 93%,
    #12110e 100%
  );
}

html {
  transition: --header-band 0.32s ease;
}

html.header-compact {
  --header-band: 68px;
}

.topbar {
  align-items: flex-start;
  box-sizing: border-box;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 16px;
  border-bottom: 0;
  overflow: hidden;
  background-color: var(--bg);
  background-image: var(--roost-scrim), var(--roost-image);
  background-size: 100% 100%, cover;
  background-position: 0 0, center center;
  background-repeat: no-repeat;
}

.brand-logo {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
  transition: height 0.32s ease;
}

.top-actions .icon-btn,
.top-actions .badge {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}

html.header-compact .topbar {
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 8px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(18, 17, 14, 0.55) 0%,
      rgba(18, 17, 14, 0.82) 72%,
      #12110e 100%
    ),
    var(--roost-image);
  background-position: 0 0, center 28%;
}

.mh-bar {
  background: var(--bg);
}

.searchbar {
  top: var(--topbar-h);
}

#demoWatermark {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 58px;
}

.toast {
  top: calc(var(--topbar-h) + 8px);
}