/* ═══════════════════════════════════════════════════════════════
   Workfolio website — motion & depth layer (October 2026).
   Shared by landing, products, sign-in, pay and the legal pages,
   loaded after each page's own <style>. assets/js/site-motion.js
   adds scroll reveals, the live clock, count-ups and "Copied!".
   Stops entirely for prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
:root{--sm-ease:cubic-bezier(.22,.61,.36,1);--sm-grad:linear-gradient(135deg,#0b5fff 0%,#4f46e5 55%,#7c3aed 100%);}

/* Glass navigation once the page scrolls */
.nav{transition:background .35s var(--sm-ease),box-shadow .35s var(--sm-ease),backdrop-filter .35s;}
.nav.sm-scrolled{background:rgba(18,23,43,.72);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 8px 30px rgba(0,0,0,.25);}
.nav-links a{transition:background .25s var(--sm-ease),color .2s,transform .2s var(--sm-ease);}
.nav-links a:hover{transform:translateY(-1px);}
.brand img{transition:transform .5s var(--sm-ease);}
.brand:hover img{transform:rotate(-8deg) scale(1.08);}

/* Living mesh gradient behind the hero */
.hero{position:relative;isolation:isolate;overflow:hidden;}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;}
.hero::before{width:520px;height:520px;left:-120px;top:-160px;background:radial-gradient(circle,#4f46e5,transparent 65%);animation:smDrift1 18s ease-in-out infinite alternate;}
.hero::after{width:600px;height:600px;right:-160px;bottom:-260px;background:radial-gradient(circle,#06b6d4,transparent 65%);animation:smDrift2 22s ease-in-out infinite alternate;}
@keyframes smDrift1{to{transform:translate(160px,90px) scale(1.15);}}
@keyframes smDrift2{to{transform:translate(-140px,-80px) scale(1.1);}}
.hero h1 em{background:linear-gradient(90deg,#8fb3ff,#c4b5fd,#67e8f9,#8fb3ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:smShine 8s linear infinite;}
@keyframes smShine{to{background-position:300% 0;}}
.eyebrow{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.eyebrow b{animation:smBlink 2s ease-in-out infinite;}
@keyframes smBlink{50%{opacity:.35;}}
.sm-clock{display:inline-flex;align-items:center;gap:7px;margin-left:8px;font-variant-numeric:tabular-nums;color:#e7ebf5;font-weight:600;}
.sm-clock::before{content:"";width:1px;height:12px;background:rgba(255,255,255,.25);}

/* Hero devices float; their little screens fill in like live data */
.dev{transition:transform .5s var(--sm-ease);}
.dev.pc{animation:smFloat 7s ease-in-out infinite;}
.dev.laptop{animation:smFloat 8s ease-in-out -2s infinite;}
.dev.phone{animation:smFloat 6s ease-in-out -4s infinite;}
@keyframes smFloat{50%{transform:translateY(-10px);}}
.tiles span{background:linear-gradient(90deg,#fff 0%,#e8efff 50%,#fff 100%)!important;background-size:200% 100%!important;animation:smShimmer 2.6s linear infinite;}
.tiles span:nth-child(2){animation-delay:-.8s}.tiles span:nth-child(3){animation-delay:-1.6s}
@keyframes smShimmer{to{background-position:-200% 0;}}
.rows span{transform-origin:left;animation:smGrow 3.2s var(--sm-ease) infinite;}
.rows span:nth-child(2){animation-delay:.25s}.rows span:nth-child(3){animation-delay:.5s}.rows span:nth-child(4){animation-delay:.75s}.rows span:nth-child(5){animation-delay:1s}
@keyframes smGrow{0%{transform:scaleX(.15);opacity:.5}35%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.6}}
.screen .side i.on{box-shadow:0 0 8px #0b5fff;}

/* Buttons: lift, glow, a light sweep */
.btn{position:relative;overflow:hidden;transition:transform .25s var(--sm-ease),box-shadow .3s var(--sm-ease),background .3s,border-color .3s!important;}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s var(--sm-ease);pointer-events:none;}
.btn:hover::after{left:130%;}
.btn:hover{transform:translateY(-2px) scale(1.03);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--sm-grad)!important;background-size:160% 160%!important;box-shadow:0 6px 20px rgba(79,70,229,.35);}
.btn-primary:hover{background-position:100% 50%!important;box-shadow:0 10px 28px rgba(79,70,229,.45);}
.btn-ghost:hover{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.25);}
.btn-quiet:hover{box-shadow:0 6px 18px rgba(11,95,255,.15);}
.nav-links .open{background:var(--sm-grad)!important;box-shadow:0 4px 14px rgba(79,70,229,.4);}

/* Cards lift and glow */
.card,.step,.photo-card,.product,.callout,.lk-item{transition:transform .35s var(--sm-ease),box-shadow .35s var(--sm-ease),border-color .35s;}
.card:hover,.step:hover,.photo-card:hover,.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(18,23,43,.14);border-color:rgba(79,70,229,.35);}
.card .ic,.p-icon{transition:transform .45s var(--sm-ease);}
.card:hover .ic,.product:hover .p-icon{transform:scale(1.12) rotate(-6deg);}
.photo-card img{transition:transform .8s var(--sm-ease);}
.photo-card:hover img{transform:scale(1.05);}
.tabs a{transition:background .25s var(--sm-ease),color .2s,box-shadow .25s;}
.tabs a.on{background:var(--sm-grad)!important;box-shadow:0 6px 16px rgba(79,70,229,.3);}
.tabs{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
input:focus,select:focus,textarea:focus{outline:none;border-color:#4f46e5!important;box-shadow:0 0 0 3px rgba(79,70,229,.18);transition:box-shadow .2s,border-color .2s;}

/* Scroll reveal (site-motion.js adds .sm-reveal, then .sm-in on view) */
.sm-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--sm-ease),transform .7s var(--sm-ease);transition-delay:calc(var(--sm-i,0) * 70ms);}
.sm-reveal.sm-in{opacity:1;transform:none;}

/* Micro-feedback */
.sm-tip{position:fixed;z-index:999;pointer-events:none;background:#111827;color:#fff;font-size:.75rem;font-weight:600;padding:5px 10px;border-radius:7px;transform:translate(-50%,-100%);animation:smTip 1.3s var(--sm-ease) forwards;white-space:nowrap;}
@keyframes smTip{0%{opacity:0;margin-top:4px}15%,75%{opacity:1;margin-top:-6px}100%{opacity:0;margin-top:-12px}}
.sm-pulse{animation:smPulse .8s var(--sm-ease);}
@keyframes smPulse{0%{box-shadow:0 0 0 0 rgba(79,70,229,.55)}100%{box-shadow:0 0 0 16px rgba(79,70,229,0)}}

/* Sign-in / pay / legal cards get glass over a soft mesh */
body{background-image:radial-gradient(800px 460px at 100% 0%,rgba(124,58,237,.08),transparent 60%),radial-gradient(800px 460px at 0% 30%,rgba(11,95,255,.08),transparent 60%);background-attachment:fixed;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .sm-reveal{opacity:1;transform:none;}
  .btn:hover,.card:hover,.step:hover,.photo-card:hover,.product:hover{transform:none;}
}