/* smooth-ui: мягкие появления (меню-шторка, модалки, галерея, ответы форм). Легко откатить. */

/* ---- 1. Мега-каталог: высота по контенту (e2/e3 + tn--b) ---- */
.tn--e2 .tn__megain,
.tn--e3 .tn__megain,
.tn.tn--e2.tn--b .tn__megain,
.tn.tn--e3.tn--b .tn__megain {
  min-height: 0;
}
.tn--e2 .tn__pane,
.tn--e3 .tn__pane,
.tn.tn--e2.tn--b .tn__pane,
.tn.tn--e3.tn--b .tn__pane {
  min-height: 0;
}

/* ---- 2. Шторка #tn-mega (класс is-open из nav-v1.js) ---- */
.tn__mega {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .24s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.tn__mega.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* пока hidden — не участвует в layout (как раньше) */
.tn__mega[hidden] {
  display: none !important;
}

/* Пер-категорийный .tn__drop (варианты B и т.п.): opacity + лёгкий выезд */
@keyframes tnIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (min-width: 992px) {
  .tn__cat.has-dd:hover > .tn__drop {
    animation: tnIn .22s cubic-bezier(.22, .61, .36, 1) both;
  }
}

/* ---- 3. Custombox модалки: мягче fade (меньше scale-прыжок) ---- */
@keyframes tdsFadeIn {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes tdsFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.98); }
}
.custombox-fadein.custombox-content.custombox-open {
  animation-name: tdsFadeIn !important;
  animation-timing-function: ease-out !important;
}
.custombox-fadein.custombox-content.custombox-close {
  animation-name: tdsFadeOut !important;
  animation-timing-function: ease-in !important;
}
.custombox-overlay.custombox-open,
.custombox-overlay.custombox-close {
  animation-timing-function: ease !important;
}

/* ---- 4. Галерея карточки: cv-gal fade (не display:none скачком) + legacy slick ---- */
.cv .cv-gal__item {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.cv .cv-gal__item.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity .35s ease, visibility 0s;
}
.product-photo-slider-for .slick-slide {
  transition: opacity .65s ease-in-out !important;
}
.product-photo-slider-for .slick-track {
  transition-timing-function: ease-in-out;
}

/* ---- 5. Ответы форм: появление ---- */
@keyframes tdsRespIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
#modal-contaner .response:not(.d-none),
.static-response:not(.d-none) {
  animation: tdsRespIn .3s ease both;
}

/* ---- 6. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tn__mega,
  .cv .cv-gal__item,
  .cv .cv-gal__item.is-on,
  .product-photo-slider-for .slick-slide {
    transition: none !important;
  }
  .tn__mega {
    transform: none;
  }
  .tn__mega.is-open {
    transform: none;
  }
  @keyframes tnIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes tdsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes tdsFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes tdsRespIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .custombox-fadein.custombox-content.custombox-open,
  .custombox-fadein.custombox-content.custombox-close {
    animation-duration: .01ms !important;
  }
}