/* SNP · P137 — «живой» слой сайта: градиентные кнопки (светлый → тёмный), блик при наведении, полёт товара в корзину,
   плавный переход между страницами (View Transitions), полоса прокрутки, мягкие подъёмы карточек. Всё отключается при prefers-reduced-motion. */
:root{--g-y:linear-gradient(135deg,#FFE88F 0%,#FECE3C 42%,#F2B21B 72%,#D99400 100%);--g-y-h:linear-gradient(135deg,#FFF0B0 0%,#FFD649 38%,#F0AC10 70%,#C98600 100%);
  --g-dk:linear-gradient(135deg,#3B4141 0%,#1C2020 55%,#0B0D0D 100%);--fx-ease:cubic-bezier(.2,.8,.2,1)}

/* кнопки: градиент, сдвиг градиента и блик при наведении, мягкая тень */
.btn.y,.pc-buy:not(.is-in),.qv-add:not(.in),.so-f .btn,.hero .btn.y{background-color:#FECE3C!important;background-image:var(--g-y)!important;background-size:180% 180%!important;background-position:0% 0%;position:relative;overflow:hidden;isolation:isolate;
  transition:background-position .6s var(--fx-ease),box-shadow .3s ease,transform .2s var(--fx-ease),color .2s;box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.08) inset}
.btn.y:hover,.pc-buy:not(.is-in):hover,.qv-add:not(.in):hover,.so-f .btn:hover{background-position:100% 100%!important;box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 12px 26px -8px rgba(217,148,0,.65);transform:translateY(-2px)}
.btn.y:active,.pc-buy:not(.is-in):active,.qv-add:not(.in):active{transform:translateY(0) scale(.98);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 4px 10px -4px rgba(217,148,0,.6)}
.btn.y::after,.pc-buy:not(.is-in)::after,.qv-add:not(.in)::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;z-index:-1;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);transform:skewX(-18deg);transition:left .7s var(--fx-ease);pointer-events:none}
.btn.y:hover::after,.pc-buy:not(.is-in):hover::after,.qv-add:not(.in):hover::after{left:120%}
.btn.dk{background-color:#101212!important;background-image:var(--g-dk)!important;background-size:180% 180%!important;transition:background-position .6s var(--fx-ease),box-shadow .3s,transform .2s}
.btn.dk:hover{background-position:100% 100%!important;box-shadow:0 12px 26px -10px rgba(0,0,0,.55);transform:translateY(-2px)}
.btn.line{transition:background .25s,color .25s,border-color .25s,transform .2s}
.btn.line:hover{background:var(--ink,#101212);color:#fff;border-color:var(--ink,#101212);transform:translateY(-2px)}
.btn svg{transition:transform .3s var(--fx-ease)}.btn:hover svg{transform:translateX(4px)}
/* «в корзине» — тёмная кнопка с мягким появлением */
.pc-buy.is-in{animation:fxIn .35s var(--fx-ease)}
@keyframes fxIn{from{transform:scale(.96);opacity:.6}to{transform:none;opacity:1}}

/* карточки: плавный подъём, мягкая тень */
@media (hover:hover){.pc{transition:transform .35s var(--fx-ease),box-shadow .35s var(--fx-ease),border-color .25s}.pc:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(16,18,18,.35)}}

/* полёт в корзину */
.fx-fly{position:fixed;z-index:10000;pointer-events:none;border-radius:14px;background:#fff;box-shadow:0 18px 40px -10px rgba(0,0,0,.45);object-fit:contain;will-change:transform,opacity}
.fx-dot{position:fixed;z-index:10000;width:22px;height:22px;border-radius:50%;background:var(--g-y);box-shadow:0 6px 16px rgba(217,148,0,.6);pointer-events:none}
.fx-bump svg{animation:fxBump .65s var(--fx-ease)}
@keyframes fxBump{0%{transform:none}25%{transform:scale(1.25) rotate(-10deg)}50%{transform:scale(.92) rotate(6deg)}75%{transform:scale(1.08)}100%{transform:none}}
[data-cart-count].fx-pop{animation:fxPop .55s var(--fx-ease)}
@keyframes fxPop{0%{transform:scale(1)}35%{transform:scale(1.6)}60%{transform:scale(.85)}100%{transform:scale(1)}}
.fx-plus{position:fixed;z-index:10001;pointer-events:none;font:800 14px/1 var(--disp,system-ui);color:#101212;background:var(--g-y);border-radius:99px;padding:4px 8px;box-shadow:0 6px 14px rgba(217,148,0,.5)}

/* полоса прогресса прокрутки */
.fx-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#FFE88F,#FECE3C 50%,#D99400);pointer-events:none}

/* переход между страницами (Chrome / Edge / Safari 18+): старая уходит вверх и тает, новая поднимается */
@view-transition{navigation:auto}
.hd{view-transition-name:site-header}
.tabbar{view-transition-name:site-tabbar}
::view-transition-old(root){animation:fxOut .22s ease both}
::view-transition-new(root){animation:fxNew .38s var(--fx-ease) both}
@keyframes fxOut{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes fxNew{from{opacity:0;transform:translateY(16px)}}
/* где View Transitions нет — мягкое появление страницы */
@supports not (view-transition-name:none){main{animation:fxNew .45s var(--fx-ease) both}}

/* появление при прокрутке для блоков, которые не входят в основную систему */
.js .fx-rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .75s var(--fx-ease);transition-delay:var(--fx-d,0s)}
.js .fx-rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .btn.y,.pc-buy,.qv-add,.btn.dk,.btn.line,.pc{transition:none!important}.btn.y::after,.pc-buy::after,.qv-add::after{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}main{animation:none}
  .js .fx-rv{opacity:1;transform:none}.fx-prog{display:none}
}