/* ==========================================================================
   HOMEPAGE — cinematic sections (Phase 3)
   Replaces an unused Phase-2 file (old .hp-* glow/particle/testimonial-
   carousel styles — never referenced by any template, confirmed before this
   rewrite). Every rule below is scoped to homepage-only class names and
   builds entirely on assets/css/tokens.css + marketing.css (--mk-*, .mk-app,
   .mk-panel, .mk-kpi, .mk-signal, .mk-bars, .mkc-* …) — no new color system,
   no new fonts, no external dependency.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ANCHOR TARGETS — #loop and #platform used to live on sections merged into
   Investigation (see index.php); global nav (includes/marketing/nav.php)
   and every intelligence/platform sub-page breadcrumb (content-capabilities.php)
   still link to index.php#loop / index.php#platform, so the targets must
   keep resolving somewhere sensible on this page.
   -------------------------------------------------------------------------- */
.mk-anchor{ display:block; position:relative; }
#loop, #platform, #intelligence{ scroll-margin-top:calc(var(--mk-header-h, 68px) + 16px); }

/* --------------------------------------------------------------------------
   HERO — wider product visual, taller canvas
   -------------------------------------------------------------------------- */
@media (min-width:1080px){
  .mk-hero--cinematic .mk-hero__grid{ grid-template-columns:.86fr 1.14fr; align-items:center; gap:clamp(32px,5vw,64px); }
  .mk-hero--cinematic{ padding-block:clamp(56px,8vh,104px); }
  .mk-hero--cinematic .mk-hero__copy h1{ font-size:clamp(2.75rem, 1.6rem + 4vw, 4.75rem); letter-spacing:-.02em; }
}
.mk-hero--cinematic .mk-app{ font-size:.85rem; }

/* Hero cinematic caption — synced to assets/js/homepage-intelligence.js
   initHeroCinema(), which auto-highlights the Command Center canvas nodes
   in story order. Decorative only (aria-hidden): the widget itself already
   carries the same information for assistive tech. */
.mk-hero__scene{ display:flex; align-items:center; gap:8px; min-height:1.4em; margin-top:16px; }
.mk-hero__scene-dot{ width:6px; height:6px; border-radius:50%; background:var(--mk-brand); flex:none; }
.mk-hero__scene-text{ font:600 var(--mk-label)/1.3 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--mk-text-3); transition:opacity .3s var(--mk-ease); }
.mk-hero__scene-text.is-neg{ color:var(--mk-negative); }
.mk-hero__scene-text.is-pos{ color:var(--mk-positive); }
.mk-hero__scene-text.is-warn{ color:var(--mk-warning); }
.mk-app__foot.is-cinema-flag{ animation:mk-flag-pulse 1.6s var(--mk-ease) 1; }
@keyframes mk-flag-pulse{ 0%{ background:transparent; } 30%{ background:rgba(91,63,228,.08); } 100%{ background:transparent; } }

/* --------------------------------------------------------------------------
   GEOGRAPHIC INTELLIGENCE
   Three region "clusters" (not a literal map — avoids faking geographic
   precision we can't back) with a live-updating signal card. Auto-rotates;
   fully operable by click/keyboard too.
   -------------------------------------------------------------------------- */
.mk-geo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px); align-items:stretch; margin-top:8px; }
@media (max-width:860px){ .mk-geo{ grid-template-columns:1fr; } }

.mk-geo__regions{ display:flex; flex-direction:column; gap:10px; }
.mk-geo__region{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:16px 18px; border:1px solid var(--mk-border-dark); border-radius:var(--mk-r-2);
  background:rgba(255,255,255,.03); transition:background var(--duration-normal) var(--mk-ease), border-color var(--duration-normal) var(--mk-ease);
}
.mk-geo__region:hover{ background:rgba(255,255,255,.06); }
.mk-geo__region:focus-visible{ outline:2px solid var(--mk-brand-on-dark); outline-offset:2px; }
.mk-geo__region.is-active{ border-color:var(--mk-brand-on-dark); background:rgba(181,166,255,.1); }
.mk-geo__dots{ flex:none; display:grid; grid-template-columns:repeat(3,6px); gap:4px; }
.mk-geo__dots span{ width:6px; height:6px; border-radius:50%; background:var(--mk-on-dark-2); opacity:.4; }
.mk-geo__region.is-active .mk-geo__dots span{ background:var(--mk-brand-on-dark); opacity:1; }
.mk-geo__region.is-active .mk-geo__dots span:nth-child(3n+2){ animation:mk-geo-pulse 2.4s var(--mk-ease) infinite; animation-delay:.3s; }
.mk-geo__region.is-active .mk-geo__dots span:nth-child(3n+3){ animation:mk-geo-pulse 2.4s var(--mk-ease) infinite; animation-delay:.6s; }
@keyframes mk-geo-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.mk-geo__region-body{ display:flex; flex-direction:column; gap:2px; }
.mk-geo__name{ font-weight:600; color:var(--mk-on-dark); font-size:.95rem; }
.mk-geo__cities{ font-size:.78rem; color:var(--mk-on-dark-2); }

.mk-geo__signal{ position:relative; }
.mk-geo__panel{ height:100%; display:flex; flex-direction:column; }
.mk-geo__panel[hidden]{ display:none; }
.mk-geo__kicker{ font:600 var(--mk-label)/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--mk-brand-on-dark); }
.mk-geo__city{ font-size:var(--mk-h3); color:var(--mk-on-dark); margin-top:6px; }
.mk-geo__metric{ display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.mk-geo__metric .val{ font:600 var(--mk-metric)/1 var(--font-display); color:var(--mk-on-dark); font-variant-numeric:tabular-nums; }
.mk-geo__metric .val.is-neg{ color:#F87171; }
.mk-geo__metric .lbl{ font-size:.82rem; color:var(--mk-on-dark-2); }
.mk-geo__note{ font-size:.82rem; color:var(--mk-on-dark-2); margin-top:10px; line-height:1.5; }
.mk-geo__foot{ margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   INVESTIGATION — single evolving example, sticky on desktop
   -------------------------------------------------------------------------- */
.mk-invest__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; margin-top:8px; }
.mk-invest__stage{ min-width:0; }
.mk-invest__panel[hidden]{ display:none; }
@media (min-width:1081px){
  .mk-invest__stage{ position:sticky; top:calc(var(--mk-header-h, 68px) + 28px); }
  .mk-invest__step{ min-height:58vh; display:flex; flex-direction:column; justify-content:center; padding-block:32px; }
}
@media (max-width:1080px){
  .mk-invest__grid{ grid-template-columns:1fr; }
  .mk-invest__step{ padding-block:24px; }
}

.mk-invest__rail{ height:3px; border-radius:99px; background:var(--mk-border); overflow:hidden; margin-bottom:20px; }
.mk-invest__rail span{ display:block; height:100%; border-radius:inherit; background:var(--mk-brand); width:16.66%; transition:width var(--duration-normal) var(--mk-ease); }

.mk-invest__steps{ list-style:none; }
.mk-invest__step{ border-top:1px solid var(--mk-border); opacity:.45; transition:opacity var(--duration-normal) var(--mk-ease); }
.mk-invest__step:first-child{ border-top:0; }
.mk-invest__step.is-active{ opacity:1; }
.mk-invest__num{ font:600 var(--mk-label)/1 var(--font-mono); color:var(--mk-brand); letter-spacing:.08em; }
.mk-invest__step h3{ font-size:var(--mk-h3); margin:10px 0 4px; }
.mk-invest__q{ font-weight:600; color:var(--mk-ink); font-size:.9375rem; margin-bottom:8px; }
.mk-invest__step p:not(.mk-invest__q){ color:var(--mk-text-2); font-size:var(--mk-body-sm); }
.mk-invest__step .mk-arrow-link{ margin-top:10px; display:inline-flex; }

/* --------------------------------------------------------------------------
   BUSINESS GRAPH — full-width wrapper around the shared .mkc component
   -------------------------------------------------------------------------- */
.mk-graph-full{ max-width:none; }
.mk-graph-full .mkc__svg{ aspect-ratio:800/440; }
@media (min-width:901px){ .mk-graph-full .ig-stage-wrap, .mk-graph-full .mkc__stage{ padding-inline:8px; } }

/* --------------------------------------------------------------------------
   CUSTOMER JOURNEY — funnel flow with animated counts
   -------------------------------------------------------------------------- */
.mk-funnel{ display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:4px; }
.mk-funnel__stage{ flex:1 1 0; min-width:112px; text-align:center; position:relative; padding:20px 10px; }
.mk-funnel__stage:not(:last-child)::after{
  content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-style:solid; border-width:6px 0 6px 8px;
  border-color:transparent transparent transparent var(--mk-border-strong);
}
.mk-funnel__bar{ height:6px; border-radius:99px; background:var(--mk-brand-tint); margin:0 auto 14px; }
.mk-funnel__bar span{ display:block; height:100%; border-radius:inherit; background:var(--mk-brand); width:var(--w,100%); }
.mk-funnel__count{ font:600 clamp(1.25rem,1rem + 1.4vw,2rem)/1 var(--font-display); color:var(--mk-ink); font-variant-numeric:tabular-nums; }
.mk-funnel__label{ font-size:.78rem; color:var(--mk-text-3); margin-top:6px; }
.mk-funnel--drop .mk-funnel__count{ color:var(--mk-negative); }
.mk-funnel__leak{ position:absolute; left:50%; bottom:2px; width:4px; height:4px; border-radius:50%; background:var(--mk-negative); opacity:0; pointer-events:none; }
.mk-funnel--drop .mk-funnel__leak{ animation:mk-leak-drop 2.6s var(--mk-ease) infinite; }
.mk-funnel--drop .mk-funnel__leak:nth-of-type(2){ left:40%; animation-delay:.85s; }
.mk-funnel--drop .mk-funnel__leak:nth-of-type(3){ left:60%; animation-delay:1.7s; }
@keyframes mk-leak-drop{ 0%{ opacity:0; transform:translate(-50%,-6px); } 18%{ opacity:.9; } 100%{ opacity:0; transform:translate(-50%,26px); } }
.mk-funnel__callout{
  margin-top:20px; display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
  border-radius:var(--mk-r-1); background:var(--mk-negative-tint); color:var(--mk-text);
}
.mk-funnel__callout strong{ color:var(--mk-negative); }
@media (max-width:640px){ .mk-funnel{ justify-content:flex-start; } .mk-funnel__stage{ min-width:96px; } }

/* --------------------------------------------------------------------------
   OPPORTUNITY ENGINE
   -------------------------------------------------------------------------- */
/* One object that evolves Signal -> Evidence -> Opportunity -> Action ->
   Measure (assets/js/homepage-intelligence.js initOppMorph()). The three
   .mk-opp-card examples below are unchanged and remain the accessible,
   always-complete, all-at-once version of the same idea. */
.mk-morph{ border:1px solid var(--mk-border); border-radius:var(--mk-r-2); background:var(--mk-canvas); padding:26px 28px; margin-bottom:28px; }
.mk-morph__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.mk-morph__tag{ display:inline-flex; align-items:center; gap:8px; font:600 var(--mk-label)/1 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--mk-brand); }
.mk-morph__tag::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.mk-morph__dots{ display:flex; gap:6px; }
.mk-morph__dots button{ all:unset; cursor:pointer; width:7px; height:7px; border-radius:50%; background:var(--mk-border-strong); }
.mk-morph__dots button.is-active{ background:var(--mk-brand); }
.mk-morph__body{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; transition:opacity .2s var(--mk-ease); }
@media (max-width:640px){ .mk-morph__body{ grid-template-columns:1fr; } }
.mk-morph__value{ font:600 var(--mk-metric)/1 var(--font-display); color:var(--mk-ink); white-space:nowrap; }
.mk-morph__value.is-neg{ color:var(--mk-negative); }
.mk-morph__value.is-pos{ color:var(--mk-positive); }
.mk-morph__title{ font-weight:600; color:var(--mk-text); font-size:.9375rem; margin-bottom:8px; }
.mk-morph__rows{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.mk-morph__rows span{ font-size:.8125rem; color:var(--mk-text-2); }
.mk-morph__rows b{ color:var(--mk-text-3); font-weight:600; }

.mk-opp-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); }
@media (max-width:900px){ .mk-opp-grid{ grid-template-columns:1fr; } }
.mk-opp-card{ border:1px solid var(--mk-border); border-radius:var(--mk-r-2); background:var(--mk-canvas); padding:24px; display:flex; flex-direction:column; gap:14px; }
.mk-opp-card__value{ font:600 var(--mk-metric)/1 var(--font-display); color:var(--mk-ink); }
.mk-opp-card__label{ font-size:.9375rem; color:var(--mk-text); font-weight:600; }
.mk-opp-card__rows{ display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid var(--mk-border); }
.mk-opp-card__row{ display:flex; justify-content:space-between; gap:12px; font-size:.8125rem; }
.mk-opp-card__row dt{ color:var(--mk-text-3); }
.mk-opp-card__row dd{ margin:0; color:var(--mk-text); text-align:right; }

/* --------------------------------------------------------------------------
   CONNECT — real intake paths first, category roadmap second (never the
   reverse: this section must not visually outrank what's actually shipped)
   -------------------------------------------------------------------------- */
.mk-connect{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.mk-connect__hub{ display:flex; align-items:center; gap:10px; padding:10px 22px; border-radius:var(--mk-r-3); border:1px solid rgba(181,166,255,.4); background:rgba(181,166,255,.12); color:var(--mk-on-dark); font-weight:600; font-size:.9375rem; }
.mk-connect__row{ width:100%; }
.mk-connect__row-label{ text-align:center; font:600 var(--mk-label)/1 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--mk-on-dark-2); margin-bottom:14px; }
.mk-connect__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.mk-connect__chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--mk-r-3); border:1px solid var(--mk-border-dark); font-size:.85rem; color:var(--mk-on-dark); background:rgba(255,255,255,.04); }
.mk-connect__chip.is-planned{ color:var(--mk-on-dark-2); border-style:dashed; background:transparent; }

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mk-geo__region.is-active .mk-geo__dots span{ animation:none !important; }
  .mk-invest__step{ opacity:1 !important; }
  .mk-app__foot.is-cinema-flag{ animation:none !important; }
  .mk-funnel__leak{ display:none !important; }
  .mk-morph__body{ transition:none !important; }
}