/* CRADLE V89-R7 bounded correction layer.
   Scope: social rail, token Telegram CTA, mobile navigation/logo, and desktop orbit compositing. */

/* Desktop social rail: compact, transparent, and visually subordinate to the full-width technology rail. */
.hero-social-rail {
  grid-template-columns: repeat(4, 64px);
  gap: 14px;
  width: min(430px, calc(100% - 44px));
  max-width: min(430px, calc(100% - 44px));
  min-height: 52px;
  padding: 7px 18px;
  background:
    linear-gradient(180deg, rgba(30, 12, 48, .34), rgba(7, 3, 14, .48)),
    radial-gradient(circle at 50% -35%, rgba(171, 84, 255, .16), transparent 68%);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .065),
    inset 0 -1px 0 rgba(154, 80, 238, .08),
    0 0 24px rgba(126, 52, 255, .055);
  backdrop-filter: blur(9px) saturate(112%);
  -webkit-backdrop-filter: blur(9px) saturate(112%);
}

.hero-social-link {
  height: 36px;
}

.hero-social-link img {
  width: 21px;
  height: 21px;
}

/* Telegram now belongs to the CRADLE token CTA, not the general social rail. */
.token-join-strip-v68 .token-telegram-link-v89r7 {
  gap: 9px;
}

.token-join-strip-v68 .token-telegram-link-v89r7 img {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(130, 190, 255, .42));
}

/* Smooth card motion at display refresh rate while expensive effects and SVG links remain bounded. */
#mission-core-stage .orbital-chip,
#challenge-orbit-stage .challenge-orbital-chip {
  contain: layout paint style;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

#mission-chip-links,
#mission-chip-links-back,
#challenge-chip-links,
#challenge-chip-links-back {
  contain: layout paint style;
}

@media (max-width: 760px), (max-width: 900px) and (pointer: coarse) {
  /* Mobile keeps the social owner full width, now as four equal channels. */
  body.mobile-v89-lite .hero-social-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100dvw - 24px);
    max-width: calc(100dvw - 24px);
    padding: 5px 7px;
    gap: 5px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Make the menu button the explicit topmost touch owner and force the open state visible. */
  body.mobile-v89-lite .mobile-menu-button {
    position: relative;
    z-index: 1302;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body.mobile-v89-lite #primary-links {
    z-index: 1301;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-v89-lite .site-header.menu-open #primary-links {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-v89-lite .site-header.menu-open .mobile-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.mobile-v89-lite .site-header.menu-open .mobile-menu-button span:nth-child(2) {
    opacity: 0;
  }

  body.mobile-v89-lite .site-header.menu-open .mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Optical center for the live crystal logo inside the mobile stage. */
  body.mobile-v89-lite .brand-logo-stage {
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  body.mobile-v89-lite .brand-logo-stage .brand-logo-spin {
    display: grid !important;
    place-items: center !important;
  }

  body.mobile-v89-lite .brand-logo-stage .brand-icon-front {
    position: relative !important;
    inset: auto !important;
    place-self: center !important;
    width: 88% !important;
    height: 88% !important;
    transform: none !important;
  }

  body.mobile-v89-lite .token-join-strip-v68 .token-telegram-link-v89r7 img {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
}