/* Рух на сайті gligle.app. Спільний для / і /business/.
   [data-rise] > *  — поява першого екрана при завантаженні (CSS, без JS).
   [data-rv]  > *   — поява блоків при прокрутці: motion.js додає html.js і ставить .in,
                      коли елемент потрапляє у вікно. Без JS усе видно одразу.
   Усе вимикається при prefers-reduced-motion. */

:root { --ease: cubic-bezier(.22, 1, .36, 1); }
html { scroll-behavior: smooth; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Перший екран */
[data-rise] > * { animation: rise .8s var(--ease) both; }
[data-rise] > :nth-child(2) { animation-delay: 90ms; }
[data-rise] > :nth-child(3) { animation-delay: 180ms; }
[data-rise] > :nth-child(4) { animation-delay: 270ms; }
[data-rise] > :nth-child(5) { animation-delay: 380ms; }
[data-rise] > :nth-child(n+6) { animation-delay: 460ms; }

/* Поява при прокрутці. Після анімації motion.js ставить .done, і правило знімається,
   щоб далі працювали власні переходи елемента (hover карток тощо). */
.js [data-rv] > :not(.done) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.js [data-rv] > :nth-child(2):not(.done) { transition-delay: 70ms; }
.js [data-rv] > :nth-child(3):not(.done) { transition-delay: 140ms; }
.js [data-rv] > :nth-child(4):not(.done) { transition-delay: 210ms; }
.js [data-rv] > :nth-child(5):not(.done) { transition-delay: 280ms; }
.js [data-rv] > :nth-child(6):not(.done) { transition-delay: 350ms; }
.js [data-rv] > :nth-child(n+7):not(.done) { transition-delay: 400ms; }
.js [data-rv] > .in:not(.done) { opacity: 1; transform: none; }
/* вкладений контейнер сам не ховається, ховаються його діти */
.js [data-rv] > [data-rv]:not(.done) { opacity: 1; transform: none; transition: none; }

/* Кнопки */
.js .btn, .js .btn2 {
  transition: transform .25s var(--ease), box-shadow .3s ease-out, background .2s, border-color .2s;
}
.btn:hover, .btn2:hover { transform: translateY(-1px); }
.btn:active, .btn2:active { transform: translateY(0) scale(.98); transition-duration: .08s; }

/* Акордеон FAQ ([data-acc] .faqi > .faqb + .faqa > div > p).
   Висота анімується через grid-template-rows 0fr → 1fr, тож сторінка не стрибає. */
.faqa {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s;
}
.faqa.open {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .4s var(--ease), visibility 0s;
}
.faqa > div { overflow: hidden; min-height: 0; }
.faqa > div > * { opacity: 0; transition: opacity .25s ease; }
.faqa.open > div > * { opacity: 1; transition: opacity .35s ease .1s; }

/* Плюс → мінус: дві смужки по центру квадрата, вертикальна лягає горизонтально */
.pm {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(166, 174, 203, .10); color: #EAEAEA; transition: background .2s;
}
.pm::before, .pm::after {
  content: ""; position: absolute; left: 7px; top: 12px; width: 12px; height: 2px;
  border-radius: 1px; background: currentColor; transition: transform .35s var(--ease);
}
.pm::after { transform: rotate(90deg); }
.faqb[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.faqb:hover .pm { background: rgba(166, 174, 203, .20); }

/* Фокус лише з клавіатури і по контуру всієї картки */
.faqb:focus { outline: none; }
.faqi:has(.faqb:focus-visible) { box-shadow: 0 0 0 2px #AE52FF; }

/* Фонове сяйво */
.glow { animation: pulse 9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rv] > :not(.done) { opacity: 1; transform: none; }
  .btn:hover, .btn2:hover { transform: none; }
}