:root{
  --sg-motion-ease:cubic-bezier(.2,.8,.2,1);
  --sg-motion-pop:cubic-bezier(.16,1.35,.32,1);
  --sg-motion-glide:cubic-bezier(.7,0,.2,1);
  --sg-motion-shadow:0 22px 60px rgba(15,23,42,.12);
}

html.sg-reduce-motion *,
html.sg-reduce-motion *::before,
html.sg-reduce-motion *::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}

@keyframes sgHeroCinema{0%{opacity:0;transform:scale(1.025) translateY(14px);filter:blur(8px) saturate(.9)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) saturate(1)}}
@keyframes sgHeroSweep{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}35%{opacity:.55}100%{transform:translateX(120%) skewX(-18deg);opacity:0}}
@keyframes sgProductRise{0%{opacity:0;transform:translateY(34px) scale(.96) rotateX(5deg);filter:blur(4px)}100%{opacity:1;transform:translateY(0) scale(1) rotateX(0);filter:blur(0)}}
@keyframes sgProductSlideLeft{0%{opacity:0;transform:translateX(-28px) translateY(18px) rotate(-1.4deg);filter:blur(3px)}100%{opacity:1;transform:translateX(0) translateY(0) rotate(0);filter:blur(0)}}
@keyframes sgProductSlideRight{0%{opacity:0;transform:translateX(28px) translateY(18px) rotate(1.4deg);filter:blur(3px)}100%{opacity:1;transform:translateX(0) translateY(0) rotate(0);filter:blur(0)}}
@keyframes sgCategoryUnfold{0%{opacity:0;transform:translateY(18px) scaleY(.94);transform-origin:top;filter:blur(3px)}100%{opacity:1;transform:translateY(0) scaleY(1);filter:blur(0)}}
@keyframes sgDetailPhotoIn{0%{opacity:0;transform:translateX(-30px) scale(.985);clip-path:inset(0 18% 0 0 round 28px);filter:blur(8px)}100%{opacity:1;transform:translateX(0) scale(1);clip-path:inset(0 0 0 0 round 28px);filter:blur(0)}}
@keyframes sgDetailCopyIn{0%{opacity:0;transform:translateX(30px);filter:blur(5px)}100%{opacity:1;transform:translateX(0);filter:blur(0)}}
@keyframes sgGallerySwap{0%{opacity:.35;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
@keyframes sgCartStep{0%{opacity:0;transform:translateY(24px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sgEmptyOrbit{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-5deg)}}
@keyframes sgToastSnap{0%{opacity:0;transform:translateY(-18px) scale(.92)}62%{opacity:1;transform:translateY(3px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sgRipple{to{opacity:0;transform:scale(3.2)}}
@keyframes sgBadgePop{0%{transform:scale(.7);opacity:.4}70%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes sgSkeletonFlow{0%{background-position:220% 0}100%{background-position:-220% 0}}
@keyframes sgNavMark{0%{transform:translateX(-50%) scaleX(.25);opacity:.3}100%{transform:translateX(-50%) scaleX(1);opacity:1}}

.sg-motion-ready #main-header{animation:sgCategoryUnfold .45s var(--sg-motion-ease) both}
.sg-motion-ready #bottom-nav{animation:sgCartStep .5s var(--sg-motion-ease) both .05s}
.sg-motion-ready .sgbd-hero-slider{animation:sgHeroCinema .75s var(--sg-motion-ease) both;position:relative;overflow:hidden}
.sg-motion-ready .sgbd-hero-slider::after{content:"";position:absolute;inset:-30% auto -30% -40%;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:sgHeroSweep 1.35s var(--sg-motion-glide) both .25s;pointer-events:none}

.reveal-card,.sg-motion-item{opacity:0;will-change:transform,opacity,filter}
.reveal-card.show,.reveal-card.sg-in-view,.sg-motion-item.sg-in-view{opacity:1}

.sg-premium-product-card{box-shadow:0 10px 34px rgba(15,23,42,.055);transition:transform .28s var(--sg-motion-pop),box-shadow .28s ease,border-color .24s ease;background:#fff}
.sg-premium-product-card:hover{transform:translateY(-7px) rotate(.15deg);box-shadow:var(--sg-motion-shadow);border-color:rgba(155,44,250,.24)}
.sg-premium-product-card .sg-product-image-box img{transition:transform .65s var(--sg-motion-ease),filter .45s ease}
.sg-premium-product-card:hover .sg-product-image-box img{transform:scale(1.065);filter:saturate(1.07) contrast(1.02)}
.sg-premium-product-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sg-x,70%) var(--sg-y,20%),rgba(155,44,250,.13),transparent 30%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.sg-premium-product-card:hover::after{opacity:1}
.sg-discount-badge{animation:sgBadgePop .45s var(--sg-motion-pop) both}

.sg-final-product-page .product-photo-stage{animation:sgDetailPhotoIn .66s var(--sg-motion-ease) both}
.sg-final-product-page .sg-final-product-right{animation:sgDetailCopyIn .58s var(--sg-motion-ease) both .08s}
.sg-gallery-swap-in{animation:sgGallerySwap .32s var(--sg-motion-ease) both}
.sg-product-thumb{transition:transform .22s var(--sg-motion-pop),border-color .22s ease,box-shadow .22s ease,opacity .22s ease}
.sg-product-thumb:hover{transform:translateY(-3px)}
.sg-product-thumb.active{animation:sgBadgePop .34s var(--sg-motion-pop) both}

.checkout .cardx{animation:sgCartStep .5s var(--sg-motion-ease) both}
.checkout .cardx:nth-child(2){animation-delay:.07s}.checkout .main-btn{animation:sgCartStep .5s var(--sg-motion-ease) both .12s}
.sg-empty-cart-page i{animation:sgEmptyOrbit 2.8s ease-in-out infinite}
.toast{animation:sgToastSnap .38s var(--sg-motion-pop) both}
.cart-badge:not(.is-empty){animation:sgBadgePop .34s var(--sg-motion-pop) both}

.sg-tap-target{position:relative;overflow:hidden;transform:translateZ(0);transition:transform .18s var(--sg-motion-pop),box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease!important}
.sg-tap-target:active{transform:scale(.982)}
.sg-ripple{position:absolute;border-radius:50%;width:14px;height:14px;pointer-events:none;background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);animation:sgRipple .58s ease-out forwards;mix-blend-mode:screen}
.bg-white .sg-ripple,.text-primary .sg-ripple,.btn-soft .sg-ripple{background:rgba(155,44,250,.2);mix-blend-mode:normal}
.nav-item{position:relative;transition:transform .22s var(--sg-motion-pop),color .2s ease!important}
.nav-item::after{content:"";position:absolute;left:50%;bottom:-6px;width:24px;height:3px;border-radius:999px;background:var(--primary);opacity:0;transform:translateX(-50%) scaleX(.2)}
.nav-item.active::after{animation:sgNavMark .28s var(--sg-motion-pop) both}
.nav-item:hover{transform:translateY(-2px)}

.sg-search-wrap{transition:transform .24s var(--sg-motion-ease),filter .24s ease}.sg-search-wrap:focus-within{transform:translateY(-2px);filter:drop-shadow(0 12px 22px rgba(155,44,250,.15))}
#sidebar{transition:transform .34s var(--sg-motion-ease),box-shadow .34s ease!important}#sidebar:not(.translate-x-full){box-shadow:-28px 0 60px rgba(15,23,42,.22)!important}

.sg-skeleton-page{min-height:100%;background:#fff;padding:14px 16px 28px}.sg-skeleton-hero{height:180px;border-radius:26px;background:linear-gradient(110deg,#f1f5f9 8%,#fff 18%,#eef2ff 33%);background-size:220% 100%;animation:sgSkeletonFlow 1.25s linear infinite;margin-bottom:18px}.sg-skeleton-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sg-skeleton-card{height:210px;border:1px solid #edf2f7;border-radius:18px;background:#fff;padding:12px}.sg-skeleton-card span,.sg-skeleton-card b,.sg-skeleton-card em{display:block;border-radius:12px;background:linear-gradient(110deg,#f1f5f9 8%,#fff 18%,#eef2ff 33%);background-size:220% 100%;animation:sgSkeletonFlow 1.25s linear infinite}.sg-skeleton-card span{height:118px;margin-bottom:12px}.sg-skeleton-card b{height:16px;width:78%;margin-bottom:10px}.sg-skeleton-card em{height:14px;width:46%}
@media(min-width:768px){.sg-skeleton-page{padding:28px 44px}.sg-skeleton-hero{height:260px}.sg-skeleton-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}

@media(hover:none){.sg-premium-product-card:hover,.sg-product-thumb:hover,.nav-item:hover{transform:none}.sg-premium-product-card:hover .sg-product-image-box img{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.reveal-card,.sg-motion-item{opacity:1!important;transform:none!important;filter:none!important}.sgbd-hero-slider::after{display:none!important}}

/* SubGallery BD premium motion rebuild: restored scroll reveal + context-specific animation */
@keyframes sgScrollLift{0%{opacity:0;transform:translateY(34px) scale(.975);filter:blur(5px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes sgSectionHeaderIn{0%{opacity:0;transform:translateX(-24px);clip-path:inset(0 100% 0 0)}100%{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}}
@keyframes sgPanelBloom{0%{opacity:0;transform:translateY(22px) scale(.985);box-shadow:0 0 0 rgba(15,23,42,0)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sgDesktopFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sgClosePop{0%{opacity:0;transform:scale(.7) rotate(-30deg)}70%{opacity:1;transform:scale(1.08) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sgThumbRibbon{0%{opacity:0;transform:translateY(12px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sgPackageSelect{0%{transform:scale(.98)}65%{transform:scale(1.035)}100%{transform:scale(1)}}

.sg-motion-ready .sg-universal-close,.sg-motion-ready .product-close-btn{animation:sgClosePop .36s var(--sg-motion-pop) both .08s}
.scroll-mt-24.sg-in-view > div:first-child{animation:sgSectionHeaderIn .58s var(--sg-motion-ease) both}
.sg-motion-item.sg-in-view:not(.sg-premium-product-card):not(.product-photo-stage):not(.sg-final-product-right){animation:sgScrollLift .62s var(--sg-motion-ease) both;animation-delay:calc(min(var(--sg-i,0),10)*28ms)}
.product-desc-panel-clean.sg-in-view,.cardx.sg-in-view,.sg-tracking-card.sg-in-view,.sg-policy-card.sg-in-view{animation:sgPanelBloom .58s var(--sg-motion-ease) both}
.sg-product-thumb.sg-in-view{animation:sgThumbRibbon .42s var(--sg-motion-ease) both;animation-delay:calc(min(var(--sg-i,0),8)*22ms)}
.package-option.is-active{animation:sgPackageSelect .32s var(--sg-motion-pop) both}
.sg-final-product-page .product-photo-stage{animation:sgDetailPhotoIn .62s var(--sg-motion-ease) both!important}
.sg-final-product-page .sg-final-product-right{animation:sgDetailCopyIn .62s var(--sg-motion-ease) both .06s!important}
.sg-skeleton-loader{animation:sgToastSnap .42s var(--sg-motion-pop) both .08s}

@media(min-width:1024px){
  .sgbd-hero-slider{box-shadow:0 28px 80px rgba(15,23,42,.075)!important;}
  .sgbd-hero-slider:hover::after{animation:sgHeroSweep 1.15s var(--sg-motion-glide) both!important;}
  .product-photo-stage:hover{animation:sgDesktopFloat 4.2s ease-in-out infinite;}
  .sg-premium-product-card:hover{transform:translateY(-10px) rotate(.18deg) scale(1.01)!important;}
  .sg-clean-suggest-grid .sg-premium-product-card:hover{transform:translateY(-6px) scale(1.01)!important;}
  .sg-final-price-row{transition:transform .28s var(--sg-motion-pop),box-shadow .28s ease!important;}
  .sg-final-price-row:hover{transform:translateY(-3px)!important;box-shadow:0 22px 54px rgba(155,44,250,.12)!important;}
}

@media(prefers-reduced-motion:reduce){
  .scroll-mt-24.sg-in-view > div:first-child,.sg-motion-item.sg-in-view,.product-desc-panel-clean.sg-in-view,.cardx.sg-in-view,.sg-tracking-card.sg-in-view,.sg-policy-card.sg-in-view,.sg-product-thumb.sg-in-view,.package-option.is-active,.sg-skeleton-loader{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;}
}
@keyframes sgSpinReverse{to{transform:rotate(-360deg)}}


#app-content .reveal-card,
#app-content .sg-premium-product-card,
#app-content .sg-premium-product-card.sg-in-view,
#app-content .sg-premium-product-card.show{
  animation:none!important;
  clip-path:none!important;
  filter:none!important;
}


#app-content .reveal-card,
#app-content .sg-product-card-clean,
#app-content .sg-premium-product-card{
  animation:none!important;
  clip-path:none!important;
  filter:none!important;
}


/* Clean rebuild: product card reveal is restored by app.js + style.css; do not override it here. */
#app-content .sg-product-card-clean.reveal-card,#app-content .sg-premium-product-card.reveal-card{animation:none!important;filter:none!important;clip-path:none!important;}


/* Product card reveal is controlled only by app.js original ZIP logic. */
#app-content .sg-product-card-clean.reveal-card,#app-content .sg-premium-product-card.reveal-card,#app-content .reveal-card{animation:none!important;filter:none!important;clip-path:none!important;}


#app-content .reveal-card{
  opacity:0!important;
  transform:translateY(80px) scale(.85)!important;
  transition:transform 1s cubic-bezier(.22,1,.36,1),opacity 1s cubic-bezier(.22,1,.36,1),box-shadow .3s ease!important;
  animation:none!important;
  will-change:transform,opacity!important;
}
#app-content .reveal-card.show,
#app-content .reveal-card.sg-clean-revealed{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  animation:none!important;
}
#app-content .reveal-card.show:hover{
  transform:translateY(0) scale(1)!important;
  transition:box-shadow .16s ease!important;
}

/* final: product cards use original source reveal only */
#app-content .reveal-card,#app-content .sg-premium-product-card{animation:none!important;filter:none!important;clip-path:none!important;}