/* WMP Global Private Equity Pool II — brand foundations for the pool page.
   Copied from secondaries-iii/page.css; only the asset paths differ, plus the
   GPEP II section at the end of this file.

   Lifted from the design handoff and scoped to #pool-page, the <main> wrapper,
   so the page's element defaults (html, body, h1-h6, p, a) cannot reach the
   site header and footer around it, and so the site's own element rules lose
   to these. See docs/pool-pages.md.

   Loaded by resources/views/private-markets/wmp-global-private-equity-pool-ii.blade.php
   and published to public/pools/gpep-ii/ by npm run copy-assets. */

/* The site's own stylesheet styles bare elements, and this page uses the same
   tags for ordinary content: <header> is the fixed site bar with a fixed
   height, <label> and <legend> are visually hidden off-canvas, <button> is
   reset to the site font. Undo those here - #pool-page outranks every one of
   them. */
#pool-page header {
  position: static;
  inset: auto;
  height: auto;
  z-index: auto;
  background-color: transparent;
  border-block-end: 0;
  font-size: inherit;
  /* The site bar sets its own font stack with the system Avenir as fallback.
     Neither Avenir Next LT Pro nor DM Sans has an arrow glyph, so the hero's
     "→" fell through to that Avenir and drew a different arrow from the
     design, whose stack falls through to the system font instead. */
  font-family: inherit;
}
#pool-page header a:hover,
#pool-page header a:focus { text-decoration: none; }
#pool-page label,
#pool-page legend {
  position: static;
  width: auto;
  overflow: visible;
  white-space: normal;
}
#pool-page button { font-family: inherit; }
#pool-page h1 { min-height: 0; }
#pool-page section > p,
#pool-page section > h3,
#pool-page section > ul,
#pool-page section > ol,
#pool-page section > figure { padding-block-end: 0; }

/* ============================================================
   WMP — Wealth Management Partners
   Colors & Type foundations
   Source of truth: WMP Brandbook 2026 (versie 0630)
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url("/pools/gpep-ii/fonts/avenir-next-lt-pro-regular.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url("/pools/gpep-ii/fonts/avenir-next-lt-pro-demi.otf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

/* Fallback Google Font, sanctioned in the brandbook (§6.4).
   DM Sans is the brandbook's PRIMARY digital alternative for web/e-mail/LinkedIn
   where Avenir Next LT Pro is unavailable. (Nunito Sans is the secondary option.) */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/pools/gpep-ii/fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {

  /* ---------- Color palette (brandbook §6.3, versie 0630) ---------- */

  /* PRIMARY — these carry the brand */
  --wmp-navy:        #202A52;   /* Donkerblauw — the brand color, used everywhere */
  --wmp-white:       #FFFFFF;
  --wmp-red:         #E63212;   /* Accent rood — sparing, decisive accents */

  /* Achtergrondkleur — soft off-white surface (not a brand-carrying color) */
  --wmp-light-grey:  #F5F4F4;   /* Lichtgrijs — secondary surface / achtergrond */

  /* SECONDARY — variation only (accents, visuals), never carry the brand alone */
  --wmp-indigo:      #495497;   /* Indigoblauw */
  --wmp-savoy:       #5269BB;   /* Savoyblauw  (nieuw 0630) */
  --wmp-blue-grey:   #B3AEBE;   /* Zacht blauwgrijs */
  --wmp-taupe-light: #A39689;   /* Taupe licht (nieuw 0630) */
  --wmp-dark-red:    #AD260E;   /* Donker rood — hover / pressed state of accent */

  /* Body-copy taupe — retained from §6.4 typography (tekstkleur), niet in palet-swatches */
  --wmp-taupe:       #5A5046;   /* Warm grijs / taupe — body copy color */

  /* ---------- Semantic foundation ---------- */

  /* Surfaces */
  --bg:              var(--wmp-white);
  --bg-soft:         var(--wmp-light-grey);
  --bg-inverse:      var(--wmp-navy);
  --bg-tint-blue:    var(--wmp-blue-grey);
  --bg-tint-savoy:   var(--wmp-savoy);

  /* Foregrounds */
  --fg:              var(--wmp-taupe);          /* default body text */
  --fg-strong:       var(--wmp-navy);           /* headings, key figures */
  --fg-muted:        #8A8278;                   /* taupe lightened, for captions */
  --fg-on-dark:      var(--wmp-white);
  --fg-on-dark-muted:rgba(255,255,255,0.72);

  /* Accent — buttons & primary accents use the deeper donker rood;
     E63212 is reserved for thin rules, chart highlights, hover/active flashes. */
  --accent:          var(--wmp-dark-red);
  --accent-hover:    #8E1F0B;                   /* one notch deeper for hover/pressed */
  --accent-bright:   var(--wmp-red);            /* brighter accent — rules, highlights */
  --accent-soft:     #F7E2DC;                   /* very soft red wash */

  /* Borders & rules */
  --border:          #E5E4E0;                   /* hairline on light bg */
  --border-strong:   #C9C5BC;
  --border-on-dark:  rgba(255,255,255,0.18);

  /* Focus ring */
  --focus:           rgba(73,84,151,0.45);      /* indigo @ 45% */

  /* Image filter (brandbook §7: hoofdstuk-beelden krijgen 65% filter) */
  --image-overlay:   rgba(32,42,82,0.65);

  /* ---------- Type foundation ---------- */

  --font-sans:       'Avenir Next LT Pro', 'DM Sans', -apple-system,
                     BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display:    var(--font-sans);          /* WMP uses one family throughout */

  --weight-regular:  400;
  --weight-demi:     600;                       /* Avenir Next "Demi" maps to 600 */

  /* Brandbook §6.4 specifies pt sizes for print.
     Web mapping below scales them proportionally with a 16px body baseline. */
  --type-chapter:    54px;   /* Titel-/hoofdstukpagina  · wit op donkerblauw  */
  --type-h1:         44px;   /* large hero / cover titles                     */
  --type-h2:         32px;   /* section titles                                */
  --type-h3:         24px;   /* sub-section / kop                             */
  --type-h4:         18px;   /* tussenkop                                     */
  --type-body:       16px;   /* lopende alinea's                              */
  --type-small:      14px;
  --type-caption:    12px;   /* labels                                        */
  --type-footnote:   11px;   /* voetnoot — italic                             */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-loose:   1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* eyebrow / label uppercase tracking          */

  /* ---------- Spacing & layout ---------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* WMP visual language is restrained — corners are mostly square or barely rounded */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-pill:  999px;

  /* Shadows are subtle — premium brands don't shout */
  --shadow-sm:  0 1px 2px rgba(32,42,82,0.06);
  --shadow-md:  0 4px 16px rgba(32,42,82,0.08);
  --shadow-lg:  0 18px 48px rgba(32,42,82,0.12);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);  /* @kind other */
  --dur-fast:      120ms;  /* @kind other */
  --dur-base:      220ms;  /* @kind other */
  --dur-slow:      420ms;  /* @kind other */
}

/* ============================================================
   Element defaults
   ============================================================ */

#pool-page {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#pool-page h1, #pool-page h2, #pool-page h3, #pool-page h4, #pool-page h5, #pool-page h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--weight-demi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

#pool-page h1 { font-size: var(--type-h1); }
#pool-page h2 { font-size: var(--type-h2); }
#pool-page h3 { font-size: var(--type-h3); letter-spacing: var(--tracking-normal); }
#pool-page h4 { font-size: var(--type-h4); letter-spacing: var(--tracking-normal); }

#pool-page p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

#pool-page a {
  color: var(--fg-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
#pool-page a:hover { color: #217B63; }

#pool-page small, #pool-page .footnote {
  font-size: var(--type-footnote);
  font-style: italic;
  color: var(--fg-muted);
}

/* ============================================================
   Utilities
   ============================================================ */

#pool-page .eyebrow {
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
  font-weight: var(--weight-demi);
}

/* §6.3 — accent rules: a thin red bar is the brand's primary graphic device,
   echoing the layout under the wordmark in the logo lockup. The stripe is
   ALWAYS the bright accent rood (#E63212) and ALWAYS in a 10:1 aspect ratio. */
#pool-page .wmp-accent-bar {
  display: block;
  width: 80px;
  height: 8px;       /* 10:1 ratio — never deviate */
  background: var(--accent-bright);
  border: 0;
  margin: var(--space-4) 0;
}
#pool-page .wmp-accent-bar--sm { width: 60px; height: 6px; }
#pool-page .wmp-accent-bar--lg { width: 100px; height: 10px; }
#pool-page .wmp-accent-bar--xl { width: 120px; height: 12px; }

#pool-page .wmp-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* Image with a 65% navy filter — used on chapter dividers per §7 */
#pool-page .wmp-image-overlay {
  position: relative;
  overflow: hidden;
}
#pool-page .wmp-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--image-overlay);
  pointer-events: none;
}


    
/* Text links go green under the cursor, not red: the accent red stays
   reserved for rules and chart highlights, and the green is the same one the
   primary call to action and the "nu open" badge turn on hover. WMP asked for
   this over the handoff's own a:hover rule, which was red. */
#pool-page a { color:#202A52; text-decoration:none !important; border-bottom:none !important; }
#pool-page a:hover { color:#217B63; }

/* ============================================================
   Interaction
   ------------------------------------------------------------
   The design was built as a React page: hover styles came from a
   `style-hover` attribute, the accordions and the tab strip from component
   state, and the tooltips from a hover handler. All of it is CSS here, so the
   page needs no JavaScript to be read, opened or navigated. Only the two
   scroll effects are scripted - see pool.js.
   ============================================================ */

/* ---------- Hover states (were `style-hover`) ---------- */

/* Cards: news links, pool cards, the four reason cards, the team card. */
#pool-page .pool-lift {
  transition: box-shadow 220ms, border-color 220ms;
}
#pool-page .pool-lift:hover,
#pool-page .pool-lift:focus-visible {
  box-shadow: 0 4px 16px rgba(32, 42, 82, 0.1);
  /* The cards carry their border inline, as in the handoff, and an inline
     declaration outranks any selector - so the hover colour needs !important
     or it never shows. */
  border-color: #C9C5BC !important;
}

/* A card that is itself a link needs its bottom border back. The handoff styles
   every <a> with `border-bottom: none !important` - meant to kill the underline
   it gives links a few rules earlier - and that also strips the bottom edge off
   a card-shaped link, leaving it open at the bottom. The design solves this the
   same way, with an a[data-card] rule; !important is the only thing that
   outranks the !important above. */
#pool-page a.pool-lift {
  border-bottom: 1px solid #E5E4E0 !important;
}
#pool-page a.pool-lift:hover,
#pool-page a.pool-lift:focus-visible {
  border-bottom-color: #C9C5BC !important;
}

/* The navy "nu open" pool card: shadow only, no border. */
#pool-page .pool-lift-navy {
  transition: box-shadow 220ms;
}
#pool-page .pool-lift-navy:hover { box-shadow: 0 6px 20px rgba(32, 42, 82, 0.35); }

/* Card images zoom when their card is hovered, not only the image itself. */
#pool-page .pool-zoom {
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
#pool-page .pool-lift:hover .pool-zoom,
#pool-page .pool-zoom:hover { transform: scale(1.06); }

/* Hero call to action, primary and ghost. The colours sit here rather than
   inline on the anchors: an inline background or colour outranks every
   selector, which is exactly what stopped these hover states from showing.
   The layout of the buttons is still inline in the view, as in the handoff. */
#pool-page .pool-cta {
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
#pool-page .pool-cta-primary {
  background: #fff;
  color: #202A52;
}
#pool-page .pool-cta-primary:hover,
#pool-page .pool-cta-primary:focus-visible {
  background: #217B63;
  color: #fff;
}
/* The design draws this border with an inset shadow rather than a border, so
   the button keeps the same box as the solid one beside it. */
#pool-page .pool-cta-ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
#pool-page .pool-cta-ghost:hover,
#pool-page .pool-cta-ghost:focus-visible {
  background: #F5F4F4;
  color: #202A52;
  box-shadow: inset 0 0 0 1px #F5F4F4;
}

/* ---------- Timeline scroll buttons (were data-hscroll) ----------
   The vintage timeline is 1000px wide and scrolls sideways on anything
   narrower. The design floats a round button at each end of the box that
   nudges it along; pool.js shows a button only while there is room to scroll
   in its direction, so on a wide screen neither ever appears. Without the
   script the box still scrolls by hand and the buttons stay hidden. */
#pool-page .pool-hscroll {
  position: relative;
}
#pool-page .pool-hscroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #E5E4E0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(32, 42, 82, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}
#pool-page .pool-hscroll-btn--prev { left: 10px; }
#pool-page .pool-hscroll-btn--next { right: 10px; }
#pool-page .pool-hscroll-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#pool-page .pool-hscroll-btn:focus-visible {
  outline: 2px solid #E63212;
  outline-offset: 2px;
}
#pool-page .pool-hscroll-btn svg {
  width: 18px;
  height: 18px;
  stroke: #202A52;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Accordions (were component state) ----------
   Native <details>, so the answers are in the document whether or not the
   browser runs scripts - which is the point for a page that has to be
   indexable. The custom marker replaces the platform triangle. */

#pool-page .pool-acc {
  border-top: 1px solid #E5E4E0;
}
#pool-page .pool-acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-weight: 600;
  color: #202A52;
  font-size: 16px;
  list-style: none;
}
#pool-page .pool-acc-summary::-webkit-details-marker,
#pool-page .pool-acc-summary::marker { display: none; }
#pool-page .pool-acc-summary:focus-visible {
  outline: 2px solid #E63212;
  outline-offset: 4px;
}
#pool-page .pool-acc-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: #202A52;
}
#pool-page .pool-acc-icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
}
/* The second bar stands upright to make a plus, and lies down when open. */
#pool-page .pool-acc-icon span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 200ms;
}
#pool-page .pool-acc[open] .pool-acc-icon span:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
}
#pool-page .pool-acc-body {
  font-size: 15px;
  line-height: 1.7;
  max-width: 860px;
  margin: 0 0 20px;
}

/* ---------- Portfolio tabs (were component state) ----------
   Three radios drive three panels. Every panel is in the document, so all
   three allocation tables are readable without scripts and by a crawler. */

#pool-page .pool-pf-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#pool-page .pool-pf-tab {
  /* A <label> is inline by default and the site stylesheet makes it a block,
     which stretches the pill to the strip's full width. The design's buttons
     size to their own text. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #E5E4E0;
  background: transparent;
  color: #202A52;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
#pool-page .pool-pf-tab:hover { border-color: #E63212; }
#pool-page .pool-pf-panel { display: none; }

#pool-page .pool-pf-radio:focus-visible + .pool-pf-tab {
  outline: 2px solid #E63212;
  outline-offset: 2px;
}
#pool-page #pool-pf-fase:checked ~ .pool-pf-tabs [for="pool-pf-fase"],
#pool-page #pool-pf-geo:checked ~ .pool-pf-tabs [for="pool-pf-geo"],
#pool-page #pool-pf-type:checked ~ .pool-pf-tabs [for="pool-pf-type"] {
  background: #202A52;
  color: #fff;
}
#pool-page #pool-pf-fase:checked ~ .pool-pf-panels .pool-pf-panel--fase,
#pool-page #pool-pf-geo:checked ~ .pool-pf-panels .pool-pf-panel--geo,
#pool-page #pool-pf-type:checked ~ .pool-pf-panels .pool-pf-panel--type {
  display: block;
}

/* ---------- Chart tooltips (were a hover handler) ----------
   The bubble labels live inside the SVG next to their circle, so plain CSS can
   reveal them; an HTML tooltip outside the SVG could not be reached from a
   :hover on the circle. */

#pool-page .pool-rr-bubble circle {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
#pool-page .pool-rr-bubble:hover circle,
#pool-page .pool-rr-bubble:focus-visible circle { transform: scale(1.12); }
#pool-page .pool-rr-tip {
  opacity: 0;
  transition: opacity 140ms;
  pointer-events: none;
}
#pool-page .pool-rr-bubble:hover .pool-rr-tip,
#pool-page .pool-rr-bubble:focus-visible .pool-rr-tip { opacity: 1; }

/* Discount bars brighten under the cursor; the year and value sit in a title. */
#pool-page .pool-dc-bar {
  transition: filter 120ms;
}
#pool-page .pool-dc-bar:hover { filter: brightness(1.25); }

/* ---------- Reveal on scroll ----------
   The bars and bubbles are rendered at their final size. pool.js collapses the
   ones that are still below the fold and releases them on the way in, so a
   visitor without scripts - or with reduced motion - sees the finished chart
   rather than an empty frame. */

/* Durations are per chart, as in the design: the discount bars are quick
   because there are seventeen of them, the valuation bars are the slowest, and
   the bubbles travel on cy and r rather than on a transform. */
#pool-page [data-reveal] {
  transition: height 450ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

#pool-page .pool-dc-bar[data-reveal] {
  transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 120ms;
}

#pool-page .pool-pv-bar[data-reveal] {
  transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The bubbles rise from below the axis by animating cy, so the circle keeps its
   own hover scale on transform. */
#pool-page .pool-rr-bubble[data-reveal] circle {
  transition: cy 500ms cubic-bezier(0.4, 0, 0.2, 1),
              r 500ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  #pool-page [data-reveal],
  #pool-page .pool-dc-bar[data-reveal],
  #pool-page .pool-pv-bar[data-reveal],
  #pool-page .pool-rr-bubble[data-reveal] circle,
  #pool-page .pool-zoom,
  #pool-page .pool-hscroll-btn,
  #pool-page .pool-rr-bubble circle { transition: none; }
  #pool-page [data-parallax] { transform: none !important; }
}

/* ============================================================
   GPEP II
   What this page adds to the Secondaries Pool III foundations above: four
   charts of its own, the manager logos, and a few hover states the design
   gives cards that Pool III does not have. Each was a `style-hover` in the
   handoff; the values are copied from it.
   ============================================================ */

/* Bars brighten under the cursor, each by its own amount: the darker the bar,
   the more it brightens. The amount rides on the bar as --glow. */
#pool-page .pool-glow:hover { filter: brightness(var(--glow, 1.2)); }

/* The vertical bars grow in 900ms and the horizontal ones in 1000ms, both on
   the design's own easing. */
#pool-page .pool-glow[data-reveal] {
  transition: height 900ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 140ms;
}
#pool-page .pool-hbar[data-reveal] {
  transition: width 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Returns per region (was a hover handler) ----------
   The design drew one shared tooltip and moved it with a script. Each dot
   carries its own here, so :hover and :focus-visible reveal it without one. */
#pool-page .pool-dot {
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 160ms;
}
#pool-page .pool-dot:hover,
#pool-page .pool-dot:focus-visible {
  transform: scale(1.28);
  box-shadow: 0 2px 10px rgba(32, 42, 82, 0.35);
  outline: none;
  z-index: 2;
}
#pool-page .pool-dot-tip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  /* Scaled with the dot, so the tooltip is drawn at 1/1.28 to stay at the
     design's size. */
  transform: translate(-50%, -6px) scale(0.78);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  background: #202A52;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(32, 42, 82, 0.28);
  transition: opacity 140ms;
}
#pool-page .pool-dot:hover .pool-dot-tip,
#pool-page .pool-dot:focus-visible .pool-dot-tip { opacity: 1; }

/* ---------- Cards ---------- */

/* Manager logos. */
#pool-page .pool-logo {
  transition: border-color 220ms, box-shadow 220ms;
}
#pool-page .pool-logo:hover {
  /* The border is inline, as delivered; see .pool-lift above. */
  border-color: #202A52 !important;
  box-shadow: 0 4px 16px rgba(32, 42, 82, 0.08);
}

/* The two track record cards rise rather than only casting a shadow. */
#pool-page .pool-rise {
  transition: transform 220ms, box-shadow 220ms, border-color 220ms;
}
#pool-page .pool-rise:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(32, 42, 82, 0.1);
  border-color: #C9C5BC !important;
}
#pool-page .pool-rise-navy {
  transition: transform 220ms, box-shadow 220ms;
}
#pool-page .pool-rise-navy:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(32, 42, 82, 0.28);
}
#pool-page .pool-rise-navy a {
  transition: color 140ms;
}
#pool-page .pool-rise-navy a:hover,
#pool-page .pool-rise-navy a:focus-visible { color: #8FD3BF !important; }

/* The news and pool links under the track record. Same trap as a.pool-lift:
   the handoff strips every link's bottom border, card-shaped ones included. */
#pool-page a.pool-link-card {
  border-bottom: 1px solid #E5E4E0 !important;
  transition: border-color 140ms, box-shadow 140ms;
}
#pool-page a.pool-link-card:hover,
#pool-page a.pool-link-card:focus-visible {
  border-color: #202A52 !important;
  box-shadow: 0 6px 20px rgba(32, 42, 82, 0.1);
}

/* The hero's status label links to the contact block. */
#pool-page .pool-status-link {
  transition: color 140ms;
}
#pool-page .pool-status-link:hover,
#pool-page .pool-status-link:focus-visible { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  #pool-page .pool-glow[data-reveal],
  #pool-page .pool-hbar[data-reveal],
  #pool-page .pool-dot,
  #pool-page .pool-rise,
  #pool-page .pool-rise-navy { transition: none; }
  #pool-page .pool-rise:hover,
  #pool-page .pool-rise-navy:hover { transform: none; }
}