/* Motion and the few UI pieces added for the WordPress version. Loaded after brand.css. */
:root{--ease-out:cubic-bezier(.22,.8,.24,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* Boot screen */
.gk-boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:22px}
.gk-boot img{animation:gk-breathe 1.6s ease-in-out infinite}
.gk-boot .spinner{border-color:#31419933;border-top-color:var(--brand,#314199);width:22px;height:22px}
@keyframes gk-breathe{50%{opacity:.55;transform:scale(.97)}}

/* Page enter + staggered reveal (uses the individual translate property so hover transforms still work) */
main{animation:gk-page .45s var(--ease-out)}
@keyframes gk-page{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.gk-motion .gk-enter{animation:gk-enter .45s var(--ease-out) var(--reveal-delay,0ms) both}
@keyframes gk-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
body.is-leaving main{opacity:.4;transition:opacity .25s}

/* Ripple */
.btn,.j-path,.j-inventory-card,.pill,.expert-scope button{position:relative;overflow:hidden}
.gk-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);pointer-events:none;animation:gk-ripple .6s var(--ease-out) forwards}
@keyframes gk-ripple{to{transform:scale(1);opacity:0}}
.btn{transition:background .2s,border-color .2s,box-shadow .2s,transform .18s var(--ease-out)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.primary:hover:not(:disabled){box-shadow:0 8px 20px #31419929}
.btn.is-busy{cursor:progress}

/* Cards: lift and gentle tilt */
.car-card,.j-offer-card{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s}
.car-card:hover,.j-offer-card:hover{box-shadow:0 18px 40px #0a235712}
.j-inventory-card,.expert-case,.j-path{transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s,background .25s}
.j-inventory-card:hover:not(:disabled),.expert-case:hover{transform:translateY(-3px);box-shadow:0 14px 30px #0a23570f}
.j-inventory-card:disabled{opacity:.55;cursor:not-allowed}
.j-path.selected .j-radio{animation:gk-pop .35s var(--ease-spring)}
@keyframes gk-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* Step bar: animated connectors, pulse on current step */
.j-stepbar li:not(:last-child)::after{transition:background .6s var(--ease-out)}
.j-stepbar li.done::after{background:var(--brand,#314199);opacity:.45}
.j-stepbar li.current>span{animation:gk-pulse 2.4s ease-out infinite}
.j-stepbar li.done>span{animation:gk-pop .4s var(--ease-spring)}
@keyframes gk-pulse{0%{box-shadow:0 0 0 0 #3141993d}70%{box-shadow:0 0 0 10px #31419900}100%{box-shadow:0 0 0 0 #31419900}}
.j-compact-progress span{transition:width .8s var(--ease-out)}
.j-kicker span,.dot{animation:gk-blink 2.2s ease-in-out infinite}
@keyframes gk-blink{50%{opacity:.35}}
.dot.amber{background:#c9932f}

/* Dialog and toast */
dialog[open]{animation:gk-dialog-in .28s var(--ease-out)}
dialog[open]::backdrop{animation:gk-fade .28s ease-out}
dialog.closing{animation:gk-dialog-out .17s ease-in forwards}
dialog.closing::backdrop{animation:gk-fade .17s ease-in reverse forwards}
@keyframes gk-dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes gk-dialog-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes gk-fade{from{opacity:0}to{opacity:1}}
.toast{transition:opacity .25s,transform .35s var(--ease-spring)}
.toast:not(.visible){transform:translate(-50%,24px) scale(.96)}

/* Field error shake */
.field.shake input,.field.shake select,.field.shake textarea{animation:gk-shake .42s}
@keyframes gk-shake{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}
.input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red,#b44741)}

/* Money values */
.num-value{font-variant-numeric:tabular-nums}
.plan-result.highlight{transition:transform .3s var(--ease-out)}
.plan-results:hover .plan-result.highlight{transform:translateY(-2px)}

/* Upload progress + camera link */
.upload-box.is-uploading{border-style:solid;border-color:var(--brand,#314199);background:#f3f5fd}
.upload-progress{display:block;width:80%;height:6px;border-radius:6px;background:#e4e9f5;overflow:hidden;margin-top:6px}
.upload-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand,#314199),#6b7ed6);border-radius:6px;transition:width .2s}
.camera-link{min-height:36px}
.file-row{animation:gk-page .35s var(--ease-out)}

/* Skeleton */
.skeleton{pointer-events:none}
.sk-line{height:12px;border-radius:7px;margin:10px 0;background:linear-gradient(90deg,#eef1f7 25%,#f8f9fc 37%,#eef1f7 63%);background-size:400% 100%;animation:gk-shimmer 1.3s ease infinite}
.sk-line.w40{width:40%}.sk-line.w55{width:55%}.sk-line.w70{width:70%}.sk-line.w90{width:90%}
@keyframes gk-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Celebration */
.gk-celebrate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0a235726;backdrop-filter:blur(3px);animation:gk-fade .25s ease-out}
.gk-celebrate.out{animation:gk-fade .4s ease-in reverse forwards}
.gk-celebrate-card{position:relative;background:#fff;border-radius:24px;padding:30px 38px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 30px 80px #0a235733;animation:gk-dialog-in .45s var(--ease-spring);font-weight:700;color:var(--brand-dark,#0a2357)}
.gk-celebrate svg{width:76px;height:76px;fill:none;stroke:var(--brand,#314199);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gk-celebrate circle{stroke-dasharray:151;stroke-dashoffset:151;animation:gk-draw .6s .1s var(--ease-out) forwards}
.gk-celebrate path{stroke-dasharray:40;stroke-dashoffset:40;animation:gk-draw .35s .6s var(--ease-out) forwards}
@keyframes gk-draw{to{stroke-dashoffset:0}}
.gk-burst{position:absolute;inset:0;pointer-events:none}
.gk-burst i{position:absolute;top:58px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--brand,#314199);opacity:0;animation:gk-burst .8s calc(.55s + var(--d)) var(--ease-out) forwards}
.gk-burst i:nth-child(3n){background:#f2b544}.gk-burst i:nth-child(3n+1){background:#5fb38a}
@keyframes gk-burst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-90px) scale(.4)}}

/* Staff additions */
.message.note-msg{background:#fff8e5;border:1px dashed #f0dca8}
.offer-edit{margin:0 0 14px;padding:16px;border:1px solid var(--border)}
.offer-edit legend{font-weight:700;padding:0 6px}
.expert-detail-section summary{cursor:pointer;font-weight:700;padding:6px 0}
.funnel-col{transition:height .9s var(--ease-out)}
.metrics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metric strong{font-size:clamp(17px,1.7vw,22px);line-height:1.6;overflow-wrap:anywhere}
.metric strong .num-value{font-size:inherit!important;letter-spacing:0}
.metric strong .amount-unit{font-size:11px;color:var(--muted);font-weight:500}

/* Embedded mode ([gk_apply] inside a theme page): a contained two-column app.
   For the best result use the full-screen page template instead. */
.gk-embedded{position:relative;isolation:isolate;direction:rtl;text-align:right;background:var(--bg);font-family:'Yekan Bakh',Tahoma,sans-serif;color:var(--ink);line-height:1.85;border:1px solid var(--border);border-radius:var(--radius);overflow:clip}
.gk-embedded a{text-decoration:none}
.gk-embedded h1,.gk-embedded h2,.gk-embedded h3{font-family:inherit;margin:0}
.gk-embedded #app{display:grid;grid-template-columns:238px minmax(0,1fr)}
.gk-embedded .sidebar{position:sticky;top:0;height:100vh;max-height:100vh;overflow:auto;width:auto}
.gk-embedded .shell{margin-right:0;min-width:0}
.gk-embedded .content{padding:28px}
@media(max-width:800px){.gk-embedded #app{display:block}.gk-embedded .sidebar{position:fixed;height:100%}}

@media(prefers-reduced-motion:reduce){
  .gk-motion .gk-enter{animation:none}
  .car-card,.j-offer-card{transform:none}
  .gk-celebrate{display:none}
}