/* ==========================================================================
   GranitLab – ruch
   Zasady: tylko transform/opacity; H1 (element LCP) nigdy nie startuje od
   opacity 0; wszystko wyłączane przez prefers-reduced-motion.
   ========================================================================== */

@keyframes gl-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

@keyframes gl-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes gl-draw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes gl-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(var(--score, 1));
  }
}

@keyframes gl-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--status) 0%, transparent);
  }
}

@keyframes gl-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes gl-dash {
  to {
    stroke-dashoffset: -16;
  }
}

@keyframes gl-tick {
  0% {
    color: var(--text-3);
    background-color: transparent;
  }
  3%,
  22% {
    color: var(--text);
    background-color: color-mix(in srgb, var(--brand) 11%, transparent);
  }
  27%,
  100% {
    color: var(--text-3);
    background-color: transparent;
  }
}

@keyframes gl-sheet {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gl-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Wejście hero (czysty CSS, działa bez JS) ----------
   H1 i lead celowo bez animacji przezroczystości: to kandydaci na LCP (na telefonie LCP bywa właśnie lead). */
.hero__eyebrow {
  animation: gl-rise 500ms var(--ease-out) both;
}

.hero__actions {
  animation: gl-rise 600ms var(--ease-out) 170ms both;
}

.hero__trust {
  animation: gl-rise 600ms var(--ease-out) 250ms both;
}

.hero__readout {
  animation: gl-fade 900ms var(--ease) 600ms both;
}

/* ---------- Pasek postępu przewijania (CSS scroll-driven) ---------- */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--teal-2));
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Odsłanianie przy przewijaniu ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: gl-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    .bento .card--b,
    .bento .card--d,
    .strip__item:nth-child(even),
    .why__item:nth-child(even) {
      animation-range: entry 8% entry 48%;
    }

    .timeline::after {
      animation: gl-draw linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }

    .steps::after {
      animation: gl-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 70%;
    }

    .search-demo__bar::after {
      animation: gl-grow linear both;
      animation-timeline: view();
      animation-range: entry 45% cover 40%;
    }
  }

  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      opacity: 1;
      animation: gl-progress linear both;
      animation-timeline: scroll(root);
    }
  }

  /* Fallback (przeglądarki bez scroll-driven animations): klasa .no-sda dodawana przez reveal.js */
  .no-sda .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 700ms var(--ease-out),
      transform 700ms var(--ease-out);
  }

  .no-sda .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Przełączanie motywu (View Transitions API) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druk ---------- */
@media print {
  .site-header,
  .sheet,
  .hero__field,
  .hero__readout,
  .skip-link,
  .marquee-toggle,
  .site-footer__giant {
    display: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero {
    min-height: 0;
  }
}