/* Inverse Caynetic studio theme. Original logos, artwork and wave colours are preserved. */
:root {
  color-scheme: dark;
  --paper: #071f2b;
  --ink: #f6f4ed;
  --sea: #7acbd3;
  --muted: #b3c3c7;
  --line: #355460;
  --pink: #f57f9f;
}
::selection { background: var(--pink); color: #042538; }
a:focus-visible, button:focus-visible { outline-color: var(--pink); }
.skip-link { color: var(--paper); }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 0; }
html { scroll-padding-top: 170px; }
.skip-link { z-index: 30; }
.brand img { background: #f6f4ed; border-radius: 3px; padding: 4px; }
.hero-art {
  background-color: #042538;
  border: 1px solid #355460;
}
.logo-tile { background: #f6f4ed; }
.tag-one { background: #f6f4ed; color: #042538; }
.tag-two { color: #042538; }
.button:hover { background: var(--sea); color: #042538; }
.featured { background: #10384a; color: var(--ink); border: 1px solid #355460; }
.featured .eyebrow { color: #a4d2d4; }
.featured-copy > p:last-of-type { color: #c4d4d7; }
.button-light { background: #f6f4ed; color: #042538; border-color: #f6f4ed; }
.button-light:hover { background: var(--sea); color: #042538; border-color: var(--sea); }
.featured-art img { border-color: #5b7f8c; }
.featured-art figcaption { color: #b5d3d5; }
.project-card { background: #0b2835; }
.project-image { background: #103442; }
.status { color: #f6f4ed; background: #264952; }
.demo-note { background: #133742; }
.ecosystem { background: #0d2d3a; }
.domain-grid { border-color: var(--line); }
.domain-card + .domain-card { border-color: var(--line); }
.domain-card.current { background: #173c4a; }
.domain-card[href]:hover { background: #153c49; }
.domain-name .current-label { background: #f6f4ed; color: #042538; }

/* The unmodified eight-layer wave and its tile/animation values come from caynetic.com. */
.nav-wave {
  --wave-width: 720px;
  --wave-height: 52px;
  position: relative;
  height: var(--wave-height);
  overflow: hidden;
  pointer-events: none;
}
.nav-wave::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + var(--wave-width));
  background: url('assets/images/nav-wave.svg') repeat-x left top / var(--wave-width) var(--wave-height);
  animation: navbar-wave 18s linear infinite;
}
@keyframes navbar-wave { to { transform: translateX(calc(-1 * var(--wave-width))); } }
@media (max-width: 800px) {
  .nav-wave { --wave-width: 480px; --wave-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}