/* ==========================================================================
   CALLTIME LANDING — ruch. Tylko opacity / transform (+ clip-path na 14 px linijce).
   Zasada: stan początkowy ukrywa wyłącznie klasa dodana przez JS (rv, rr, tl-pre),
   więc bez JS albo przy błędzie skryptu treść jest widoczna.
   Całość wyłączona przy prefers-reduced-motion.
   ========================================================================== */

/* Nagłówek: kreska dopiero po scrollu */
.js .top { transition: border-color .2s; }
.js .top:not(.scrolled) { border-bottom-color: transparent; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero: linie nagłówka wsuwają się spod maski ---- */
  .js h1 .ln > span { animation: ln-in .8s var(--ease) backwards; }
  .js h1 .acc > span { animation-delay: .14s; }
  @keyframes ln-in { from { transform: translateY(104%); } }

  .js .hero-side { animation: fade-up .6s var(--ease) .38s backwards; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

  /* ---- Oś dnia: linijka się rysuje, bloki wchodzą kaskadą po osi czasu ---- */
  .tl-pre .tl-axis .ruler { clip-path: inset(0 100% 0 0); }
  .tl-pre .tl-hours { opacity: 0; }
  .tl-pre .blk { opacity: 0; transform: translateX(-10px); }
  .tl-pre .ph { opacity: 0; }
  .tl-pre ~ .now-line { opacity: 0; }

  .tl-go .tl-axis .ruler { transition: clip-path .9s cubic-bezier(.3, .6, .2, 1); }
  .tl-go .tl-hours { transition: opacity .5s ease-out .25s; }
  .tl-go .blk {
    transition: opacity .45s ease-out var(--dl, 0ms), transform .5s var(--ease) var(--dl, 0ms),
                background-color .25s, border-color .25s;
  }
  .tl-go .ph { transition: opacity .4s ease-out .8s; }
  .tl-go ~ .now-line { transition: opacity .5s ease-out 1.1s; }

  /* punkt "teraz" w aktywnym bloku: krótki puls, dwa razy przy każdym wejściu w blok */
  .blk.on::after {
    content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: pulse 1.2s ease-out 2;
    pointer-events: none;
  }
  @keyframes pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

  /* ---- Wejścia przy scrollu (klasy dodaje JS tylko elementom poza ekranem) ---- */
  .rv { transition: opacity .6s ease-out calc(var(--i, 0) * 70ms), transform .6s var(--ease) calc(var(--i, 0) * 70ms); }
  .rv:not(.in) { opacity: 0; transform: translateY(12px); }
  .rv-dev:not(.in) { opacity: 0; transform: scale(.98) translateY(8px); }
  .rr::before { transition: transform .9s cubic-bezier(.3, .6, .2, 1); }
  .rr:not(.in)::before { transform: scaleX(0); }

  /* demo-ilustracje: przejścia stanów */
  .d-msg { transition: opacity .3s ease-out, transform .35s var(--ease); }
  .d-msg.gone { transform: translateY(-8px); }
  .d-msg.wait { transform: translateY(8px); }
  .d-pill, .d-pill i { transition: background-color .3s, color .3s; }
  .d-bar i { will-change: transform; }

  /* ---- Parallax urządzeń (transform ustawia JS, tylko szeroki ekran) ---- */
  .par { will-change: transform; }
}