/* G03: the selected compact glass dock; contact routes and hit areas stay native. */
.contact-beacon.contact-beacon--glass {
  --dock-label-hidden-x: 6px;
  --dock-label-hidden-y: -50%;
  --dock-label-shown-y: -50%;
  position: fixed;
  top: 50%;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: auto;
  z-index: 1040;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  width: 54px;
  height: 186px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 29px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: translateY(-50%);
}

.contact-beacon.contact-beacon--glass::before,
.contact-beacon.contact-beacon--glass::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.contact-beacon.contact-beacon--glass::before {
  border: 1px solid rgba(221, 244, 255, calc(0.42 + var(--glass-energy, 0) * 0.20));
  background: rgba(9, 24, 43, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.28 + var(--glass-energy, 0) * 0.18)),
    inset 0 -1px 0 rgba(128, 195, 238, calc(0.15 + var(--glass-energy, 0) * 0.15)),
    inset 1px 0 0 rgba(147, 221, 255, calc(0.05 + var(--glass-energy, 0) * 0.13)),
    inset -1px 0 0 rgba(169, 141, 255, calc(0.03 + var(--glass-energy, 0) * 0.12)),
    0 14px 36px rgba(0, 0, 0, 0.27);
  transform: perspective(480px) translate(var(--glass-shift-x, 0px), var(--glass-shift-y, 0px))
    rotateX(var(--glass-tilt-x, 0deg)) rotateY(var(--glass-tilt-y, 0deg))
    scale(var(--glass-stretch-x, 1), var(--glass-stretch-y, 1));
  transition: border-radius 440ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}

.contact-beacon.contact-beacon--glass::after {
  inset: 1px;
  border: 1px solid rgba(216, 245, 255, calc(0.08 + var(--glass-energy, 0) * 0.16));
  background:
    radial-gradient(ellipse 60px 110px at var(--glass-x, 50%) var(--glass-y, 35%),
      rgba(234, 250, 255, 0.24), rgba(128, 195, 238, 0.1) 48%, transparent 76%),
    linear-gradient(135deg, rgba(234, 250, 255, 0.10), transparent 44%,
      rgba(55, 128, 194, 0.06) 70%, rgba(177, 159, 240, 0.1));
  opacity: calc(0.20 + var(--glass-energy, 0) * 0.35);
  transform: translate(var(--glass-shift-x, 0px), var(--glass-shift-y, 0px));
}

.contact-beacon.contact-beacon--glass.is-glass-pressed::before {
  border-radius: 31px 25px 29px 24px;
  box-shadow: inset 1px 2px 3px rgba(231, 250, 255, 0.21),
    inset -1px -1px 0 rgba(192, 234, 255, 0.27), 0 7px 20px rgba(0, 0, 0, 0.25);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-beacon.contact-beacon--glass::before {
    background-color: rgba(9, 24, 43, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }
}

.contact-beacon.contact-beacon--glass .contact-beacon__link {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #bcecff;
  box-shadow: none;
  filter: none;
  text-decoration: none;
}

.contact-beacon.contact-beacon--glass .contact-beacon__icon {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
  transition: none;
}

.contact-beacon.contact-beacon--glass .contact-beacon__icon::after {
  display: none;
  content: none;
}

.contact-beacon.contact-beacon--glass .contact-beacon__icon :is(img, svg) {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
  transform: none;
  transition: transform 240ms ease, opacity 240ms ease;
}

.contact-beacon.contact-beacon--glass .contact-beacon__icon i {
  font-size: 22px;
}

/* Labels are noninteractive tooltips, never part of the anchor's 44px layout. */
.contact-beacon.contact-beacon--glass .contact-beacon__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  bottom: auto;
  display: block;
  width: max-content;
  max-width: min(260px, calc(100vw - 100px));
  min-height: 0;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(221, 244, 255, 0.42);
  border-radius: 12px;
  background: #0b2037;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  color: #f5f8ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--dock-label-hidden-x), var(--dock-label-hidden-y));
  transition: opacity 180ms ease, transform 240ms ease, visibility 0s linear 180ms;
}

.contact-beacon.contact-beacon--glass .contact-beacon__link:focus-visible {
  outline: 2px solid #e4f7ff;
  outline-offset: -3px;
}

.contact-beacon.contact-beacon--glass .contact-beacon__link:focus-visible .contact-beacon__label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, var(--dock-label-shown-y));
  transition-delay: 0s;
}

.contact-beacon.contact-beacon--glass .contact-beacon__link:focus-visible .contact-beacon__icon :is(img, svg) {
  opacity: 1;
  transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  .contact-beacon.contact-beacon--glass .contact-beacon__link:hover .contact-beacon__label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, var(--dock-label-shown-y));
    transition-delay: 0s;
  }

  .contact-beacon.contact-beacon--glass .contact-beacon__link:hover .contact-beacon__icon :is(img, svg) {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (max-width: 767px) {
  .contact-beacon.contact-beacon--glass {
    right: max(10px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  /* Keep the mobile homepage's central illustration clear of contact controls. */
  #page-hero:not(.inner-page-hero) ~ .contact-beacon.contact-beacon--glass {
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .contact-beacon.contact-beacon--glass {
    --dock-label-hidden-x: 0px;
    --dock-label-hidden-y: 6px;
    --dock-label-shown-y: 0px;
    top: auto;
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    width: 186px;
    height: 54px;
    transform: none;
  }

  .contact-beacon.contact-beacon--glass .contact-beacon__label {
    top: auto;
    right: 0;
    bottom: calc(100% + 12px);
  }

  /* Reserve the lower control row so fixed controls do not cover footer content. */
  #back-to-top.back-to-top {
    right: auto;
    left: max(13px, env(safe-area-inset-left, 0px));
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }

  #page-footer .copyrights {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-beacon.contact-beacon--glass::before,
  .contact-beacon.contact-beacon--glass::after,
  .contact-beacon.contact-beacon--glass .contact-beacon__label,
  .contact-beacon.contact-beacon--glass .contact-beacon__link:is(:hover, :focus-visible) .contact-beacon__icon :is(img, svg) {
    transition: none;
  }

  .contact-beacon.contact-beacon--glass::before,
  .contact-beacon.contact-beacon--glass::after,
  .contact-beacon.contact-beacon--glass .contact-beacon__link:is(:hover, :focus-visible) .contact-beacon__icon :is(img, svg) {
    transform: none;
  }

  .contact-beacon.contact-beacon--glass.is-glass-pressed::before { border-radius: inherit; }
  .contact-beacon.contact-beacon--glass::after { background: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .contact-beacon.contact-beacon--glass::before,
  .contact-beacon.contact-beacon--glass.is-glass-pressed::before {
    border-color: #c0d9f2;
    background: #0b2037;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .contact-beacon.contact-beacon--glass::after { display: none; }
}

@media (forced-colors: active) {
  .contact-beacon.contact-beacon--glass::before,
  .contact-beacon.contact-beacon--glass.is-glass-pressed::before,
  .contact-beacon.contact-beacon--glass .contact-beacon__label {
    border: 1px solid ButtonText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .contact-beacon.contact-beacon--glass::before { transform: none; }
  .contact-beacon.contact-beacon--glass::after { display: none; }
  .contact-beacon.contact-beacon--glass .contact-beacon__link { color: LinkText; }
  .contact-beacon.contact-beacon--glass .contact-beacon__link:focus-visible { outline-color: Highlight; }
  .contact-beacon.contact-beacon--glass .contact-beacon__icon :is(img, svg) { opacity: 1; }
}