/* Exoticz "life" layer — display fonts, cursor, letter/tab motion. Loaded on customer pages + staff app. */
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin-var.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/fonts/permanent-marker-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --exz-display: "Unbounded", "Plus Jakarta Sans", system-ui, sans-serif; --exz-marker: "Permanent Marker", "Plus Jakarta Sans", cursive; }

/* ---------- display type: customer ---------- */
body.customer.cx h1, body.customer.cx .home-title { font-family: var(--exz-display) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.02 !important; }
body.customer.cx .cx-word { font-family: var(--exz-display) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; }
body.customer.cx .card > h2, body.customer.cx .login-card h2, body.customer.cx .promo-hero h2 { font-family: var(--exz-display) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
body.customer.cx .cx-stat b, body.customer.cx .cx-staff-t { font-family: var(--exz-display) !important; }
body.customer.cx .cx-staff-t { font-weight: 800; letter-spacing: 0.12em; }
body.customer.cx .home-sub, body.customer.cx .cx-hand { font-size: 1.15rem !important; color: #5A23B8 !important; font-family: var(--exz-marker) !important; letter-spacing: 0.02em !important; text-transform: none !important; font-weight: 400 !important; }
/* ---------- display type: staff ---------- */
body.noir .nx-title, body.noir .nx-hero-title, body.noir .nx-pagehead h1, body.noir .nx-brand b, body.noir .nx-brand strong { font-family: var(--exz-display) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; }
body.noir .nx-hero-title em#nx-h-name { font-family: var(--exz-marker) !important; font-weight: 400 !important; letter-spacing: 0 !important; font-style: normal !important; padding: 0 0.06em; }
body.noir .bx-card .nx-stat dd, body.noir .bx-big, body.noir .exz-bizdash .bd-kpi .v:not(.sm) { font-family: var(--exz-display) !important; letter-spacing: -0.05em !important; }
body.noir .exz-bizdash .bd-kpi .v:not(.sm) { font-size: 1.75rem !important; }

/* ---------- split letters ---------- */
.exz-ch { display: inline-block; white-space: pre; will-change: transform, opacity; }
.exz-split-go .exz-ch, .exz-split-go .exz-unit { animation: exz-ch-in .62s cubic-bezier(.2,.8,.2,1.15) both; animation-delay: calc(var(--i, 0) * 28ms); }
.exz-unit { display: inline-block; }
@keyframes exz-ch-in { from { opacity: 0; transform: translateY(0.55em) rotate(6deg) scale(.9); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.exz-wave .exz-ch { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.exz-wave:hover .exz-ch { transform: translateY(-3px); transition-delay: calc(var(--i, 0) * 22ms); }

/* ---------- active tab: animated gradient underline ---------- */
body.customer.cx .site-nav .nav-links a { position: relative; }
body.customer.cx .site-nav .nav-links a[aria-current="page"]::after,
body.noir .tab.active::after, body.noir .nx-home-tab.active::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #6FCF1F, #7B3FE4, #B58CFF, #6FCF1F); background-size: 300% 100%;
  animation: exz-uline 3.2s linear infinite; pointer-events: none;
}
body.noir .tab.active, body.noir .nx-home-tab.active { position: relative; }
@keyframes exz-uline { to { background-position: 300% 0; } }

/* ---------- magnetic + lift/tilt ---------- */
.exz-mag { transition: translate .25s cubic-bezier(.2,.8,.2,1); }
.exz-tilt { transition: transform .35s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.exz-tilt.is-hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition-duration: .12s; }

/* ---------- cursor (desktop fine pointer only) ---------- */
.exz-cursor-on, .exz-cursor-on a, .exz-cursor-on button, .exz-cursor-on [role="button"], .exz-cursor-on label, .exz-cursor-on .tab { cursor: none !important; }
.exz-cursor-on input, .exz-cursor-on textarea, .exz-cursor-on select, .exz-cursor-on [contenteditable] { cursor: auto !important; }
.exz-cur-dot, .exz-cur-ring, .exz-spark { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2147483000; }
.exz-cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #9BE22D; box-shadow: 0 0 10px 3px rgba(155,226,45,.75), 0 0 22px 6px rgba(181,140,255,.35); }
.exz-cur-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid rgba(181,140,255,.8); box-shadow: 0 0 14px rgba(181,140,255,.35), inset 0 0 10px rgba(155,226,45,.2); transition: width .22s ease, height .22s ease, margin .22s ease, border-color .22s ease, background .22s ease, opacity .2s; }
.exz-cur-ring.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(155,226,45,.9); background: rgba(123,63,228,.08); }
.exz-cur-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.exz-cur-hide .exz-cur-dot, .exz-cur-hide .exz-cur-ring { opacity: 0; }
.exz-spark { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; animation: exz-spark .6s ease-out forwards; }
@keyframes exz-spark { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

/* ---------- tap ripple (touch) ---------- */
.exz-ripple { position: fixed; z-index: 2147483000; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, rgba(181,140,255,.35), rgba(123,63,228,.18) 60%, transparent 70%); animation: exz-ripple .5s ease-out forwards; }
@keyframes exz-ripple { to { transform: scale(7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .exz-split-go .exz-ch, .exz-split-go .exz-unit { animation: none !important; }
  body.customer.cx .site-nav .nav-links a[aria-current="page"]::after, body.noir .tab.active::after, body.noir .nx-home-tab.active::after { animation: none; }
  .exz-tilt.is-hover { transform: none; } .exz-wave:hover .exz-ch { transform: none; }
}
body.noir #nx-home .nx-hero-title, body.noir .bx-head .nx-hero-title { font-family: var(--exz-display) !important; letter-spacing: -0.045em !important; font-size: clamp(1.8rem, 4.4vw, 2.7rem) !important; }
body.noir .bx-head .nx-hero-title em#nx-h-name { font-family: var(--exz-marker) !important; font-weight: 400 !important; letter-spacing: 0 !important; font-size: 1.12em; }