/* =========================================================
   Анімації. Працюють лише коли JS додав клас .is-motion на <html>
   (рух дозволений системою і не вимкнений у панелі доступності).
   Без JS або з вимкненим рухом увесь вміст видно одразу.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
}

/* ---------- Кнопки: заливка "наповнюється" знизу ---------- */
.btn,
.tag {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before,
.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-in-out);
}
.btn:hover,
.tag:hover { background: var(--fg); color: var(--bg); }
.is-motion .btn:hover,
.is-motion .tag:hover { color: var(--fg); }
.is-motion .btn:hover::before,
.is-motion .tag:hover::before { transform: translateY(0); }
.btn--pill { transition: color 0.5s var(--ease-in-out), letter-spacing 0.5s var(--ease-out); }
.is-motion .btn--pill:hover { letter-spacing: 0.04em; }

/* без руху кнопки просто міняють кольори, як і раніше */
:root:not(.is-motion) .btn:hover,
:root:not(.is-motion) .tag:hover { background: var(--bg); color: var(--fg); }

/* ---------- Прогрес прокрутки, як доріжка аудіо ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 4px;
  pointer-events: none;
  background: #ffffff;
  mix-blend-mode: difference;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

/* ---------- Інтро-лоадер ---------- */
/* Заслінка до появи лоадера. Сама зникає через 2.5 с, навіть якщо JS не спрацював */
.is-intro::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 199;
  background: var(--fg);
  animation: intro-fallback 0.01s linear 2.5s forwards;
}
@keyframes intro-fallback { to { visibility: hidden; } }

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--fg);
  color: var(--bg);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s var(--ease-in-out);
}
.loader--out { clip-path: inset(0 0 100% 0); }

.loader__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.loader__logo {
  width: clamp(1.75rem, 3vw, 2.5rem);
  height: auto;
  transform: rotate(90deg);
  animation: loader-pop 0.6s var(--ease-out) both;
}
.loader__bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: clamp(2.5rem, 5vw, 4rem);
}
.loader__bar {
  width: 5px;
  height: 100%;
  border-radius: 3px;
  background: currentColor;
  transform-origin: 50% 50%;
  animation: bar-talk 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.11s);
}
.loader__word {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  animation: loader-word 0.7s var(--ease-out) 0.15s both;
}

@keyframes loader-pop { from { opacity: 0; transform: rotate(90deg) scale(0.4); } }
@keyframes loader-word { from { opacity: 0; transform: translateX(-0.5em); } }
@keyframes bar-talk {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

/* ---------- Звукова хвиля в першому екрані ---------- */
.hero .container {
  flex: 1;
  grid-template-rows: auto auto 1fr;
}
.wave {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: clamp(3.5rem, 9vw, 8rem);
  margin-top: 2.5rem;
}
.wave__bar {
  flex: 1 1 0;
  max-width: 6px;
  height: 100%;
  border-radius: 3px;
  background: var(--fg);
  transform: scaleY(var(--h, 0.3));
}
.is-motion .wave__bar {
  animation: wave-bar var(--dur, 1.2s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.07s);
}
.is-motion .wave--paused .wave__bar { animation-play-state: paused; }

@keyframes wave-bar {
  from { transform: scaleY(calc(var(--h, 0.3) * 0.25)); }
  to { transform: scaleY(var(--h, 0.3)); }
}

/* ---------- Розбивка на літери (для анімації) ---------- */
.split { display: inline-block; white-space: nowrap; }
.split__char { display: inline-block; }

/* ---------- Перший екран: поява після лоадера ---------- */
.is-motion .hero__date-part,
.is-motion .hero__lead,
.is-motion .hero .split__char,
.is-motion .wave {
  opacity: 0;
}
.is-motion.is-ready .hero__date-part {
  animation: rise 0.9s var(--ease-out) both;
  animation-delay: calc(0.05s + var(--i, 0) * 0.08s);
}
.is-motion.is-ready .hero .split__char {
  animation: char-in 1s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--i) * 0.06s);
}
.is-motion.is-ready .hero__lead { animation: rise 1s var(--ease-out) 0.65s both; }
.is-motion.is-ready .wave { animation: fade 1.2s ease 0.8s both; }

@keyframes rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes char-in {
  from { opacity: 0; transform: translateY(0.35em) rotate(6deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- Поява при прокрутці ---------- */
.is-motion [data-reveal] {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 0.1s);
}
.is-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Рядки великих заголовків виїжджають з-під маски */
.title__line-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;
  margin-block: -0.06em;
}
.title__line-inner { display: block; }
.is-motion .title--xl .title__line-inner {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.12s);
}
.is-motion .title--xl.is-in .title__line-inner { transform: none; }

/* «Невидиме видимим»: проявляється з розмиття */
.is-motion .flashmob__title .title__line-inner,
.is-motion .flashmob__outro-line {
  filter: blur(18px);
  opacity: 0.15;
  transition: transform 1.1s var(--ease-out), filter 1.4s var(--ease-out), opacity 1.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.25s);
}
.is-motion .flashmob__title.is-in .title__line-inner,
.is-motion .flashmob__outro.is-in .flashmob__outro-line { filter: none; opacity: 1; }

/* «Зображення», «Кнопка 1»: друкується, як читає скринрідер */
.is-motion .problem__phrase .split__char {
  opacity: 0;
  transition: opacity 0.01s linear;
  transition-delay: calc(var(--line, 0) * 0.75s + var(--i) * 0.045s);
}
.is-motion .problem__phrases.is-in .split__char { opacity: 1; }
.problem__caret {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-inline-start: 0.06em;
  vertical-align: -0.05em;
  background: currentColor;
  opacity: 0;
}
.is-motion .problem__phrases.is-in .problem__phrase:last-child .problem__caret {
  animation: caret 1s steps(1) 2.4s infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Перекреслене око */
.is-motion .problem__icon {
  opacity: 0;
  transform: scale(0.7) rotate(-12deg);
  transition: opacity 0.8s ease 1.2s, transform 1.2s var(--ease-out) 1.2s;
}
.is-motion .problem__phrases.is-in ~ .problem__icon { opacity: 1; transform: none; }

/* Великі номери кроків */
.is-motion .big-steps__item::before {
  opacity: 0;
  transform: translateY(0.35em) scale(0.5);
  transition: opacity 0.6s ease, transform 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 0.1s + 0.15s);
}
.is-motion .big-steps__item.is-in::before { opacity: 1; transform: translateY(0.35em); }

/* Логотип у футері "грає" */
.is-motion .footer__logo { animation: play-pulse 2.4s ease-in-out infinite; }
@keyframes play-pulse {
  0%, 70%, 100% { transform: rotate(90deg) scale(1); }
  80% { transform: rotate(90deg) scale(1.25); }
}

/* Підстраховка: якщо користувач вимкнув рух у системі, нічого не рухається */
@media (prefers-reduced-motion: reduce) {
  .loader, .progress { display: none; }
  .wave__bar { animation: none !important; }
}