/**
 * Growth Bakers — ruch i stany interakcji.
 *
 * Wejscia elementow napedza pozycja w oknie (animation-timeline: view()),
 * nie IntersectionObserver: mniej JS, dziala poza glownym watkiem i nie gubi
 * elementow przy dole strony.
 */
@layer motion {
  /*
   * KRYTYCZNE: `hidden` na jednej osi sprawia, ze druga przestaje byc
   * `visible` i element staje sie kontenerem przewijania — a wtedy view()
   * mierzy sie wzgledem niego, nie wzgledem strony, i utyka w miejscu.
   * `clip` przycina tak samo i zadnego kontenera nie tworzy.
   */
  body { overflow-x: clip; }
  .hero, .cta-end, .marq, .vs { overflow: clip; }

  /*
   * Odsuniecie kotwicy od przyklejonego naglowka przenieslo sie do
   * gb-chrome.css (scroll-padding-top na html) — dziala tam dla calego
   * serwisu, nie tylko dla sekcji strony glownej.
   */

  @keyframes gb-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] {
        animation: gb-in linear both;
        animation-timeline: view();
        /* konczy sie, zanim element wjedzie caly — nic nie zostaje w polowie */
        animation-range: entry 12% entry 62%;
      }
      /* opoznienie liczone pozycja, nie zegarem — stad przesuniety zakres */
      [data-reveal][data-delay="1"] { animation-range: entry 18% entry 68%; }
      [data-reveal][data-delay="2"] { animation-range: entry 24% entry 74%; }
      [data-reveal][data-delay="3"] { animation-range: entry 30% entry 80%; }

      /* elementy widoczne od razu po wejsciu na strone nie moga migac */
      [data-reveal][data-above] { animation: none; opacity: 1; }
    }
  }

  /* awaryjnie, gdy przegladarka nie zna view(): klasa dokladana z JS */
  .gb-js-reveal [data-reveal]:not([data-above]) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  }
  .gb-js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

  /* ---------- PARALAKSA ---------- */
  /*
   * Uzywamy wlasciwosci `translate`, nie `transform` — rysunki w tle maja
   * wlasne, ciagle animacje na `transform` i te dwie rzeczy nie moga sie
   * nadpisywac. Warstwa dalsza idzie w dol przy przewijaniu w dol.
   */
  @keyframes gb-par {
    from { translate: 0 calc(var(--par, 40px) * -1); }
    to   { translate: 0 var(--par, 40px); }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [data-par] {
        animation: gb-par linear both;
        animation-timeline: view();
        animation-range: cover;
      }

      /*
       * Rysunek w tle hero: paralaksa ORAZ falowanie `drift` z gb-page.css.
       * Sam selektor [data-par] zabijal drift — shorthand `animation` z tej
       * warstwy wygrywa i nadpisuje deklaracje z gb-page w calosci (zmierzone:
       * bg-art animowal wylacznie gb-par). Lista po przecinku sklada oba:
       * gb-par jedzie na `translate` (os przewijania), drift na `transform`
       * (falowanie w miejscu) — wlasciwosci sie nie gryza.
       */
      .hero .bg-art[data-par] {
        animation: gb-par linear both, drift 22s ease-in-out infinite;
        animation-timeline: view(), auto;
        animation-range: cover, normal;
      }
    }
  }

  /* ---------- WEJSCIE HERO ---------- */
  /*
   * Hero jest widoczny od pierwszej klatki, wiec [data-reveal] (scroll-driven)
   * nie ma tu czego napedzac — wejscie robi zwykla animacja czasowa z kaskada
   * opoznien. `backwards` trzyma elementy niewidoczne w czasie opoznienia.
   * Tylko opacity+transform (zero CLS); zolte skreslenie w h1 startuje po
   * 0.8s, czyli tuz po tym, jak h1 wyladuje — kolejnosc zostaje sensowna.
   */
  @keyframes gb-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero .under-title { animation: gb-hero-in .6s var(--ease-out) .05s backwards; }
    .hero h1           { animation: gb-hero-in .7s var(--ease-out) .15s backwards; }
    .hero .lead        { animation: gb-hero-in .7s var(--ease-out) .32s backwards; }
    .hero .cta         { animation: gb-hero-in .7s var(--ease-out) .48s backwards; }
    .hero .art         { animation: gb-hero-in .8s var(--ease-out) .55s backwards; }
  }

  /* ---------- STANY INTERAKCJI ---------- */
  /* .btn i naglowek maja swoje stany w gb-chrome.css (jada na kazdej podstronie) */
  .txtlink {
    transition: transform var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                background var(--dur-2) var(--ease-out),
                color var(--dur-2) var(--ease-out);
  }

  /* obwodka fokusu w kolorze marki — nie systemowy niebieski */
  :focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 3px;
    border-radius: var(--r-1);
  }
  [data-surface="dark"] :focus-visible,
  .block.mint :focus-visible,
  .block.cyan :focus-visible { outline-color: var(--ink); }
  :focus:not(:focus-visible) { outline: none; }

  /* karta reaguje takze wtedy, gdy kursor jest na linku w jej srodku */
  .card:has(a:hover), .card:has(:focus-visible) {
    border-color: var(--mint-text);
    transform: translateY(-6px);
  }

  /* ---------- SZACUNEK DLA USTAWIENIA SYSTEMOWEGO ---------- */
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
    [data-par] { animation: none !important; translate: none !important; }
    .chr, .sway, .marq .inner, .hero .bg-art,
    .avatar .dot, .aiobox .cite, .typing i { animation: none !important; }
    .btn:active { transform: none; }
    html { scroll-behavior: auto; }
  }
}