/* PGLAB v68 — motion and interaction layer.
   Purposeful, light motion on browsing pages. Editors stay calm. Everything
   uses transform/opacity only and switches off for "reduce motion". */

/* ---------- 1. Page transitions (Chrome 126+, Safari 18.2+; others load normally) ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:pgx-header}
::view-transition-group(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation:pgx-vt-out .18s ease both}
::view-transition-new(root){animation:pgx-vt-in .32s cubic-bezier(.2,.8,.2,1) both}
::view-transition-group(pgx-hero){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(pgx-hero),::view-transition-new(pgx-hero){height:100%;object-fit:cover}
@keyframes pgx-vt-out{to{opacity:0}}
@keyframes pgx-vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- 2. Scroll reveal ---------- */
html.pgx-motion .pgx-reveal{opacity:0;translate:0 18px;transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--pgx-d,0ms),translate .7s cubic-bezier(.2,.8,.2,1) var(--pgx-d,0ms)}
html.pgx-motion .pgx-reveal.pgx-in{opacity:1;translate:none}
html.pgx-motion .pgx-reveal.pgx-in.pgx-tilt{transition:opacity .6s,translate .7s,transform .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- 3. Header: sticky on browsing pages, hides while reading, returns on scroll up ---------- */
body.pgx-browse .site-header{position:sticky;top:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s}
body.pgx-browse.pgx-scrolled .site-header{background:#111111e6!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 #ffffff12,0 10px 30px #0006}
body.pgx-browse.pgx-header-hidden .site-header{transform:translateY(-102%)}
body.pgx-browse.pgx-header-hidden .site-header:focus-within{transform:none}

/* ---------- 4. Living contour backgrounds behind page heroes ---------- */
.pgx-contours{position:relative;isolation:isolate}
.pgx-contours::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12% 0 -20% 35%;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='none' stroke-width='1.1'%3E%3Cg stroke='%23ff5a1f' stroke-opacity='.55'%3E%3Cpath d='M70 380C-20 250 80 70 220 65S490 130 444 290 165 515 70 380Z'/%3E%3C/g%3E%3Cg stroke='%23f4f3ee' stroke-opacity='.5'%3E%3Cpath d='M88 366C10 252 95 91 221 88S464 140 421 284 173 486 88 366Z'/%3E%3Cpath d='M108 352C41 254 111 115 222 111S438 151 398 278 180 456 108 352Z'/%3E%3Cpath d='M128 338C72 256 127 139 223 134S412 162 375 272 187 426 128 338Z'/%3E%3Cpath d='M148 324C103 258 143 163 224 157S386 173 352 266 194 396 148 324Z'/%3E%3Cpath d='M168 310C134 260 159 187 225 180S360 184 329 260 201 366 168 310Z'/%3E%3Cpath d='M190 296C166 262 177 211 226 203S334 196 306 254 208 336 190 296Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
 opacity:.13;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent);animation:pgx-drift 38s ease-in-out infinite alternate}
@keyframes pgx-drift{from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}to{transform:translate3d(-3%,2%,0) rotate(7deg) scale(1.06)}}
@media(max-width:760px){.pgx-contours::before{inset:-6% 0 -10% 12%;opacity:.1}}
.pgx-contours{overflow-x:clip}

/* ---------- 5. Card tilt (mouse only) ---------- */
body .pgx-tilt.pgx-tilt{transform:perspective(900px) rotateX(var(--pgx-rx,0deg)) rotateY(var(--pgx-ry,0deg)) translateZ(0);transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;will-change:transform}
body .pgx-tilt.pgx-tilting{transition:transform .08s linear,opacity .6s,translate .7s}
.pgx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--pgx-gx,50%) var(--pgx-gy,0%),#ffffff1c,transparent 55%)}
.pgx-tilting>.pgx-glare{opacity:1}

/* ---------- 6. A route that draws itself (ALUR / LAKAR cards) ---------- */
.pgx-route{display:block;width:min(220px,70%);height:34px;margin:6px 0 10px;overflow:visible}
.pgx-route path{fill:none;stroke:#ff5a1f;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--pgx-len,600);stroke-dashoffset:var(--pgx-len,600)}
.pgx-route circle{fill:#ff5a1f;opacity:0;transition:opacity .3s .9s}
.pgx-route .pgx-route-start{fill:#f4f3ee}
.pgx-draw .pgx-route path{animation:pgx-draw 1.5s cubic-bezier(.45,.05,.25,1) forwards}
.pgx-draw .pgx-route circle{opacity:1}
.pgx-redraw .pgx-route path{animation:pgx-draw-again 1.3s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes pgx-draw{to{stroke-dashoffset:0}}
@keyframes pgx-draw-again{0%{stroke-dashoffset:var(--pgx-len,600)}100%{stroke-dashoffset:0}}

/* ---------- 7. LUME before / after you can drag ---------- */
.tool-art.lume.pgx-split{touch-action:pan-y;cursor:ew-resize}
.tool-art.lume.pgx-split .lume-before{clip-path:inset(0 calc(100% - var(--pgx-split,50%)) 0 0)!important;transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
.tool-art.lume.pgx-split .lume-divider{left:var(--pgx-split,50%)!important;transition:left .45s cubic-bezier(.2,.8,.2,1)}
.tool-art.lume.pgx-split.pgx-dragging :is(.lume-before,.lume-divider){transition:none}
.tool-art.lume.pgx-split .lume-divider::after{box-shadow:0 0 0 4px #11111140,0 4px 14px #0007}
.pgx-split-label{position:absolute;bottom:10px;z-index:2;padding:4px 8px;border-radius:999px;background:#111c;color:#f4f3ee;font:700 10px/1 PGStudio,Arial,sans-serif;letter-spacing:.12em;pointer-events:none;opacity:0;transition:opacity .25s}
.pgx-split-label.before{left:10px}.pgx-split-label.after{right:10px}
.tool-card:is(:hover,:focus-within) .pgx-split-label,.pgx-dragging .pgx-split-label{opacity:1}

/* ---------- 9. How it works: a short scroll story ---------- */
.pgx-how{max-width:1240px;margin:0 auto;padding:clamp(40px,6vw,90px) clamp(20px,4vw,48px);color:#f4f3ee;font-family:PGStudio,Arial,sans-serif;scroll-margin-top:90px}
.pgx-how-head{margin-bottom:30px}
.pgx-how-head p{margin:0 0 10px;color:#ff9a6e;font:700 11px/1 PGStudio,Arial,sans-serif;letter-spacing:.16em}
.pgx-how-head h2{margin:0;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.05em;line-height:1.04}
.pgx-how ol{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0;list-style:none;counter-reset:pgx}
.pgx-how ol::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:#2e2e2e}
.pgx-how ol::after{content:"";position:absolute;left:0;top:21px;height:2px;width:calc(var(--pgx-progress,0) * 100%);background:linear-gradient(90deg,#ff5a1f,#ff9a6e);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.pgx-how li{position:relative;z-index:1;counter-increment:pgx;padding-top:62px;color:#8f8d86;transition:color .4s}
.pgx-how li::before{content:"0" counter(pgx);position:absolute;top:0;left:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #3a3a3a;background:#161616;color:#b4b1a7;font:800 13px/1 PGStudio,Arial,sans-serif;transition:background .4s,border-color .4s,color .4s,transform .4s}
.pgx-how li strong{display:block;margin-bottom:8px;color:#d6d3c9;font-size:19px;letter-spacing:-.02em;transition:color .4s}
.pgx-how li span{display:block;font-size:14px;line-height:1.6}
.pgx-how li.is-lit{color:#c9c6bc}
.pgx-how-note{margin:26px 0 0;color:#8f8d86;font-size:13px}
.pgx-how li.is-lit strong{color:#f4f3ee}
.pgx-how li.is-lit::before{background:#ff5a1f;border-color:#ff5a1f;color:#111;transform:scale(1.06)}
@media(max-width:760px){
 .pgx-how ol{grid-template-columns:1fr;gap:0}
 .pgx-how ol::before{left:21px;right:auto;top:22px;bottom:72px;width:2px;height:auto}
 .pgx-how ol::after{left:21px;top:22px;width:2px;height:calc(var(--pgx-progress,0) * (100% - 94px))}
 .pgx-how li{padding:4px 0 28px 64px;min-height:44px}
}

/* ---------- 10. Sticky "Start designing" bar on collection pages (phones) ---------- */
.pgx-startbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border:1px solid #3a3a3a;border-radius:16px;background:#1b1b1bf2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 40px #0009;transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.8,.2,1);font-family:PGStudio,Arial,sans-serif}
.pgx-startbar.is-on{transform:none}
.pgx-startbar>span{flex:1;min-width:0;color:#c9c6bc;font:700 11px/1.3 PGStudio,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pgx-startbar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:11px;border:1px solid #4a4a4a;background:#242424;color:#f4f3ee!important;font:700 13px/1 PGStudio,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.pgx-startbar a:first-of-type{background:#ff5a1f;border-color:#ff5a1f;color:#111!important}
@media(min-width:761px){.pgx-startbar{display:none}}

/* ---------- Reduced motion: keep everything, remove the movement ---------- */
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html.pgx-motion .pgx-reveal{opacity:1;translate:none;transition:none}
 body.pgx-browse .site-header{transition:none}
 .pgx-contours::before{animation:none}
 body .pgx-tilt.pgx-tilt{transform:none!important}
 .pgx-route path{stroke-dashoffset:0;animation:none!important}
 .pgx-how ol::after,.pgx-how li,.pgx-how li::before{transition:none}
 .pgx-startbar{transition:none}
}