/* KNOCTIVE — white, minimal, deliberately unhurried. */
:root { color-scheme: light; background: #6633FF; }
*, *::before, *::after { box-sizing: border-box; }
html { background: #1C1C1C; -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body { margin: 0; min-width: 280px; overflow-x: hidden; background: #6633FF; }

/* A long scrolling runway gives this image a very slow, controlled entrance. */
.scroll-canvas {
  position: relative;
  height: 365vh;
  height: 365svh;
  background: #6633FF;
  touch-action: pan-x pan-y;
}
.sticky-screen {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #6633FF;
}
.brand-logo {
  display: block;
  width: min(88vw, 1120px);
  height: auto;
  max-height: 55svh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
}
.js .brand-logo {
  opacity: 0;
  transform: translate3d(0, 110px, 0);
  will-change: opacity, transform;
}
.no-js .brand-logo { opacity: 1; }
@media (max-width: 700px) {
  .brand-logo { width: 94vw; max-height: 40svh; }
}
@media (prefers-reduced-motion: reduce) {
  .js .brand-logo { opacity: 1; transform: none; will-change: auto; }
}