/* MENNOO interface finish: native scroll, understated motion, visible without JS. */
:root { scrollbar-color: #9b90ae #f3eff4; scrollbar-width: thin; }
html { scroll-behavior: smooth; scroll-padding-top: 6.75rem; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #f3eff4; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #a79ab6; border-radius: 20px; border: 3px solid #f3eff4; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #6e638e; }
/* Keeps independently scrolling drawers visually consistent, with native behavior. */
.mobile-navigation, .demo-editorial, .lead-main { scrollbar-width: thin; scrollbar-color: #9b90ae transparent; }

/* Supported browsers can animate real same-origin page navigation. Others work normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .15s ease-in both mennoo-page-out; }
::view-transition-new(root) { animation: .3s cubic-bezier(.2,.7,.2,1) both mennoo-page-in; }
@keyframes mennoo-page-out { to { opacity: .6; } }
@keyframes mennoo-page-in { from { opacity: .65; } to { opacity: 1; } }

/* Form categories arrive in short, staggered succession without hiding content. */
.forms-switch a {
  transform: translateZ(0);
  transition: color .22s ease, background-color .22s ease, transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
  animation: mennoo-tab-enter .48s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--tab-i, 0) * 55ms);
}
.forms-switch a:hover { transform: translateY(-2px); box-shadow: 0 5px 14px #2011491c; }
.forms-switch a.active { box-shadow: 0 4px 13px #20114922; }
@keyframes mennoo-tab-enter { from { opacity: .35; transform: translate3d(0,12px,0) scale(.965); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
.application-step:not([hidden]) { animation: mennoo-step-enter .48s cubic-bezier(.22,.8,.2,1) both; }
@keyframes mennoo-step-enter { from { opacity: .45; transform: translate3d(0,14px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* Selected example switches are animated by app.js, with fully usable no-JS fallback. */
.example-list button[aria-pressed="true"] { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.example-preview { transform-origin: 50% 15%; }

/* Second photographic parallax, constrained to 12px by experience-motion.js. */
.people-section { overflow: hidden; }
.people-section > img[data-parallax] { transform: translate3d(0,var(--parallax-y,0px),0) scale(1.04); will-change: auto; }

@media (max-width: 680px) {
  html { scroll-padding-top: 5.25rem; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 7px; }
  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root),
  .forms-switch a, .application-step:not([hidden]) { animation: none !important; }
  .people-section > img[data-parallax] { transform: none; }
  .forms-switch a:hover { transform: none; }
}