/* Quiet, responsive motion system for storefront journeys. */
@media(prefers-reduced-motion:no-preference){
  html.motion-ready{scroll-behavior:smooth}
  .shop-header{animation:motion-header-in .52s cubic-bezier(.2,.75,.25,1) both}
  .hero-copy .eyebrow,.hero-copy h1,.hero-description,.hero-copy>.button,.hero-caption{animation:motion-rise-in .72s cubic-bezier(.2,.75,.25,1) both}
  .hero-copy h1{animation-delay:70ms}.hero-description{animation-delay:145ms}.hero-copy>.button{animation-delay:220ms}.hero-caption{animation-delay:290ms}
  .hero-visual{animation:motion-hero-in .95s cubic-bezier(.2,.75,.25,1) 100ms both}
  .hero-phone-back{animation:motion-phone-back 7.5s ease-in-out 1s infinite}
  .hero-phone-front{animation:motion-phone-front 8.5s ease-in-out 1.2s infinite}
  .hero-orbit{animation:motion-orbit 9s ease-in-out 1s infinite alternate}
  .hero-phone-screen:after{animation:motion-screen-glint 8s ease-in-out 2s infinite}

  .motion-ready [data-motion]{opacity:0;transform:translate3d(0,20px,0);transition:opacity .68s cubic-bezier(.2,.7,.25,1),transform .68s cubic-bezier(.2,.7,.25,1);transition-delay:var(--motion-delay,0ms)}
  .motion-ready [data-motion="card"]{transform:translate3d(0,24px,0) scale(.985)}
  .motion-ready [data-motion].is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);will-change:auto}
  .product-card[data-motion="card"].is-visible:hover,.journal-card[data-motion="card"].is-visible:hover{transform:translate3d(0,-4px,0) scale(1);transition-duration:.28s}

  .button,.shop-icon-button,.branch-trigger,.text-button,.store-tab,.category-tabs button,.add-button{transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .28s ease,transform .28s cubic-bezier(.2,.75,.25,1)}
  .button:hover:not(:disabled),.store-tab:hover,.category-tabs button:hover{transform:translateY(-2px)}
  .button:active:not(:disabled),.shop-icon-button:active,.branch-trigger:active,.store-tab:active,.category-tabs button:active{transform:scale(.97)}
  .button-primary:hover:not(:disabled){box-shadow:0 8px 22px #0071e329}
  .hero-copy>.button i,.text-button i,.product-view-link i,.blog-nav-shop i{transition:transform .28s cubic-bezier(.2,.75,.25,1)}
  .hero-copy>.button:hover i,.text-button:hover i,.product-view-link:hover i,.blog-nav-shop:hover i{transform:translateX(4px)}
  .product-card{transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .25s}
  .product-image>img{transition:transform .65s cubic-bezier(.2,.75,.25,1)}
  .product-card:hover .product-image>img{transform:scale(1.035)}
  .add-button:hover{transform:scale(1.08)}
  .add-button.motion-tap{animation:motion-add-tap .48s cubic-bezier(.2,.75,.25,1)}
  .cart-count.count-pop{animation:motion-count-pop .46s cubic-bezier(.2,.75,.25,1)}

  dialog.shop-dialog{opacity:0;transform:translateY(10px) scale(.99);transition:opacity .26s ease,transform .3s cubic-bezier(.2,.75,.25,1),display .3s allow-discrete}
  dialog.shop-dialog[open]{opacity:1;transform:translateY(0) scale(1);animation:motion-dialog-in .38s cubic-bezier(.2,.75,.25,1) both}
  @starting-style{dialog.shop-dialog[open]{opacity:0;transform:translateY(14px) scale(.985)}}
  dialog.shop-dialog[open]::backdrop{animation:motion-backdrop-in .3s ease both}
  .cart-item{animation:motion-row-in .42s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--motion-delay,0ms)}
  .checkout-form-section{animation:motion-step-in .48s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--motion-delay,0ms)}
  .order-success-icon{animation:motion-success-in .56s cubic-bezier(.2,.75,.25,1) both}
  .choice-card{transition:background-color .24s,border-color .24s,box-shadow .24s,transform .24s}
  .choice-card:hover{transform:translateY(-2px)}
  .choice-card:has(input:checked){box-shadow:0 0 0 3px #0071e314}
  .quantity-control button{transition:background-color .18s,color .18s,transform .18s}
  .quantity-control button:active{transform:scale(.88)}
  .shop-toast.visible{transition:opacity .28s ease,transform .4s cubic-bezier(.2,.75,.25,1)}

  .journal-card{transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .25s}
  .journal-card img{transition:transform .65s cubic-bezier(.2,.75,.25,1)}
  .journal-feature,.journal-shop-cta{transition:background-color .3s,border-color .3s,transform .3s}
  .journal-feature:hover{transform:translateY(-2px)}
  .blog-prose a{transition:color .2s,text-decoration-color .2s}

  .repair-model-choice,.repair-service-choice,.repair-store-choice{transition:transform .28s cubic-bezier(.2,.75,.25,1),border-color .25s,background-color .25s,box-shadow .28s}
  .repair-model-choice:hover,.repair-service-choice:hover,.repair-store-choice:hover{transform:translateY(-2px)}
  .repair-model-choice:active,.repair-service-choice:active,.repair-store-choice:active{transform:scale(.99)}
  .repair-progress li[aria-current="step"] .repair-step-number{animation:motion-current-step .45s cubic-bezier(.2,.75,.25,1) both}
  .repair-progress li.is-complete .repair-step-number{animation:motion-success-in .42s cubic-bezier(.2,.75,.25,1) both}
  .repair-step-heading h2{animation:motion-rise-in .38s cubic-bezier(.2,.75,.25,1) both}

  .theme-toggle,.shop-hero,.shop-footer,.product-card,.shop-dialog{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
}

@keyframes motion-header-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-hero-in{from{opacity:0;transform:translate3d(10px,12px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes motion-phone-back{0%,100%{transform:rotate(-13deg) translateY(0)}50%{transform:rotate(-13deg) translateY(-5px)}}
@keyframes motion-phone-front{0%,100%{transform:rotate(10deg) translateY(-4px)}50%{transform:rotate(10deg) translateY(3px)}}
@keyframes motion-orbit{from{transform:scale(.985);opacity:.88}to{transform:scale(1.015);opacity:1}}
@keyframes motion-screen-glint{0%,70%,100%{opacity:.35;transform:translateX(-8px) rotate(-30deg)}82%{opacity:.8;transform:translateX(13px) rotate(-30deg)}}
@keyframes motion-dialog-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes motion-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes motion-row-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-step-in{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-add-tap{0%{transform:scale(1)}45%{transform:scale(.84)}100%{transform:scale(1)}}
@keyframes motion-count-pop{0%{transform:scale(.72)}65%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes motion-success-in{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes motion-current-step{0%{transform:scale(.82)}70%{transform:scale(1.1)}100%{transform:scale(1)}}

@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  .hero-copy .eyebrow,.hero-copy h1,.hero-description,.hero-copy>.button,.hero-caption{animation-duration:.56s}
  .hero-phone-back,.hero-phone-front{animation-duration:10s}
  .motion-ready [data-motion]{transform:translate3d(0,14px,0)}
  .motion-ready [data-motion="card"]{transform:translate3d(0,17px,0) scale(.99)}
  .button:hover:not(:disabled),.store-tab:hover,.category-tabs button:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  [data-motion]{opacity:1!important;transform:none!important;will-change:auto!important}
}