/* Page transitions (Oct 20, Brian): native cross-document View Transitions, no script. Going from one page to another, the old
   page fades out quickly and the new one fades in with a short rise; the top bar stays in place and only blends between its
   dark (homepage) and light (inner pages) looks. Browsers without support simply load the page as before. Reduced motion: off. */
@view-transition{navigation:auto}
.bar{view-transition-name:site-bar}
::view-transition-old(root){animation:vt-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .45s cubic-bezier(.22,1,.36,1) .05s both}
::view-transition-group(site-bar){animation-duration:.35s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Hover easing everywhere (Oct 20, Brian: "there should always be easing on hover states"). A low-specificity baseline, so any
   link, button or summary without its own transition still eases colour, background, border, underline, opacity and shadow;
   components that define their own transition keep it. */
a,button,summary{transition:color .25s cubic-bezier(.22,1,.36,1),background-color .25s cubic-bezier(.22,1,.36,1),border-color .25s cubic-bezier(.22,1,.36,1),
  text-decoration-color .25s cubic-bezier(.22,1,.36,1),opacity .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1)}
/* footer links: the underline fades in instead of snapping on */
.foot a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:opacity .25s cubic-bezier(.22,1,.36,1),text-decoration-color .25s cubic-bezier(.22,1,.36,1)}
.foot a:hover{text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){a,button,summary,.foot a{transition:none}}

/* Oct 21 (Brian): iPhone Safari's bounce past the end of the page showed the light page colour under the dark footer. The root
   background is the footer colour now; every page paints its own background on the body, so only the bounce area changes. */
html:root{background-color:#121614}

/* Top bar hover (Brian, Oct 21): the link under the pointer turns light green and the others ease down to 80%.
   Light bars use the logo green so the text stays readable. The current page keeps its underline. */
.bar nav>a,.bar nav>.mm>a,.bar .right>a:not(.btn){transition:color .35s cubic-bezier(.22,1,.36,1),opacity .35s cubic-bezier(.22,1,.36,1)}
.bar:has(nav>a:hover,nav>.mm>a:hover,.right>a:not(.btn):hover) :is(nav>a,nav>.mm>a,.right>a:not(.btn)){opacity:.8}
.bar :is(nav>a,nav>.mm>a,.right>a:not(.btn)):hover{opacity:1!important;color:var(--color-action)!important}
.bar.light :is(nav>a,nav>.mm>a,.right>a:not(.btn)):hover{color:#121614!important} /* Oct 22, Lindsey: green in the bar is the demo button's mint only; mint text fails on the light bar, so light-bar text stays ink */
.bar nav a:not([aria-current]):hover::after{transform:scaleX(0)!important}
/* the current page's underline: the green gradient used on the site (logo green into mint), Brian, Oct 21 */
.bar nav a[aria-current]::after{height:2px;background:var(--color-action)!important;transform:scaleX(1)!important}
/* the current page's underline fades out at both ends: 0%, full, 0% (Brian, Oct 21); logo green on light bars */
.bar nav a[aria-current]::after{background:linear-gradient(90deg,color-mix(in srgb,var(--color-action) 0%,transparent),var(--color-action) 50%,color-mix(in srgb,var(--color-action) 0%,transparent))!important}
/* Oct 22, Lindsey: the light bar's current-page line is the same demo-button mint (a line, not text) */

/* The top bar's glass, one recipe on every page (Oct 22, Lindsey: dark bar over dark sections, light bar over light ones, glassy
   but never so clear that content behind it hurts the text). Which look shows is set by script: bgfade.js on the homepage,
   nav.js (data-bar marks, else luminance) on the use case pages, pages.js elsewhere. Dark: charcoal at .78 with blur(16px)
   saturate(140%) and a light hairline; light: soft white at .82, the same blur, a dark hairline. Measured against pure white or
   black content behind the bar, every bar text colour stays above 8:1. The homepage keeps its clear bar over the hero until it
   scrolls (.solid); the dark product page keeps its clear bar at the very top (product.css). Without backdrop-filter the bar is solid. */
body.inner .bar,.bar.solid{background:rgba(18,22,20,.78);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 -1px 0 rgba(247,247,245,.10)}
body.inner .bar.light,.bar.solid.light{background:rgba(247,247,245,.82);box-shadow:inset 0 -1px 0 rgba(18,22,20,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.inner .bar,.bar.solid{background:#121614}
  body.inner .bar.light,.bar.solid.light{background:#F7F7F5}
}
.bar.menu-open{-webkit-backdrop-filter:none;backdrop-filter:none}
.bar :focus-visible{outline-color:var(--color-action)}
/* focus rings must reach 3:1: mint on the dark bar and dark menu, ink on the light bar and light menu (mint stays for icons, lines, tints) */
.bar.light :focus-visible{outline-color:#121614}
/* Oct 23 (launch audit UX-01): the bar's demo button eases its background on hover; .bar a's color and opacity
   transition had replaced the button's own, so the light bar's hover snapped */
.bar .btn{transition:background-color .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1),opacity .2s cubic-bezier(.22,1,.36,1)}