/* =====================================================================
   Vante Digital – warstwa animacji
   Wszystko działa tylko gdy <html> ma klasę .js-anim (dodaje ją skrypt
   w <head>, pomijając użytkowników z prefers-reduced-motion).
   ===================================================================== */

:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  interpolate-size: allow-keywords; /* płynne otwieranie FAQ (nowe przeglądarki) */
}

/* ---------- 1. Wejście elementów przy przewijaniu ---------- */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-anim [data-reveal="scale"] {
  transform: scale(0.94);
}
.js-anim [data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- 2. Nagłówki wjeżdżające słowo po słowie ---------- */
.js-anim .split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.12em 0;
  margin: 0 -0.06em -0.12em 0;
}
.js-anim .split .w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js-anim .split.in .w > span {
  transform: none;
}

/* ---------- 3. Pasek postępu przewijania pod nawigacją ---------- */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cognac), var(--cognac-2));
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

/* ---------- 4. Przesuwający się pasek logotypów ---------- */
.proof .logos.marquee {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.proof .logos .track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.proof .logos .track span {
  padding-right: 56px;
  white-space: nowrap;
}
.proof .logos:hover .track {
  animation-play-state: paused;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 5. Światło podążające za kursorem ---------- */
.spot {
  background-image: radial-gradient(
    420px circle at var(--mx, -999px) var(--my, -999px),
    #c99a661a,
    transparent 60%
  );
}
.svc {
  transition: background-color 0.4s;
}

/* ---------- 6. Mikrointerakcje ---------- */
.btn span[aria-hidden] {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.btn:hover span[aria-hidden] {
  transform: translateX(4px);
}
.btn.primary {
  position: relative;
  overflow: hidden;
}
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    #ffffff66 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.btn.primary:hover::after {
  transform: translateX(120%);
}
.svc .kind .ico {
  transition:
    background 0.35s,
    color 0.35s,
    border-color 0.35s,
    transform 0.5s var(--ease-out);
}
.svc:hover .kind .ico {
  background: var(--cognac);
  border-color: var(--cognac);
  color: var(--ink-dark);
  transform: rotate(-10deg) scale(1.06);
}
.svc li {
  transition: transform 0.3s var(--ease-out);
}
.svc li:hover {
  transform: translateX(4px);
}
.metric {
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.4s;
}
.metric:hover {
  transform: translateY(-4px);
  border-color: var(--line2);
}

/* ---------- 7. Rozmowa Voice AI odtwarzana na żywo ---------- */
.call.pending .turn,
.call.pending .done {
  opacity: 0;
  transform: translateY(10px);
}
.call .turn,
.call .done {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.call.pending .show {
  opacity: 1;
  transform: none;
}
.call .done svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.6s 0.3s var(--ease-out);
}
.call .done.show svg path,
.call:not(.pending) .done svg path {
  stroke-dashoffset: 0;
}

/* ---------- 8. Wiadomości w czacie Robocika ---------- */
.js-anim .log > * {
  animation: pop 0.45s var(--ease-out) both;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* ---------- 9. Płynne FAQ ---------- */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.45s var(--ease-out),
    content-visibility 0.45s allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
}

/* ---------- 10. Delikatna paralaksa portretu ---------- */
.js-anim .portrait img {
  transform: translateY(var(--par, 0px)) scale(1.08);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .proof .logos .track {
    animation: none;
  }
  .btn.primary::after,
  .nav::after {
    display: none;
  }
}