:root {
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

html,
body {
  min-height: 100vh;
  margin: 0;
}

[x-cloak] {
  display: none !important;
}

/* Gradient spans the full chart height (set by --layer-bar-span), so taller bars are lighter. */
.layer-bar {
  background-image: linear-gradient(to top, var(--layer-bar-base), var(--layer-bar-top));
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% var(--layer-bar-span, 100%);
}

::selection {
  background: color-mix(in oklab, var(--primary) 25%, transparent);
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}

/* Landing page: the hero copy and demo rise in once on load. */
@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-rise {
    animation: landing-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* The logo's layers fan apart on hover (templates/partials/logo.html). */
.logo-stack :is(.logo-back, .logo-mid, .logo-front) {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .group:hover .logo-stack .logo-back,
  .group:focus-visible .logo-stack .logo-back {
    transform: translate(-2px, 2px);
  }
  .group:hover .logo-stack .logo-front,
  .group:focus-visible .logo-stack .logo-front {
    transform: translate(2px, -2px);
  }
}