/* GetKnowen motion-x: signature moments layered on top of facelift + motion.js.
   Everything here is inert unless motion-x.js adds .gkx to <html> (which it never
   does for visitors who ask for reduced motion). */

/* ---------- page-to-page (landing + legal pages) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: gkPageOut .32s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: gkPageIn .62s cubic-bezier(.16,1,.3,1) both; }
@keyframes gkPageOut { to { opacity: 0; transform: translateY(-14px) scale(.985); } }
@keyframes gkPageIn { from { opacity: 0; transform: translateY(26px) scale(.99); } }

/* ---------- app: screen-to-screen view transition ---------- */
.gkx .app .stage { view-transition-name: gk-stage; }
.gkx #page-title { view-transition-name: gk-title; }
::view-transition-group(gk-stage) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-old(gk-stage) { animation: gkStageOut .3s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(gk-stage) { animation: gkStageIn .62s cubic-bezier(.16,1,.3,1) both; }
html[data-gkdir="back"]::view-transition-old(gk-stage) { animation-name: gkStageOutB; }
html[data-gkdir="back"]::view-transition-new(gk-stage) { animation-name: gkStageInB; }
::view-transition-old(gk-title) { animation: gkTitleOut .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(gk-title) { animation: gkTitleIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes gkStageOut { to { opacity: 0; transform: translateX(-46px) scale(.975); filter: blur(6px); } }
@keyframes gkStageIn { from { opacity: 0; transform: translateX(80px) scale(.985); filter: blur(10px); } }
@keyframes gkStageOutB { to { opacity: 0; transform: translateX(46px) scale(.975); filter: blur(6px); } }
@keyframes gkStageInB { from { opacity: 0; transform: translateX(-80px) scale(.985); filter: blur(10px); } }
@keyframes gkTitleOut { to { opacity: 0; transform: translateY(-60%); filter: blur(4px); } }
@keyframes gkTitleIn { from { opacity: 0; transform: translateY(70%); filter: blur(6px); } }

/* ---------- sliding nav pill (app sidebar, app bottom bar, HQ) ---------- */
.gk-glide {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  border-radius: 16px; pointer-events: none; z-index: 0;
  background: var(--pt-grad, linear-gradient(180deg,#f8c3aa,#ec9879));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 26px -12px rgba(229,143,110,.95);
  will-change: transform;
}
.bottomnav .gk-glide { border-radius: 14px; }
html body .gk-glide-on .nav-btn,
html body .gk-glide-on > button,
html body .gk-glide-on .hq-nav-item { position: relative; z-index: 1; }
html body .gk-glide-on .nav-btn.active,
html body .gk-glide-on > button.active,
html body .gk-glide-on .hq-nav-item[aria-current],
html body .gk-glide-on .hq-nav-item.on {
  background: transparent !important; background-image: none !important; box-shadow: none !important;
  color: var(--pt-ink, #3a1a0c) !important; -webkit-text-fill-color: var(--pt-ink, #3a1a0c) !important;
  transition: color .3s .12s ease;
}
html body .gk-glide-on .hq-nav-item[aria-current] *,
html body .gk-glide-on .hq-nav-item[aria-current] svg { color: var(--pt-ink, #3a1a0c) !important; }

/* ---------- website: crossing ribbons marquee ---------- */
.gk-marq { position: relative; height: clamp(120px, 14vw, 190px); margin: 0; overflow: hidden; pointer-events: none; }
.gk-marq-row { position: absolute; left: -5%; width: 110%; top: 50%; overflow: hidden; white-space: nowrap; }
.gk-marq-row.a { transform: translateY(-62%) rotate(-3deg); z-index: 2; background: var(--pt-grad, linear-gradient(180deg,#f8c3aa,#ec9879)); box-shadow: 0 24px 50px -26px rgba(176,79,49,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.gk-marq-row.b { transform: translateY(-20%) rotate(2.2deg); z-index: 1; background: #261b15; }
.gk-marq-track { display: inline-flex; align-items: center; will-change: transform; }
.gk-marq-item { display: inline-flex; align-items: center; gap: .55em; padding: .32em .6em; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.gk-marq-row.a .gk-marq-item { font-size: clamp(28px, 4.6vw, 64px); color: #3a1a0c; }
.gk-marq-row.a .gk-marq-item.o { color: transparent; -webkit-text-stroke: 1.5px #3a1a0c; }
.gk-marq-row.b .gk-marq-item { font-size: clamp(15px, 1.6vw, 22px); color: #f6e7da; font-weight: 600; letter-spacing: .02em; padding: .9em .9em; }
.gk-marq-dot { width: .5em; height: .5em; border-radius: 50%; background: #3a1a0c; display: inline-block; flex: none; }
.gk-marq-row.b .gk-marq-dot { background: #ec9879; width: .45em; height: .45em; }

/* scroll-lit paragraph */
.gk-lit .gk-w { opacity: .16; transition: none; }

/* before / after pile */
.gkx .hx-pile li { will-change: transform; }

/* footer: giant wordmark */
.gk-bigword {
  display: block; overflow: hidden; text-align: center; user-select: none; pointer-events: none;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(68px, 18.5vw, 300px); line-height: .82; letter-spacing: -.065em;
  padding: .06em 0 .12em; margin-top: clamp(24px, 5vw, 64px);
}
.gk-bigword span { display: inline-block; color: #e7a084; -webkit-text-fill-color: #e7a084; will-change: transform; }

/* app: tick burst particles */
.gk-spark { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; z-index: 10000; }
.gk-ring { position: fixed; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid #ec9879; pointer-events: none; z-index: 10000; }

/* app: add button plus turns */
.gkx #add-btn svg, .gkx .top-add svg { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.gkx #add-btn:hover svg, .gkx .top-add:hover svg { transform: rotate(90deg); }

/* toasts land with a spring */
.gkx .toast { transition: opacity .25s ease, transform .55s cubic-bezier(.34,1.56,.64,1) !important; }

/* number reels (HQ KPIs) */
.gk-reel { display: inline-flex; vertical-align: top; font-variant-numeric: tabular-nums; }
.gk-reel-col { display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15em; -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent); mask-image: linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent); }
.gk-reel-strip { display: flex; flex-direction: column; will-change: transform; }
.gk-reel-strip > span { height: 1.15em; display: block; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(gk-stage), ::view-transition-new(gk-stage),
  ::view-transition-old(gk-title), ::view-transition-new(gk-title) { animation: none !important; }
  .gk-marq { display: none; }
}

html body .hx-tag.light{color:#ffd9c4!important;-webkit-text-fill-color:#ffd9c4!important}