/* =====================================================
   MH Theme — Global Reusable Utilities
   Phase 143
   Purpose: extract reusable Start Here primitives into global theme classes
   without changing existing layout systems.
   ===================================================== */

/* Animated gradient text utility.
   Usage:
   <span class="mht-gradient-text mht-gradient-text--aurora">Text</span>
*/
.mht-gradient-text {
  --mht-gradient-text-speed: 6.5s;
  --mht-gradient-text-size: 260% 100%;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: var(--mht-gradient-text-size);
  background-position: 0% 50%;
  text-decoration: none;
  isolation: isolate;
}

.mht-gradient-text--aurora {
  background-image: linear-gradient(
    100deg,
    #C5A6D3 0%,
    #B78CFF 42%,
    #C5A6D3 100%
  );
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
  animation: mht-gradient-text-aurora var(--mht-gradient-text-speed) ease-in-out infinite alternate;
}

html[data-mht-theme-effective="light"] .mht-gradient-text--aurora,
html[data-mht-theme="light"] .mht-gradient-text--aurora {
  background-image: linear-gradient(
    100deg,
    #2F1F3A 0%,
    #B78CFF 46%,
    #2F1F3A 100%
  );
  filter: saturate(1.06) contrast(1.08) brightness(.98);
}


/* Phase 151B.5.3 — approved global editorial gradient readability.
   Keep rich headline <em> moments on the same restrained purple/lavender
   gradient palette as the reusable animated gradient text. */
.mht-content-heading em {
  background: linear-gradient(100deg, #C5A6D3 0%, #B78CFF 46%, #C5A6D3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
}

html[data-mht-theme-effective="light"] .mht-content-heading em,
html[data-mht-theme="light"] .mht-content-heading em {
  background: linear-gradient(100deg, #2F1F3A 0%, #B78CFF 46%, #2F1F3A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: saturate(1.06) contrast(1.08) brightness(.98);
}

@keyframes mht-gradient-text-aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 70% 50%; }
  100% { background-position: 100% 50%; }
}

@supports not (-webkit-background-clip: text) {
  .mht-gradient-text,
  .mht-gradient-text--aurora,
  .mht-content-heading em {
    color: #C5A6D3;
    -webkit-text-fill-color: #C5A6D3;
    background: none !important;
    filter: none;
  }

  html[data-mht-theme-effective="light"] .mht-gradient-text,
  html[data-mht-theme="light"] .mht-gradient-text,
  html[data-mht-theme-effective="light"] .mht-gradient-text--aurora,
  html[data-mht-theme="light"] .mht-gradient-text--aurora,
  html[data-mht-theme-effective="light"] .mht-content-heading em,
  html[data-mht-theme="light"] .mht-content-heading em {
    color: #2F1F3A;
    -webkit-text-fill-color: #2F1F3A;
  }
}

/* Reusable divider label used by Start Here categories/social sections.
   Usage: <div class="mht-divider-label"><span>Resources</span></div>
*/
.mht-divider-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 22px);
  color: rgba(221, 214, 227, .74);
  font-family: var(--font-sans, "Blauer Nue", "DM Sans", system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
}

.mht-divider-label::before,
.mht-divider-label::after {
  content: "";
  display: block;
  width: min(72px, 16vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 166, 211, .34));
}

.mht-divider-label::after {
  background: linear-gradient(90deg, rgba(197, 166, 211, .34), transparent);
}

html[data-mht-theme-effective="light"] .mht-divider-label,
html[data-mht-theme="light"] .mht-divider-label {
  color: rgba(76, 52, 93, .68);
}

html[data-mht-theme-effective="light"] .mht-divider-label::before,
html[data-mht-theme-effective="light"] .mht-divider-label::after,
html[data-mht-theme="light"] .mht-divider-label::before,
html[data-mht-theme="light"] .mht-divider-label::after {
  background: linear-gradient(90deg, transparent, rgba(76, 52, 93, .24));
}

html[data-mht-theme-effective="light"] .mht-divider-label::after,
html[data-mht-theme="light"] .mht-divider-label::after {
  background: linear-gradient(90deg, rgba(76, 52, 93, .24), transparent);
}

/* Reusable avatar hover motion primitive.
   Usage: add mht-avatar-motion mht-avatar-motion--aurora to a media wrapper.
*/
.mht-avatar-motion {
  --mht-avatar-motion-scale: 1.045;
  --mht-avatar-motion-rotate: -1.35deg;
  position: relative;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 620ms cubic-bezier(.16, 1, .3, 1),
    border-color 620ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.mht-avatar-motion img {
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), filter 720ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.mht-avatar-motion--aurora:hover,
.mht-avatar-motion--aurora:focus-within {
  transform: translate3d(0, -2px, 0) scale(var(--mht-avatar-motion-scale)) rotate(var(--mht-avatar-motion-rotate));
  border-color: rgba(183, 140, 255, .74);
  box-shadow:
    0 0 0 1px rgba(197,166,211,.28),
    0 0 26px rgba(183,140,255,.34),
    0 0 42px rgba(22,124,138,.18),
    0 22px 44px rgba(0,0,0,.30);
}

.mht-avatar-motion--aurora:hover img,
.mht-avatar-motion--aurora:focus-within img {
  transform: scale(1.045) rotate(.55deg);
  filter: saturate(1.04) contrast(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .mht-gradient-text--aurora,
  .mht-avatar-motion,
  .mht-avatar-motion img {
    animation: none !important;
    transition: none !important;
  }

  .mht-gradient-text--aurora {
    background-position: 48% 50% !important;
  }

  .mht-avatar-motion--aurora:hover,
  .mht-avatar-motion--aurora:focus-within,
  .mht-avatar-motion--aurora:hover img,
  .mht-avatar-motion--aurora:focus-within img {
    transform: none !important;
  }
}

/* =====================================================
   Phase 146 — Divider label rhythm correction
   Keep the reusable label compact. Start Here category lines should sit close
   to the label text, not drift toward the outer card edges.
   ===================================================== */
.mht-divider-label {
  gap: clamp(8px, 1.3vw, 12px);
}

.mht-divider-label::before,
.mht-divider-label::after {
  flex: 0 1 clamp(28px, 5vw, 52px);
  width: clamp(28px, 5vw, 52px);
  max-width: 52px;
}



/* =====================================================
   Phase 151B.5.5 — Homepage hero glass eyebrow label
   Uses the locked global glass material while keeping the label compact,
   readable, and visually aligned with the hero stats glass.
   ===================================================== */
.mht-hero__eyebrow.mht-global-glass {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: clamp(8px, .72vw, 10px) clamp(13px, 1.05vw, 16px) !important;
  border-radius: 18px !important;
  color: rgba(246,242,247,.84) !important;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.mht-hero__eyebrow.mht-global-glass .mht-hero__eyebrow-text {
  position: relative !important;
  z-index: 1 !important;
}

html[data-mht-theme-effective="light"] .mht-hero__eyebrow.mht-global-glass,
html[data-mht-theme="light"] .mht-hero__eyebrow.mht-global-glass {
  color: rgba(47,31,58,.78) !important;
}