/* jx.css — shared fonts + 3D + motion layer (V39)
   Loaded last on every customer-facing page of all 3 domains via includes/jx-head.php.
   Everything is scoped to html.jx so a page without the JS flag is untouched.
   One memorable thing: the tilted rashi-chakra under the page. Everything else is quiet depth. */

:root{
  --jx-display:'Bricolage Grotesque','Anek Devanagari','Noto Sans Devanagari',system-ui,sans-serif;
  --jx-body:'Plus Jakarta Sans','Anek Devanagari','Hind','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',sans-serif;
  --jx-gold:#FFD56B;
  --jx-rose:#E7A9C4;
  --jx-ease:cubic-bezier(.2,.8,.2,1);
  /* old per-page variables now resolve to the new families */
  --font-display:var(--jx-display);
  --font-body:var(--jx-body);
}

/* ---------- 1. Type ---------- */
html.jx body,
html.jx button,
html.jx input,
html.jx select,
html.jx textarea{font-family:var(--jx-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
html.jx h1,html.jx h2,html.jx h3,html.jx h4,
html.jx .brand,html.jx .header-title,html.jx .price-amount,html.jx .v22-price,
html.jx .timeline-item .month,html.jx .faq-list summary,html.jx .trust-strip strong,
html.jx .v22-brand{font-family:var(--jx-display);font-optical-sizing:auto;letter-spacing:0}
html.jx h1,html.jx h2{text-wrap:balance}
html.jx p,html.jx li{text-wrap:pretty}
html.jx h1{font-weight:800}
html.jx h2{font-weight:700}
html.jx .v22 h1{letter-spacing:-.01em}

/* ---------- 2. Stage (fixed background, under all content) ---------- */
.jx-stage{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.jx-stars{position:absolute;inset:-6%;--k:0;transform:translate3d(calc(var(--px,0) * var(--k) * 1px),calc(var(--py,0) * var(--k) * 1px + var(--sc,0) * var(--k) * -40px),0);will-change:transform}
.jx-stars.s1{--k:6;opacity:.55;background-image:
  radial-gradient(1px 1px at 12% 22%,#fff,transparent 60%),radial-gradient(1px 1px at 38% 71%,#fff,transparent 60%),
  radial-gradient(1px 1px at 63% 14%,#fff,transparent 60%),radial-gradient(1px 1px at 84% 58%,#fff,transparent 60%),
  radial-gradient(1px 1px at 27% 92%,#fff,transparent 60%),radial-gradient(1px 1px at 91% 88%,#fff,transparent 60%);
  background-size:420px 420px}
.jx-stars.s2{--k:14;opacity:.7;background-image:
  radial-gradient(1.5px 1.5px at 18% 40%,#FFE9A8,transparent 60%),radial-gradient(1.5px 1.5px at 52% 82%,#fff,transparent 60%),
  radial-gradient(1.5px 1.5px at 76% 28%,#FFD9EA,transparent 60%),radial-gradient(1.5px 1.5px at 94% 66%,#fff,transparent 60%);
  background-size:640px 640px;animation:jxTwinkle 5s ease-in-out infinite alternate}
.jx-stars.s3{--k:26;opacity:.85;background-image:
  radial-gradient(2px 2px at 30% 30%,#FFD56B,transparent 60%),radial-gradient(2px 2px at 70% 76%,#E7A9C4,transparent 60%);
  background-size:900px 900px;animation:jxTwinkle 7s 1.5s ease-in-out infinite alternate}
.jx-glow{position:absolute;left:50%;top:-18%;width:min(900px,120vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(231,169,196,.16),rgba(124,92,255,.07) 45%,transparent 68%);
  transform:translate3d(calc(var(--px,0) * -10px),calc(var(--py,0) * -10px),0)}
/* the chakra lies on a horizon at the bottom of the screen; only its far arch shows, fading out upward so text never fights it */
.jx-horizon{position:absolute;left:0;right:0;bottom:0;height:60vh;perspective:1100px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 100%);mask-image:linear-gradient(to top,#000 8%,transparent 100%)}
.jx-floor{--W:min(1300px,190vw);position:absolute;left:50%;top:100%;width:var(--W);height:var(--W);margin-top:calc(var(--W) / -2);
  transform:translateX(-50%) rotateX(calc(68deg - var(--sc,0) * 14deg));transform-origin:50% 50%;opacity:.7;transition:transform .25s linear}
.jx-wheel{width:100%;height:100%;display:block;overflow:visible;animation:jxSpin 140s linear infinite;transform-origin:50% 50%}
.jx-wheel .ring{fill:none;stroke:var(--jx-gold);stroke-opacity:.28;stroke-width:1}
.jx-wheel .ring.soft{stroke:var(--jx-rose);stroke-opacity:.2}
.jx-wheel .spoke{stroke:var(--jx-rose);stroke-opacity:.16;stroke-width:1}
.jx-wheel text{fill:var(--jx-gold);fill-opacity:.55;font-family:var(--jx-body);font-weight:600;font-size:21px;text-anchor:middle}
.jx-wheel .gr{fill:var(--jx-gold);filter:drop-shadow(0 0 7px rgba(255,213,107,.9))}
.jx-wheel .gr.p{fill:var(--jx-rose);filter:drop-shadow(0 0 7px rgba(231,169,196,.9))}
.jx-wheel .orb{transform-origin:300px 300px;transform-box:view-box}
.jx-wheel .o1{animation:jxSpin 38s linear infinite}
.jx-wheel .o2{animation:jxSpin 61s linear infinite reverse}
.jx-wheel .o3{animation:jxSpin 90s linear infinite}
@keyframes jxSpin{to{transform:rotate(360deg)}}
@keyframes jxTwinkle{from{opacity:.35}to{opacity:.95}}

html.jx .v22{background:radial-gradient(circle at 50% -15%,rgba(232,200,121,.13),transparent 36%)}

/* ---------- 3. Hero: headline rises word by word (the one load moment) ---------- */
.jx-w{display:inline-block;opacity:0;transform-origin:50% 100%;
  transform:perspective(700px) translate3d(0,.45em,-40px) rotateX(-65deg);
  animation:jxRise .95s var(--jx-ease) forwards;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes jxRise{to{opacity:1;transform:perspective(700px) translate3d(0,0,0) rotateX(0)}}

/* ---------- 4. Scroll reveal (uses individual transform props so tilt keeps `transform`) ---------- */
html.jx .jx-r{opacity:0;translate:0 26px;scale:.97;rotate:1 0 0 7deg;
  transition:opacity .8s var(--jx-ease),translate .9s var(--jx-ease),scale .9s var(--jx-ease),rotate .9s var(--jx-ease);
  transition-delay:var(--d,0ms)}
html.jx .jx-r.in{opacity:1;translate:0 0;scale:1;rotate:none}

/* ---------- 5. Tilt cards ---------- */
.jx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  transition:transform .35s var(--jx-ease),box-shadow .35s var(--jx-ease);will-change:transform;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 14px 30px -14px rgba(0,0,0,.65)}
.jx-tilt.is-tilting{transition:transform .06s linear,box-shadow .2s;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,calc(var(--ry,0deg) * -1.4) calc(var(--rx,0deg) * 1.4 + 26px) 44px -18px rgba(0,0,0,.75),0 0 34px rgba(255,213,107,.08)}
.jx-tilt .price-amount,.jx-tilt .v22-price,.jx-tilt h3{transform:translateZ(26px)}
.jx-tilt .v22-btn,.jx-tilt .btn{transform:translateZ(18px)}

/* ---------- 6. Pressable 3D buttons (not on the funnel, which has its own) ---------- */
html.jx:not([data-jx="funnel"]) .btn-primary,
html.jx:not([data-jx="funnel"]) .nav-cta,
html.jx:not([data-jx="funnel"]) .v22-btn.primary,
html.jx:not([data-jx="funnel"]) .price-card .btn,
html.jx:not([data-jx="funnel"]) .wa-btn{
  position:relative;transition:transform .15s var(--jx-ease),box-shadow .15s var(--jx-ease),filter .2s;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(0,0,0,.16) inset,0 5px 0 rgba(0,0,0,.32),0 14px 22px -8px rgba(0,0,0,.55)}
html.jx:not([data-jx="funnel"]) .btn-primary:hover,
html.jx:not([data-jx="funnel"]) .nav-cta:hover,
html.jx:not([data-jx="funnel"]) .v22-btn.primary:hover,
html.jx:not([data-jx="funnel"]) .price-card .btn:hover,
html.jx:not([data-jx="funnel"]) .wa-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
html.jx:not([data-jx="funnel"]) .btn-primary:active,
html.jx:not([data-jx="funnel"]) .nav-cta:active,
html.jx:not([data-jx="funnel"]) .v22-btn.primary:active,
html.jx:not([data-jx="funnel"]) .price-card .btn:active,
html.jx:not([data-jx="funnel"]) .wa-btn:active{transform:translateY(4px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.16) inset,0 1px 0 rgba(0,0,0,.32),0 4px 8px -4px rgba(0,0,0,.5)}

/* ---------- 7. Header: glass + a slowly turning brand orb ---------- */
html.jx .site-header a,html.jx .v22-nav a{text-decoration:none}
html.jx .site-header,html.jx .v22-nav{-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
html.jx .brand-orb,html.jx .v22-mark{display:inline-grid;place-items:center;transform-style:preserve-3d;animation:jxOrb 9s linear infinite;
  box-shadow:0 0 18px rgba(255,213,107,.35)}
@keyframes jxOrb{to{transform:perspective(300px) rotateY(360deg)}}

/* ---------- 8. Quality floor ---------- */
html.jx-lite .jx-wheel,html.jx-lite .jx-wheel .orb,html.jx-lite .jx-stars,html.jx-lite .brand-orb,html.jx-lite .v22-mark{animation:none}
html.jx-lite .jx-floor{transition:none}
@media (prefers-reduced-motion:reduce){
  .jx-wheel,.jx-wheel .orb,.jx-stars,.brand-orb,.v22-mark{animation:none!important}
  .jx-w{animation:none;opacity:1;transform:none}
  html.jx .jx-r{opacity:1;translate:none;scale:1;rotate:none;transition:none}
  .jx-tilt{transition:none}
}
@media (max-width:700px){.jx-horizon{height:46vh}.jx-wheel text{font-size:26px}}
@media print{.jx-stage{display:none}html.jx .jx-r{opacity:1;translate:none;scale:1;rotate:none}.jx-w{opacity:1;transform:none;animation:none}}