/* ============================================================
   ClonX — motion.css
   «Живі» анімації нижніх секцій: варіанти reveal, spotlight,
   ambient-orbs, блики, мікровзаємодії. Лише transform/opacity —
   GPU-friendly і працює скрізь (Safari/Firefox/Chrome).
   Підключати останнім: перекриває базові reveal.
   ============================================================ */

/* ---------- Прогрес прочитання сторінки ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2200;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* ---------- Варіанти reveal-анімацій ----------
   Використання: data-reveal="left" | "right" | "zoom"          */
.reveal[data-reveal="left"]  { transform: translateX(-48px); }
.reveal[data-reveal="right"] { transform: translateX(48px); }
.reveal[data-reveal="zoom"]  { transform: translateY(22px) scale(0.93); }

.reveal[data-reveal="left"].is-visible  { animation-name: revealLeft; }
.reveal[data-reveal="right"].is-visible { animation-name: revealRight; }
.reveal[data-reveal="zoom"].is-visible  { animation-name: revealZoom; }

@keyframes revealLeft  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translateX(48px); }  to { opacity: 1; transform: none; } }
@keyframes revealZoom  { from { opacity: 0; transform: translateY(22px) scale(0.93); } to { opacity: 1; transform: none; } }

/* Лінія під eyebrow з'їжджається, коли секція з'явилась */
.section-eyebrow { position: relative; padding-bottom: 10px; }
.section-eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.9s var(--ease-out) 0.25s;
}
.section-head.is-visible .section-eyebrow::after,
.section-head:not(.reveal) .section-eyebrow::after { transform: translateX(-50%) scaleX(1); }

/* ---------- Spotlight: підсвітка слідом за курсором ----------
   Клас додає js/motion.js. Не ламає tilt (окремий шар ::before) */
.spotlight { position: relative; }
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.09),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.spotlight:hover::before { opacity: 1; }

/* На картках із власним ::before/переповненням — вимикаємо */
.price-card.spotlight::before,
.cta-card.spotlight::before { display: none; }

/* ---------- Ambient orbs: повільне «дихання» світла ----------
   Створюються у js/motion.js всередині секцій */
.section { overflow: visible; }
.orb-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  opacity: 0.55;
}
.orb--a {
  width: min(46vw, 480px); height: min(46vw, 480px);
  top: -14%; right: -6%;
  background: rgba(255, 255, 255, 0.06);
  animation: orbDriftA 17s ease-in-out infinite alternate;
}
.orb--b {
  width: min(40vw, 420px); height: min(40vw, 420px);
  bottom: -18%; left: -8%;
  background: rgba(201, 209, 205, 0.05);
  animation: orbDriftB 21s ease-in-out infinite alternate;
}
.orb--c {
  width: min(34vw, 360px); height: min(34vw, 360px);
  top: 30%; left: 55%;
  background: rgba(255, 255, 255, 0.04);
  animation: orbDriftC 19s ease-in-out infinite alternate;
}
@keyframes orbDriftA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-60px, 50px) scale(1.15); }
}
@keyframes orbDriftB {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(70px, -40px) scale(0.95); }
}
@keyframes orbDriftC {
  from { transform: translate(0, 0) scale(0.95); }
  to   { transform: translate(-40px, 60px) scale(1.12); }
}

/* ---------- Feature cards: іконка «оживає» при наведенні ---------- */
.feature-card { overflow: hidden; }
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.4s;
  pointer-events: none;
}
.feature-card:hover::after {
  border-color: rgba(255, 255, 255, 0.14);
}
.feature-card:hover .feature-card__icon {
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.22);
}

/* ---------- Step cards: sheen-блик + номер підсвічується ---------- */
.step-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  transition: left 0.9s var(--ease-out);
  pointer-events: none;
}
.step-card:hover::after { left: 130%; }
.step-card__num {
  transition: text-shadow 0.45s var(--ease-out), -webkit-text-stroke-color 0.45s;
}
.step-card:hover .step-card__num {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
}

/* ---------- Stat cards: акцентна лінія росте при наведенні ---------- */
.stat-card { overflow: hidden; }
/* Лінія на ::after — щоб не конфліктувати зі spotlight (::before) */
.stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  transform: translateX(-50%);
  transition: width 0.6s var(--ease-out);
  pointer-events: none;
}
.stat-card:hover::after { width: 78%; }

/* ---------- Price cards: featured «дихає» світлом ---------- */
.price-card--featured { animation: featuredBreath 5s ease-in-out infinite; }
@keyframes featuredBreath {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 60px rgba(255, 255, 255, 0.09);
  }
}
/* Список фіч з'їжджається по черзі після появи картки */
.reveal.is-visible .price-card__list li,
.reveal.is-visible .price-card__head,
.reveal.is-visible .price-card__price {
  animation: listItemIn 0.7s var(--ease-out) both;
}
.reveal.is-visible .price-card__head   { animation-delay: 0.15s; }
.reveal.is-visible .price-card__price  { animation-delay: 0.25s; }
.reveal.is-visible .price-card__list li:nth-child(1) { animation-delay: 0.32s; }
.reveal.is-visible .price-card__list li:nth-child(2) { animation-delay: 0.39s; }
.reveal.is-visible .price-card__list li:nth-child(3) { animation-delay: 0.46s; }
.reveal.is-visible .price-card__list li:nth-child(4) { animation-delay: 0.53s; }
.reveal.is-visible .price-card__list li:nth-child(5) { animation-delay: 0.6s; }
.reveal.is-visible .price-card__list li:nth-child(6) { animation-delay: 0.67s; }
@keyframes listItemIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Marquee-чипи: м'який відблиск при hover ---------- */
.network-chip { will-change: transform; }

/* ---------- FAQ: «дороге» розкриття акордеону ---------- */

/* Плавніша крива зміни висоти (замість дефолтного ease Bootstrap) */
.clonx-accordion .accordion-collapse.collapsing {
  transition: height 0.55s var(--ease-out);
}

/* Стрілка — пружинний оберт */
.clonx-accordion .accordion-button::after {
  transition: transform 0.5s var(--ease-spring);
}

/* Кнопка: м'яка зміна кольору/фону при відкритті */
.clonx-accordion .accordion-button {
  transition: color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.clonx-accordion .accordion-button:hover {
  color: var(--c-accent-2);
}

/* Контент відповіді: вспливає/зникає слідом за висотою */
.clonx-accordion .accordion-body {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.clonx-accordion .accordion-collapse.collapse.show .accordion-body {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s; /* чекаємо, поки піде висота */
}

/* Акцентна смужка зліва росте, коли пункт відкритий */
.clonx-accordion .accordion-item {
  position: relative;
  transition: border-color 0.35s, box-shadow 0.35s;
}
.clonx-accordion .accordion-item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out) 0.1s;
  pointer-events: none;
  z-index: 2;
}
.clonx-accordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
  transform: scaleY(1);
}

/* Відкритий пункт: підсвітка рамки + легке сяйво згори */
.clonx-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Закриті пункти: делікатний hover-підйом, щоб список «жив» */
.clonx-accordion .accordion-item:hover {
  border-color: var(--c-border-strong);
}
.clonx-accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.03);
}

/* Адаптив: на мобільних трохи швидше, щоб не здавалось млявим */
@media (max-width: 575.98px) {
  .clonx-accordion .accordion-collapse.collapsing { transition-duration: 0.45s; }
  .clonx-accordion .accordion-body { transform: translateY(-6px); }
}


/* ---------- CTA: глоу пульсує + картка трохи «дихає» ---------- */
.cta-card__glow { animation: ctaGlowPulse 6s ease-in-out infinite; }
@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.18); }
}

/* ---------- Footer: посилання підтягуються при наведенні ---------- */
.footer__links a {
  display: inline-block;
  transition: color 0.25s var(--ease-out), translate 0.3s var(--ease-out);
}
.footer__links a:hover { translate: 5px 0; }

/* ---------- Кнопки: тактильний натиск скрізь ---------- */
.btn:active { transform: scale(0.97) !important; }

/* ============================================================
   Адаптивність і кросбраузерні гарди
   ============================================================ */

/* Тач-пристрої: прибираємо hover-ефекти, що вимагають курсор */
@media (hover: none) {
  .spotlight::before { display: none; }
  .step-card::after { display: none; }
}

/* Обмежена висота/ширина: легшi ефекти, щоб не «жерло» батарею */
@media (max-width: 767.98px) {
  .orb { filter: blur(60px); opacity: 0.4; }
  .orb--a { top: -8%; right: -18%; }
  .orb--b { bottom: -10%; left: -20%; }
  .orb--c { display: none; }

  /* Менший зсув у reveal-варіантах, щоб не було горизонтального скролу */
  .reveal[data-reveal="left"]  { transform: translateX(-26px); }
  .reveal[data-reveal="right"] { transform: translateX(26px); }
  @keyframes revealLeft  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
  @keyframes revealRight { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }

  .step-card::after { transition: none; }
  .stat-card::after { transition: width 0.4s var(--ease-out); }
}

/* Зменшений рух: усе статичне, але читабельне
   (глобальний кіл уже є в animations.css — тут точково для нових блоків) */
@media (prefers-reduced-motion: reduce) {
  .orb,
  .price-card--featured,
  .cta-card__glow {
    animation: none !important;
  }
  .spotlight::before { display: none; }
  .scroll-progress { transition: none; }
}