/* Superior Stain Solutions: small interaction layer. Every motion respects prefers-reduced-motion. */

/* 1. Page-to-page fade. Header (desktop, sticky) and mobile call bar hold still. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (min-width:1200px){.nav-shell[data-nav]{view-transition-name:sx-header}}
.callbar[data-callbar]{view-transition-name:sx-callbar}

/* 2. Thank-you check draws itself. */
.sx-check .mark{position:relative;animation:sx-pop .55s cubic-bezier(.2,1.35,.4,1) both}
.sx-check .mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:sx-draw .5s .32s cubic-bezier(.65,0,.35,1) forwards}
.sx-check .mark::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--coral);opacity:0;animation:sx-ring .9s .7s ease-out}
@keyframes sx-pop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes sx-draw{to{stroke-dashoffset:0}}
@keyframes sx-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

/* 3. Photo picker with previews. */
.sx-up input[type=file][data-photos]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden;clip-path:inset(50%);border:0!important;padding:0!important;margin:0!important}
.sx-drop{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:3.4rem;padding:.8rem 1rem;box-sizing:border-box;border:1.5px dashed rgba(58,36,24,.3);border-radius:var(--r,14px);background:#fff;color:var(--ink,#1a120d);font:inherit;font-weight:600;cursor:pointer;transition:border-color .2s,background-color .2s,transform .12s ease;-webkit-tap-highlight-color:transparent}
.sx-drop .ico{width:1.25rem;height:1.25rem;color:var(--coral-deep,#a83d3d);flex:none}
.sx-drop small{font-weight:400;color:var(--muted,#5a4638);font-size:.88rem}
.sx-drop:hover,.sx-up.is-drop .sx-drop{border-color:var(--coral,#dd6565);background:#fff8f4}
.sx-up input[data-photos]:focus-visible+.sx-drop{outline:2px solid var(--coral,#dd6565);outline-offset:2px}
.sx-drop[hidden]{display:none}
.sx-thumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}
.sx-thumbs:empty{display:none}
.sx-thumb{position:relative;width:4.4rem;height:4.4rem;border-radius:12px;overflow:hidden;background:var(--sand,#ebdfc8);box-shadow:0 1px 2px rgba(40,20,10,.12)}
.sx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sx-thumb .sx-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--muted,#5a4638)}
.sx-x{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(27,17,12,.74);color:#fff;display:grid;place-items:center;cursor:pointer}
.sx-x::before{content:"";position:absolute;inset:-8px}
.sx-x svg{width:13px;height:13px}

/* 4. Desktop phone card. */
.sx-pc{position:fixed;z-index:170;width:min(300px,calc(100vw - 24px));box-sizing:border-box;background:var(--walnut,#1b110c);color:#fff8ee;border-radius:18px;padding:1.15rem 1.1rem 1.05rem;box-shadow:0 22px 50px -14px rgba(20,10,5,.6),0 0 0 1px rgba(255,240,220,.08);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:50% 0;transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sx-pc.up{transform:translateY(6px) scale(.98);transform-origin:50% 100%}
.sx-pc.open{opacity:1;transform:none;pointer-events:auto}
.sx-pc[hidden]{display:none}
.sx-pc-num{margin:0;text-align:center;font-family:var(--font-display);font-size:1.55rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sx-pc-sub{margin:.25rem 0 1rem;text-align:center;font-size:.88rem;color:var(--muted-on-dark,#c6b39e)}
.sx-pc-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sx-pc-btn{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.8rem;border:0;border-radius:999px;font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .12s ease}
.sx-pc-btn svg{width:1.05rem;height:1.05rem;flex:none}
.sx-pc-copy{background:var(--coral,#dd6565);color:var(--walnut,#1b110c)}
.sx-pc-copy:hover{background:#e57a7a}
.sx-pc-call{background:transparent;color:#fff8ee;box-shadow:inset 0 0 0 1.5px rgba(255,248,238,.3)}
.sx-pc-call:hover{box-shadow:inset 0 0 0 1.5px rgba(255,248,238,.6)}
.sx-pc-call svg{color:var(--coral,#dd6565)}

/* 6. Review stars stain in. */
.rv.sx-wait .stars svg{clip-path:inset(0 100% 0 0)}
.rv.sx-lit .stars svg{clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i,0)*90ms + 150ms)}

/* 8. Photo viewer follows the finger. */
.lb-fig.sx-drag{transition:none!important}

/* 9. Reading progress on guides. */
.sx-read{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--coral,#dd6565);transform:scaleX(0);transform-origin:0 50%;z-index:220;pointer-events:none}

/* 10. Tactile press on touch screens. */
@media (hover:none){
 .btn,.chip,.cb-call,.cb-est,.cb-sheet-btn,.sx-drop,.sx-pc-btn{-webkit-tap-highlight-color:transparent}
 .btn:active,.chip:active,.cb-sheet-btn:active,.sx-drop:active{transform:scale(.97);transition-duration:.08s}
 .cb-call:active,.cb-est:active{filter:brightness(.92)}
}

@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .sx-check .mark,.sx-check .mark path,.sx-check .mark::after{animation:none!important;stroke-dashoffset:0!important}
 .rv.sx-wait .stars svg{clip-path:none}
 .sx-pc{transition:none}
 .btn:active,.chip:active,.cb-sheet-btn:active,.sx-drop:active{transform:none}
}

/* Photo viewer owns its swipes: no accidental browser back-gesture while it's open. */
.lb[data-lightbox]{touch-action:pinch-zoom;overscroll-behavior:contain}
html:has(body.lb-open){overscroll-behavior:none}