/* Premium motion layer — additive only. Filled in across tasks. */

/* --- Lenis smooth scroll --- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Card hover glow (recommendation cards) ---
   No CSS transform here: GSAP owns the card transform during v-tilt, so the
   hover "lift" is expressed as a soft glow/shadow only. Resting shadow = none. */
.product-block.recommend {
  transition: box-shadow 0.35s ease;
}
.product-block.recommend:hover {
  box-shadow: 0 18px 40px -22px rgba(243, 155, 43, 0.55);
}
.theme-dark .product-block.recommend:hover {
  box-shadow: 0 18px 44px -20px rgba(243, 155, 43, 0.45);
}

/* --- Button light sheen on hover (skip sold-out) ---
   Resting: sheen parked off-screen; only position/overflow added, no visual change at rest. */
.orange-btn { position: relative; overflow: hidden; }
.orange-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.orange-btn:not(.out_stock):hover::after {
  animation: if-sheen 0.7s ease;
}
@keyframes if-sheen {
  from { left: -75%; }
  to { left: 130%; }
}

/* --- Modal enter polish (enter only; open/resting look unchanged) ---
   Payment modal panel = .remodal, cart popup panel = .b-popup; both use the if-fade transition. */
.if-fade-enter-active .remodal,
.if-fade-enter-active .b-popup {
  animation: if-modal-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes if-modal-in {
  from { transform: translateY(12px) scale(0.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* --- Product rows: hover-only card surface + cursor spotlight + tilt (v-tilt) ---
   Resting look unchanged: position/isolation are visually inert; the whole
   surface + glow live in ::before at opacity:0 until hover. Negative inset gives
   card breathing room WITHOUT layout shift (absolute layer). The glow follows the
   cursor via --mx/--my (set by v-tilt); with no cursor it falls back to centred 50%. */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  z-index: -1;
  border-radius: 16px;
  background:
    radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
      rgba(243, 155, 43, 0.22), transparent 60%),
    #f6f6f6;
  box-shadow: 0 18px 40px -22px rgba(243, 155, 43, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product:hover::before { opacity: 1; }
.theme-dark .product::before {
  background:
    radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
      rgba(243, 155, 43, 0.24), transparent 60%),
    #2d2d2d;
}

/* Cursor-following spotlight BORDER — makes the card edge read as an intentional
   lit contour instead of the fill glow clipping abruptly. A masked gradient "ring"
   (border-box XOR content-box shows only the 1.5px contour): a faint full orange
   outline that brightens where the cursor is (via --mx/--my). */
.product::after {
  content: "";
  position: absolute;
  inset: -10px -16px;
  z-index: -1;
  border-radius: 16px;
  padding: 1.5px;
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(243, 155, 43, 0.85), rgba(243, 155, 43, 0) 45%),
    linear-gradient(rgba(243, 155, 43, 0.22), rgba(243, 155, 43, 0.22));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product:hover::after { opacity: 1; }
.theme-dark .product::after {
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(243, 155, 43, 0.95), rgba(243, 155, 43, 0) 45%),
    linear-gradient(rgba(243, 155, 43, 0.3), rgba(243, 155, 43, 0.3));
}

/* Amount/price pills (.product__value-row) sit as solid grey fills on top of the
   card glow, so the spotlight hard-cuts against their edge. On card hover, line them
   with a soft orange ring + glow so the edge reads as a lit contour, not a grey cut. */
.product__value-row {
  transition: box-shadow 0.3s ease;
}
.product:hover .product__value-row {
  box-shadow: 0 0 0 1px rgba(243, 155, 43, 0.35), 0 8px 18px -10px rgba(243, 155, 43, 0.4);
}

/* Recommendation cards: same cursor spotlight style as product rows (glow + lit
   border), so the two card types don't look different. The card already has its own
   #F6F6F6 surface, so the overlays sit at inset:0. v-tilt already writes --mx/--my. */
.product-block.recommend {
  position: relative;
  isolation: isolate;
}
.product-block.recommend::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 15px;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
    rgba(243, 155, 43, 0.20), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product-block.recommend:hover::before { opacity: 1; }
.product-block.recommend::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 15px;
  padding: 1.5px;
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(243, 155, 43, 0.85), rgba(243, 155, 43, 0) 45%),
    linear-gradient(rgba(243, 155, 43, 0.22), rgba(243, 155, 43, 0.22));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product-block.recommend:hover::after { opacity: 1; }
.theme-dark .product-block.recommend::before {
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
    rgba(243, 155, 43, 0.22), transparent 60%);
}
.theme-dark .product-block.recommend::after {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(243, 155, 43, 0.95), rgba(243, 155, 43, 0) 45%),
    linear-gradient(rgba(243, 155, 43, 0.3), rgba(243, 155, 43, 0.3));
}

/* Recommendation cards stack with no vertical gap in production; give them
   breathing room so adjacent hover glow/borders don't crowd each other. */
.main__recommendation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Hero mascot idle breathing (no cursor) --- */
.bgs-header-decor::before {
  animation: hero-breathe 5s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}
@media (prefers-reduced-motion: reduce) {
  .bgs-header-decor::before { animation: none; }
}

/* --- Footer mascot idle breathing — same rhythm family as the hero cat --- */
.bgs-footer-fly::before {
  animation: hero-breathe 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bgs-footer-fly::before { animation: none; }
}

/* Chip hover — soft drop-shadow for depth (paired with the JS lift/tilt/pop).
   Header and footer chips share the treatment.
   The .if-chip-hover class is only toggled when motion is allowed. */
.bgs-header-decor .icon-chip,
.bgs-footer-decor .icon-chip {
  transition: filter 0.3s ease;
}
.bgs-header-decor .icon-chip.if-chip-hover,
.bgs-footer-decor .icon-chip.if-chip-hover {
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.4));
}

/* --- Category filter: sliding active pill + soft hover + press + content swap ---
   Buttons are opaque orange chips, so the active indicator is a black overlay pill
   (navPill.js) carrying the active label; the active button is restyled to a plain
   orange chip so the pill provides the black look. --- */
.main__navigation.if-nav-fx { position: relative; }
/* Скользящая пилюля активной категории: чистый оранжевый «фон-слайдер» ПОД
   ссылками (ссылки подняты z-index'ом выше и сами показывают текст + бейдж),
   поэтому собственная подпись пилюли спрятана. */
.if-nav-pill {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6a63c, #e0840f);
  box-shadow: 0 12px 26px -14px rgba(224, 132, 15, 0.85);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
  visibility: hidden;
}
.if-nav-pill__txt { visibility: hidden; }
.main__navigation.if-nav-fx .main__navigation-link {
  position: relative;
  z-index: 4;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.12s ease, box-shadow 0.25s ease;
}
/* Фон активной рисует пилюля — сама ссылка прозрачная, текст тёмный на оранжевом */
.main__navigation.if-nav-fx .main__navigation-link.active,
.theme-dark .main__navigation.if-nav-fx .main__navigation-link.active {
  background: transparent;
  border-color: transparent;
  color: #1c1712;
}
.main__navigation.if-nav-fx .main__navigation-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -14px rgba(224, 132, 15, 0.6);
}
.main__navigation.if-nav-fx .main__navigation-link:active {
  transform: translateY(0) scale(0.97);
}
.if-sections {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.if-swap-enter-active,
.if-swap-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.if-swap-enter-from { opacity: 0; transform: translateY(14px); }
.if-swap-leave-to { opacity: 0; transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
  .main__navigation.if-nav-fx .main__navigation-link:hover { transform: none; box-shadow: none; }
  .main__navigation.if-nav-fx .main__navigation-link:active { transform: none; }
  .if-swap-enter-active,
  .if-swap-leave-active { transition: none; }
}

/* --- Reduced-motion guards for the polish layer --- */
@media (prefers-reduced-motion: reduce) {
  .product-block.recommend { transition: none; }
  .product::before,
  .product::after { transition: none; }
  .product__value-row { transition: none; }
  .product-block.recommend::before,
  .product-block.recommend::after { transition: none; }
  .orange-btn:not(.out_stock):hover::after { animation: none; }
  .if-fade-enter-active .remodal,
  .if-fade-enter-active .b-popup { animation: none; }
}

/* --- Клиентский фильтр категорий --- */
/* Скрытые фильтром секции: display прод-CSS не должен перебить [hidden]. */
.if-sections .product-section[hidden] { display: none !important; }

/* --- Header micro-interactions ---
   Каждому элементу шапки — ховер, намекающий на его функцию. Флажок языка
   уже покрыт langswitch.css (наклон/флип) — здесь его не трогаем.
   Фон за навбаром — оранжевая лента шапки (#F39B2B), поэтому акцент
   подчёркивания — чёрная «тушь» #040000, читаемая на оранжевом. */

/* Плавный возврат: глобальный .opacity объявляет transition только в :hover,
   из-за чего элемент «отпрыгивает» мгновенно. В скоупе шапки даём переход в
   базовом состоянии (motion.css грузится после style.css — на ховере тоже
   победит этот transition, что и нужно: opacity уезжает и приезжает мягко). */
.main-header .opacity { transition: opacity 0.3s ease; }

/* Пункты меню: текст больше не «гаснет» — вместо этого слева направо
   прорисовывается волнистое подчёркивание (волна = мотив бренда).
   ::after невидим в покое (clip-path прячет целиком) — resting look unchanged. */
.header__menu .header__item:hover,
.header__menu .header__link:hover { opacity: 1; }
.header__menu .header__link {
  position: relative;
}
.header__menu .header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3c2.7-2.2 5.3-2.2 8 0s5.3 2.2 8 0' fill='none' stroke='%23040000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 16px 6px;
  /* clip-path вместо scaleX: рисуем слева направо, не растягивая тайл волны */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@media (hover: hover) {
  .header__menu .header__link:hover::after { clip-path: inset(0 0 0 0); }
}
.header__menu .header__link:focus-visible::after { clip-path: inset(0 0 0 0); }

/* «Войти» — CTA: тот же световой блик (sheen), что у оранжевых кнопок
   покупки, + подъём на 1px с тенью. На чёрной пилюле блик мягче (0.35). */
.main-header .header__link-login {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
}
.main-header .header__link-login::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .main-header .header__link-login:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(4, 0, 0, 0.55);
  }
  .main-header .header__link-login:hover::after { animation: if-sheen 0.7s ease; }
}
.main-header .header__link-login:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(4, 0, 0, 0.55);
}
.main-header .header__link-login:active { transform: translateY(0) scale(0.97); }

/* Тумблер темы: кноб «подталкивается» на 4px в сторону, куда переключит
   клик, — превью действия (transition: left уже есть в style.css), плюс
   мягкое кольцо вокруг пилюли. Тёмная тема — кноб справа, толкаем влево. */
.theme-block .button-theme-change::before { transition: box-shadow 0.3s ease; }
@media (hover: hover) {
  .theme-block .button-theme-change:hover { opacity: 1; }
  .theme-block .button-theme-change:hover::before { box-shadow: 0 0 0 3px rgba(4, 0, 0, 0.15); }
  .theme-dark .theme-block .button-theme-change:hover::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
  .button-theme-change:hover::after { left: 8px; }
  .theme-dark .button-theme-change:hover::after { left: 18px; }
}
.theme-block .button-theme-change:focus-visible::before { box-shadow: 0 0 0 3px rgba(4, 0, 0, 0.15); }
.theme-dark .theme-block .button-theme-change:focus-visible::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }

/* --- Активный пункт меню + перетекающая волна (ingri-header.js) ---
   Активная страница: волна закреплена под пунктом (aria-current="page";
   Blade рендерит для полной загрузки, ingri-header.js переставляет после
   Swup). При загрузке подчёркивание мягко прорисовывается слева направо. */
.header__menu .header__link.is-active::after {
  clip-path: inset(0 0 0 0);
  animation: if-underline-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}
@keyframes if-underline-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Перетекающая волна: один элемент скользит между пунктами (десктоп, без
   reduced-motion — включает ingri-header.js классом if-wave-on). Пер-ссылочные
   подчёркивания при этом гасятся — остаются как no-JS/мобильный фолбэк.
   Тайл тот же, что у ::after: движение width открывает волну, не растягивая. */
.header__menu.if-wave-on { position: relative; }
.header__menu.if-wave-on .header__link::after { content: none; }
.if-menu-wave {
  position: absolute;
  bottom: -8px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3c2.7-2.2 5.3-2.2 8 0s5.3 2.2 8 0' fill='none' stroke='%23040000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 16px 6px;
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .main-header .opacity { transition: none; }
  .header__menu .header__link::after { transition: none; }
  .header__menu .header__link.is-active::after { animation: none; }
  .main-header .header__link-login { transition: none; }
  .main-header .header__link-login:hover,
  .main-header .header__link-login:active,
  .main-header .header__link-login:focus-visible { transform: none; }
  .main-header .header__link-login:hover::after { animation: none; }
  .theme-block .button-theme-change::before { transition: none; }
  /* Подталкивание кноба — движение: в reduce возвращаем штатные позиции */
  .button-theme-change:hover::after { left: 4px; }
  .theme-dark .button-theme-change:hover::after { left: 22px; }
}