/* KNGX — the one particle field that lives behind every page and morphs into each new screen. */
.kx-field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
html.kx-field-on body { background: #030608 !important; }
html.kx-field-on body::before, html.kx-field-on body::after { display: none !important; }
html.kx-field-on #app { position: relative; z-index: 1; }
html.kx-field-hidden .kx-field, html.kx-auth .kx-field, html.kx-live-mode .kx-field { visibility: hidden; }
/* page appears exactly where the dots drew it */
/* while the dots draw the next screen, the real one stays hidden; then it fades in exactly on top */
html.kx-morphing #main { opacity: 0; transition: none; }
html:not(.kx-morphing) #main { transition: opacity .45s ease; }
.kx-morph-hold { opacity: 0 !important; transition: none !important; animation: none !important; }
.kx-morph-hold.kx-pv { background: transparent !important; }
.kx-morph-in { animation: kxMorphIn .45s ease both; }
@keyframes kxMorphIn { from { opacity: 0; } to { opacity: 1; } }
/* product page drawn by the dots: the search page underneath steps out of the way */
html.kx-pv-morph #main { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { html.kx-morphing #main { animation: none; } }
/* search scan on the shared field: overlay is see-through, the page underneath stays empty while scanning */
.kx-scan-fx.kx-scan-shared { background: transparent !important; }
.kx-scan-fx.kx-scan-shared.forming { background: transparent !important; }
/* the dots are the loader now; and cards appear exactly where they were drawn (no extra slide-in) */
html.kx-field-on .kx-loader { display: none !important; }
html.kx-field-on .kx-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
/* resting: the dots stay frozen on the page outline, faint, and nothing is drawn while you read or scroll */
.kx-field { transition: opacity .45s ease; }
.kx-field.kx-field-rest { opacity: .22; }

/* top-left logo: the crown is alive like the landing logo — gold shimmer, a dot orbiting it, letters breathing */
.nav .kx-logo { position: relative; }
.nav .kx-crown { position: relative; display: inline-block; color: #f5b301; animation: kxCrownGlow 2.6s ease-in-out infinite; }
.nav .kx-crown::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #b6fff1;
  box-shadow: 0 0 6px 2px rgba(0,201,167,.8); animation: kxCrownOrbit 2.2s linear infinite; }
@keyframes kxCrownGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(245,179,1,.5)); transform: translateY(0); } 50% { filter: drop-shadow(0 0 9px rgba(245,179,1,.95)); transform: translateY(-1px) scale(1.06); } }
@keyframes kxCrownOrbit { from { transform: rotate(0deg) translateX(13px) rotate(0deg); } to { transform: rotate(360deg) translateX(13px) rotate(-360deg); } }
.nav .kx-word b { animation: kxLetter 3s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes kxLetter { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 10px rgba(0,201,167,.9); } }
@media (prefers-reduced-motion: reduce) { .nav .kx-crown, .nav .kx-crown::after, .nav .kx-word b { animation: none !important; } }