/* The current sits behind real page content on every route. */
body:has(.page-current) {
  isolation: isolate;
  background: radial-gradient(ellipse at 77% 31%, #20332f, transparent 49%),
              linear-gradient(115deg, #151918, #141a1a 60%, #1c2026);
  background-attachment: fixed;
}
body:has(.page-current) #root { background: transparent; isolation: auto; }
.page-current {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  mask-image: linear-gradient(90deg, #0005, #0007 37%, #000 70%);
}
.activity-banner .site-motion-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  padding: 4px 9px;
  min-height: 28px;
  border: 1px solid #46554d;
  border-radius: 20px;
  color: #c5d5ca;
  background: #202923;
  cursor: pointer;
  font: 550 11px/1.2 var(--g-font);
}
.site-motion-toggle b { font-weight: inherit; }
.site-motion-toggle span {
  width: 8px;
  height: 10px;
  box-sizing: border-box;
  border-inline: 2px solid currentColor;
}
.site-motion-toggle[data-paused="true"] span {
  width: 0;
  border: solid transparent;
  border-width: 5px 0 5px 8px;
  border-left-color: currentColor;
}
.activity-banner .site-motion-toggle[hidden] { display: none; }
.activity-banner .site-motion-toggle:focus-visible { outline: 2px solid #b8efd2; outline-offset: 2px; }
@media (max-width: 47rem) {
  .site-motion-toggle b { display: none; }
  .activity-banner .site-motion-toggle { min-width: 32px; min-height: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-site-motion="on"] { scroll-behavior: smooth; }
  html[data-site-motion="on"] .motion-entered {
    animation: current-arrive .72s cubic-bezier(.16,.8,.22,1) backwards;
    animation-delay: var(--entry-delay, 0ms);
  }
  :is(.browse-grid, .inspiration-grid, .projects) > :nth-child(3n + 2) { --entry-delay: 75ms; }
  :is(.browse-grid, .inspiration-grid, .projects) > :nth-child(3n) { --entry-delay: 145ms; }
  .launch-demo-media { --entry-delay: 95ms; }
  @keyframes current-arrive {
    from { opacity: .34; translate: 0 19px; }
    to { opacity: 1; translate: 0 0; }
  }
  html[data-site-motion="on"] :is(.site-header, body[data-activity-directory] header) nav {
    animation: current-nav .55s cubic-bezier(.16,.8,.22,1) backwards;
  }
  @keyframes current-nav { from { opacity: .6; translate: 9px 0; } }
  :is(.site-header, body[data-activity-directory] header) nav :is(a, button) { position: relative; }
  :is(.site-header, body[data-activity-directory] header) nav :is(a, button)::after {
    content: '';
    pointer-events: none;
    position: absolute;
    bottom: 1px;
    inset-inline: 4px;
    height: 1px;
    background: #b1eccb;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease-out;
  }
  :is(.site-header, body[data-activity-directory] header) nav :is(a, button):is(:hover, :focus-visible)::after { transform: scaleX(1); }
  #root .site-header nav :is(a, button):is(:hover, :focus-visible) { text-decoration: none; }
  :is(.topics a, .projects li, .action, .spotlight-slot, .gc-icon, .community-button, .idea-examples button) {
    transition: translate .24s ease-out, rotate .25s ease-out, border-color .2s ease-out, background-color .2s ease-out;
  }
  :is(.topics a, .action, .community-button, .idea-examples button):is(:hover, :focus-visible),
  :is(.projects li, .spotlight-slot):is(:hover, :focus-within) { translate: 0 -2px; }
  .graphite-card:is(:hover, :focus-within) .gc-icon { rotate: -7deg; translate: 0 -2px; }
  .site-footer, body[data-activity-directory] footer { position: relative; }
  :is(.site-footer, body[data-activity-directory] footer).motion-entered::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a4dfbd, #b4ace8, transparent);
    transform-origin: left;
    animation: current-line .95s ease-out both;
  }
  @keyframes current-line { from { transform: scaleX(.03); } to { transform: scaleX(1); } }
  @supports (animation-timeline: scroll()) {
    html[data-site-motion="on"] .activity-banner::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, #88dcb6, #bbaedb);
      transform-origin: left;
      animation: reading-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
html[data-site-motion="off"] { scroll-behavior: auto; }
html[data-site-motion="off"] *,
html[data-site-motion="off"] *::before,
html[data-site-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media print { .page-current, .site-motion-toggle { display: none; } }