/* =====================================================
   MH Theme — Motion Background System
   Phase 118: one approved background only — Dotted Aurora.
   Scope: decorative motion layer, reusable for start-page/hero/page-header.
   No card/glass repainting lives here.
   ===================================================== */

.mht-motion-bg {
  --mht-motion-pointer-x: 50%;
  --mht-motion-pointer-y: 50%;
  --mht-motion-x: 0px;
  --mht-motion-y: 0px;
  --mht-motion-x-neg: 0px;
  --mht-motion-y-neg: 0px;
  --mht-motion-x-soft: 0px;
  --mht-motion-y-soft: 0px;
  --mht-motion-x-soft-neg: 0px;
  --mht-motion-y-soft-neg: 0px;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0D0D0D;
  contain: strict;
  isolation: isolate;
}

.mht-motion-bg--hero,
.mht-motion-bg--page-header {
  position: absolute;
}

.mht-motion-bg__stage,
.mht-motion-bg__aurora-canvas,
.mht-motion-bg__dot-canvas,
.mht-motion-bg__ambient,
.mht-motion-bg__bottom-shelf,
.mht-motion-bg__foreground-haze {
  position: absolute;
  display: block;
  pointer-events: none;
}

.mht-motion-bg__stage {
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 68%, rgba(183,140,255,.10), transparent 36%),
    radial-gradient(ellipse at 86% 76%, rgba(76,52,93,.16), transparent 34%),
    linear-gradient(180deg, #0D0D0D 0%, #0D0D0D 52%, #141017 78%, #0D0D0D 100%);
  transform: translateZ(0);
}

.mht-motion-bg__stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: .18;
  background:
    radial-gradient(ellipse at 18% 32%, rgba(183,140,255,.18), transparent 30%),
    radial-gradient(ellipse at 76% 72%, rgba(74,190,198,.12), transparent 28%);
  transform: translate3d(var(--mht-motion-x-soft-neg), var(--mht-motion-y-soft-neg), 0);
}

.mht-motion-bg__aurora-canvas,
.mht-motion-bg__dot-canvas {
  inset: 0;
  width: 100%;
  height: 100%;
}

.mht-motion-bg__aurora-canvas {
  z-index: 2;
  opacity: .88;
  mix-blend-mode: screen;
}

.mht-motion-bg__dot-canvas {
  z-index: 3;
  opacity: .92;
}

.mht-motion-bg__ambient {
  z-index: 1;
  width: min(48vw, 560px);
  height: min(44vw, 520px);
  border-radius: 999px;
  filter: blur(42px);
  opacity: .09;
  will-change: transform;
}

.mht-motion-bg__ambient--left {
  left: -14vw;
  bottom: 18vh;
  background: radial-gradient(ellipse at center, rgba(183,140,255,.70), rgba(76,52,93,.26) 48%, transparent 74%);
  animation: mht-motion-ambient-left 20s ease-in-out infinite alternate;
}

.mht-motion-bg__ambient--right {
  right: -16vw;
  bottom: 4vh;
  background: radial-gradient(ellipse at center, rgba(74,190,198,.34), rgba(183,140,255,.16) 48%, transparent 76%);
  animation: mht-motion-ambient-right 24s ease-in-out infinite alternate;
}

.mht-motion-bg__bottom-shelf {
  z-index: 4;
  left: -6vw;
  right: -6vw;
  bottom: -12vh;
  height: min(30vh, 320px);
  opacity: .62;
  filter: blur(18px);
  background:
    linear-gradient(90deg, transparent 0%, rgba(183,140,255,.14) 18%, rgba(72,180,188,.10) 46%, rgba(142,99,163,.14) 68%, transparent 100%),
    radial-gradient(ellipse at 50% 0%, rgba(183,140,255,.16), rgba(76,52,93,.12) 32%, transparent 72%);
  transform-origin: center bottom;
  animation: mht-motion-bottom-shelf-drift 18s ease-in-out infinite alternate;
}

.mht-motion-bg__bottom-shelf::before {
  content: "";
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 18%;
  height: 1px;
  opacity: .42;
  background: linear-gradient(90deg, transparent, rgba(230,216,255,.26), rgba(104,213,215,.18), rgba(183,140,255,.26), transparent);
}

.mht-motion-bg__foreground-haze {
  z-index: 5;
  inset: 0;
  opacity: .86;
  background:
    radial-gradient(ellipse at 50% 58%, transparent 0%, rgba(13,13,13,.05) 38%, rgba(13,13,13,.64) 92%),
    linear-gradient(180deg, rgba(13,13,13,.74) 0%, transparent 30%, transparent 66%, rgba(13,13,13,.90) 100%);
}

/* Light mode: background-only color treatment. No glass/text/icon overrides. */
html[data-mht-theme-effective="light"] .mht-motion-bg,
html[data-mht-theme="light"] .mht-motion-bg {
  background: #F6F2F7;
}

html[data-mht-theme-effective="light"] .mht-motion-bg__stage,
html[data-mht-theme="light"] .mht-motion-bg__stage {
  background:
    radial-gradient(ellipse at 0% 60%, rgba(183,140,255,.28), transparent 36%),
    radial-gradient(ellipse at 80% 76%, rgba(76,52,93,.20), transparent 34%),
    radial-gradient(ellipse at 32% 88%, rgba(58,132,140,.18), transparent 32%),
    linear-gradient(180deg, #F6F2F7 0%, #F6F2F7 46%, #E6D8FF 78%, #F6F2F7 100%);
}

html[data-mht-theme-effective="light"] .mht-motion-bg__stage::before,
html[data-mht-theme="light"] .mht-motion-bg__stage::before {
  opacity: .58;
  background:
    radial-gradient(ellipse at 10% 66%, rgba(183,140,255,.32), transparent 30%),
    radial-gradient(ellipse at 74% 78%, rgba(58,132,140,.22), transparent 28%);
}

html[data-mht-theme-effective="light"] .mht-motion-bg__aurora-canvas,
html[data-mht-theme="light"] .mht-motion-bg__aurora-canvas {
  opacity: 1;
  mix-blend-mode: normal;
}

html[data-mht-theme-effective="light"] .mht-motion-bg__dot-canvas,
html[data-mht-theme="light"] .mht-motion-bg__dot-canvas {
  opacity: .88;
  mix-blend-mode: multiply;
}

html[data-mht-theme-effective="light"] .mht-motion-bg__foreground-haze,
html[data-mht-theme="light"] .mht-motion-bg__foreground-haze {
  opacity: .18;
  background:
    radial-gradient(ellipse at 50% 58%, transparent 0%, rgba(246,242,247,.02) 42%, rgba(246,242,247,.08) 94%),
    linear-gradient(180deg, rgba(246,242,247,.04) 0%, transparent 28%, transparent 74%, rgba(246,242,247,.12) 100%);
}

html[data-mht-theme-effective="light"] .mht-motion-bg__bottom-shelf,
html[data-mht-theme="light"] .mht-motion-bg__bottom-shelf {
  opacity: .58;
  filter: blur(14px);
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0%, rgba(183,140,255,.22) 18%, rgba(76,180,190,.16) 42%, rgba(142,99,163,.24) 66%, transparent 100%),
    radial-gradient(ellipse at 50% 0%, rgba(183,140,255,.20), rgba(230,216,255,.34) 34%, transparent 72%);
}

body.mht-start-page-template .mht-start__brand {
  display: inline-flex !important;
  margin-top: clamp(58px, 10vw, 92px) !important;
  width: clamp(28px, 4.4vw, 38px) !important;
  height: clamp(28px, 4.4vw, 38px) !important;
  opacity: .46;
  justify-self: center;
  color: #F6F2F7;
}

body.mht-start-page-template .mht-start__brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: var(--mht-start-brand-mask);
  mask-image: var(--mht-start-brand-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-mht-theme-effective="light"] body.mht-start-page-template .mht-start__brand,
html[data-mht-theme="light"] body.mht-start-page-template .mht-start__brand {
  color: #4C345D;
}

body.mht-start-page-template .mht-start__brand:hover,
body.mht-start-page-template .mht-start__brand:focus-visible {
  opacity: .82;
}

@keyframes mht-motion-ambient-left {
  0% { transform: translate3d(-2%, 2%, 0) rotate(-4deg) scale(.98); }
  100% { transform: translate3d(4%, -3%, 0) rotate(3deg) scale(1.04); }
}

@keyframes mht-motion-ambient-right {
  0% { transform: translate3d(3%, -1%, 0) rotate(4deg) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) rotate(-3deg) scale(1.06); }
}

@keyframes mht-motion-bottom-shelf-drift {
  0% { transform: translate3d(var(--mht-motion-x-soft-neg), var(--mht-motion-y-soft-neg), 0) rotate(-1.2deg) scaleX(1); opacity: .58; }
  100% { transform: translate3d(calc(var(--mht-motion-x-soft-neg) + 14px), calc(var(--mht-motion-y-soft-neg) - 4px), 0) rotate(.7deg) scaleX(1.03); opacity: .78; }
}

@media (max-width: 720px) {
  .mht-motion-bg__aurora-canvas { opacity: .76; }
  .mht-motion-bg__dot-canvas { opacity: .82; }
  .mht-motion-bg__ambient { filter: blur(20px); opacity: .06; }
  .mht-motion-bg__bottom-shelf { bottom: -8vh; height: min(24vh, 230px); filter: blur(13px); opacity: .50; }
}

@media (prefers-reduced-motion: reduce) {
  .mht-motion-bg *,
  .mht-motion-bg *::before,
  .mht-motion-bg *::after {
    animation: none !important;
    transition: none !important;
  }
  .mht-motion-bg__aurora-canvas { opacity: .70; }
  .mht-motion-bg__dot-canvas { opacity: .70; }
  .mht-motion-bg__bottom-shelf { animation: none !important; transform: none !important; opacity: .50; }
}

/* =====================================================
   Phase 122 — Motion quality states
   JS sets data-mht-motion-quality-active after resolving Auto.
   ===================================================== */
.mht-motion-bg[data-mht-motion-quality-active="light"] .mht-motion-bg__ambient {
  opacity: .045;
  filter: blur(18px);
}

.mht-motion-bg[data-mht-motion-quality-active="light"] .mht-motion-bg__bottom-shelf {
  opacity: .44;
  filter: blur(12px);
}

.mht-motion-bg[data-mht-motion-quality-active="static"] .mht-motion-bg__ambient,
.mht-motion-bg[data-mht-motion-quality-active="static"] .mht-motion-bg__bottom-shelf {
  animation: none !important;
}

.mht-motion-bg[data-mht-motion-quality-active="static"] .mht-motion-bg__aurora-canvas {
  opacity: .68;
}

.mht-motion-bg[data-mht-motion-quality-active="static"] .mht-motion-bg__dot-canvas {
  opacity: .66;
}


/* =====================================================
   Phase 124 — Start Here density + layout spacing
   - Denser Dotted Aurora dots are handled in JS.
   - Footer brand should not create a dead empty block.
   - Social dock keeps the same structural width as the link cards and wraps internally.
   ===================================================== */
body.mht-start-page-template .mht-start-social.mht-global-glass {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  border-radius: 30px;
  padding: 10px 16px !important;
  gap: 7px 10px !important;
}

body.mht-start-page-template .mht-start-social__link.mht-mobile-dock__item.mht-footer-social-dock__item {
  flex: 0 0 44px;
}

body.mht-start-page-template .mht-start__brand {
  margin-top: clamp(26px, 4vw, 42px) !important;
  margin-bottom: 0 !important;
}

body.mht-start-page-template .mht-start {
  padding-bottom: max(44px, calc(18px + env(safe-area-inset-bottom))) !important;
}

@media (max-width: 560px) {
  body.mht-start-page-template .mht-start-social.mht-global-glass {
    padding: 10px 14px !important;
    gap: 7px 8px !important;
  }

  body.mht-start-page-template .mht-start-social__link.mht-mobile-dock__item.mht-footer-social-dock__item {
    flex-basis: 40px;
  }

  body.mht-start-page-template .mht-start__brand {
    margin-top: clamp(22px, 7vw, 34px) !important;
  }

  body.mht-start-page-template .mht-start {
    padding-bottom: max(38px, calc(16px + env(safe-area-inset-bottom))) !important;
  }
}


/* =====================================================
   Phase 125 — Pure dark stage for Dotted Aurora
   Remove static CSS glow/gradient layers. The background stage stays true
   #0D0D0D; only the canvas aurora is allowed to provide moving color.
   ===================================================== */
html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg,
html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__stage {
  background: #0D0D0D !important;
}

html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__stage::before,
html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__ambient,
html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__bottom-shelf,
html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__bottom-shelf::before,
html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__foreground-haze {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
}

html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__aurora-canvas {
  opacity: .95 !important;
}

html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__dot-canvas {
  opacity: .94 !important;
}

@media (max-width: 720px) {
  html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__aurora-canvas {
    opacity: .88 !important;
  }

  html:not([data-mht-theme-effective="light"]):not([data-mht-theme="light"]) .mht-motion-bg__dot-canvas {
    opacity: .88 !important;
  }
}


/* =====================================================
   Phase 129 — Dotted Aurora entry animation
   The approved motion system now opens with the dots and aurora breathing in.
   ===================================================== */
.mht-motion-bg--dotted-aurora {
  --mht-motion-aurora-entry-opacity: .95;
  --mht-motion-dots-entry-opacity: .94;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora {
  --mht-motion-aurora-entry-opacity: 1;
  --mht-motion-dots-entry-opacity: .88;
}

.mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas {
  animation: mht-motion-aurora-entry 1250ms cubic-bezier(.16, 1, .3, 1) both;
}

.mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
  animation: mht-motion-dots-entry 900ms cubic-bezier(.16, 1, .3, 1) 80ms both;
}

@keyframes mht-motion-aurora-entry {
  0% { opacity: 0; transform: translate3d(-1.8vw, 1.2vh, 0) scale(1.03); filter: saturate(.9); }
  100% { opacity: var(--mht-motion-aurora-entry-opacity); transform: translate3d(0, 0, 0) scale(1); filter: saturate(1); }
}

@keyframes mht-motion-dots-entry {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(1.006); }
  100% { opacity: var(--mht-motion-dots-entry-opacity); transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 720px) {
  .mht-motion-bg--dotted-aurora {
    --mht-motion-aurora-entry-opacity: .88;
    --mht-motion-dots-entry-opacity: .88;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
    animation: none !important;
  }
}


/* =====================================================
   Phase 136 — Dotted Aurora visibility hardening
   Make dots clearly visible in both dark and light modes, and remove the
   feeling that the aurora canvas is being faded down.
   ===================================================== */
.mht-motion-bg--dotted-aurora {
  --mht-motion-aurora-entry-opacity: 1;
  --mht-motion-dots-entry-opacity: 1;
}

.mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas {
  opacity: 1 !important;
  filter: saturate(1.12) contrast(1.04);
}

.mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
  opacity: 1 !important;
  filter: saturate(1.28) contrast(1.16);
}

html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
  opacity: 1 !important;
  mix-blend-mode: multiply;
  filter: saturate(1.32) contrast(1.22);
}

html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas {
  opacity: 1 !important;
  filter: saturate(1.18) contrast(1.08);
}

@media (max-width: 720px) {
  .mht-motion-bg--dotted-aurora {
    --mht-motion-aurora-entry-opacity: 1;
    --mht-motion-dots-entry-opacity: 1;
  }

  .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
    opacity: 1 !important;
  }
}

/* =====================================================
   Phase 140 — Smooth Dotted Aurora entry
   Dots should reveal calmly in place. No fake slide/scale movement.
   ===================================================== */
.mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
  animation: mht-motion-dots-soft-reveal 1150ms cubic-bezier(.22, 1, .36, 1) 80ms both !important;
  transform-origin: center !important;
}

.mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas {
  animation: mht-motion-aurora-soft-reveal 1350ms cubic-bezier(.22, 1, .36, 1) both !important;
  transform-origin: center !important;
}

@keyframes mht-motion-dots-soft-reveal {
  0% {
    opacity: 0;
    transform: none;
    filter: saturate(.92) contrast(.96);
  }
  55% {
    opacity: calc(var(--mht-motion-dots-entry-opacity, 1) * .72);
    transform: none;
    filter: saturate(1.06) contrast(1.04);
  }
  100% {
    opacity: var(--mht-motion-dots-entry-opacity, 1);
    transform: none;
    filter: saturate(1.28) contrast(1.16);
  }
}

@keyframes mht-motion-aurora-soft-reveal {
  0% {
    opacity: 0;
    transform: none;
    filter: saturate(.92) contrast(.96);
  }
  60% {
    opacity: calc(var(--mht-motion-aurora-entry-opacity, 1) * .78);
    transform: none;
    filter: saturate(1.04) contrast(1.02);
  }
  100% {
    opacity: var(--mht-motion-aurora-entry-opacity, 1);
    transform: none;
    filter: saturate(1.12) contrast(1.04);
  }
}

html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
  animation-name: mht-motion-dots-soft-reveal-light !important;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas {
  animation-name: mht-motion-aurora-soft-reveal-light !important;
}

@keyframes mht-motion-dots-soft-reveal-light {
  0% {
    opacity: 0;
    transform: none;
    filter: saturate(.95) contrast(.98);
  }
  55% {
    opacity: calc(var(--mht-motion-dots-entry-opacity, 1) * .72);
    transform: none;
    filter: saturate(1.14) contrast(1.12);
  }
  100% {
    opacity: var(--mht-motion-dots-entry-opacity, 1);
    transform: none;
    filter: saturate(1.32) contrast(1.22);
  }
}

@keyframes mht-motion-aurora-soft-reveal-light {
  0% {
    opacity: 0;
    transform: none;
    filter: saturate(.96) contrast(.98);
  }
  60% {
    opacity: calc(var(--mht-motion-aurora-entry-opacity, 1) * .78);
    transform: none;
    filter: saturate(1.10) contrast(1.05);
  }
  100% {
    opacity: var(--mht-motion-aurora-entry-opacity, 1);
    transform: none;
    filter: saturate(1.18) contrast(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
    animation: none !important;
    transform: none !important;
  }
}


/* =====================================================
   Phase 144 — Homepage hero Dotted Aurora pilot
   The approved motion system can sit behind the homepage hero without
   changing the hero layout, buttons, portrait, or existing .mht-* hooks.
   ===================================================== */
.mht-hero--motion-bg {
  background: #0D0D0D;
  isolation: isolate;
}

.mht-hero--motion-bg::before {
  display: none;
}

.mht-hero--motion-bg .mht-motion-bg--hero {
  z-index: 0;
  opacity: .92;
}

.mht-hero--motion-bg .mht-hero__inner,
.mht-hero--motion-bg .mht-hero__content,
.mht-hero--motion-bg .mht-hero__visual {
  position: relative;
  z-index: 2;
}

.mht-motion-bg--hero .mht-motion-bg__stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(47,31,58,.32), transparent 58%),
    linear-gradient(180deg, #0D0D0D 0%, #111016 54%, #0D0D0D 100%);
}

.mht-motion-bg--hero .mht-motion-bg__aurora-canvas {
  opacity: .72 !important;
  filter: saturate(1.03) contrast(1.01);
}

.mht-motion-bg--hero .mht-motion-bg__dot-canvas {
  opacity: .90 !important;
  filter: saturate(1.10) contrast(1.05);
}


.mht-motion-bg--hero .mht-motion-bg__foreground-haze {
  display: block !important;
  opacity: .50;
  background:
    radial-gradient(ellipse at 72% 42%, transparent 0%, rgba(13,13,13,.10) 36%, rgba(13,13,13,.44) 82%),
    linear-gradient(180deg, rgba(13,13,13,.46) 0%, transparent 24%, transparent 68%, rgba(13,13,13,.82) 100%);
}

html[data-mht-theme-effective="light"] .mht-hero--motion-bg,
html[data-mht-theme="light"] .mht-hero--motion-bg {
  background: var(--mht-p70-page-soft, #FBF8FD);
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__stage,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__stage {
  background: #F6F2F7;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__aurora-canvas,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__aurora-canvas {
  opacity: .72 !important;
  mix-blend-mode: multiply;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__dot-canvas,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__dot-canvas {
  opacity: .72 !important;
  mix-blend-mode: multiply;
}

@media (max-width: 720px) {
  .mht-hero--motion-bg .mht-motion-bg--hero {
    opacity: .82;
  }

  .mht-motion-bg--hero .mht-motion-bg__aurora-canvas {
    opacity: .58 !important;
  }

  .mht-motion-bg--hero .mht-motion-bg__dot-canvas {
    opacity: .76 !important;
  }
}

/* =====================================================
   Phase 145 — Global motion reveal + section aurora family
   Dots reveal through the reusable motion component itself.
   Start Here and homepage hero share the ribbon family; page headers
   keep the calmer ambient field.
   ===================================================== */
.mht-motion-bg--dotted-aurora {
  --mht-motion-aurora-live-opacity: 1;
  --mht-motion-dots-live-opacity: 1;
}

.mht-motion-bg--hero {
  --mht-motion-aurora-live-opacity: .54;
  --mht-motion-dots-live-opacity: .92;
}

.mht-motion-bg--page-header {
  --mht-motion-aurora-live-opacity: .34;
  --mht-motion-dots-live-opacity: .76;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero,
html[data-mht-theme="light"] .mht-motion-bg--hero {
  --mht-motion-aurora-live-opacity: .34;
  --mht-motion-dots-live-opacity: .76;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--page-header,
html[data-mht-theme="light"] .mht-motion-bg--page-header {
  --mht-motion-aurora-live-opacity: .28;
  --mht-motion-dots-live-opacity: .70;
}

.mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
.mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
  animation: none !important;
  transform: none !important;
  transition:
    opacity 1450ms cubic-bezier(.22, 1, .36, 1),
    filter 1450ms cubic-bezier(.22, 1, .36, 1) !important;
  will-change: opacity, filter;
}

.mht-motion-bg--dotted-aurora:not(.mht-motion-bg--is-ready) .mht-motion-bg__aurora-canvas,
.mht-motion-bg--dotted-aurora:not(.mht-motion-bg--is-ready) .mht-motion-bg__dot-canvas {
  opacity: 0 !important;
  filter: saturate(.92) contrast(.96) !important;
}

.mht-motion-bg--dotted-aurora.mht-motion-bg--is-ready .mht-motion-bg__aurora-canvas {
  opacity: var(--mht-motion-aurora-live-opacity) !important;
}

.mht-motion-bg--dotted-aurora.mht-motion-bg--is-ready .mht-motion-bg__dot-canvas {
  opacity: var(--mht-motion-dots-live-opacity) !important;
}

.mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__aurora-canvas {
  mix-blend-mode: screen;
  filter: saturate(1.04) contrast(1.02);
}

.mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__dot-canvas {
  filter: saturate(1.14) contrast(1.08);
}

html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__aurora-canvas,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__aurora-canvas,
html[data-mht-theme-effective="light"] .mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__dot-canvas,
html[data-mht-theme="light"] .mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__dot-canvas {
  mix-blend-mode: multiply;
}

.mht-motion-bg--page-header .mht-motion-bg__stage,
.mht-motion-bg--hero .mht-motion-bg__stage {
  background: #0D0D0D !important;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--page-header .mht-motion-bg__stage,
html[data-mht-theme="light"] .mht-motion-bg--page-header .mht-motion-bg__stage,
html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__stage,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__stage {
  background: #F6F2F7 !important;
}

@media (max-width: 720px) {
  .mht-motion-bg--hero {
    --mht-motion-aurora-live-opacity: .34;
    --mht-motion-dots-live-opacity: .72;
  }

  .mht-motion-bg--page-header {
    --mht-motion-aurora-live-opacity: .28;
    --mht-motion-dots-live-opacity: .68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
    transition: none !important;
  }
}

/* =====================================================
   Phase 146 — real global dot reveal + visible section aurora
   - Dot reveal is driven inside canvas by JS; this layer only supports it.
   - Start Here and hero use the shared ribbon renderer; page headers use
     the calmer ambient field.
   ===================================================== */
.mht-motion-bg--dotted-aurora:not(.mht-motion-bg--is-ready) .mht-motion-bg__aurora-canvas,
.mht-motion-bg--dotted-aurora:not(.mht-motion-bg--is-ready) .mht-motion-bg__dot-canvas {
  opacity: 0 !important;
}

.mht-motion-bg--hero {
  --mht-motion-aurora-live-opacity: .76;
  --mht-motion-dots-live-opacity: .84;
}

.mht-motion-bg--page-header {
  --mht-motion-aurora-live-opacity: .58;
  --mht-motion-dots-live-opacity: .78;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero,
html[data-mht-theme="light"] .mht-motion-bg--hero {
  --mht-motion-aurora-live-opacity: .54;
  --mht-motion-dots-live-opacity: .74;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--page-header,
html[data-mht-theme="light"] .mht-motion-bg--page-header {
  --mht-motion-aurora-live-opacity: .42;
  --mht-motion-dots-live-opacity: .68;
}

.mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__aurora-canvas {
  filter: saturate(1.18) contrast(1.06);
}

.mht-motion-bg--dotted-aurora[data-mht-motion-aurora-family="ambient-field"] .mht-motion-bg__dot-canvas {
  filter: saturate(1.18) contrast(1.10);
}

.mht-page-hero--motion-bg {
  background: #0D0D0D;
}

.mht-page-hero--motion-bg .mht-page-hero__motion-bg {
  z-index: 0;
}

.mht-page-hero--motion-bg .mht-page-hero__bg {
  display: none !important;
}

.mht-page-hero--motion-bg .mht-page-hero__inner {
  position: relative;
  z-index: 2;
}

html[data-mht-theme-effective="light"] .mht-page-hero--motion-bg,
html[data-mht-theme="light"] .mht-page-hero--motion-bg {
  background: #F6F2F7;
}

@media (max-width: 720px) {
  .mht-motion-bg--hero {
    --mht-motion-aurora-live-opacity: .62;
    --mht-motion-dots-live-opacity: .74;
  }

  .mht-motion-bg--page-header {
    --mht-motion-aurora-live-opacity: .46;
    --mht-motion-dots-live-opacity: .68;
  }
}


/* =====================================================
   Phase 147 — hero bottom connection
   - Heroes/page-headers always darken and connect at the bottom.
   - No hard seam between hero and following content.
   ===================================================== */
.mht-hero--motion-bg,
.mht-page-hero--motion-bg {
  position: relative;
  overflow: hidden;
}

.mht-hero--motion-bg::after,
.mht-page-hero--motion-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: clamp(140px, 24vh, 280px);
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,.34) 36%, rgba(13,13,13,.74) 72%, #0D0D0D 100%);
}

.mht-hero--motion-bg .mht-hero__inner,
.mht-page-hero--motion-bg .mht-page-hero__inner {
  position: relative;
  z-index: 2;
}

.mht-hero--motion-bg .mht-motion-bg--hero,
.mht-page-hero--motion-bg .mht-motion-bg--page-header {
  z-index: 0;
}

/* Phase 151B.5: homepage hero fades into the same page canvas.
   No seam lines and no page-header rollout in this phase. */
html[data-mht-theme-effective="light"] .mht-hero--motion-bg::after,
html[data-mht-theme="light"] .mht-hero--motion-bg::after {
  background:
    linear-gradient(180deg, rgba(251,248,253,0) 0%, rgba(251,248,253,.18) 42%, rgba(251,248,253,.66) 76%, var(--mht-p70-page-soft, #FBF8FD) 100%);
}









/* =====================================================
   Phase 151A — Mobile thermal safety for Dotted Aurora
   Static/mobile modes keep the Aurora poster visible while removing
   continuous CSS filter/animation cost where it does not improve clarity.
   ===================================================== */
.mht-motion-bg--dotted-aurora[data-mht-motion-quality-active="static"] .mht-motion-bg__aurora-canvas,
.mht-motion-bg--dotted-aurora[data-mht-motion-quality-active="static"] .mht-motion-bg__dot-canvas {
  animation: none !important;
  transition: opacity 280ms ease-out !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
}

.mht-motion-bg--dotted-aurora[data-mht-motion-quality-active="static"] .mht-motion-bg__stage {
  transform: none !important;
}

.mht-motion-bg--dotted-aurora[data-mht-motion-quality-active="static"] .mht-motion-bg__stage::before,
.mht-motion-bg--dotted-aurora[data-mht-motion-quality-active="static"] .mht-motion-bg__ambient,
.mht-motion-bg--dotted-aurora[data-mht-motion-quality-active="static"] .mht-motion-bg__bottom-shelf {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
}

@media (pointer: coarse), (max-width: 720px) {
  .mht-motion-bg--dotted-aurora .mht-motion-bg__aurora-canvas,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__dot-canvas {
    animation: none !important;
    transition: opacity 280ms ease-out !important;
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
  }

  .mht-motion-bg--dotted-aurora .mht-motion-bg__stage {
    transform: none !important;
  }

  .mht-motion-bg--dotted-aurora .mht-motion-bg__stage::before,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__ambient,
  .mht-motion-bg--dotted-aurora .mht-motion-bg__bottom-shelf {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* =====================================================
   Phase 151B.1 — Hero Aurora cleanup after global density correction
   Dot density now lives in the shared JS profile baseline.
   This block keeps only hero atmosphere, name fade, and readability tuning.
   ===================================================== */
.mht-motion-bg--hero {
  --mht-motion-aurora-live-opacity: .64;
  --mht-motion-dots-live-opacity: .94;
}

.mht-motion-bg--hero .mht-motion-bg__stage {
  background:
    radial-gradient(ellipse at 48% 82%, rgba(47,31,58,.22), transparent 60%),
    #0D0D0D !important;
}

.mht-motion-bg--hero .mht-motion-bg__aurora-canvas {
  filter: saturate(1.03) contrast(1.01) !important;
}

.mht-motion-bg--hero .mht-motion-bg__dot-canvas {
  filter: saturate(1.10) contrast(1.05) !important;
}

.mht-motion-bg--hero .mht-motion-bg__foreground-haze {
  display: block !important;
  opacity: .50 !important;
  background:
    radial-gradient(ellipse at 72% 42%, transparent 0%, rgba(13,13,13,.10) 36%, rgba(13,13,13,.38) 82%),
    linear-gradient(180deg, rgba(13,13,13,.42) 0%, transparent 24%, transparent 70%, rgba(13,13,13,.72) 100%) !important;
}



html[data-mht-theme-effective="light"] .mht-motion-bg--hero,
html[data-mht-theme="light"] .mht-motion-bg--hero {
  --mht-motion-aurora-live-opacity: .46;
  --mht-motion-dots-live-opacity: .82;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__stage,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__stage {
  background:
    radial-gradient(ellipse at 50% 82%, rgba(230,216,255,.28), transparent 64%),
    var(--mht-p70-page-soft, #FBF8FD) !important;
}

@media (max-width: 720px) {
  .mht-motion-bg--hero {
    --mht-motion-aurora-live-opacity: .46;
    --mht-motion-dots-live-opacity: .78;
  }

  html[data-mht-theme-effective="light"] .mht-motion-bg--hero,
  html[data-mht-theme="light"] .mht-motion-bg--hero {
    --mht-motion-aurora-live-opacity: .34;
    --mht-motion-dots-live-opacity: .72;
  }
}


/* =====================================================
   Phase 151B.5.7 — Hero ribbon presence tuning
   The hero no longer hides the shared stage glow/bottom-shelf layers.
   Only hero placement/intensity is adjusted so the shared Aurora field
   sits in the lower hero area behind the stats glass with slightly stronger presence.
   ===================================================== */
.mht-hero--motion-bg {
  background: #0D0D0D;
}

html[data-mht-theme-effective="light"] .mht-hero--motion-bg,
html[data-mht-theme="light"] .mht-hero--motion-bg {
  background: var(--mht-p70-page-soft, #FBF8FD);
}

.mht-motion-bg--hero .mht-motion-bg__stage::before {
  display: block !important;
  opacity: .16;
}

.mht-motion-bg--hero .mht-motion-bg__ambient {
  display: block !important;
  opacity: .075;
}

.mht-motion-bg--hero .mht-motion-bg__ambient--left {
  bottom: 22vh;
}

.mht-motion-bg--hero .mht-motion-bg__ambient--right {
  bottom: 12vh;
}

.mht-motion-bg--hero .mht-motion-bg__bottom-shelf {
  display: block !important;
  bottom: clamp(18px, 6.8vh, 78px);
  height: min(34vh, 340px);
  opacity: .52;
  filter: blur(18px);
}

.mht-motion-bg--hero .mht-motion-bg__bottom-shelf::before {
  display: block !important;
  content: "" !important;
  opacity: .38;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__stage::before,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__stage::before {
  opacity: .32;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__ambient,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__ambient {
  opacity: .10;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__bottom-shelf,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__bottom-shelf {
  opacity: .43;
  filter: blur(16px);
}

@media (max-width: 720px) {
  .mht-motion-bg--hero .mht-motion-bg__bottom-shelf {
    bottom: clamp(8px, 4.8vh, 42px);
    height: min(26vh, 230px);
    opacity: .38;
  }

  .mht-motion-bg--hero .mht-motion-bg__ambient {
    opacity: .055;
  }
}



/* =====================================================
   Phase 151B.5.4 — light hero bottom color match
   Root cleanup: the hero-specific foreground haze used dark rgba(13,13,13)
   at the bottom in all modes. In light mode that read as a dirty grey band.
   Keep the same layer, but switch it to the light page canvas family.
   ===================================================== */
html[data-mht-theme-effective="light"] .mht-motion-bg--hero .mht-motion-bg__foreground-haze,
html[data-mht-theme="light"] .mht-motion-bg--hero .mht-motion-bg__foreground-haze {
  opacity: .42 !important;
  background:
    radial-gradient(ellipse at 72% 42%, transparent 0%, rgba(251,248,253,.03) 38%, rgba(251,248,253,.12) 84%),
    linear-gradient(180deg, rgba(251,248,253,.08) 0%, transparent 28%, transparent 74%, var(--mht-p70-page-soft, #FBF8FD) 100%) !important;
}

html[data-mht-theme-effective="light"] .mht-hero--motion-bg::after,
html[data-mht-theme="light"] .mht-hero--motion-bg::after {
  background:
    linear-gradient(180deg, rgba(251,248,253,0) 0%, rgba(251,248,253,.16) 44%, rgba(251,248,253,.54) 76%, var(--mht-p70-page-soft, #FBF8FD) 100%) !important;
}

/* =====================================================
   Phase 151C.1 — Light Mode Page Header Bottom Fade Color Fix
   Root cause: the shared page-header connector used the dark hero/page-header
   bottom fade in light mode. Scope this correction to page headers only so
   the approved homepage hero and dark-mode header connection remain untouched.
   ===================================================== */
html[data-mht-theme-effective="light"] .mht-page-hero--motion-bg,
html[data-mht-theme="light"] .mht-page-hero--motion-bg {
  background: var(--mht-p70-page-soft, #FBF8FD) !important;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--page-header .mht-motion-bg__stage,
html[data-mht-theme="light"] .mht-motion-bg--page-header .mht-motion-bg__stage {
  background: var(--mht-p70-page-soft, #FBF8FD) !important;
}

html[data-mht-theme-effective="light"] .mht-motion-bg--page-header .mht-motion-bg__foreground-haze,
html[data-mht-theme="light"] .mht-motion-bg--page-header .mht-motion-bg__foreground-haze {
  opacity: .34 !important;
  background:
    radial-gradient(ellipse at 50% 58%, transparent 0%, rgba(251,248,253,.03) 42%, rgba(251,248,253,.10) 92%),
    linear-gradient(180deg, rgba(251,248,253,.06) 0%, transparent 30%, transparent 72%, var(--mht-p70-page-soft, #FBF8FD) 100%) !important;
}

html[data-mht-theme-effective="light"] .mht-page-hero--motion-bg::after,
html[data-mht-theme="light"] .mht-page-hero--motion-bg::after {
  background:
    linear-gradient(180deg, rgba(251,248,253,0) 0%, rgba(251,248,253,.16) 42%, rgba(251,248,253,.62) 74%, var(--mht-p70-page-soft, #FBF8FD) 100%) !important;
}