/* Modern building blocks (October 2026 design pass): the pieces the redesigned pages are made of, so the next page can reuse them instead of inventing its own.
   First used by /superinvestors and every /superinvestors/<slug> page. Prefix: m-.

   The rules for everything in here:
     1. Progressive. Each effect sits behind @supports or a media query, so a browser without it shows the plain, complete page.
     2. Motion is decoration. prefers-reduced-motion turns every animation and the page transition off, and no information is carried by motion alone.
     3. Only the features that work in current Chrome, Safari and Firefox (or degrade quietly): color-mix(), oklch(), @property, container queries, :has(),
        text-wrap, scroll-driven animations, cross-document view transitions. */

:root{
  --m-radius: 22px;
  --m-radius-sm: 14px;
  --m-fill: #1A1B30;                                                 /* the card colour the animated edge sits on */
  --m-glass: color-mix(in oklab, #1D1D2E 64%, transparent);
  --m-edge: color-mix(in oklab, white 13%, transparent);
  --m-glow: oklch(0.74 0.17 285 / 0.55);                             /* the brand violet, as a light */
  --m-glow-warm: oklch(0.84 0.14 80 / 0.35);
  --m-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---- page-to-page transitions: moving from the list to an investor's page cross-fades instead of flashing (Chrome, Safari 18+) ---- */
@view-transition{ navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .28s; animation-timing-function: var(--m-ease); }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none; } }

/* ---- better line breaks for free ---- */
main h1, main h2, main h3{ text-wrap: balance; }
main p, main li{ text-wrap: pretty; }
main .num, main td, main .si-kpi-val{ font-variant-numeric: tabular-nums; }

/* ---- glass: a translucent, blurred surface with a lit top edge ---- */
.m-glass{
  background: var(--m-glass); border: 1px solid var(--m-edge); border-radius: var(--m-radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 30px 70px -36px rgb(0 0 0 / .75);
}
@supports (backdrop-filter: blur(1px)){
  .m-glass{ backdrop-filter: blur(18px) saturate(1.5); }
}

/* ---- a border of light that travels round a card (needs @property; elsewhere it is a plain hairline) ---- */
@property --m-ang{ syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@supports (background: conic-gradient(from 0deg, red, blue)) and (color: oklch(0.5 0.1 100)){
  .m-edge{
    border: 1px solid transparent;
    background:
      linear-gradient(var(--m-fill), var(--m-fill)) padding-box,
      conic-gradient(from var(--m-ang), transparent 0 38%, var(--m-glow) 50%, var(--m-glow-warm) 56%, transparent 66% 100%) border-box;
    animation: m-spin 9s linear infinite;
  }
}
@keyframes m-spin{ to{ --m-ang: 360deg; } }

/* ---- rise into view as the section scrolls on screen (scroll-driven animation; a browser without it just shows the content) ---- */
@supports (animation-timeline: view()){
  .m-reveal{ animation: m-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
@keyframes m-rise{ from{ opacity: 0; transform: translateY(26px) scale(.985); } to{ opacity: 1; transform: none; } }

/* ---- a row of chips for jumping about a long page ---- */
.m-jump{
  display: flex; gap: 6px; overflow-x: auto; padding: 8px;
  background: color-mix(in oklab, #121220 78%, transparent); border-bottom: 1px solid var(--m-edge);
}
@supports (backdrop-filter: blur(1px)){ .m-jump{ backdrop-filter: blur(14px) saturate(1.4); } }
.m-jump::-webkit-scrollbar{ display: none; }
@supports not selector(::-webkit-scrollbar){ .m-jump{ scrollbar-width: none; } }
.m-jump a{
  flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .72);
  border: 1px solid transparent; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.m-jump a:hover{ color: #fff; background: rgb(255 255 255 / .07); }
.m-jump a[aria-current="true"]{ color: #fff; background: color-mix(in oklab, #8B7FFF 30%, transparent); border-color: color-mix(in oklab, #8B7FFF 55%, transparent); }

@media (prefers-reduced-motion: reduce){
  .m-edge{ animation: none; }
  .m-reveal{ animation: none; }
  *{ scroll-behavior: auto !important; }
}