/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./client/features/header-island/styles.css ***!
  \********************************************************************************************/

.header-island-host {
  position: sticky;
  top: 0;
  z-index: 80;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.header-island-host--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 140;
}

.header-island-host--hidden {
  pointer-events: none;
}

.header-island-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.header-island {
  position: relative;
  width: min(960px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(12, 18, 32, 0.55), rgba(8, 12, 24, 0.42));
  border: 1px solid rgba(120, 180, 250, 0.18);
  box-shadow:
    0 24px 48px rgba(6, 10, 24, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(calc(var(--header-island-blur, 24px) * 0.65)) saturate(150%);
  -webkit-backdrop-filter: blur(calc(var(--header-island-blur, 24px) * 0.65)) saturate(150%);
  transition: opacity 220ms ease, transform 220ms ease, background-color 260ms ease, box-shadow 260ms ease;
  pointer-events: auto;
}

.header-island__layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.header-island__section {
  display: flex;
  align-items: center;
}

.header-island__section--left {
  justify-content: flex-start;
  gap: 12px;
}

.header-island__section--center {
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.header-island__section--right {
  justify-content: flex-end;
  gap: 12px;
}

.header-island__tag-lane {
  width: min(960px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 0 18px 4px;
  transition: opacity 200ms ease;
  pointer-events: auto;
}

.header-island-root[data-visibility='hidden'] .header-island__tag-lane {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.header-island-root[data-visibility='default'] .header-island__tag-lane,
.header-island-root[data-visibility='overlay'] .header-island__tag-lane {
  opacity: 1;
}

.header-island__tag-lane {
  overflow: visible;
}

.header-island--hidden {
  opacity: 0;
  transform: translateY(-32px) scale(0.96);
  pointer-events: none;
}

.header-island--overlay {
  opacity: 1;
  transform: translateY(6px) scale(1.03);
  box-shadow:
    0 46px 120px rgba(6, 12, 32, 0.68),
    0 18px 40px rgba(12, 18, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(12, 14, 30, 0.74);
}

.header-island--low {
  background: linear-gradient(150deg, rgba(56, 60, 72, 0.9), rgba(38, 42, 54, 0.94));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
  border-color: rgba(140, 150, 170, 0.24);
}

.header-island--low .header-island__tag-lane {
  opacity: 0.92;
}

@media (max-width: 960px) {
  .header-island-host {
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 10px;
  }

  .header-island {
    padding: 18px 20px;
  }

  .header-island__layout {
    gap: 16px;
  }

  .header-island__section--right {
    flex-wrap: wrap;
  }

  .header-island__tag-lane {
    padding-inline: 12px;
  }
}