/* Shared motion + utility layer used by the portfolio and all 5 demos.
   Each site brings its own design system on top of this. */
:root{--ease:cubic-bezier(.19,1,.22,1);--ease-io:cubic-bezier(.77,0,.18,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Page transition curtain */
.pt{position:fixed;inset:0;z-index:9999;background:var(--pt,#0b0b0c);transform:scaleY(1);transform-origin:top;
  transition:transform .95s var(--ease-io);pointer-events:none;display:grid;place-items:center}
.pt.out{transform:scaleY(0)}
.pt span{font:500 12px/1 system-ui,sans-serif;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.75);
  opacity:0;transition:opacity .4s}
.pt.show-label span{opacity:1;transition-delay:.35s}

/* Scroll reveal */
.js [data-reveal]{opacity:0;transform:translate3d(0,42px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="left"]{transform:translate3d(-48px,0,0)}
.js [data-reveal="right"]{transform:translate3d(48px,0,0)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-io);transition-delay:var(--d,0s)}
.js [data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}
.js [data-reveal="mask"]>.mask-inner{transform:scale(1.25);transition:transform 2s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal="mask"].is-in>.mask-inner{transform:scale(1)}

/* Word-by-word headline reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0}
.w>span{display:inline-block;transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0) * 55ms + var(--d,0s))}
.js [data-split]:not(.is-in) .w>span{transform:translate3d(0,110%,0)}

/* Floating helpers injected on demo pages */
.pf-back{position:fixed;left:18px;bottom:18px;z-index:900;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;
  border-radius:40px;background:rgba(12,12,12,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;
  font:500 12px/1 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);transition:transform .5s var(--ease),background .3s}
.pf-back:hover{transform:translateY(-3px);background:#000}
.pf-back i{width:22px;height:22px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-style:normal;font-size:12px}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:900;width:58px;height:58px;border-radius:50%;background:#25d366;
  display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.55);transition:transform .5s var(--ease)}
.wa-float:hover{transform:scale(1.08) rotate(-6deg)}
.wa-float svg{width:28px;height:28px;fill:#fff}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waPulse 2.4s infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

.in-frame .wa-float,.in-frame .toast{display:none}
.in-frame .pt{transition-duration:.01s}

/* Toast */
.toast{position:fixed;left:50%;top:22px;z-index:1200;transform:translate(-50%,-140%);transition:transform .6s var(--ease);
  padding:13px 20px;border-radius:40px;background:#111;color:#fff;font:500 14px/1.2 system-ui,sans-serif;box-shadow:0 20px 40px -12px rgba(0,0,0,.4)}
.toast.on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-reveal="mask"],.js [data-split] .w>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media (max-width:640px){.pf-back span{display:none}.pf-back{padding:11px}}