/* KanApka — Animations.
 *
 * АРХІТЕКТУРА:
 *   1. Tokens — durations / distances / easing (mobile-first)
 *   2. Keyframes — 5 reusable animations
 *   3. Base — opacity:0 + transition (для hover)
 *   4. .kx-in trigger — вмикає animation на entry
 *   5. :hover — transitions працюють незалежно (без конфлікту)
 *   6. prefers-reduced-motion — повний kill
 *
 * Чому @keyframes для entry, transition для hover:
 *   Якщо обидва transition'и керують transform на одному елементі,
 *   останній перебиває попередній за специфічністю/каскадом. Розділення
 *   через animation (entry) + transition (hover) — два незалежні timeline,
 *   нуль конфліктів.
 */

/* ─────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────── */

:root {
  /* Easing curves */
  --kx-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* entry default — out-expo */
  --kx-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* CTA pop, count-up bump */
  --kx-hover:  cubic-bezier(0.4, 0, 0.2, 1);     /* hover snap */

  /* Durations */
  --kx-d-snap:    0.2s;    /* hover, button feedback */
  --kx-d-quick:   0.45s;   /* small section heads */
  --kx-d-base:    0.55s;   /* intro blocks, generic cards */
  --kx-d-rich:    0.7s;    /* hero, big sheet-cards, stats */
  --kx-d-section: 0.5s;    /* hero section opacity fade */

  /* Distances (mobile-first base) */
  --kx-rise:        10px;
  --kx-rise-stat:   -16px;
  --kx-rise-block:  14px;
  --kx-rise-hero:   10px;
  --kx-rise-step:   -10px;
}

/* Desktop — трошки більший рух пропорційно */
@media (min-width: 768px) {
  :root {
    --kx-rise:        16px;
    --kx-rise-stat:   -20px;
    --kx-rise-block:  20px;
    --kx-rise-hero:   14px;
    --kx-rise-step:   -14px;
  }
}

/* ─────────────────────────────────────────────────────────
   2. REDUCED MOTION KILL-SWITCH
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  /* Видимі стани одразу */
  .hero, .courses-hero, .about-hero,
  .hero__content > *, .courses-hero__content > *, .about-hero__intro > *,
  .stat, .course-card, .thematic-card, .individual-card,
  .article-card, .test-card, .review-card, .teacher-card, .lesson-card,
  .feature, .info-card, .faq__item, .org-card,
  .h-section, .h-display,
  .about__intro, .about__video, .about-hero__video, .about-hero__poster,
  .story__media, .story__card, .story__head,
  .newsletter__content, .newsletter__media,
  .why-choose__media, .why-choose__content,
  .courses__head, .thematic__head, .teachers__head, .reviews__head,
  .faq__head, .tests__head, .organization__head, .individual__head,
  .why-choose__head, .blog__head, .archive header, .search-results__head,
  .process__step, .site-header,
  .process__card, .promo__card, .reviews__card,
  .process__content, .process__poster, .process__steps,
  .promo__content, .promo__media,
  .lessons__head, .lessons__slider,
  .clients__list, .structure__footnote, .teachers-grid__head,
  .teachers__intro, .site-footer, .blog__decor, .reviews__vector {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   3. KEYFRAMES — reusable
   ───────────────────────────────────────────────────────── */

@keyframes kn-fade-up {
  from { opacity: 0; transform: translateY(var(--kx-rise)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kn-fade-up-block {
  from { opacity: 0; transform: translateY(var(--kx-rise-block)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kn-fade-up-hero {
  from { opacity: 0; transform: translateY(var(--kx-rise-hero)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kn-stat-drop {
  from { opacity: 0; transform: translateY(var(--kx-rise-stat)) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes kn-slide-left {
  from { opacity: 0; transform: translateX(var(--kx-rise-step)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes kn-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kn-cta-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes kn-count-bump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes kn-header-down {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────
   4. SITE HEADER — slide-down (one-shot at page load)
   ───────────────────────────────────────────────────────── */

.site-header {
  animation: kn-header-down var(--kx-d-base) var(--kx-out) both;
}

/* ─────────────────────────────────────────────────────────
   5. HERO SECTION (fade) + CONTENT (cascade)
   ───────────────────────────────────────────────────────── */

.hero,
.courses-hero,
.about-hero {
  opacity: 0;
}
.kx-in.hero,
.kx-in.courses-hero,
.kx-in.about-hero {
  animation: kn-fade var(--kx-d-section) var(--kx-out) both;
}

.hero__content > *,
.courses-hero__content > *,
.about-hero__intro > * {
  opacity: 0;
}
.kx-in .hero__content > *,
.kx-in.hero__content > *,
.kx-in .courses-hero__content > *,
.kx-in.courses-hero__content > *,
.kx-in .about-hero__intro > *,
.kx-in.about-hero__intro > * {
  animation: kn-fade-up-hero var(--kx-d-base) var(--kx-out)
             calc(var(--i, 0) * 90ms + 100ms) both;
}

/* CTA — той самий fade-up що й інший hero-вміст. Раніше тут був окремий
   spring-pop (kn-cta-pop), але hover-behaviour на ньому виглядав інакше
   ніж на всіх інших .btn по сайту (через залишковий transform від анімації
   та спрингове easing). За ТЗ "все має бути в одній дизайн-системі" —
   приводимо hero CTA до тієї ж поведінки що й решта кнопок: фейд + slide-up
   на entry, і звичайний .btn:hover translate -2px з ease без пружини. */
/* (правило прибрано — CTA тепер успадковує fade-up-hero з блока вище) */

/* ─────────────────────────────────────────────────────────
   6. STAT CARDS — drop-in from above
   ───────────────────────────────────────────────────────── */

.stat {
  opacity: 0;
  transform: translateY(var(--kx-rise-stat)) scale(0.96);
  /* Hover transition (independent timeline — no conflict з entry animation) */
  transition: transform var(--kx-d-snap) var(--kx-hover),
              box-shadow var(--kx-d-snap) var(--kx-hover);
}
.about__stats.kx-in .stat {
  animation: kn-stat-drop var(--kx-d-rich) var(--kx-out)
             calc(var(--i, 0) * 80ms) both;
}
@media (prefers-reduced-motion: no-preference) {
  .stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
  }
}

/* Count-up bump — на завершенні count-up */
.stat__num,
.facts__number {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.stat__num.kx-count-bump,
.facts__number.kx-count-bump {
  animation: kn-count-bump 0.4s var(--kx-spring);
}

/* ─────────────────────────────────────────────────────────
   7. CARDS з hover lift (course/thematic/individual/test/article)
   ───────────────────────────────────────────────────────── */

.course-card,
.thematic-card,
.individual-card,
.test-card,
.article-card {
  opacity: 0;
  transform: translateY(var(--kx-rise));
  /* Hover transition — independent timeline */
  transition: transform var(--kx-d-snap) var(--kx-hover),
              box-shadow var(--kx-d-snap) var(--kx-hover);
}

.kx-in.course-card,    .kx-in .course-card,
.kx-in.thematic-card,  .kx-in .thematic-card,
.kx-in.individual-card,.kx-in .individual-card,
.kx-in.test-card,      .kx-in .test-card,
.kx-in.article-card,   .kx-in .article-card {
  animation: kn-fade-up var(--kx-d-base) var(--kx-out)
             calc(var(--i, 0) * 60ms) both;
}

@media (prefers-reduced-motion: no-preference) {
  .course-card:hover,
  .thematic-card:hover,
  .individual-card:hover,
  .test-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(26, 26, 26, 0.07);
  }
  .article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(26, 26, 26, 0.06);
  }
}

/* ─────────────────────────────────────────────────────────
   8. CARDS без hover (review/teacher/lesson/feature/info/faq/org)
   ───────────────────────────────────────────────────────── */

.review-card,
.teacher-card,
.lesson-card,
.feature,
.info-card,
.faq__item,
.org-card {
  opacity: 0;
  transform: translateY(var(--kx-rise));
}

.kx-in.review-card,  .kx-in .review-card,
.kx-in.teacher-card, .kx-in .teacher-card,
.kx-in.lesson-card,  .kx-in .lesson-card,
.kx-in.feature,      .kx-in .feature,
.kx-in.info-card,    .kx-in .info-card,
.kx-in.faq__item,    .kx-in .faq__item,
.kx-in.org-card,     .kx-in .org-card {
  animation: kn-fade-up var(--kx-d-base) var(--kx-out)
             calc(var(--i, 0) * 60ms) both;
}

/* ─────────────────────────────────────────────────────────
   9. INTRO BLOCKS / SHEET-CARD WRAPPERS — fade-up block-size
   ───────────────────────────────────────────────────────── */

.about__intro,
.about__video,
.about-hero__poster,
.about-hero__video,
.story__media,
.story__card,
.story__head,
.newsletter__content,
.newsletter__media,
.why-choose__media,
.why-choose__content,
.process__card,
.promo__card,
.reviews__card,
.lessons__head,
.lessons__slider,
.process__content,
.process__poster,
.process__steps,
.promo__content,
.promo__media,
.clients__list,
.structure__footnote,
.teachers-grid__head,
.teachers__intro {
  opacity: 0;
  transform: translateY(var(--kx-rise-block));
}

.kx-in.about__intro,         .kx-in .about__intro,
.kx-in.about__video,         .kx-in .about__video,
.kx-in.about-hero__poster,   .kx-in .about-hero__poster,
.kx-in.about-hero__video,    .kx-in .about-hero__video,
.kx-in.story__media,         .kx-in .story__media,
.kx-in.story__card,          .kx-in .story__card,
.kx-in.story__head,          .kx-in .story__head,
.kx-in.newsletter__content,  .kx-in .newsletter__content,
.kx-in.newsletter__media,    .kx-in .newsletter__media,
.kx-in.why-choose__media,    .kx-in .why-choose__media,
.kx-in.why-choose__content,  .kx-in .why-choose__content,
.kx-in.process__card,        .kx-in .process__card,
.kx-in.promo__card,          .kx-in .promo__card,
.kx-in.reviews__card,        .kx-in .reviews__card,
.kx-in.lessons__head,        .kx-in .lessons__head,
.kx-in.lessons__slider,      .kx-in .lessons__slider,
.kx-in.process__content,     .kx-in .process__content,
.kx-in.process__poster,      .kx-in .process__poster,
.kx-in.process__steps,       .kx-in .process__steps,
.kx-in.promo__content,       .kx-in .promo__content,
.kx-in.promo__media,         .kx-in .promo__media,
.kx-in.clients__list,        .kx-in .clients__list,
.kx-in.structure__footnote,  .kx-in .structure__footnote,
.kx-in.teachers-grid__head,  .kx-in .teachers-grid__head,
.kx-in.teachers__intro,      .kx-in .teachers__intro {
  animation: kn-fade-up-block var(--kx-d-rich) var(--kx-out) both;
}

/* Двоколонкові пари — другий елемент із затримкою 100ms */
.kx-in.about__top .about__video,
.kx-in.story__inner .story__card,
.kx-in.newsletter__inner .newsletter__content,
.kx-in.process__card .process__poster,
.kx-in.promo__card .promo__media {
  animation-delay: 100ms;
}

/* ─────────────────────────────────────────────────────────
   10. SECTION HEADS + TITLES — fade-up швидко
   ───────────────────────────────────────────────────────── */

.h-section,
.h-display,
.about__title,
.organization__title,
.thematic__title,
.teachers__title,
.reviews__title,
.faq__title,
.tests__title,
.individual__title,
.why-choose__title,
.story__title,
.courses__head,
.thematic__head,
.teachers__head,
.reviews__head,
.faq__head,
.tests__head,
.organization__head,
.individual__head,
.why-choose__head,
.blog__head,
.archive header,
.search-results__head {
  opacity: 0;
  transform: translateY(var(--kx-rise-hero));
}

.kx-in.h-section,             .h-section.kx-in,             .kx-in .h-section,
.kx-in.h-display,             .h-display.kx-in,             .kx-in .h-display,
.kx-in .about__title,
.kx-in .organization__title,
.kx-in .thematic__title,
.kx-in .teachers__title,
.kx-in .reviews__title,
.kx-in .faq__title,
.kx-in .tests__title,
.kx-in .individual__title,
.kx-in .why-choose__title,
.kx-in .story__title,
.kx-in.courses__head,         .kx-in .courses__head,
.kx-in.thematic__head,        .kx-in .thematic__head,
.kx-in.teachers__head,        .kx-in .teachers__head,
.kx-in.reviews__head,         .kx-in .reviews__head,
.kx-in.faq__head,             .kx-in .faq__head,
.kx-in.tests__head,           .kx-in .tests__head,
.kx-in.organization__head,    .kx-in .organization__head,
.kx-in.individual__head,      .kx-in .individual__head,
.kx-in.why-choose__head,      .kx-in .why-choose__head,
.kx-in.blog__head,            .kx-in .blog__head,
.kx-in.archive header,        .kx-in .archive header,
.kx-in.search-results__head,  .kx-in .search-results__head {
  animation: kn-fade-up-hero var(--kx-d-quick) var(--kx-out) both;
}

/* ─────────────────────────────────────────────────────────
   11. PROCESS STEPS (1, 2, 3) — slide-from-left
   ───────────────────────────────────────────────────────── */

.process__step {
  opacity: 0;
  transform: translateX(var(--kx-rise-step));
}
.kx-in.process__step,
.kx-in .process__step {
  animation: kn-slide-left var(--kx-d-base) var(--kx-out)
             calc(var(--i, 0) * 100ms) both;
}

/* ─────────────────────────────────────────────────────────
   12. CTA BUTTONS — hover lift (transition only)
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .course-card__cta,
  .thematic-card__cta,
  .test-card__cta {
    transition: transform var(--kx-d-snap) var(--kx-hover),
                box-shadow var(--kx-d-snap) var(--kx-hover);
  }
  .btn:hover,
  .course-card__cta:hover,
  .thematic-card__cta:hover,
  .test-card__cta:hover {
    transform: translateY(-2px);
  }
  .btn:active,
  .course-card__cta:active,
  .thematic-card__cta:active,
  .test-card__cta:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
  }
}

/* ─────────────────────────────────────────────────────────
   13. FAQ ACCORDION — chevron + accent line
   ───────────────────────────────────────────────────────── */

.faq__chevron {
  transition: transform 0.3s var(--kx-out);
}
.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
}

.faq__item {
  position: relative;
  transition: background var(--kx-d-snap) var(--kx-hover);
}
.faq__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: #f0641f;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.3s var(--kx-out);
  pointer-events: none;
}
.faq__item.is-open::before {
  transform: scaleY(1);
}

/* ─────────────────────────────────────────────────────────
   14. SITE FOOTER + DECORATIVE SVGs — gentle fade-in
   ───────────────────────────────────────────────────────── */

.site-footer,
.blog__decor,
.reviews__vector,
.teachers__nav,
.teachers__dots {
  opacity: 0;
}
.kx-in.site-footer,
.kx-in.blog__decor,
.kx-in.reviews__vector,
.kx-in.teachers__nav,
.kx-in.teachers__dots {
  animation: kn-fade var(--kx-d-base) var(--kx-out) both;
}

/* ─────────────────────────────────────────────────────────
   15. GENERIC data-kx-anim — для довільних елементів
   ───────────────────────────────────────────────────────── */

[data-kx-anim] {
  opacity: 0;
  transform: translateY(var(--kx-rise-hero));
}
[data-kx-anim].kx-in {
  animation: kn-fade-up-hero var(--kx-d-base) var(--kx-out)
             calc(var(--i, 0) * 60ms) both;
}