/* Jompom Core base: tokens, reset, type, buttons, shared 3D toys and pop-in. Loaded on every page.
   Everything is scoped under body.jp (set by the plugin) so theme / Elementor kit defaults never leak in. */
:root{
  --blue:#43baff; --deep:#1d8bca; --navy:#0b5d8f; --abyss:#08466c;
  --ink:#1c1d1e; --ink2:#2a2c2e; --grey:#5a5a5a; --light:#f7f7f7; --sky:#dff2ff;
  --sun:#fcb900;
  --grad:linear-gradient(135deg,#43baff 0%,#1d8bca 100%);
  --jp-display:"Bricolage Grotesque",Poppins,system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.22,1,.36,1);
  --hard:4px 4px 0 var(--ink);
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}
}
html{scroll-behavior:smooth}
body.jp{margin:0;font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.jp *,.jp *::before,.jp *::after{box-sizing:border-box}
.jp :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd){margin:0;padding:0}
.jp :where(a){color:inherit;text-decoration:none}
.jp :where(img){display:block;max-width:100%;height:auto}
.jp :where(ul,ol){list-style:none}
.jp :where(button,input,select,textarea){font:inherit}
/* Fieldsets default to min-width:min-content and push phone layouts wider than the screen. */
.jp :where(fieldset){min-width:0;margin:0;padding:0;border:0}
.jp .wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.jp :focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:10px}
.jp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jp .inv{filter:invert(1) hue-rotate(180deg)}
.jp :where(h1,h2,h3){font-family:var(--jp-display);font-weight:800;letter-spacing:-.03em;line-height:1;color:inherit}
.jp :where(h2){font-size:clamp(36px,5.4vw,72px)}
.jp :where(h3){font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}

/* skip link (printed by the header part) */
.jp-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sun);color:var(--ink);font:600 15px/1 Poppins,sans-serif;padding:12px 16px;border-radius:12px;border:3px solid var(--ink)}
.jp-skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;padding:0;border:0}
.jp-skip:focus{top:12px;position:fixed}

/* Elementor wrappers: Jompom widgets are full-bleed sections, no container padding or gaps around them. */
.jp .elementor-widget[class*="elementor-widget-jompom-"]{width:100%;max-width:100%}
.jp .e-con:has(> .e-con-inner > [class*="elementor-widget-jompom-"]),
.jp .e-con:has(> [class*="elementor-widget-jompom-"]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;--gap:0;--row-gap:0;--column-gap:0}

/* ---------- buttons: chunky, press-able ---------- */
.jp .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:16px;font:600 16px/1 Poppins,sans-serif;border:3px solid var(--ink);background:#fff;color:var(--ink);box-shadow:var(--hard);cursor:pointer;text-decoration:none;transition:transform .45s var(--spring),box-shadow .45s var(--spring),background .2s}
.jp .btn:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:7px 7px 0 var(--ink);color:var(--ink)}
.jp .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);transition-duration:.08s}
.jp .btn.blue{background:var(--blue)}
.jp .btn.sun{background:var(--sun)}
.jp .btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 rgba(255,255,255,.35)}
.jp .btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:7px 7px 0 rgba(255,255,255,.35);color:#fff}
.jp .btn svg{width:18px;height:18px;transition:transform .45s var(--spring)}
.jp .btn:hover svg{transform:translateX(4px) rotate(-8deg)}

/* ---------- 3D toys (stacked SVG layers built by base.js from data-shape) ---------- */
.jp .scene{position:relative;width:min(560px,100%);aspect-ratio:1;margin-inline:auto;perspective:1100px}
.jp .stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.jp .obj{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;transform:translateZ(var(--z,0px));transform-style:preserve-3d}
.jp .bob{width:100%;height:100%;transform-style:preserve-3d;animation:jp-bob var(--d,6s) var(--dl,0s) ease-in-out infinite alternate}
@keyframes jp-bob{
  from{transform:translateY(-7%) rotateY(var(--a1,-30deg)) rotateX(10deg) rotateZ(-5deg)}
  to{transform:translateY(7%) rotateY(var(--a2,30deg)) rotateX(-8deg) rotateZ(5deg)}}
.jp .ex{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(calc(var(--spin,0) * 1deg))}
.jp .ex svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js-motion .jp .scene .ex,.js-motion.jp .scene .ex{scale:0}
.js-motion .jp .scene.go .ex,.js-motion.jp .scene.go .ex{animation:jp-popin 1.1s var(--spring) both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
@keyframes jp-popin{from{scale:0}to{scale:1}}
.jp .ball{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;border-radius:50%;transform:translateZ(var(--z));background:radial-gradient(circle at 32% 28%,#fff 0 6%,var(--c1) 30%,var(--c2) 100%);animation:jp-float var(--d) ease-in-out infinite alternate}
.jp .ring{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;border-radius:50%;border:14px solid var(--sun);box-shadow:inset -4px -6px 0 rgba(0,0,0,.18),4px 6px 0 rgba(0,0,0,.12);transform:translateZ(var(--z)) rotateX(60deg);animation:jp-ringspin 9s linear infinite}
@keyframes jp-float{from{translate:0 -12px}to{translate:0 12px}}
@keyframes jp-ringspin{to{transform:translateZ(var(--z)) rotateX(60deg) rotateZ(360deg)}}
.jp .floor{position:absolute;left:18%;right:18%;bottom:3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,40,62,.55),transparent);animation:jp-breathe 6s ease-in-out infinite alternate}
@keyframes jp-breathe{from{transform:scaleX(.85)}to{transform:scaleX(1.05)}}

/* ---------- shared pop-in for grids (base.js adds .go when on screen) ---------- */
.js-motion .jp .pops > *,.js-motion.jp .pops > *{scale:0}
.js-motion .jp .pops.go > *,.js-motion.jp .pops.go > *{animation:jp-popin .85s var(--spring) both;animation-delay:calc(var(--i,0) * 80ms)}
.jp .ic-box{width:58px;height:58px;border-radius:16px;border:3px solid var(--ink);display:grid;place-items:center;background:var(--blue);box-shadow:3px 3px 0 var(--ink);flex-shrink:0}
.jp .ic-box svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes jp-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.12)}60%{transform:rotate(10deg) scale(1.06)}}

@media (max-width:560px){
  .jp .actions .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .jp *,.jp *::before,.jp *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}