/**
 * Scroll-driven page chrome (Prospera pilot).
 * --section-t: 0 at top (colored + inverted nav), 1 near end of main content (white + default nav).
 */

html.section-animation-active,
html.section-animation-active body {
  background-color: var(--section-bg, #0e41c3);
}

html.section-animation-active body {
  transition: background-color 0.05s linear;
}

/* Page title / subtitle track the chrome */
html.section-animation-active .rich-text-landing-content-section .heading-1.landing-section-header,
html.section-animation-active .rich-text-landing-content-section .heading-1.landing-section-header .bold-text-4 {
  color: var(--section-fg, #ffffff);
  transition: color 0.05s linear;
}

/* Hero tagline only — not mid-page .small-sub-subtitle cards (Banking Services, etc.) */
html.section-animation-active .rich-text-page-header-container .tagline-subtitle.gray-or-violet {
  color: var(--section-fg, #ffffff);
  opacity: 0.72;
  transition: color 0.05s linear, opacity 0.05s linear;
}

html.section-animation-active .faq-link-text {
  color: var(--section-fg, #ffffff);
  transition: color 0.05s linear;
}

/* Legal TOC links stay inverted with the chrome (white on blue) */
html.section-animation-active .legal-flex-toc a.link-block-2,
html.section-animation-active .legal-flex-toc a.link-block-2:link,
html.section-animation-active .legal-flex-toc a.link-block-2:visited,
html.section-animation-active .legal-flex-toc a.link-block-2:hover,
html.section-animation-active .legal-flex-toc a.link-block-2:active,
html.section-animation-active .legal-flex-toc a.link-block-2:focus,
html.section-animation-active .legal-flex-toc a.link-block-2:focus-visible,
html.section-animation-active .legal-flex-toc .legal-toc-link {
  color: var(--section-fg, #ffffff) !important;
  transition: color 0.05s linear;
}

/* Navbar invert while on colored ground */
html.section-animation-active .navbar .bank-name,
html.section-animation-active .navbar .menu-item,
html.section-animation-active .navbar .nav-link-block {
  color: var(--section-fg, #ffffff);
  transition: color 0.05s linear;
}

html.section-animation-active .navbar .nav-link-block:hover {
  color: var(--section-fg-hover, #cfe0ff);
}

html.section-animation-active .navbar .nav-link-block.action-item-link.black {
  color: #0c0c0c;
  background-color: #ffffff;
}

html.section-animation-active .navbar .nav-link-block.action-item-link.black:hover {
  color: #ffffff;
  background-color: #1d5dff;
}

/* Dark header mark → light while inverted (covers static img + balloon canvas) */
html.section-animation-active[data-section-inverted="1"] .navbar .bank-logo[data-balloon-logo="header"] {
  filter: brightness(0) invert(1);
}

html.section-animation-active .navbar .nav-open-close svg rect {
  fill: var(--section-fg, #ffffff);
  transition: fill 0.05s linear;
}

html.section-animation-active .theme-toggle {
  color: var(--section-fg, #ffffff);
}

html.section-animation-active .theme-toggle:hover,
html.section-animation-active .nav-link-block[data-locale-switch]:hover {
  color: var(--section-fg, #ffffff);
  background-color: rgba(255, 255, 255, 0.12);
}

/* Soften news tiles onto white ground after the transition */
html.section-animation-active .news-section-header {
  transition: color 0.2s ease;
}