/* Дополнительные стили поверх скомпилированного Tailwind (style.css):
   анимации появления, волны hero, чат-виджет, мобильное меню. */

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Появление блоков при скролле (аналог framer whileInView) --- */
[data-reveal] {
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(var(--ty, 24px)); }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scalex"] { transform: scaleX(0); transform-origin: 0% 50%; }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Волны hero: плавное "дыхание" каждой линии --- */
@keyframes ib-float {
  0%   { transform: translateY(0); }
  32%  { transform: translateY(calc(var(--fy) * -1)); }
  50%  { transform: translateY(0); }
  72%  { transform: translateY(calc(var(--fy) * .55)); }
  100% { transform: translateY(0); }
}
#hero svg g[data-float] {
  animation: ib-float var(--dur) cubic-bezier(.45, 0, .55, 1) var(--delay) infinite;
}
#hero svg path, #contact svg path {
  transition: opacity 2.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #hero svg g[data-float] { animation: none; }
}

/* --- Шапка --- */
header[data-header] .ib-icon-close { display: none; }
header[data-header].is-menu-open .ib-icon-close { display: block; }
header[data-header].is-menu-open .ib-icon-menu { display: none; }
#mobile-nav {
  transition: opacity .18s ease, transform .18s ease;
}
#mobile-nav.is-entering { opacity: 0; transform: translateY(-6px); }

/* --- Раскрывающиеся блоки (сценарии, кейсы, аккордеон шагов) --- */
.ib-collapse {
  overflow: hidden;
  transition: height .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.ib-chevron {
  display: inline-flex;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
[aria-expanded="true"] > .ib-chevron { transform: rotate(180deg); }

/* --- Линия прогресса в клиентском пути --- */
#journey [data-journey-progress] { transition: width .45s cubic-bezier(.22, 1, .36, 1); }

/* --- Плавающая кнопка чата --- */
@keyframes ib-pulse {
  0%   { opacity: .45; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.45); }
}
[data-chat-toggle] { transition: transform .2s ease, background-color .2s ease; }
[data-chat-toggle]:hover { transform: scale(1.05); }
[data-chat-toggle]:active { transform: scale(.95); }
[data-chat-toggle] .ib-pulse { animation: ib-pulse 2.2s ease-out infinite; }
[data-chat-toggle].is-open .ib-pulse { display: none; }
[data-chat-toggle] .ib-icon-x { display: none; }
[data-chat-toggle].is-open .ib-icon-x { display: flex; }
[data-chat-toggle].is-open .ib-icon-chat { display: none; }

/* --- Панель чата --- */
[data-chat-panel] {
  transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}
[data-chat-panel].is-entering { opacity: 0; transform: translateY(24px) scale(.96); }
[data-chat-panel] textarea { field-sizing: content; }

@keyframes ib-dots {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-2px); }
}
.ib-typing span { animation: ib-dots 1.1s ease-in-out infinite; }
.ib-typing span:nth-child(2) { animation-delay: .15s; }
.ib-typing span:nth-child(3) { animation-delay: .3s; }

.ib-msg { animation: ib-msg-in .25s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ib-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Форма: состояние успеха --- */
[data-form-success] { animation: ib-scale-in .4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ib-scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }