/* ============================================================
   SQX — scrollytelling (rewizja: scena czatu Zulip)
   Silnik: parallax.js ustawia --p (0..1) na [data-scrub];
   choreografia w CSS przez calc()/clamp() — każda przeglądarka.
   Baza sceny jest STATYCZNA i czytelna (mobile, reduced-motion,
   brak JS); pin + odsłanianie tylko na desktopie z włączonym ruchem.
   ============================================================ */

/* ========== HERO — wejście na load ========== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sqx-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes sqx-underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .hero h1        { animation: sqx-fade-up .7s cubic-bezier(.22,.8,.3,1) both; }
  .hero .lead     { animation: sqx-fade-up .7s cubic-bezier(.22,.8,.3,1) .15s both; }
  .hero .hero-cta { animation: sqx-fade-up .7s cubic-bezier(.22,.8,.3,1) .3s both; }
  .hero .micro    { animation: sqx-fade-up .7s cubic-bezier(.22,.8,.3,1) .42s both; }
  .hero .proof:nth-child(1) { animation: sqx-fade-up .6s ease-out .55s both; }
  .hero .proof:nth-child(2) { animation: sqx-fade-up .6s ease-out .67s both; }
  .hero .proof:nth-child(3) { animation: sqx-fade-up .6s ease-out .79s both; }

  .hero h1 em::after {
    transform-origin: left center;
    animation: sqx-underline .6s cubic-bezier(.22,.8,.3,1) .6s both;
  }

  @media (min-width: 901px) {
    .hero-grid {
      transform: translate3d(0, calc(var(--p) * 28px), 0);
    }
    .glyph {
      transform-box: fill-box;
      transform-origin: center;
    }
    .glyph-s { transform: translate3d(calc(var(--p) * -36px), calc(var(--p) * 24px), 0); }
    .glyph-q { transform: translate3d(0, calc(var(--p) * 56px), 0); }
    .glyph-x { transform: translate3d(calc(var(--p) * 40px), calc(var(--p) * 88px), 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .glyph-s, .glyph-q, .glyph-x, .hero-grid { transform: none; }
}

/* ========== SCENA CZATU — baza statyczna (wszystkie środowiska) ========== */
.scene-chat {
  background: var(--sand);
  padding: var(--s5) clamp(1.1rem, 4vw, 2.5rem);
}
.chat-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}
.chat-frame {
  width: 100%;
  max-width: 42rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px -30px rgba(14, 43, 40, .35);
  overflow: hidden;
}
.chat-titlebar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .9rem;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.tdot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.chat-titlebar .tdot:first-child { background: var(--tq); }
.chat-title {
  margin-left: .5rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--muted);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; }

.topic-bar {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--f-display);
  font-size: .85rem;
  background: color-mix(in srgb, var(--tq) 12%, #fff);
  border-left: 3px solid var(--tq);
  border-radius: 4px;
  padding: .45rem .8rem;
  margin-top: .35rem;
}
.topic-bar b { color: var(--tq-ink); font-weight: 700; }
.topic-bar span { color: var(--ink); font-weight: 600; }

.msg { display: flex; gap: .7rem; }
.ava {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .95rem;
}
.sqx-ava { background: var(--tq-ink); }
.msg .body { min-width: 0; }
.msg .meta { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.msg .meta b { font-family: var(--f-display); font-size: .88rem; }
.msg .meta time { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }
.msg p { margin: .15rem 0 0; font-size: .95rem; line-height: 1.5; }
.msg a { color: var(--tq-ink); }
.badge {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--tq-ink);
  border: 1px solid var(--tq);
  border-radius: 999px;
  padding: .08rem .55rem;
  white-space: nowrap;
}
.badge.done { background: var(--tq); color: var(--petrol); border-color: var(--tq); }

.typing { display: flex; gap: .7rem; align-items: center; }
.typing .dots { display: inline-flex; gap: .28rem; padding: .55rem .8rem; background: var(--sand); border-radius: 999px; }
.typing .dots i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--muted); display: block; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes sqx-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
  .typing .dots i { animation: sqx-dot 1s ease-in-out infinite; }
  .typing .dots i:nth-child(2) { animation-delay: .15s; }
  .typing .dots i:nth-child(3) { animation-delay: .3s; }
}

.chat-punch { text-align: center; max-width: 44rem; }
.chat-punch h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-bottom: .5rem; }
.chat-punch p { font-family: var(--f-mono); font-size: .88rem; color: var(--tq-ink); margin: 0; line-height: 1.7; }

/* W trybie statycznym wskaźnik pisania to szum — chowamy go */
.typing { display: none; }

/* ========== SCENA CZATU — choreografia scrollem (desktop + motion) ========== */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {

  .scene-chat {
    --p: 0;
    height: 200vh;
    padding: 0;
  }
  .chat-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    justify-content: center;
    padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  }
  .typing { display: flex; }

  /* Odsłanianie: element wchodzi w oknie [--in, --in+0.05] postępu sceny */
  .scene-chat .rv {
    opacity: clamp(0, calc((var(--p) - var(--in, 0)) / .05), 1);
    transform: translateY(calc(14px * (1 - clamp(0, (var(--p) - var(--in, 0)) / .05, 1))));
  }

  /* Wskaźnik pisania: pojawia się i znika przed odpowiedzią inżyniera */
  .scene-chat .typing {
    opacity: min(
      clamp(0, calc((var(--p) - var(--in, 0)) / .03), 1),
      clamp(0, calc((var(--out, 1) - var(--p)) / .02), 1)
    );
    transform: none;
    height: 2.1rem;
    margin-top: calc(-2.1rem * clamp(0, (var(--p) - var(--out, 1)) / .02, 1));
  }

  /* Lista delikatnie podjeżdża, gdy przybywa wiadomości (jak żywy czat) */
  .chat-list {
    transform: translateY(calc(-14px * clamp(0, (var(--p) - .45) / .4, 1)));
  }

  /* Puenta: mocniejsze wejście */
  .scene-chat .chat-punch {
    opacity: clamp(0, calc((var(--p) - var(--in, .82)) / .08), 1);
    transform: translateY(calc(26px * (1 - clamp(0, (var(--p) - var(--in, .82)) / .08, 1))));
  }
}