/* MillionMentor — shared 3D motion + AI progress components (loaded on every page by partials/theme_boot.html). */

/* ---------- 3D reveal on scroll ---------- */
.mm-reveal { opacity: 0; transform: perspective(900px) translateY(28px) rotateX(10deg) scale(.98); transform-origin: 50% 100%;
             transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1) !important; will-change: transform, opacity; }
.mm-reveal.mm-in { opacity: 1; transform: none; }

/* ---------- Pointer tilt with glare ([data-tilt]) ---------- */
[data-tilt] { transform-style: preserve-3d; position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1) !important; }
[data-tilt].mm-tilting { transition: transform .08s linear !important; }
[data-tilt] .mm-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
                        background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.18), transparent 55%); }
[data-tilt].mm-tilting .mm-glare { opacity: 1; }
[data-tilt] .mm-pop { transform: translateZ(28px); }

/* ---------- 3D objects ---------- */
.mm-orb { position: relative; border-radius: 9999px; transform-style: preserve-3d;
          background: radial-gradient(circle at 32% 28%, #fff7d6 0%, #facc15 18%, #a855f7 58%, #1e1b4b 100%);
          box-shadow: inset -14px -18px 40px rgba(0,0,0,.45), inset 10px 10px 30px rgba(255,255,255,.25), 0 0 60px rgba(168,85,247,.45); }
.mm-orb::after { content: ''; position: absolute; inset: -12%; border-radius: 9999px; border: 1px solid rgba(250,204,21,.35);
                 transform: rotateX(72deg); animation: mm-ring 8s linear infinite; }
.mm-orb.mm-speaking { animation: mm-speak .45s ease-in-out infinite alternate; }
.mm-orb.mm-thinking::after { border-color: rgba(56,189,248,.7); animation-duration: 1.6s; }
@keyframes mm-ring { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes mm-speak { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.06); filter: brightness(1.25); } }

.mm-cube-wrap { perspective: 600px; }
.mm-cube { position: relative; width: var(--s, 56px); height: var(--s, 56px); transform-style: preserve-3d; animation: mm-cube 9s linear infinite; }
.mm-cube > span { position: absolute; inset: 0; border: 1px solid rgba(250,204,21,.55); background: rgba(168,85,247,.12); backdrop-filter: blur(2px); }
.mm-cube > span:nth-child(1) { transform: translateZ(calc(var(--s, 56px) / 2)); }
.mm-cube > span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s, 56px) / 2)); }
.mm-cube > span:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s, 56px) / 2)); }
.mm-cube > span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s, 56px) / 2)); }
.mm-cube > span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s, 56px) / 2)); }
.mm-cube > span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s, 56px) / 2)); }
@keyframes mm-cube { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }

/* Animated 3D grid floor for hero headers */
.mm-hero-3d { position: relative; overflow: hidden; isolation: isolate; }
.mm-hero-3d::before { content: ''; position: absolute; left: -50%; right: -50%; bottom: -40%; height: 90%; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(250,204,21,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,.18) 1px, transparent 1px);
    background-size: 44px 44px; transform: perspective(500px) rotateX(62deg); animation: mm-grid 6s linear infinite;
    mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
@keyframes mm-grid { to { background-position: 0 44px, 0 0; } }

/* ---------- Progress bars ---------- */
.mm-bar { height: .5rem; border-radius: 9999px; background: rgba(148,163,184,.2); overflow: hidden; }
.mm-bar > i { display: block; height: 100%; border-radius: inherit; width: var(--p, 0%);
              background: linear-gradient(90deg, #a855f7, #facc15); transition: width .6s cubic-bezier(.2,.8,.2,1); position: relative; }
.mm-bar > i::after { content: ''; position: absolute; inset: 0;
                     background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: mm-sheen 1.4s linear infinite; }
@keyframes mm-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Score tracks and rings (funding grade, workforce, decisions): they fill once when the page opens */
.mm-track { height: .55rem; border-radius: 9999px; background: rgba(148,163,184,.22); overflow: hidden; }
.mm-track.mm-track-thin { height: .35rem; margin-top: .25rem; }
.mm-track > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit;
                background: linear-gradient(90deg, #f59e0b, #22c55e); animation: mm-grow 1.1s cubic-bezier(.2,.8,.2,1) both; }
.mm-track.mm-bad > i { background: linear-gradient(90deg, #ef4444, #f97316); }
@keyframes mm-grow { from { width: 0; } }
.mm-ring { transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1); }

/* AI research overlay (MMProgress) */
#mm-ai-progress { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px;
                  background: rgba(3, 7, 18, .72); backdrop-filter: blur(6px); }
#mm-ai-progress.mm-open { display: flex; animation: mm-fade .2s ease-out; }
#mm-ai-progress .mm-card { width: 100%; max-width: 440px; border-radius: 1.25rem; padding: 1.5rem; color: #f3f4f6;
    background: linear-gradient(160deg, rgba(30,27,75,.95), rgba(17,24,39,.97)); border: 1px solid rgba(250,204,21,.25);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset; animation: mm-pop .35s cubic-bezier(.2,.9,.2,1); }
#mm-ai-progress .mm-steps li { display: flex; gap: .6rem; align-items: center; font-size: .875rem; color: rgba(243,244,246,.45); padding: .2rem 0; }
#mm-ai-progress .mm-steps li.mm-now { color: #fde68a; }
#mm-ai-progress .mm-steps li.mm-done { color: #86efac; }
#mm-ai-progress .mm-steps li b { width: 1.1rem; text-align: center; font-weight: 700; }
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-pop { from { opacity: 0; transform: perspective(800px) translateY(20px) rotateX(14deg) scale(.96); } to { opacity: 1; transform: none; } }

/* Inline variant for pages that research in place */
.mm-inline-progress { display: none; }
.mm-inline-progress.mm-open { display: block; }

@media (prefers-reduced-motion: reduce) {
  .mm-reveal { opacity: 1; transform: none; transition: none !important; }
  .mm-orb::after, .mm-cube, .mm-hero-3d::before, .mm-bar > i::after, .mm-orb.mm-speaking { animation: none; }
  .mm-track > i { animation: none; }
  .mm-ring { transition: none; }
  [data-tilt] { transform: none !important; }
}

/* Animations some templates already reference */
@keyframes mm-fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.animate-fade-in-up { animation: mm-fade-in-up .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-float { animation: mm-float 4s ease-in-out infinite; }

/* Native dropdown lists: always readable (the open list doesn't inherit page colours in every browser) */
html.dark select option, html.dark select optgroup { background-color: #1f2937; color: #f3f4f6; }
html:not(.dark) select option, html:not(.dark) select optgroup { background-color: #ffffff; color: #111827; }
html:not(.dark) select { color-scheme: light; }
html.dark select { color-scheme: dark; }

/* ---------- Centered dialog + toast (MMDialog, static/js/mm-dialog.js) ---------- */
#mm-dialog { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 16px; }
#mm-dialog.mm-open { display: flex; }
#mm-dialog .mm-dlg-backdrop { position: absolute; inset: 0; background: rgba(3,7,18,.55); backdrop-filter: blur(4px); animation: mm-fade .15s ease-out; }
#mm-dialog .mm-dlg-card { position: relative; width: 100%; max-width: 380px; border-radius: 1.25rem; padding: 1.5rem; text-align: center;
  background: #ffffff; color: #111827; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); border: 1px solid rgba(250,204,21,.35); animation: mm-pop .25s cubic-bezier(.2,.9,.2,1); }
html.dark #mm-dialog .mm-dlg-card { background: linear-gradient(160deg, #1e1b4b, #111827); color: #f3f4f6; }
#mm-dialog .mm-dlg-icon { font-size: 2rem; line-height: 1; margin-bottom: .6rem; }
#mm-dialog .mm-dlg-msg { font-size: 1rem; line-height: 1.5; margin: 0 0 1.25rem; white-space: pre-line; }
#mm-dialog .mm-dlg-actions { display: flex; gap: .6rem; justify-content: center; }
#mm-dialog .mm-dlg-actions button { flex: 1; padding: .65rem 1rem; border-radius: .8rem; font-weight: 600; font-size: .9rem; transition: transform .1s, filter .15s; }
#mm-dialog .mm-dlg-actions button:active { transform: scale(.97); }
#mm-dialog .mm-dlg-cancel { background: rgba(148,163,184,.18); }
#mm-dialog .mm-dlg-ok { background: #facc15; color: #111827; }
#mm-dialog .mm-dlg-ok.mm-danger { background: #dc2626; color: #fff; }
#mm-dialog .mm-dlg-actions button:hover { filter: brightness(1.08); }
#mm-toast { position: fixed; left: 50%; top: 50%; z-index: 10002; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none;
  padding: .75rem 1.25rem; border-radius: 9999px; background: rgba(17,24,39,.92); color: #fff; font-weight: 600; font-size: .9rem;
  box-shadow: 0 15px 40px -10px rgba(0,0,0,.5); transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center; }
#mm-toast.mm-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Install buttons show only when the browser can install the app */
.mm-install-btn { display: none; }
html.mm-can-install .mm-install-btn { display: inline-flex; }

/* Busy submit buttons (data-busy) */
.mm-spin { display: inline-block; width: 1.05em; height: 1.05em; margin-right: .55rem; vertical-align: -.18em; border-radius: 9999px;
           border: 2px solid currentColor; border-right-color: transparent; animation: mm-rot .7s linear infinite; }
@keyframes mm-rot { to { transform: rotate(360deg); } }
button[data-busy-on] { cursor: progress; opacity: .9; }

/* ---- Lite mode (html.lite): no motion, no decoration, fewer paints. Set by the lightning-bolt switch or the browser's data saver. ---- */
html.lite *, html.lite *::before, html.lite *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.lite #stars-container, html.lite .mm-hero-3d::before, html.lite .mm-orb::after { display: none !important; }
html.lite [data-tilt] { transform: none !important; }
html.lite [class*="backdrop-blur"] { backdrop-filter: none !important; }
html.lite [class*="shadow-"] { box-shadow: none !important; }

/* Comment section: the comment you just posted (or opened from a notification) glows briefly */
.mm-comment-flash { background: rgba(250, 204, 21, .18); box-shadow: 0 0 0 6px rgba(250, 204, 21, .18); }

/* Page reader: the paragraph being read aloud (static/js/mm-voice.js) */
.mm-reading { background: rgba(168, 85, 247, .14); box-shadow: 0 0 0 4px rgba(168, 85, 247, .14); border-radius: .5rem; transition: background .3s, box-shadow .3s; }

/* ---- Page loader (static/js/mm-nav.js): top bar at once, loading card if the next page takes a moment ---- */
.mm-nav { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; visibility: hidden; }
.mm-nav.mm-nav-on { visibility: visible; }
.mm-nav-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; }
.mm-nav-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #22d3ee, #6366f1, #ec4899, #f59e0b); box-shadow: 0 0 12px rgba(99,102,241,.8); }
.mm-nav-on .mm-nav-bar i { animation: mm-nav-trickle 8s cubic-bezier(.1,.7,.2,1) forwards; }
.mm-nav-leaving .mm-nav-bar i { animation: none; transform: scaleX(1); transition: transform .2s ease-out, opacity .25s .1s; opacity: 0; }
@keyframes mm-nav-trickle { 0% { transform: scaleX(0); } 10% { transform: scaleX(.35); } 40% { transform: scaleX(.7); } 100% { transform: scaleX(.94); } }

.mm-nav-veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(15,23,42,.35), rgba(2,6,23,.55));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .25s ease; }
.mm-nav-card-on .mm-nav-veil { opacity: 1; pointer-events: auto; cursor: progress; }
.mm-nav-leaving .mm-nav-veil { opacity: 0; }
.mm-nav-card { width: min(320px, 100%); text-align: center; padding: 28px 24px 22px; border-radius: 28px; color: #e2e8f0;
  background: linear-gradient(160deg, rgba(30,41,59,.92), rgba(15,23,42,.94)); border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(8px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); }
.mm-nav-card-on .mm-nav-card { transform: none; }
html:not(.dark) .mm-nav-veil { background: radial-gradient(ellipse at center, rgba(255,255,255,.35), rgba(226,232,240,.6)); }
html:not(.dark) .mm-nav-card { color: #1e293b; background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(241,245,249,.96));
  border-color: rgba(100,116,139,.2); box-shadow: 0 30px 70px -25px rgba(30,41,59,.35); }

.mm-nav-orbit { position: relative; width: 112px; height: 112px; margin: 0 auto 16px; }
.mm-nav-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.mm-nav-ring.a { border-top-color: #22d3ee; border-right-color: #6366f1; animation: mm-nav-spin 1.1s linear infinite; }
.mm-nav-ring.b { inset: 12px; border-bottom-color: #ec4899; border-left-color: #f59e0b; animation: mm-nav-spin 1.6s linear infinite reverse; }
.mm-nav-glow { position: absolute; inset: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(64,192,255,.45), transparent 70%);
  animation: mm-nav-pulse 1.6s ease-in-out infinite; }
.mm-nav-mark { position: absolute; inset: 32px; width: 48px; height: 48px; filter: drop-shadow(0 0 8px rgba(64,192,255,.6));
  animation: mm-nav-breathe 1.6s ease-in-out infinite; }
html:not(.dark) .mm-nav-mark path:last-child { stroke: #1e3a8a; }
.mm-nav-dot { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; }
.mm-nav-dot.d1 { background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: mm-nav-orbit 1.8s linear infinite; }
.mm-nav-dot.d2 { background: #ec4899; box-shadow: 0 0 10px #ec4899; animation: mm-nav-orbit 1.8s linear infinite -.6s; }
.mm-nav-dot.d3 { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: mm-nav-orbit 1.8s linear infinite -1.2s; }
@keyframes mm-nav-spin { to { transform: rotate(360deg); } }
@keyframes mm-nav-orbit { from { transform: rotate(0deg) translateX(62px); } to { transform: rotate(360deg) translateX(62px); } }
@keyframes mm-nav-pulse { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes mm-nav-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.04); } }

.mm-nav-label { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; margin: 0; }
.mm-nav-dots b { display: inline-block; font-weight: 800; animation: mm-nav-blink 1.2s infinite; }
.mm-nav-dots b:nth-child(2) { animation-delay: .2s; } .mm-nav-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes mm-nav-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.mm-nav-hint { font-size: .82rem; line-height: 1.4; opacity: .75; margin: 8px 0 0; min-height: 0; }
.mm-nav-stop { display: none; margin: 14px auto 0; padding: 7px 16px; border-radius: 9999px; font-size: .8rem; font-weight: 600;
  color: inherit; background: rgba(148,163,184,.15); border: 1px solid rgba(148,163,184,.35); cursor: pointer; }
.mm-nav-stop:hover { background: rgba(148,163,184,.28); }
.mm-nav-stop:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.mm-nav-slow .mm-nav-stop { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .mm-nav-ring.a, .mm-nav-ring.b { animation-duration: 3s; }
  .mm-nav-dot, .mm-nav-glow, .mm-nav-mark, .mm-nav-dots b { animation: none; }
  .mm-nav-dot { display: none; }
}
html.lite .mm-nav-on .mm-nav-bar i { transform: scaleX(.6); }          /* lite mode has no animation: show the bar still */
@media print { .mm-nav { display: none !important; } }

/* ---- While a video is on the page or in the player: nothing animates or blurs behind it, so the browser only has to
   draw the video itself. Embedded reels (Instagram, TikTok, Facebook) stutter when 140 twinkling stars and a
   frosted-glass card are redrawn under every frame. ---- */
html:has(.mm-player) #stars-container, html.mm-video-open #stars-container { display: none; }
[class*="backdrop-blur"]:has(.mm-player) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.animate-fade-in-up:has(.mm-player) { animation: none !important; opacity: 1 !important; transform: none !important; }
.mm-player iframe, .mm-player video { transform: translateZ(0); }