/* Hưng Anh Studio — high-refresh performance layer
   Keep the existing visual design while reducing layout/paint work during scroll. */

/* The scroll progress value is still supplied by site.js, but clipping a fixed
   100%-wide layer avoids relayout from changing the pseudo-element width. */
.site-header.stuck::before{
  width:100%;
  clip-path:inset(0 calc(100% - var(--page-scroll-progress,0%)) 0 0);
  contain:paint;
  will-change:clip-path;
}

/* Avoid broad transition invalidation on the most frequently interacted shell. */
.search{
  transition:background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}

.pdp-mobile-buybar{
  contain:layout paint style;
}

/* On touch screens the expensive glass blur is barely distinguishable while
   scrolling, but it costs GPU bandwidth on every composited frame. */
@media(max-width:768px){
  .site-header.stuck::before{display:none}

  .pdp-mobile-buybar{
    background:#fff;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .spot,
  .btn-glass,
  .snav,
  .sdots,
  .scrim,
  .zoom-btn,
  .home-video-backdrop,
  .home-video-close,
  .pdp-big.has-swipe-hint::before,
  .pdp-big.has-swipe-hint::after{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .spot{background:rgba(255,255,255,.96)}
  .btn-glass{background:rgba(255,255,255,.94)}
  .scrim{background:rgba(18,35,46,.48)}

  /* Persistent will-change layers waste memory on mobile once elements stop
     animating. Keep them only where a transform is continuously active. */
  .pdp-big-img{will-change:auto}
  .topbar-greeting-track{will-change:transform}
}

/* Respect accessibility preferences and also remove needless compositor work. */
@media(prefers-reduced-motion:reduce){
  .topbar-greeting-track{animation:none!important;transform:none!important;padding-left:0!important}
  .site-header.stuck::before{will-change:auto}
}