/* ==================================================================
   SiteBuddy Motion layer (v1)
   Loaded after sitebuddy-v16.css. Adds life to the existing design:
   scroll reveals, hover lighting, animated demo chat.
   Everything here is visual only. Pages still work without it.
   ================================================================== */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --glow:0 0 0 1px rgba(111,72,255,.14),0 24px 60px rgba(84,52,210,.18);
}

/* ---------- Keyframes ---------- */
@keyframes sb-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes sb-pulse-ring{0%{box-shadow:0 0 0 0 rgba(157,124,255,.55)}80%,100%{box-shadow:0 0 0 9px rgba(157,124,255,0)}}
@keyframes sb-live-ring{0%{box-shadow:0 0 0 0 rgba(32,184,121,.55)}80%,100%{box-shadow:0 0 0 7px rgba(32,184,121,0)}}
@keyframes sb-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes sb-shine{0%{left:-60%}60%,100%{left:130%}}
@keyframes sb-word-in{from{opacity:0}to{opacity:1}}
@keyframes sb-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sb-pop{0%{opacity:0;transform:translateY(10px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes sb-typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes sb-caret{50%{opacity:0}}
@keyframes sb-float-ring{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,14px) rotate(8deg)}}
@keyframes sb-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
@keyframes sb-line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sb-page-in{from{opacity:0}to{opacity:1}}

/* ---------- Scroll progress + header ---------- */
.sb-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:2000;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--sb-progress,0));
  background:linear-gradient(90deg,#5f3cf4,#8b5cff,#c084fc);
  box-shadow:0 0 12px rgba(139,92,255,.55)
}
.site-header{transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
.site-header .navbar{transition:height .35s var(--ease-out)}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 40px rgba(40,22,110,.08);
  border-bottom-color:rgba(214,205,240,.7)
}
@media(min-width:821px){.site-header.is-scrolled .navbar{height:66px}}

.brand-mark{transition:transform .5s var(--ease-spring)}
.brand:hover .brand-mark{transform:rotate(-10deg) scale(1.08)}
.brand-mark svg{transition:transform .6s var(--ease-out)}
.brand:hover .brand-mark svg{transform:rotate(90deg)}

/* nav underline */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}

/* promo shimmer */
.promo{
  background:linear-gradient(90deg,#140b25,#2a1552,#140b25,#2a1552,#140b25);
  background-size:200% 100%
}
.promo a svg{transition:transform .25s var(--ease-out)}
.promo a:hover svg{transform:translateX(4px)}

/* ---------- Buttons ---------- */
.btn{transition:transform .35s var(--ease-spring),box-shadow .3s ease,background .3s ease,border-color .3s ease,color .3s ease}
.btn:active{transform:translateY(0) scale(.97)!important}
.btn svg{transition:transform .3s var(--ease-out)}
.btn:hover svg[data-lucide="arrow-right"],.btn:hover .lucide-arrow-right{transform:translateX(4px)}
.btn-primary{position:relative;overflow:hidden;isolation:isolate;background-size:160% 160%;background-position:0% 50%}
.btn-primary:hover{background-position:100% 50%}
.btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg)
}
.btn-primary:hover::after{animation:sb-shine 1.1s ease}
.cta-box .btn-primary::after{background:linear-gradient(105deg,transparent,rgba(111,72,255,.18),transparent)}
.btn-secondary:hover{border-color:#cbbdff;box-shadow:0 12px 28px rgba(80,51,177,.12)}

/* ---------- Hero ---------- */
.hero{isolation:isolate}
.hero::before{filter:none}
.hero-badge{transition:transform .3s var(--ease-out),box-shadow .3s ease}
.hero-badge:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(80,51,177,.14)}
.hero-badge .dot{animation:sb-pulse-ring 2s ease-out infinite}

.hero h1 .gradient{
  background:linear-gradient(90deg,#6a48f5,#8b5cff,#c084fc,#7c4cff,#6a48f5);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text
}
.sb-motion .sb-w{animation:sb-word-in .9s var(--ease-out) backwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
.sb-motion .hero h1 .gradient.sb-w{animation:sb-word-in .9s var(--ease-out) backwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
.sb-motion .hero-badge,.sb-motion .hero-copy,.sb-motion .hero-benefits .benefit,.sb-motion .hero-actions,.sb-motion .hero-note{animation:sb-fade-up .9s var(--ease-out) backwards}
.sb-motion .hero-badge{animation-delay:0s}
.sb-motion .hero-copy{animation-delay:.65s}
.sb-motion .hero-benefits .benefit:nth-child(1){animation-delay:.8s}
.sb-motion .hero-benefits .benefit:nth-child(2){animation-delay:.9s}
.sb-motion .hero-benefits .benefit:nth-child(3){animation-delay:1s}
.sb-motion .hero-benefits .benefit:nth-child(4){animation-delay:1.1s}
.sb-motion .hero-actions{animation-delay:1.15s}
.sb-motion .hero-note{animation-delay:1.3s}

.benefit-icon{transition:transform .45s var(--ease-spring),box-shadow .3s ease,background .3s ease,color .3s ease}
.benefit:hover .benefit-icon{transform:translateY(-4px) rotate(-6deg);background:linear-gradient(145deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 14px 28px rgba(111,72,255,.32)}

/* showcase: entrance, parallax + floating */
.sb-motion .hero-media{animation:sb-fade-up 1.1s var(--ease-out) 1.05s backwards}
.sb-motion .chat-demo{animation:sb-fade-up 1.1s var(--ease-out) 1.3s backwards}
.sb-motion .stat-stack .float-card{animation:sb-pop .8s var(--ease-spring) 1.6s backwards}
.sb-motion .stat-stack .float-card:nth-child(2){animation:sb-pop .8s var(--ease-spring) 1.75s backwards}
.sb-motion .stat-stack .float-card:nth-child(3){animation:sb-pop .8s var(--ease-spring) 1.9s backwards}
.stat-stack .float-card{transition:box-shadow .3s ease;backdrop-filter:none;-webkit-backdrop-filter:none}
.float-card:hover{box-shadow:0 24px 50px rgba(30,18,72,.24)}
.avatars span{transition:transform .3s var(--ease-spring)}
.float-card:hover .avatars span{transform:translateY(-3px)}
.float-card:hover .avatars span:nth-child(2){transition-delay:.05s}
.float-card:hover .avatars span:nth-child(3){transition-delay:.1s}

.hero-media,.chat-demo,.stat-stack{transition:translate .6s var(--ease-out)}
.hero-media img{transition:transform 1.2s var(--ease-out)}

/* animated chat */
.chat-logo{position:relative}
.chat-demo-head small span{animation:sb-live-ring 2s ease-out infinite}
.chat-demo-body{position:relative}
.sb-chat .sb-step{opacity:0;transform:translateY(10px) scale(.94);transition:opacity .45s var(--ease-out),transform .55s var(--ease-spring)}
.sb-chat .demo-bubble.user.sb-step{transform-origin:100% 100%}
.sb-chat .demo-bubble.bot.sb-step,.sb-chat .product-answer.sb-step{transform-origin:0 100%}
.sb-chat .sb-step.is-on{opacity:1;transform:none}
.sb-typing{
  position:absolute;left:22px;display:flex;gap:4px;align-items:center;
  background:#fff;border-radius:14px;padding:12px 14px;opacity:0;transform:scale(.8);transform-origin:0 100%;
  transition:opacity .3s ease,transform .35s var(--ease-spring)
}
.sb-typing.is-on{opacity:1;transform:none}
.sb-typing i{width:6px;height:6px;border-radius:50%;background:#8b7bb3;animation:sb-typing 1.1s ease-in-out infinite}
.sb-typing i:nth-child(2){animation-delay:.15s}.sb-typing i:nth-child(3){animation-delay:.3s}
.sb-chat .chat-input span:first-child.sb-typed{color:#fff}
.sb-chat .chat-input span:first-child.sb-typed::after{content:"";display:inline-block;width:1.5px;height:1em;background:#c4b5fd;margin-left:2px;vertical-align:-2px;animation:sb-caret .8s steps(1) infinite}
.chat-send{transition:transform .35s var(--ease-spring),box-shadow .3s ease}
.chat-send.sb-sending{transform:scale(1.18) rotate(-12deg);box-shadow:0 0 24px rgba(167,139,250,.9)}
.product-thumb{transition:transform .5s var(--ease-out)}
.product-answer:hover .product-thumb{transform:scale(1.06) rotate(-2deg)}
.mini-btn{transition:transform .3s var(--ease-spring),box-shadow .3s ease}
.product-answer:hover .mini-btn{transform:translateY(-2px);box-shadow:0 8px 18px rgba(111,72,255,.35)}

/* assurance strip */
.assurance-item{transition:background .3s ease}
.assurance-item:hover{background:linear-gradient(180deg,rgba(111,72,255,.05),transparent)}
.assurance-item svg{transition:color .3s ease,transform .4s var(--ease-spring)}
.assurance-item:hover svg{color:var(--brand);animation:sb-wiggle .5s ease}
.assurance-item:first-child{border-radius:22px 0 0 22px}.assurance-item:last-child{border-radius:0 22px 22px 0}

/* ---------- Scroll reveal ---------- */
.sb-motion .sb-reveal{transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),scale .9s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.sb-motion .sb-reveal:not(.is-in){opacity:0;translate:0 26px}
.sb-motion .sb-reveal.sb-zoom:not(.is-in){translate:0 24px;scale:.96}
.sb-motion .sb-reveal.sb-left:not(.is-in){translate:-40px 0}
.sb-motion .sb-reveal.sb-right:not(.is-in){translate:40px 0}
.eyebrow::before{transform-origin:left;transition:transform .8s var(--ease-out) .2s}
.sb-motion .sb-reveal:not(.is-in) .eyebrow::before,.sb-motion .eyebrow.sb-reveal:not(.is-in)::before{transform:scaleX(0)}

/* ---------- Interactive cards (cursor light + lift) ---------- */
.card,.price-card,.template-showcase-card,.contact-item,.install-card,.case-card{position:relative;transition:transform .5s var(--ease-out),box-shadow .4s ease,border-color .4s ease}
.card::before,.price-card::before,.template-showcase-card::before,.contact-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(139,92,255,.12),transparent 45%)
}
.card:hover::before,.price-card:hover::before,.template-showcase-card:hover::before,.contact-item:hover::before{opacity:1}
.card:hover,.price-card:hover,.contact-item:hover{transform:translateY(-6px);border-color:#d3c7ff;box-shadow:var(--glow)}
.template-showcase-card:hover{transform:translateY(-4px);box-shadow:var(--glow)}
.card-icon{transition:transform .5s var(--ease-spring),background .3s ease,color .3s ease,box-shadow .3s ease}
.card:hover .card-icon{transform:rotate(-8deg) scale(1.1);background:linear-gradient(145deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 12px 26px rgba(111,72,255,.32)}
.card-link svg{transition:transform .3s var(--ease-out)}
.card-link:hover svg,.card:hover .card-link svg{transform:translateX(5px)}
.card>*{position:relative}

/* install card: line-by-line code */
.install-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 34px 70px rgba(49,27,110,.3),0 0 50px rgba(111,72,255,.2)}
.code-top::before{content:"";display:inline-block;width:42px;height:10px;margin-right:10px;vertical-align:-1px;background:radial-gradient(circle at 5px 5px,#ff6b81 4px,transparent 4.5px),radial-gradient(circle at 21px 5px,#ffc44d 4px,transparent 4.5px),radial-gradient(circle at 37px 5px,#3ddc97 4px,transparent 4.5px)}
.sb-code-line{display:block;min-height:1.8em}
.sb-motion .sb-code .sb-code-line{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .5s var(--ease-out);transition-delay:calc(var(--l) * 90ms + 200ms)}
.sb-motion .sb-code.is-in .sb-code-line{opacity:1;transform:none}
.sb-code .sb-code-line:last-child::after{content:"";display:inline-block;width:7px;height:1.05em;background:#a88bff;margin-left:4px;vertical-align:-2px;animation:sb-caret 1s steps(1) infinite}
.feature-list li svg{transition:transform .4s var(--ease-spring)}
.feature-list li:hover svg{transform:scale(1.25)}
.sb-motion .feature-list li{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--d,0) * 110ms + 250ms)}
.sb-motion .sb-reveal:not(.is-in) .feature-list li{opacity:0;transform:translateX(-14px)}

/* steps */
.steps-wrap{position:relative;overflow:hidden;isolation:isolate}
.steps-wrap::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(139,92,255,.22),transparent 45%)
}
.steps-wrap::after{
  content:"";position:absolute;left:24px;right:24px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#a78bfa,#c084fc,transparent);
  transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease-out) .3s
}
.steps-wrap.is-in::after{transform:scaleX(1)}
.step{transition:transform .4s var(--ease-out)}
.step:hover{transform:translateY(-4px)}
.step-num{display:inline-block;transition:letter-spacing .4s var(--ease-out),color .3s ease}
.step:hover .step-num{letter-spacing:.16em;color:#d8ccff}
.sb-motion .steps-wrap .step{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.sb-motion .steps-wrap:not(.is-in) .step{opacity:0;transform:translateY(20px)}
.sb-motion .steps-wrap .step:nth-child(2){transition-delay:.15s}
.sb-motion .steps-wrap .step:nth-child(3){transition-delay:.3s}

/* CTA */
.cta-box{background:linear-gradient(120deg,#5c36e9,#7848ff,#9b5cff,#6a3df0);background-size:100% 100%}
.cta-box::before{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:-90px;bottom:-130px;pointer-events:none;
  border:1px dashed rgba(255,255,255,.22)
}
.cta-box>div{position:relative;z-index:1}

/* footer */
.footer-col a{transition:color .25s ease,transform .3s var(--ease-out)}
.footer-col a:hover{color:var(--brand);transform:translateX(4px)}

/* ---------- Pricing ---------- */
.price-card.featured{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--sb-angle,0deg),#c4b5fd,#6f48ff,#e9d5ff,#8b5cff,#c4b5fd) border-box;border:1.5px solid transparent}
@property --sb-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sb-angle{to{--sb-angle:360deg}}
.price-badge{background:linear-gradient(90deg,#efe9ff,#e4dbff,#efe9ff);background-size:200% auto}
.price{display:flex;align-items:baseline;gap:4px}
.price-features li{transition:transform .3s var(--ease-out)}
.price-card:hover .price-features li{transform:translateX(3px)}
.price-card:hover .price-features li:nth-child(2){transition-delay:.04s}
.price-card:hover .price-features li:nth-child(3){transition-delay:.08s}
.price-card:hover .price-features li:nth-child(4){transition-delay:.12s}
.faq-item{transition:background .3s ease}
.faq-q{transition:color .25s ease,padding .35s var(--ease-out)}
.faq-q:hover{color:var(--brand);padding-left:6px}
.faq-a{transition:max-height .45s var(--ease-out),opacity .4s ease;opacity:.4}
.faq-item.open .faq-a{opacity:1}

/* page heroes on inner pages */
.page-hero{position:relative;isolation:isolate}
.sb-motion .page-hero .eyebrow,.sb-motion .page-hero h1,.sb-motion .page-hero p{animation:sb-fade-up .9s var(--ease-out) backwards}
.sb-motion .page-hero h1{animation-delay:.1s}
.sb-motion .page-hero p{animation-delay:.25s}
.page-hero .page-hero .hero 
/* ---------- Auth pages ---------- */
.auth-side{isolation:isolate}
.auth-side>*{position:relative;z-index:2}
.sb-motion .auth-quote h2,.sb-motion .auth-quote p{animation:sb-fade-up 1s var(--ease-out) backwards}
.sb-motion .auth-quote h2{animation-delay:.15s}.sb-motion .auth-quote p{animation-delay:.35s}
.sb-motion .auth-box>*{animation:sb-fade-up .8s var(--ease-out) backwards}
.sb-motion .auth-box>*:nth-child(1){animation-delay:.1s}
.sb-motion .auth-box>*:nth-child(2){animation-delay:.18s}
.sb-motion .auth-box>*:nth-child(3){animation-delay:.26s}
.sb-motion .auth-box>*:nth-child(4){animation-delay:.34s}
.sb-motion .auth-box>*:nth-child(n+5){animation-delay:.42s}
.sb-motion .auth-box .form>*{animation:sb-fade-up .7s var(--ease-out) backwards;animation-delay:calc(var(--d,0) * 70ms + 300ms)}
.input{transition:border-color .25s ease,box-shadow .3s ease,transform .3s var(--ease-out),background .3s ease}
.input:hover{border-color:#cbc0ee}
.input:focus{border-color:#8b6cff;box-shadow:0 0 0 4px rgba(111,72,255,.12),0 10px 26px rgba(111,72,255,.10);transform:translateY(-1px)}
.field label{transition:color .25s ease}
.field:focus-within label{color:var(--brand)}

/* contact */
.contact-item svg{transition:transform .45s var(--ease-spring)}
.contact-item:hover svg{transform:rotate(-10deg) scale(1.15)}

/* 404 */

/* examples gallery */
.template-stage{transition:transform .6s var(--ease-out)}
.template-showcase-card:hover .template-stage{transform:scale(1.015)}

/* mobile menu items cascade */
.mobile-panel a{transition:transform .45s var(--ease-out),opacity .45s ease,background .25s ease}
.mobile-panel:not(.open) a{transform:translateY(-8px);opacity:0}
.mobile-panel.open a:nth-child(1){transition-delay:.04s}
.mobile-panel.open a:nth-child(2){transition-delay:.08s}
.mobile-panel.open a:nth-child(3){transition-delay:.12s}
.mobile-panel.open a:nth-child(4){transition-delay:.16s}
.mobile-panel .mobile-actions a{opacity:1!important;transform:none!important}

/* small screens: lighter motion */
@media(max-width:820px){
  .hero-media,.stat-stack,.chat-demo{translate:none!important}
  .card:hover,.price-card:hover,.contact-item:hover{transform:translateY(-3px)}
}

/* ---------- Dashboard (CSS only, subtle) ---------- */
.app-body .app-main{animation:sb-page-in .45s ease backwards}
.app-body .metric,.app-body .panel{animation:sb-fade-up .6s var(--ease-out) backwards;transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .35s ease}
.app-body .metric:nth-child(2){animation-delay:.06s}
.app-body .metric:nth-child(3){animation-delay:.12s}
.app-body .metric:nth-child(4){animation-delay:.18s}
.app-body .panel{animation-delay:.12s}
.app-body .metric:hover{transform:translateY(-3px);border-color:#d6ccff;box-shadow:0 18px 40px rgba(73,48,170,.10)}
.app-body .side-nav a{transition:background .25s ease,color .25s ease,padding .3s var(--ease-out)}
.app-body .side-nav a:hover{padding-left:15px}
.app-body .side-nav a svg{transition:transform .35s var(--ease-spring)}
.app-body .side-nav a:hover svg{transform:scale(1.15) rotate(-6deg)}
.app-body .state-dot.live,.app-body .state-dot.active,.app-body .state-dot.on{animation:sb-live-ring 2s ease-out infinite}

/* Reduced motion: the script does not add .sb-motion, and sitebuddy-v16.css already
   switches animations off, so content simply appears without movement. */
@media(prefers-reduced-motion:reduce){.sb-progress{display:none}}