/* ==================================================================
   V2-03.3 — Fluid Island Header
   The catalogue header remains a structural row above catalogue content.
   Its centred world selector uses a moving pill and a restrained frosted
   surface while HOME / ART collapses gradually with scroll.
   ================================================================== */

:root {
  --catalogue-header-expanded-height: 84px;
  --catalogue-header-compact-height: 68px;
  --catalogue-header-collapse-distance: 168;
  --catalogue-domain-row-height: var(--domain-rail-height, 34px);
  --catalogue-header-row-height: var(--catalogue-header-expanded-height);
  --catalogue-header-progress: 0;
  --catalogue-domain-opacity: 1;
  --catalogue-domain-translate: 0%;
  --catalogue-brand-height: 32px;
  --catalogue-world-link-height: 38px;
  --catalogue-search-panel-height: 0px;
}

.content-scroll-region {
  min-width: 0;
}

/* Catalogue-only app shell: domain rail, structural header, scroll region. */
body.is-catalogue-route {
  height: 100dvh;
  overflow: hidden;
}

body.is-catalogue-route .app-shell {
  display: grid;
  grid-template-rows:
    var(--catalogue-domain-row-height)
    calc(var(--catalogue-header-row-height) + var(--catalogue-search-panel-height))
    minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #f8f7f4;
}

body.is-catalogue-route #domain-rail-root {
  grid-row: 1;
  position: relative !important;
  top: auto !important;
  z-index: 3;
  min-height: 0;
  height: var(--catalogue-domain-row-height);
  overflow: hidden;
  opacity: var(--catalogue-domain-opacity);
  transform: translateY(var(--catalogue-domain-translate));
  transform-origin: top center;
  will-change: height, opacity, transform;
}

body.is-catalogue-route #domain-rail-root .domain-rail {
  height: var(--domain-rail-height, 34px);
  border-bottom-color: rgba(41, 40, 38, .07);
  background: rgba(255, 255, 255, .96);
}

body.is-catalogue-route #site-header {
  grid-row: 2;
  position: relative !important;
  top: auto !important;
  z-index: 4 !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  overflow: visible;
  isolation: isolate;
  border: 0 !important;
  border-bottom: 1px solid rgba(41, 40, 38, .10) !important;
  border-radius: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .82) 0%,
    rgba(249, 248, 245, .74) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .74),
    0 8px 28px rgba(41, 40, 38, calc(.018 + (.018 * var(--catalogue-header-progress)))) !important;
  -webkit-backdrop-filter: blur(18px) saturate(132%) !important;
  backdrop-filter: blur(18px) saturate(132%) !important;
}

body.is-catalogue-route:has(#site-header.is-search-open) {
  --catalogue-search-panel-height: 286px;
}

body.is-catalogue-route #site-header .header-search-panel {
  top: var(--catalogue-header-row-height);
}

body.is-catalogue-route #site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .22),
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, .13) 72%,
    rgba(255, 255, 255, 0)
  );
  opacity: calc(.45 - (.12 * var(--catalogue-header-progress)));
}

body.is-catalogue-route #room-navigation-root {
  display: none;
}

body.is-catalogue-route .content-scroll-region {
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  background: #f8f7f4;
  -webkit-overflow-scrolling: touch;
}

body.is-catalogue-route #main-content {
  min-height: 100%;
}

/* True centre: equal flexible columns keep the world island centred in the viewport. */
.site-header__primary--catalogue-worlds {
  position: relative;
  width: 100% !important;
  height: var(--catalogue-header-row-height);
  min-height: 0 !important;
  padding: 0 clamp(24px, 3vw, 52px) !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: clamp(18px, 2.2vw, 34px) !important;
  align-items: center;
}

.site-header__primary--catalogue-worlds .brand-lockup {
  grid-column: 1;
  justify-self: start;
}

.site-header__primary--catalogue-worlds .brand-lockup img {
  height: var(--catalogue-brand-height);
  transition: none;
}

.site-header__primary--catalogue-worlds .header-world-navigation {
  grid-column: 2;
  justify-self: center;
  align-self: center;
}

.site-header__primary--catalogue-worlds .utility-navigation {
  grid-column: 3 !important;
  justify-self: end;
}

.header-world-navigation {
  --header-world-marker-x: 0px;
  --header-world-marker-width: 0px;
  position: relative;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 2px;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border: 1px solid rgba(41, 40, 38, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    0 7px 22px rgba(41, 40, 38, .055);
}

.header-world-navigation::-webkit-scrollbar {
  display: none;
}

.header-world-navigation__link {
  position: relative;
  z-index: 1;
  min-height: var(--catalogue-world-link-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 clamp(16px, 1.45vw, 22px);
  border: 0;
  border-radius: 999px;
  color: rgba(41, 40, 38, .58);
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .005em;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 220ms ease,
    opacity 220ms ease;
}

.header-world-navigation__link:hover,
.header-world-navigation__link:focus-visible {
  color: #292826;
}

.header-world-navigation__link.is-active,
.header-world-navigation__link.is-pill-preview {
  color: #fff;
  font-weight: 680;
}

.header-world-navigation.is-previewing .header-world-navigation__link.is-active:not(.is-pill-preview) {
  color: rgba(41, 40, 38, .58);
  font-weight: 620;
}

.header-world-navigation__link:focus-visible {
  outline: 2px solid rgba(41, 40, 38, .36);
  outline-offset: 3px;
}

/* One moving pill, never an underline. */
.header-world-navigation__marker {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 4px;
  width: var(--header-world-marker-width);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(180deg, #333230 0%, #252422 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 5px 14px rgba(41, 40, 38, .18);
  opacity: 0;
  transform: translateX(var(--header-world-marker-x));
  transform-origin: left center;
  pointer-events: none;
  transition:
    width 250ms cubic-bezier(.2, .78, .22, 1),
    transform 250ms cubic-bezier(.2, .78, .22, 1),
    opacity 170ms ease;
}

.header-world-navigation__marker.is-ready {
  opacity: 1;
}

/* The standalone world row is permanently absent from catalogue content. */
.catalogue-workspace-v2 > .catalogue-world-bar {
  display: none !important;
}

/* The content scrollport already starts below the structural header. */
body.is-catalogue-route .catalogue-category-sidebar {
  top: 12px !important;
  max-height: calc(
    100dvh -
    var(--catalogue-domain-row-height) -
    var(--catalogue-header-row-height) -
    var(--catalogue-search-panel-height) -
    24px
  ) !important;
}

@media (max-width: 1100px) {
  .site-header__primary--catalogue-worlds {
    gap: 14px !important;
    padding-inline: 24px !important;
  }

  .header-world-navigation__link {
    padding-inline: 15px;
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  body.is-catalogue-route .catalogue-category-sidebar {
    top: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --catalogue-header-expanded-height: 116px;
    --catalogue-header-compact-height: 100px;
    --catalogue-header-collapse-distance: 152;
  }

  body.is-catalogue-route:has(#site-header.is-search-open) {
    --catalogue-search-panel-height: 304px;
  }

  .site-header__primary--catalogue-worlds {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(44px, 1fr) auto;
    gap: 4px 12px !important;
    padding: 6px 16px 8px !important;
  }

  .site-header__primary--catalogue-worlds .brand-lockup {
    grid-column: 1;
    grid-row: 1;
  }

  .site-header__primary--catalogue-worlds .utility-navigation {
    grid-column: 2 !important;
    grid-row: 1;
  }

  .site-header__primary--catalogue-worlds .header-world-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    justify-self: center;
  }

  .header-world-navigation__link {
    min-height: 32px;
    padding-inline: 18px;
  }
}

@media (max-width: 460px) {
  .site-header__primary--catalogue-worlds {
    padding-inline: 12px !important;
  }

  .site-header__primary--catalogue-worlds .utility-link {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .header-world-navigation {
    width: 100%;
    justify-content: stretch;
  }

  .header-world-navigation__link {
    flex: 1 0 auto;
    padding-inline: 13px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.is-catalogue-route #site-header {
    background: #fbfaf8 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-world-navigation__marker,
  .header-world-navigation__link {
    transition: none;
  }
}