/* =========================================================
   BrainCraft — animations.css
   Додатковий файл: анімації появи + кілька візуальних фіксів.
   Підключається ПІСЛЯ style.css, нічого в ньому не змінює напряму.
   Можна безпечно видалити цей файл — сайт продовжить працювати.
   ========================================================= */

:root {
  --brand-yellow: #ffff23;
  --brand-yellow-rgb: 255, 255, 35;
}

/* ---------- ФІКС: єдиний жовтий колір скрізь, точно як у логотипі ----------
   У сайті було 2 відтінки жовтого: #ffff23 (більшість елементів)
   і трохи тьмяніший #fbff1e (тільки в модалках). Тепер обидва
   уніфіковані в --brand-yellow = #ffff23 — це точний колір
   з логотипу BRAINCRAFT, використовується всюди без винятків. */
.nav__link:hover,
.social__link:hover,
.welcome-section__title,
.statistics-list__title,
.service-list__icon,
.service-list__button:hover,
#priceListModal .table th {
  color: var(--brand-yellow) !important;
}
.swiper-pagination-bullet-active,
.carousel__button,
.modal-header,
.modal-body button,
.order-modal__link_email,
.review-card__avatar {
  background-color: var(--brand-yellow) !important;
}
.carousel__button,
.modal-content,
#priceListModal .table,
#priceListModal .table th {
  border-color: var(--brand-yellow) !important;
}
.service-list__button::after,
.review-card__stars {
  color: var(--brand-yellow);
}

/* ---------- базова плавність появи сторінки ---------- */
body {
  animation: pageFadeIn 0.6s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- ФІКС: підзаголовок у банері був замалий (16px) ---------- */
.welcome-section__text {
  font-size: 21px;
  line-height: 1.5;
}
@media (max-width: 1119.98px) {
  .welcome-section__text {
    font-size: 18px;
  }
}

/* «Про нас» і «Наші переваги» — вирівнювання по ширині (за проханням) */
.about-section__text,
.benefits-list__text {
  text-align: justify;
}

/* ---------- HEADER: легка поява при завантаженні ---------- */
.header {
  animation: headerDrop 0.7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes headerDrop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo__image {
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.logo:hover .logo__image {
  transform: rotate(-4deg) scale(1.05);
}

.nav__link {
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--brand-yellow);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.nav__link:hover::after {
  width: 100%;
}

.social__link {
  display: inline-flex;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease;
}
.social__link:hover {
  transform: translateY(-3px) scale(1.15);
}

.burger-menu {
  transition: right .4s cubic-bezier(.22,.61,.36,1);
}
.burger-menu .nav__item {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .4s ease, transform .4s ease;
}
.burger-menu_opened .nav__item {
  opacity: 1;
  transform: translateX(0);
}
.burger-menu_opened .nav__item:nth-child(1) { transition-delay: .06s; }
.burger-menu_opened .nav__item:nth-child(2) { transition-delay: .11s; }
.burger-menu_opened .nav__item:nth-child(3) { transition-delay: .16s; }
.burger-menu_opened .nav__item:nth-child(4) { transition-delay: .21s; }
.burger-menu_opened .nav__item:nth-child(5) { transition-delay: .26s; }

/* ---------- HERO: поява заголовка й тексту по черзі ----------
   Кнопку "Замовити роботу" свідомо НЕ анімуємо — лишається як є. */
.welcome-section__logo,
.welcome-section__title,
.welcome-section__text {
  opacity: 0;
  animation: heroRise .8s cubic-bezier(.22,.61,.36,1) both;
}
.welcome-section__logo   { animation-delay: .05s; }
.welcome-section__title  { animation-delay: .2s; }
.welcome-section__text   { animation-delay: .38s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Загальний механізм scroll-reveal ----------
   animations.js додає клас "in-view" на батьківський контейнер,
   коли він з'являється у в'юпорті. */

.statistics-list__item,
.service-list__item,
.benefits-list__item,
.about-section__text,
.about-section__next,
.reviews-section__title,
.carousel,
.footer__container {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

.statistics-list.in-view .statistics-list__item,
.service-list.in-view .service-list__item,
.benefits-list.in-view .benefits-list__item,
.about-section.in-view .about-section__text,
.about-section.in-view .about-section__next,
.reviews-section.in-view .reviews-section__title,
.reviews-section.in-view .carousel,
.footer.in-view .footer__container {
  opacity: 1;
  transform: translateY(0);
}

.statistics-list.in-view .statistics-list__item:nth-child(1) { transition-delay: .04s; }
.statistics-list.in-view .statistics-list__item:nth-child(2) { transition-delay: .12s; }
.statistics-list.in-view .statistics-list__item:nth-child(3) { transition-delay: .20s; }
.statistics-list.in-view .statistics-list__item:nth-child(4) { transition-delay: .28s; }

.service-list.in-view .service-list__item:nth-child(1) { transition-delay: .03s; }
.service-list.in-view .service-list__item:nth-child(2) { transition-delay: .08s; }
.service-list.in-view .service-list__item:nth-child(3) { transition-delay: .13s; }
.service-list.in-view .service-list__item:nth-child(4) { transition-delay: .18s; }
.service-list.in-view .service-list__item:nth-child(5) { transition-delay: .23s; }
.service-list.in-view .service-list__item:nth-child(6) { transition-delay: .28s; }
.service-list.in-view .service-list__item:nth-child(7) { transition-delay: .33s; }
.service-list.in-view .service-list__item:nth-child(8) { transition-delay: .38s; }

/* переваги (кружечки) — тільки плавна поява всього блока,
   БЕЗ анімації на самих іконках/кружечках, як і просили */
.benefits-list.in-view .benefits-list__item:nth-child(1) { transition-delay: .04s; }
.benefits-list.in-view .benefits-list__item:nth-child(2) { transition-delay: .12s; }
.benefits-list.in-view .benefits-list__item:nth-child(3) { transition-delay: .20s; }
.benefits-list.in-view .benefits-list__item:nth-child(4) { transition-delay: .28s; }

.about-section.in-view .about-section__next { transition-delay: .18s; }

/* ---------- STATISTICS: легкий hover ---------- */
.statistics-list__item {
  transition-property: opacity, transform, box-shadow, background;
  transition-duration: .7s, .7s, .35s, .35s;
}
.statistics-list__item:hover {
  background: #363636;
  box-shadow: 0 16px 34px -14px rgba(var(--brand-yellow-rgb), 0.18);
  transform: translateY(-4px);
}
.statistics-list__title {
  font-variant-numeric: tabular-nums;
}

/* ---------- SERVICES: hover-підйом картки й іконки ---------- */
.service-list__item {
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: .7s, .35s, .35s, .35s;
  will-change: transform;
}
.service-list__item:hover {
  transform: translateY(-6px);
  border-color: var(--brand-yellow);
  box-shadow: 0 18px 36px -16px rgba(var(--brand-yellow-rgb), 0.22);
}
.service-list__icon {
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.service-list__item:hover .service-list__icon {
  transform: rotate(-8deg) scale(1.12);
}
.service-list__button {
  position: relative;
}
.service-list__button::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0; height: 1px;
  background: var(--brand-yellow);
  transition: width .35s ease, left .35s ease;
}
.service-list__button:hover::after {
  width: 100%; left: 0;
}

/* ---------- ABOUT: стрілочка до відгуків плаває ---------- */
.about-section__arrow {
  animation: arrowFloat 2.6s ease-in-out infinite;
}
@keyframes arrowFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-4px, -8px) rotate(-4deg); }
}
/* Кружечки-іконки переваг: жодних hover-анімацій, за проханням — залишені без змін */

/* ---------- Відгуки: кастомні текстові картки замість фото ---------- */
.review-card {
  background: #1c1c1c;
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  transition: transform .4s cubic-bezier(.22,.61,.36,1),
              border-color .3s ease, box-shadow .3s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-yellow);
  box-shadow: 0 18px 36px -18px rgba(var(--brand-yellow-rgb), 0.28);
}
.review-card__stars {
  display: flex;
  gap: 4px;
  font-size: 13px;
  color: var(--brand-yellow);
}
.review-card__text {
  color: #d9d9d9;
  font-size: 15px;
  line-height: 1.6;
  flex-grow: 1;
}
.review-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #2c2c2c;
}
.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.review-card__name {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.review-card__uni {
  color: #9a9a9a;
  font-size: 12.5px;
  margin-top: 2px;
}
.carousel__wrapper {
  align-items: stretch !important;
}

/* ---------- ФІКС: рамка кнопки "Замовити роботу" мала гострі кути
   на телефоні, хоча сама кнопка — заокруглена. Причина: райдужне
   світіння (::before) не мало border-radius. Додаємо його. ---------- */
.button-85::before {
  border-radius: 13px;
}
.button-85::after {
  border-radius: 10px;
}

.carousel__button {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.carousel__button:hover {
  transform: translateY(-50%) scale(1.1);
}
@media (max-width: 767.98px) {
  .carousel__button:hover {
    transform: scale(1.1);
  }
}

/* ---------- MODALS: приємніша поява + трохи темніший фон ---------- */
.modal.fade .modal-dialog {
  transform: scale(.92) translateY(-24px);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}
.modal-content {
  background-color: rgba(0, 0, 0, 0.85);
}
.modal-backdrop.show {
  opacity: 0.75;
}
.order-modal__link,
.authors-modal__telegram {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, box-shadow .3s ease;
}
.order-modal__link:hover,
.authors-modal__telegram:hover {
  box-shadow: 0 10px 22px -8px rgba(var(--brand-yellow-rgb), 0.35);
}

/* ---------- FOOTER ---------- */
.footer .social__link {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

::selection {
  background: var(--brand-yellow);
  color: #000;
}

/* ---------- доступність: поважаємо reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .statistics-list__item,
  .service-list__item,
  .benefits-list__item,
  .about-section__text,
  .about-section__next,
  .reviews-section__title,
  .carousel,
  .footer__container,
  .welcome-section__logo,
  .welcome-section__title,
  .welcome-section__text {
    opacity: 1 !important;
    transform: none !important;
  }
}