/* ============================================================
   The Wealth Mosaic — project-global styles
   ------------------------------------------------------------
   Loaded site-wide by WealthMosaicLayout, right after the vendored
   styles.css. Home for cross-page patterns the original mock-up only
   defined inside individual per-page CSS files (so pages that don't
   link those files still render them correctly).
   Built entirely on the global tokens in styles.css.
   ============================================================ */

/* Breadcrumb — the mock-up only defined .crumb inside marketplace.css /
   knowledge.css / article.css, so pages that don't link those (e.g.
   /collection, /services) rendered a raw numbered <ol>. Promote it to a
   global so every page's breadcrumb is consistent. */
.crumb {
  background: #fff;
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px 0;
  font-size: 13px;
  color: var(--muted);
}
.crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.crumb li { display: flex; align-items: center; }
.crumb li + li::before {
  content: "›";
  color: #c0c4cc;
  margin-right: 8px;
}
.crumb a {
  color: var(--muted);
  transition: color .15s ease;
}
.crumb a:hover { color: var(--magenta); }
.crumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ============================================================
   Homepage hero (phase 1) — search dead-centre, four switchable
   concepts cycled by the top-right control (data-variant on #homeHero,
   driven by heroSwitcher in main.js):
     · skyline  — cinematic city-skyline still (default), white text
     · abstract — abstract data-network still, white text
     · logo     — the brand mark big behind the search, dark text
     · wheel    — the brand directory wheel faded behind, dark text
   skyline/abstract = "dark scheme" (light text); logo/wheel = "light
   scheme" (dark text). Example searches crossfade INSIDE the field — no
   floating labels. The .search-* markup + styles are shared with the
   global hero in styles.css, so WM.search still drives it.
   ============================================================ */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;            /* search block sits dead-centre */
  min-height: clamp(600px, 84vh, 880px);
  padding: 72px 0;
  text-align: center;
  background: #0a1429;
}

/* ---- background layers ---- */
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* skyline / abstract still — bg-image is set on the active variant below,
   so only the shown concept's image is fetched. */
.home-hero__photo {
  position: absolute;
  inset: 0;
  background-color: #0a1429;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .5s ease;
}
/* darkening overlay so white headline + search stay legible over a still. */
.home-hero__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(1200px 640px at 50% 40%, rgba(8, 15, 30, .12), rgba(8, 15, 30, .66) 100%),
    linear-gradient(180deg, rgba(8, 15, 30, .58) 0%, rgba(8, 15, 30, .30) 40%, rgba(8, 15, 30, .74) 100%);
  transition: opacity .5s ease;
}
/* big brand mark (logo variant) — bg-image on the active selector below. */
.home-hero__mark {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
/* brand directory wheel (wheel variant) — WM.brandWheel injects the SVG. */
.home-hero__wheel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .6s ease;
}
.home-hero__wheel svg { width: min(720px, 82vw); height: auto; display: block; }

/* slow drift so a still reads like a frame of B-roll video. */
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.6%, -1.2%, 0); }
}

/* ---- variant: skyline (default) ---- */
.home-hero[data-variant="skyline"] .home-hero__photo {
  background-image: url("/assets/images/hero-skyline.webp");
  opacity: 1;
  animation: heroDrift 28s ease-in-out infinite alternate;
}
.home-hero[data-variant="skyline"] .home-hero__scrim { opacity: 1; }

/* ---- variant: abstract ---- */
.home-hero[data-variant="abstract"] .home-hero__photo {
  background-image: url("/assets/images/hero-broll.webp");
  opacity: 1;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
.home-hero[data-variant="abstract"] .home-hero__scrim { opacity: 1; }

/* ---- variant: logo (light, mark stronger per feedback) ---- */
.home-hero[data-variant="logo"] {
  background: radial-gradient(1100px 560px at 50% 48%, #ffffff, #eef2f8 74%);
}
.home-hero[data-variant="logo"] .home-hero__mark {
  background: url("/assets/logos/twm-mark.png") center center / min(760px, 78vw) auto no-repeat;
  opacity: .30;
}

/* ---- variant: wheel (light) ---- */
.home-hero[data-variant="wheel"] {
  background: radial-gradient(1100px 560px at 50% 50%, #ffffff, #eef2f8 76%);
}
.home-hero[data-variant="wheel"] .home-hero__wheel { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
  .home-hero__photo { animation: none !important; }
}

/* ---- foreground (centred) ---- */
.home-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.8vw, 34px);
  width: 100%;
}
.home-hero__title {
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: -.026em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.home-hero[data-variant="logo"] .home-hero__title,
.home-hero[data-variant="wheel"] .home-hero__title {
  color: var(--ink);
  text-shadow: none;
}

/* Search prominence within the hero */
.home-hero .hero-search-row { width: 100%; max-width: 760px; margin: 0 auto; }
.home-hero .search-pill { max-width: 720px; }
.home-hero[data-variant="skyline"] .search-pill,
.home-hero[data-variant="abstract"] .search-pill {
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  border-color: transparent;
}
.home-hero[data-variant="logo"] .search-pill,
.home-hero[data-variant="wheel"] .search-pill { box-shadow: 0 16px 50px rgba(16, 21, 36, .12); }

/* In-field topic rotation — a clean crossfade inside the pill. */
.search-pill__rotor.is-swapping { opacity: 0; }

/* Popular searches — pills */
.home-hero__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.home-hero__quick-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  margin-right: 2px;
}
.home-hero__quick a {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.home-hero__quick a:hover { transform: translateY(-1px); }
/* dark scheme pills (skyline / abstract) */
.home-hero[data-variant="skyline"] .home-hero__quick-label,
.home-hero[data-variant="abstract"] .home-hero__quick-label { color: rgba(255, 255, 255, .6); }
.home-hero[data-variant="skyline"] .home-hero__quick a,
.home-hero[data-variant="abstract"] .home-hero__quick a {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.home-hero[data-variant="skyline"] .home-hero__quick a:hover,
.home-hero[data-variant="abstract"] .home-hero__quick a:hover { background: rgba(255, 255, 255, .22); }
/* light scheme pills (logo / wheel) */
.home-hero[data-variant="logo"] .home-hero__quick-label,
.home-hero[data-variant="wheel"] .home-hero__quick-label { color: var(--muted); }
.home-hero[data-variant="logo"] .home-hero__quick a,
.home-hero[data-variant="wheel"] .home-hero__quick a {
  background: #fff;
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: 0 1px 2px rgba(16, 21, 36, .05);
}
.home-hero[data-variant="logo"] .home-hero__quick a:hover,
.home-hero[data-variant="wheel"] .home-hero__quick a:hover { color: var(--magenta); border-color: var(--magenta); }

/* ---- cycle control: hidden hotspot that reveals on hover / focus ---- */
.home-hero__switch {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 116px;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;                 /* invisible "hidden spot" — still clickable */
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.home-hero:hover .home-hero__switch,
.home-hero__switch:focus-visible { opacity: 1; transform: none; }
.home-hero__switch:hover { background: rgba(255, 255, 255, .24); }
.home-hero__switch-ico { font-size: 14px; line-height: 1; }
/* light-scheme variants: dark control on the light background */
.home-hero[data-variant="logo"] .home-hero__switch,
.home-hero[data-variant="wheel"] .home-hero__switch {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(16, 21, 36, .12);
  color: var(--ink-soft);
}
.home-hero[data-variant="logo"] .home-hero__switch:hover,
.home-hero[data-variant="wheel"] .home-hero__switch:hover { color: var(--magenta); border-color: rgba(230, 23, 90, .4); }

@media (prefers-reduced-motion: reduce) {
  .home-hero__switch { transition: opacity .2s ease; transform: none; }
}
@media (max-width: 640px) {
  .home-hero { min-height: 82vh; padding: 56px 0; }
  .home-hero__switch { min-width: 0; }
  .home-hero__switch-txt { display: none; }   /* icon-only on small screens */
}