/* nx-kit Tier C · hover (public-site decoration) */
.nx-canvas-fx { position: relative; overflow: hidden; touch-action: pan-y; }
.nx-canvas-fx > canvas { position: absolute; inset: 0; display: block; }

.nx-tilt { --gx: 50%; --gy: 50%; position: relative; width: 14rem; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: center / cover; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; overflow: hidden; }
.nx-tilt:hover { transition-duration: .12s; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.nx-tilt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(0, 0, 0, .28), transparent 60%); opacity: 0; transition: opacity .3s; }
.nx-tilt:hover::after { opacity: 1; }

.nx-edge { --lx: 50%; --ly: 50%; --lit: 0; position: relative; width: 14rem; aspect-ratio: 4 / 3; padding: 10px; border-radius: 14px; background: #1b1714; box-shadow: 0 16px 36px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.nx-edge-pic { width: 100%; height: 100%; border-radius: 4px; background: center / cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.nx-edge-rim { position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: radial-gradient(140px circle at var(--lx) var(--ly), rgba(255, 236, 200, .95), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: var(--lit); transition: opacity .2s; pointer-events: none; }

.nx-canvas-fx.nx-dotsfield, [data-kit="magnetic-dots"] { width: 100%; height: 10rem; color: var(--text); }

.nx-mletters { display: inline-block; font: 900 2.3rem/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; cursor: default; user-select: none; }
.nx-mletters .nx-mword { display: inline-block; white-space: nowrap; }
.nx-mletters .nx-mword > span { display: inline-block; opacity: .55; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }

.nx-eyes { display: grid; place-items: center; }
.nx-eyes-cube { display: flex; gap: .7rem; padding: 1.4rem 1.2rem; border-radius: 28px; background: linear-gradient(160deg, color-mix(in srgb, var(--text) 16%, var(--panel)), var(--panel)); box-shadow: 0 18px 36px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1); }
.nx-eyes-cube span { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: #fff; overflow: hidden; transition: transform .12s; }
.nx-eyes.is-blink span { transform: scaleY(.08); }
.nx-eyes-cube i { width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #111; transition: transform .12s ease-out; box-shadow: inset .25rem -.2rem 0 rgba(255, 255, 255, .0); }
.nx-eyes-cube i::after { content: ""; display: block; width: .3rem; height: .3rem; margin: .2rem 0 0 .55rem; border-radius: 999px; background: #fff; }

.nx-escape { position: relative; display: grid; place-items: center; width: 100%; height: 10rem; }
.nx-escape button { padding: .6rem 1.1rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 800; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.nx-escape button.is-tired { background: #22c55e; color: #fff; }

.nx-light { --lx: -999px; --ly: -999px; position: relative; display: grid; place-items: center; width: 100%; height: 10rem; border-radius: var(--radius-lg); background: #050505; overflow: hidden; cursor: none; }
.nx-light > * { font: 800 1.4rem/1.3 Inter, system-ui, sans-serif; color: #f5f5f5; text-align: center; -webkit-mask-image: radial-gradient(110px circle at var(--lx) var(--ly), #000 30%, transparent 75%); mask-image: radial-gradient(110px circle at var(--lx) var(--ly), #000 30%, transparent 75%); }
.nx-light::after { content: ""; position: absolute; inset: 0; background: radial-gradient(140px circle at var(--lx) var(--ly), rgba(255, 245, 220, .12), transparent 70%); pointer-events: none; }

.nx-pblur { position: relative; width: 14rem; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; }
.nx-pblur-pic { position: absolute; inset: 0; background: center / cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.nx-pblur-blur { position: absolute; inset: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(transparent 35%, #000 85%); mask-image: linear-gradient(transparent 35%, #000 85%); background: linear-gradient(transparent 40%, rgba(0, 0, 0, .55)); transform: translateY(100%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.nx-pblur-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; transform: translateY(1rem); opacity: 0; transition: transform .5s .05s cubic-bezier(.2, .8, .2, 1), opacity .3s .05s; }
.nx-pblur-cap small { display: block; opacity: .8; font-size: .78rem; }
.nx-pblur:hover .nx-pblur-blur { transform: none; }
.nx-pblur:hover .nx-pblur-cap { transform: none; opacity: 1; }
.nx-pblur:hover .nx-pblur-pic { transform: scale(1.04); }

.nx-pop { position: relative; display: grid; place-items: center; width: 100%; height: 13rem; }
.nx-pop > * { grid-area: 1 / 1; width: 6.5rem; height: 5rem; border-radius: 12px; background: center / cover; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.nx-pop > b { position: relative; z-index: 2; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.nx-pop > i { width: 4.4rem; height: 3.4rem; transform: rotate(calc(var(--i) * 5deg)) scale(.9); transition: transform .55s calc(var(--i) * 30ms) cubic-bezier(.3, 1.3, .5, 1); }
.nx-pop:hover > i { transform: rotate(var(--a)) translateX(6rem) rotate(calc(-1 * var(--a))) scale(1); }
.nx-pop:hover > b { transform: scale(.9); }

.nx-shelf { display: flex; align-items: flex-end; justify-content: center; gap: 0; height: 9rem; width: 100%; perspective: 700px; padding: 0 1rem; border-bottom: 6px solid color-mix(in srgb, var(--text) 18%, transparent); }
.nx-shelf span { --h: 260; position: relative; flex: 0 0 auto; width: 6rem; height: 6rem; margin: 0 -2.2rem; border-radius: 4px; background: radial-gradient(90% 90% at 25% 20%, hsl(calc(var(--h) + 50) 85% 65%), transparent), hsl(var(--h) 60% 30%); box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1); transform: rotateY(-62deg); transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.nx-shelf b { position: absolute; left: .5rem; bottom: .4rem; color: #fff; font-size: .72rem; font-weight: 900; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

@property --nx-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nx-sweep { position: relative; isolation: isolate; padding: .75rem 1.4rem; border-radius: 999px; background: var(--bg); color: var(--text); font-weight: 800; }
.nx-sweep::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--nx-sweep), transparent 0 60%, #a78bfa 75%, #f472b6 85%, transparent 95%), color-mix(in srgb, var(--text) 14%, transparent); animation: nx-sweep 2.8s linear infinite; }
.nx-sweep::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--bg); }
.nx-sweep:hover::before { animation-duration: 1.2s; }
@keyframes nx-sweep { to { --nx-sweep: 360deg; } }

.nx-dock { display: flex; align-items: flex-end; gap: .5rem; padding: .5rem .7rem; border-radius: 20px; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); backdrop-filter: blur(10px); }
.nx-dock > * { --s: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--c, #6366f1); color: #fff; font-size: 1.15rem; transform: scale(var(--s)); transform-origin: 50% 100%; margin: 0 calc((var(--s) - 1) * .9rem); transition: transform .18s ease-out, margin .18s ease-out; }
.nx-dock > .is-bounce { animation: nx-dock-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nx-dock-hop { 40% { translate: 0 -1rem; } }

.nx-code { width: 14rem; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: center / cover; cursor: crosshair; }

.nx-fog { display: grid; place-items: center; width: 100%; height: 10rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, #312e81, #7c3aed 50%, #db2777); cursor: grab; }
.nx-fog-word { font: 900 3.4rem/1 Inter, system-ui, sans-serif; color: #fff; letter-spacing: -.03em; }
.nx-light::before { content: "move your light here"; position: absolute; bottom: .6rem; font-size: .7rem; font-weight: 700; color: #3a3a3a; transition: opacity .3s; }
.nx-light.is-lit::before { opacity: 0; }

/* Sweep ring: the travelling colour on an existing button's edge (keeps its own look). */
.nx-sweep-ring { position: relative; isolation: isolate; }
.nx-sweep-ring::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--nx-sweep), transparent 0 55%, #a78bfa 72%, #f472b6 84%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: nx-sweep 2.8s linear infinite; pointer-events: none; }
.nx-sweep-ring:hover::before { animation-duration: 1.2s; }
/* Home call-to-action (index.ejs). */
.nx-cta-kit { position: relative; overflow: hidden; }
.nx-cta-kit > :not(.nx-cta-dots) { position: relative; z-index: 1; }
.nx-cta-dots { position: absolute !important; inset: 0; width: auto !important; height: auto !important; z-index: 0; opacity: .55; }
.nx-cta-kit .nx-mletters { font: inherit; letter-spacing: inherit; display: inline; }
.nx-cta-kit .nx-mletters .nx-mword > span { opacity: 1; }
.nx-cta-dots { pointer-events: none; }
.nx-hero-fog { max-width: 34rem; margin: 2rem auto 0; } /* winter, home hero (delight.js) */