/* =========================================================
   PMG — wersja 2 („płynna”). Nakładka na ../css/style.css.
   Tryb pełny (.v2-enhanced) tylko ≥ 961 px i bez prefers-reduced-motion — patrz KONCEPCJA-v2.md.
   ========================================================= */

/* ---------- Lenis (reguły biblioteki) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-smooth dialog iframe { pointer-events: auto; }

/* ---------- Typografia: większa skala, ciaśniejsze wiersze ---------- */
.v2 .display { font-size: clamp(44px, 7.6vw, 104px); line-height: .92; letter-spacing: -.04em; }
.v2 .h1,
.v2 .pms-banner__title,
.v2 .hub-banner__title { font-size: clamp(36px, 6vw, 72px); line-height: .98; letter-spacing: -.035em; }
.v2 .hub-banner__brand { width: clamp(150px, 25vw, 300px); height: clamp(150px, 25vw, 300px); }
.v2 .hub-banner__logo { width: clamp(150px, 25vw, 300px); height: clamp(150px, 25vw, 300px); }
@media (min-width: 641px) {
  .hub-banner__title { white-space: nowrap; }
  .v2 .hub-banner__title { font-size: clamp(28px, 4.8vw, 62px); }
}
/* Case Koła: logo w banerze — czysty CSS (bez GSAP), start klasą .is-anim z v2.js (IntersectionObserver, raz na wczytanie).
   Czasy i easing jak .hero-logo na stronie głównej: ramka rysuje się 4,8 s, potem słupki PMG, litery P→M→G — jednorazowo,
   z fill-mode backwards. Od 6 s mózg i promienie migoczą w pętli: okres 3 s (krótki błysk + pauza), brightness do 1.12,
   poświata do .5, promienie przygasają do .55; klatka 0%/100% = spoczynkowy wygląd, więc pętla startuje i zamyka się
   bez skoku. Bez JS, < 961 px i przy reduced-motion klasy nie ma — logo jest statyczne. */
@keyframes caselogo-draw { from { stroke-dasharray: 1141; stroke-dashoffset: 1141; } to { stroke-dasharray: 1141; stroke-dashoffset: 0; } }
@keyframes caselogo-fade { from { opacity: 0; } }
@keyframes caselogo-letter { from { opacity: 0; transform: translateY(8px); } }
@keyframes caselogo-glow { 0%, 100% { opacity: 0; } 20% { opacity: .5; } 40% { opacity: 0; } }
@keyframes caselogo-bright { 0%, 100% { filter: brightness(1); } 20% { filter: brightness(1.12); } 40% { filter: brightness(1); } }
@keyframes caselogo-ray { 0%, 100% { opacity: 1; } 20% { opacity: .55; } 40% { opacity: 1; } }
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .case-logo.is-anim { --caselogo-sine: cubic-bezier(.37, 0, .63, 1); }
  .case-logo.is-anim .case-logo__frame { animation: caselogo-draw 4.8s var(--caselogo-sine) .2s backwards; }
  .case-logo.is-anim .case-logo__bars { animation: caselogo-fade .3s ease-out 4.4s backwards; }
  .case-logo.is-anim .case-logo__letter { animation: caselogo-letter .9s var(--caselogo-sine) 4.7s backwards; }
  .case-logo.is-anim .case-logo__letter:nth-of-type(2) { animation-delay: 5.05s; }
  .case-logo.is-anim .case-logo__letter:nth-of-type(3) { animation-delay: 5.4s; }
  .case-logo.is-anim .case-logo__glow { animation: caselogo-glow 3s ease-in-out 6s infinite backwards; }
  .case-logo.is-anim .case-logo__brain { animation: caselogo-bright 3s ease-in-out 6s infinite backwards; }
  .case-logo.is-anim .case-logo__ray { animation: caselogo-ray 3s ease-in-out 6.15s infinite backwards; }
  /* do wejścia logo w widok sekwencja stoi w klatce początkowej */
  .case-logo.is-anim.is-anim-wait * { animation-play-state: paused; }
}
.v2 .contact-hero__title { line-height: .92; letter-spacing: -.04em; }
.v2 .home-h2, .v2 .pms-h2 { letter-spacing: -.03em; }

/* ---------- Nawigacja → pływająca pigułka po przewinięciu (desktop) ---------- */
@media (min-width: 961px) {
  .v2 .site-nav.is-scrolled { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* pigułka jest o 40 px niższa niż pełny pasek (logo 70→44, padding 36→12, margines +10): margin-bottom oddaje te 40 px,
     więc miejsce headera w układzie strony się nie zmienia i scroll anchoring nie cofa przewinięcia pod próg is-scrolled */
  .v2 .site-nav { transition: box-shadow var(--ease), background-color var(--ease), color var(--ease), transform var(--ease), margin var(--ease); }
  .v2 .site-nav.is-scrolled { margin-bottom: 40px; }
  .v2 .site-nav .site-nav__inner { transition: padding var(--ease), max-width .45s ease, margin .45s ease, border-radius .45s ease, background-color var(--ease), box-shadow var(--ease); max-width: 100%; margin: 0 auto; }
  .v2 .site-nav.is-scrolled .site-nav__inner {
    max-width: 1120px; margin: 10px auto 0; padding: 6px 10px 6px 18px; border-radius: var(--radius-pill);
    background: rgba(247,246,243,.99); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 14px 34px -14px rgba(20,20,40,.35), 0 0 0 1px rgba(20,20,20,.06);
  }
  .v2 .site-nav.is-scrolled .site-nav__logo img { height: 44px; width: 44px; }
  .v2 .site-nav--dark.is-scrolled .site-nav__inner { background: rgba(12,12,16,.95); box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
  /* Dołącz: pasek nad pigułką czarny jak hero pod nim (wyżej outer .site-nav jest przezroczysty) */
  body.join-page-body .site-nav--dark.is-scrolled { background-color: var(--color-ink); }
}

/* ---------- Przejścia między podstronami (View Transitions, bez biblioteki) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: v2-fade-out .28s ease both; }
  ::view-transition-new(root) { animation: v2-fade-in .38s ease both; }
  ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
}
@keyframes v2-fade-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes v2-fade-in { from { opacity: 0; transform: translateY(12px); } }
.v2 .site-nav { view-transition-name: site-nav; }
/* karta case'u w hubie → hero podstrony */
.v2 a[href="case-kola-pwr-racing-team.html"] .case-card__media, .v2 [data-page="case-kola-pwr-racing-team"] .case-hero .media { view-transition-name: case-prt; }
.v2 a[href="case-kola-debatelab.html"] .case-card__media, .v2 [data-page="case-kola-debatelab"] .case-hero .media { view-transition-name: case-dl; }
.v2 a[href="case-kola-qubit.html"] .case-card__media, .v2 [data-page="case-kola-qubit"] .case-hero .media { view-transition-name: case-q; }
.v2 a[href="case-kola-solvro.html"] .case-card__media, .v2 [data-page="case-kola-solvro"] .case-hero .media { view-transition-name: case-s; }
.v2 a[href="case-kola-pwr-racing-team.html"] .case-card__media, .v2 a[href="case-kola-debatelab.html"] .case-card__media, .v2 a[href="case-kola-qubit.html"] .case-card__media { view-transition-name: none; }

/* ---------- PM Session: zdanie kolorowane słowo po słowie ---------- */
.v2-enhanced .pms-about.v2-words-ready .pms-about__text { color: var(--color-ink); }
.v2-word { color: var(--color-text-muted); transition: color .15s linear; }

/* ---------- Dołącz: pozioma ścieżka procesu rekrutacji (initJoinPath w v2.js) ----------
   Tylko ≥ 961 px i bez reduced-motion (v2-enhanced): 4 kroki w jednym rzędzie, linia grubsza niż
   statyczna wersja bez JS, rysowana scrollem (scrub) wraz z grotem strzałki na jej końcu. */
.v2-enhanced .join-page-steps { position: relative; }
.v2-path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.v2-enhanced .join-page-steps.v2-path-ready::before,
.v2-enhanced .join-page-steps.v2-path-ready .join-page-steps__item:last-child::after { opacity: 0; }
.v2-enhanced .join-page-steps > li { position: relative; z-index: 1; }
@media (min-width: 961px) {
  .v2-enhanced .join-page-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  /* padding-top powiększony o tyle, o ile urosła kropka (20px → 32px), żeby odstęp kropka–tekst się nie zmienił */
  .v2-enhanced .join-page-steps__item { padding: 50px 14px 0 0; }
  .v2-enhanced .join-page-steps__title { margin-top: 14px; }
}

/* ---------- Case Koła: sekcje ujawniane po kolei (initCaseReveal w v2.js) ----------
   ≥ 961 px jedyny mechanizm odsłaniania tych sekcji to GSAP (bez reduced-motion), więc [data-reveal]
   z main.js jest tu wtedy wyłączony: bez podwójnego wjazdu, a przy reduced-motion i gdy CDN się nie wczyta
   (v2.js zdejmuje wtedy .v2-enhanced) treść jest widoczna od razu. W trybie pełnym sekcja czeka ukryta
   (bez zmiany układu), aż v2.js ją wpuści i oznaczy .is-case-in. ≤ 960 px (bez GSAP) sekcje wjeżdżają
   zwykłym [data-reveal] z main.js (IntersectionObserver) — mobilny odpowiednik kolejki wjazdów. */
@media (min-width: 961px) {
  main[data-case-reveal] > .case-section [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .v2-enhanced main[data-case-reveal] > .case-section:not(.is-case-in):not(.section--gallery) { visibility: hidden; }
}