/* Premium 3D kit v1, Bles showcase demos (owner rule 30.9.2026). Load after the demo's own style.css; the defaults below sit in :where() so the demo theme always wins.
   Theme per business on :root: --p3-a accent, --p3-b light accent, --p3-d deep tone, --p3-top sticky offset, --p3-solid the opaque base under stacked cards (set per stack when needed).
   premium3d.js adds .p3-live on <html> only when motion is allowed; without it every element sits flat and fully visible. */
:where(:root){--p3-a:#8A94A6;--p3-b:#E8ECF2;--p3-d:#161C28;--p3-top:92px;--p3-persp:1100px}

/* 1. Hero tilt: pointer on desktop, scroll on phones. Children with .p3-pop float in front in real 3D. */
.p3-tilt{position:relative;transform-style:preserve-3d;transform:perspective(var(--p3-persp)) rotateX(var(--p3-rx,0deg)) rotateY(var(--p3-ry,0deg))}
.p3-live .p3-tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.p3-tilt .p3-pop{transform:translateZ(var(--p3-z,46px))}
/* A tilted frame projects past its box; clip sideways so a phone never scrolls horizontally (clip keeps sticky working). */
section:has(.p3-tilt){overflow-x:clip}
.p3-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
 background:radial-gradient(420px circle at var(--p3-gx,30%) var(--p3-gy,20%),rgba(255,255,255,.42),rgba(255,255,255,.08) 38%,transparent 62%);mix-blend-mode:soft-light}
.p3-live .p3-glare{opacity:1}

/* 2. Cards that change with scroll: rise from a tilted-back plane, lift in the middle of the screen, a sheen passes. */
.p3-card{position:relative}
.p3-live .p3-card{transform:perspective(1000px) translate3d(0,var(--p3-ty,0px),calc(var(--p3-lift,0)*22px)) rotateX(calc(var(--p3-rx,0deg) + var(--p3-hx,0deg))) rotateY(var(--p3-hy,0deg)) scale(var(--p3-s,1));
 opacity:var(--p3-o,1);transition:box-shadow .45s ease,border-color .45s ease;will-change:transform}
.p3-live .p3-card.p3-mid{box-shadow:0 2px 6px rgba(0,0,0,.06),0 30px 60px -18px color-mix(in srgb,var(--p3-d) 45%,transparent);border-color:var(--p3-a)}
.p3-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
.p3-sheen i{position:absolute;top:-20%;bottom:-20%;width:38%;left:31%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.08) 70%,transparent);
 transform:translateX(var(--p3-sx,260%)) skewX(-16deg);opacity:0}
.p3-live .p3-sheen i{opacity:var(--p3-so,.0)}

/* 3. Sticky 3D stack: each card pins, then tips back and dims as the next one slides over it. */
@media (max-width:860px){
 .p3-live .p3-stack{display:block!important}
 .p3-live .p3-stack>*{position:sticky;top:calc(var(--p3-top) + var(--p3-i,0)*14px);margin-bottom:22px;transform-origin:50% 0;
  transform:perspective(900px) rotateX(calc(var(--p3-cover,0)*14deg)) scale(calc(1 - var(--p3-cover,0)*.1));
  filter:brightness(calc(1 - var(--p3-cover,0)*.22));transition:box-shadow .3s;will-change:transform;
  background-color:var(--p3-solid,#fff)} /* stacked cards cover each other, so glass needs a solid base */
 .p3-live .p3-stack>*:last-child{margin-bottom:0}
}

/* 4. Shine: one sweep when a button arrives, then a slow recurring gleam. */
.p3-shine{position:relative;overflow:hidden;isolation:isolate}
.p3-shine .p3-gleam{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;overflow:hidden}
.p3-shine .p3-gleam i{position:absolute;top:0;bottom:0;width:45%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
.p3-live .p3-shine.p3-in .p3-gleam i{animation:p3-gleam 5.5s cubic-bezier(.3,.6,.2,1) .2s infinite}
@keyframes p3-gleam{0%{left:-60%}22%{left:130%}100%{left:130%}}

/* 5. Depth: parallax layers that drift at their own speed while scrolling. */
.p3-live .p3-depth{transform:translate3d(0,var(--p3-dy,0px),0);will-change:transform}

/* 6. Business motif medallion: a real 3D coin (face, milled edge, back) that turns with scroll and floats. */
.p3-orb{--p3-size:132px;width:var(--p3-size);height:var(--p3-size);perspective:700px;flex:none}
.p3-orb .p3-coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--p3-ox,8deg)) rotateY(var(--p3-oy,-18deg))}
.p3-live .p3-orb{animation:p3-float 6s ease-in-out infinite}
@keyframes p3-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.p3-orb .p3-face,.p3-orb .p3-edge,.p3-orb .p3-back{position:absolute;inset:0;border-radius:50%}
.p3-orb .p3-face{display:grid;place-items:center;transform:translateZ(7px);
 background:radial-gradient(circle at var(--p3-hl,32%) 26%,#fff 0,var(--p3-b) 18%,var(--p3-a) 55%,color-mix(in srgb,var(--p3-a) 55%,var(--p3-d)) 100%);
 box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -6px 14px rgba(0,0,0,.28),inset 0 0 0 5px color-mix(in srgb,var(--p3-b) 60%,transparent)}
.p3-orb .p3-face::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 46%,transparent 60%);
 transform:translateX(var(--p3-glint,0%));mix-blend-mode:overlay}
.p3-orb .p3-face svg{width:46%;height:46%;fill:none;stroke:var(--p3-d);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.p3-orb .p3-edge{background:color-mix(in srgb,var(--p3-a) 70%,var(--p3-d))}
.p3-orb .p3-back{transform:translateZ(-7px) rotateY(180deg);background:radial-gradient(circle at 60% 30%,var(--p3-b),var(--p3-a) 60%,var(--p3-d))}
.p3-orb .p3-shadow{position:absolute;left:12%;right:12%;bottom:-18%;height:14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--p3-d) 45%,transparent),transparent);transform:translateZ(-40px)}

@media (prefers-reduced-motion:reduce){
 .p3-tilt,.p3-card,.p3-stack>*,.p3-depth{transform:none!important;opacity:1!important;filter:none!important}
 .p3-orb,.p3-shine .p3-gleam i{animation:none!important}
}