/* Scroll-motion layer for hzjyqs.com — additive only.
   Loaded after the site's own CSS; every rule is scoped to .sm or sm- classes. */

/* ---------- reading progress ---------- */
.sm-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none;background:transparent}
.sm-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#0071e3 0%,#5e5ce6 58%,#e8b33c 100%);
  box-shadow:0 0 14px rgba(232,179,60,.35);will-change:transform}

/* ---------- hero atmosphere ---------- */
.sm-hero{position:relative;overflow:hidden}
.sm-hero::before{content:"";position:absolute;inset:-22% -8% auto -8%;height:118%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 74% 30%,rgba(94,92,230,.10),transparent 70%),
    radial-gradient(34% 38% at 90% 16%,rgba(232,179,60,.13),transparent 72%),
    radial-gradient(44% 46% at 22% 64%,rgba(0,113,227,.07),transparent 72%);
  animation:sm-halo 24s ease-in-out infinite alternate}
.sm-hero.sm-pause::before{animation-play-state:paused}
@keyframes sm-halo{
  from{transform:translate3d(-1.4%,0,0) scale(1)}
  to{transform:translate3d(1.8%,1.2%,0) scale(1.07)}
}
.sm-hero .hero-copy{position:relative;z-index:2}
.sm-hero .brand-film{position:relative;z-index:2}
.sm-orbit{position:absolute;right:-72px;top:4px;width:560px;max-width:58%;z-index:0;opacity:.6;pointer-events:none;
  transform:translate3d(0,var(--sm-y,0px),0)}
.sm-orbit .sm-ring{fill:none;stroke:rgba(232,179,60,.5);stroke-width:1;stroke-dasharray:2 9;
  transform-origin:320px 320px;animation:sm-spin 70s linear infinite}
.sm-orbit .sm-ring-2{stroke:rgba(0,113,227,.16);stroke-dasharray:none;animation-duration:120s;animation-direction:reverse}
.sm-orbit .sm-arc{fill:none;stroke:rgba(232,179,60,.42);stroke-width:1.4;stroke-dasharray:5 8}
.sm-orbit .sm-key{fill:none;stroke:#e8b33c;stroke-width:2.2;stroke-linecap:round;opacity:.85}
@keyframes sm-spin{to{transform:rotate(360deg)}}

/* ---------- reveal engine (armed by JS only) ---------- */
.sm-armed .sm-reveal{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .78s cubic-bezier(.22,.61,.36,1),transform .78s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--sm-d,0) * 1ms)}
.sm-armed .sm-reveal.is-in{opacity:1;transform:none}
.sm-armed .sm-reveal.sm-soft{transform:translate3d(0,12px,0) scale(.985)}
.sm-armed .sm-reveal.sm-soft.is-in{transform:none}

/* hero title lines */
.sm-line{display:block}
.sm-hero h1 .sm-line + .sm-line{margin-top:2px}

/* ---------- brand film ---------- */
.sm .brand-film{transition:box-shadow .4s ease}
.sm .brand-film:hover{box-shadow:0 26px 72px rgba(39,34,25,.12)}

/* ---------- journey strip ---------- */
.sm .journey-strip{position:relative;overflow:visible}
.sm .journey-strip::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#bfdbfe,#c7c6f5 55%,#e8b33c);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.15s cubic-bezier(.16,1,.3,1);opacity:.85}
.sm .journey-strip.is-in::after{transform:scaleX(1)}
.sm .journey-strip b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#eff6ff;transition:background .45s ease,color .45s ease,box-shadow .45s ease}
.sm .journey-strip span{opacity:.58;transition:opacity .45s ease}
.sm .journey-strip span.is-lit{opacity:1}
.sm .journey-strip span.is-lit b{background:#e8b33c;color:#1d1d1f;box-shadow:0 0 0 5px rgba(232,179,60,.16)}

/* ---------- deliver cards ---------- */
.sm .deliver-grid article{border-radius:14px;transition:box-shadow .35s ease,background-color .35s ease}
.sm .deliver-grid article:hover{box-shadow:0 14px 34px rgba(0,113,227,.09)}
.sm .deliver-grid .number{transition:color .35s ease}
.sm .deliver-grid article:hover .number{color:#b07c12}

/* ---------- fit / sample ---------- */
.sm .fit-grid article{transition:border-color .35s ease}
.sm .fit-grid article:hover{border-left-color:#e8b33c}
.sm .sample-sheet{will-change:opacity,transform}

/* ---------- resume: stable form, animated steps ---------- */
.sm .resume-steps{position:relative}
.sm .resume-steps::before{content:"";position:absolute;left:8px;right:8px;top:19px;height:1px;
  background:linear-gradient(90deg,#bfdbfe,#c7c6f5 55%,#e8b33c);
  transform:scaleX(0);transform-origin:0 50%;opacity:.9;transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.sm .resume-steps.is-in::before{transform:scaleX(1)}
.sm .resume-steps li > span{position:relative;z-index:1;transition:background .45s ease,color .45s ease,box-shadow .45s ease}
.sm .resume-steps li.is-lit > span{background:#e8b33c;color:#1d1d1f;box-shadow:0 0 0 5px rgba(232,179,60,.14)}
.sm-form,.sm-form *{animation:none!important}

/* ---------- pricing: gold light converging ---------- */
.sm .pricing-section{position:relative}
.sm .pricing-section::before,.sm .pricing-section::after{content:"";position:absolute;top:46%;height:1px;width:24%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(232,179,60,.65));opacity:0;transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.sm .pricing-section::before{left:1%;transform:translateX(-26px) rotate(7deg)}
.sm .pricing-section::after{right:1%;transform:translateX(26px) rotate(-7deg);
  background:linear-gradient(270deg,transparent,rgba(232,179,60,.65))}
.sm .pricing-section.is-in::before,.sm .pricing-section.is-in::after{opacity:1;transform:none}
.sm .price-card{position:relative;overflow:hidden;transition:box-shadow .4s ease,transform .4s ease}
.sm .price-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-6%);
  background:
    radial-gradient(58% 42% at 50% 0,rgba(232,179,60,.14),transparent 72%),
    linear-gradient(115deg,transparent 34%,rgba(232,179,60,.10) 50%,transparent 66%);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.sm .price-card.is-in::before{opacity:1;transform:none}

/* ---------- compare / faq / closing ---------- */
.sm .comparison-scroll{overflow-x:auto}
.sm .faq details{transition:background-color .3s ease}
.sm .faq details:hover{background-color:#fafafa}
.sm .closing{position:relative;overflow:hidden;transition:box-shadow .4s ease}
.sm .closing::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(26%);
  background:radial-gradient(52% 130% at 50% 108%,rgba(232,179,60,.22),transparent 70%);
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.sm .closing.is-in::before{opacity:1;transform:none}
.sm .closing:hover{box-shadow:0 18px 44px rgba(0,113,227,.10)}
.sm .closing .primary{transition:box-shadow .3s ease,transform .3s ease}
.sm .closing .primary:hover{box-shadow:0 0 0 4px rgba(232,179,60,.16),0 10px 26px rgba(0,113,227,.22)}

/* ---------- case entry ---------- */
.sm .case-entry{display:flex;align-items:center;justify-content:space-between;gap:48px;padding-block:40px;
  border-top:1px solid var(--line)}
.sm .case-entry-copy{max-width:640px}
.sm .case-entry-copy .eyebrow{margin-bottom:8px}
.sm .case-entry-copy h2{font-size:28px;letter-spacing:-.4px;margin-bottom:10px;text-wrap:balance}
.sm .case-entry-copy p{margin:0;font-size:14px}
.sm .case-entry-action{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.sm .case-entry-action .button{white-space:nowrap}
.sm .case-entry-action .small{color:var(--muted)}

/* ---------- media ---------- */
@media (max-width:960px){
  .sm-orbit{right:-140px;max-width:66%;opacity:.42}
  .sm .case-entry{gap:26px;padding-block:30px}
  .sm .case-entry-copy h2{font-size:24px}
}
@media (max-width:650px){
  .sm .sm-hero::before{inset:-30% -20% auto -20%;height:90%}
  .sm .sm-orbit{top:-10px;right:-170px;max-width:78%;opacity:.34}
  .sm .journey-strip b{width:20px;height:20px;margin:0 auto 4px}
  .sm .resume-steps::before{display:none}
  .sm .pricing-section::before,.sm .pricing-section::after{display:none}
  .sm .case-entry{flex-direction:column;align-items:flex-start;gap:18px}
  .sm .case-entry-copy h2{font-size:22px}
  .sm .case-entry-action{align-items:stretch;width:100%}
  .sm .case-entry-action .button{width:100%;justify-content:center}
  .sm .case-entry-action .small{text-align:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .sm-progress i{transition:none}
  .sm-armed .sm-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .sm .sm-hero::before,.sm .sm-orbit .sm-ring{animation:none!important}
  .sm .sm-orbit{display:none}
  .sm .journey-strip::after,.sm .resume-steps::before{transition:none}
  .sm .pricing-section::before,.sm .pricing-section::after{display:none}
  .sm .price-card::before,.sm .closing::before{opacity:1;transform:none;transition:none}
  .sm .deliver-grid article,.sm .fit-grid article,.sm .price-card,.sm .closing,.sm .brand-film{transition:none}
  .sm .closing:hover,.sm .brand-film:hover{box-shadow:none}
}

@media print{
  .sm-progress,.sm-orbit,.sm-hero::before,.sm .pricing-section::before,.sm .pricing-section::after{display:none!important}
}

/* runtime pause hooks */
.sm-hero.sm-pause .sm-ring{animation-play-state:paused}
html.sm-hidden .sm-orbit .sm-ring{animation-play-state:paused}
html.sm-hidden .sm-hero::before{animation-play-state:paused}

/* Integration: preserve reveal transitions alongside existing hover styles. */
.sm-armed .sm .sm-reveal{
  transition:opacity .78s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.16,1,.3,1),clip-path .95s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background-color .35s ease;
  transition-delay:calc(var(--sm-d,0) * 1ms),calc(var(--sm-d,0) * 1ms),calc(var(--sm-d,0) * 1ms),0ms,0ms;
}
.sm .deliver-grid{perspective:1200px}
.sm-armed .sm .deliver-grid article.sm-reveal{transform:translate3d(0,48px,0) rotateX(9deg) scale(.96);transform-origin:50% 100%}
.sm-armed .sm .deliver-grid article.sm-reveal:nth-child(even){transform:translate3d(0,68px,0) rotateX(12deg) scale(.95)}
.sm-armed .sm .sample-sheet.sm-reveal{transform:translate3d(24px,20px,0) rotate(2deg);clip-path:inset(0 0 24% 0 round 18px)}
.sm-armed .sm .sample-sheet dl>div.sm-reveal{transform:translate3d(22px,0,0)}
.sm-armed .sm .sample-comparison article.sm-reveal{transform:translate3d(0,36px,0) scale(.96)}
.sm-armed .sm .faq details.sm-reveal{transform:translate3d(18px,0,0)}
.sm-armed .sm .sm-reveal.is-in{transform:none;opacity:1}
.sm-armed .sm .deliver-grid article.sm-reveal.is-in,
.sm-armed .sm .deliver-grid article.sm-reveal.is-in:nth-child(even),
.sm-armed .sm .sample-sheet dl>div.sm-reveal.is-in,
.sm-armed .sm .sample-comparison article.sm-reveal.is-in,
.sm-armed .sm .faq details.sm-reveal.is-in{transform:none}
.sm-armed .sm .sample-sheet.sm-reveal.is-in{clip-path:inset(0 0 0 0 round 18px)}
.sm .resume-steps::before{top:42px}
@media(hover:hover) and (pointer:fine){
  .sm-armed .sm .deliver-grid article.sm-reveal.is-in:hover{transform:translateY(-5px)}
  .sm .sample-comparison article:hover{box-shadow:0 12px 30px #0071e310}
}
@media(max-width:650px){
  .sm-armed .sm .deliver-grid article.sm-reveal,.sm-armed .sm .deliver-grid article.sm-reveal:nth-child(even){transform:translateY(26px)}
  .sm-armed .sm .deliver-grid article.sm-reveal.is-in{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .sm-armed .sm .sm-reveal,.sm-armed .sm .sm-reveal.is-in{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}
@media print{
  .sm-armed .sm .sm-reveal{opacity:1!important;transform:none!important;clip-path:none!important}
}