/* ============================================================
   WACHTY — eksperyment "promo header" (TYLKO kopia testowa)
   Scena morska z animacji promo (Claude Design) + scroll-efekt:
   fale unoszą się i stają się tłem kart strony.
   Paleta 1:1 z promo (helpers.jsx → P):
     sky1 #dff2f7  sky2 #bfe4ee
     sea1 #7fcfdd  sea2 #3aa8bd  sea3 #1f8ba3
     ink  #0b2b3c  inkSoft #3d5b6b  teal #0f9bad  orange #f59e0b
   ============================================================ */

/* ---------- 1. PALETA — nadpisanie zmiennych strony ---------- */
:root {
  --sky1: #dff2f7;
  --sky2: #bfe4ee;
  --sea1: #7fcfdd;
  --sea2: #3aa8bd;
  --sea3: #1f8ba3;
  --ink:  #0b2b3c;
  --ink-soft: #3d5b6b;
  --teal: #0f9bad;
  --orange: #f59e0b;

  --c-primary:   #0b2b3c;
  --c-secondary: #3d5b6b;
  --c-text:      #33505f;
  --c-accent:    #0f9bad;
  --c-highlight: #d97b06; /* orange promo, przyciemniony pod tekst */
  --c-h345:      #123748;
  --c-h5:        #274a5a;
  --c-soft:      #eef7fa;
  --c-line:      #d3e8ee;

  --font-hero: "Manrope", "Roboto", -apple-system, system-ui, sans-serif;
}

html { background: var(--sea1); }
body { background: transparent; }

/* ---------- 1b. iOS Safari — strefy bezpieczne (notch / home indicator) ----------
   viewport-fit=cover (w <meta>) wypycha treść pod pasek statusu i dolny pasek
   Safari. Bez tego topbar „odstawał" od tła u góry, a dolne karty chowały się
   pod pływającym paskiem adresu. Domykamy env(safe-area-inset-*). */

/* topbar wypełnia strefę notcha swoim tłem, treść zjeżdża pod notch */
.topbar { padding-top: env(safe-area-inset-top, 0px); }
/* hero dalej wciąga się pod CAŁY topbar (56px + strefa notcha) */
.sea-hero-wrap { margin-top: calc(-57px - env(safe-area-inset-top, 0px)); }
/* dolny oddech: ostatnie sekcje nie chowają się pod paskiem Safari / home indicator */
.site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 2. TŁO MORZA pod całą stroną ----------
   Żywe morze: pasma sea2/sea3 z animowanymi grzbietami (jak w hero)
   + delikatne kołysanie w pionie. Pozycje pasm = stan końcowy hero (p=1). */
.sea-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--sea1);
}
.bg-band {
  position: absolute;
  left: 0; right: 0;
  bottom: -80px;
  animation: band-bob 9s ease-in-out infinite alternate;
}
.bg-band.b2 { top: 30vh; background: var(--sea2); }
.bg-band.b3 { top: 55vh; background: var(--sea3); animation-duration: 7s; animation-delay: -3s; }
@keyframes band-bob {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* ---------- 2b. GRZBIETY FAL — canvas (fizyka z aplikacji) ----------
   Krawędź każdego pasma rysuje sea.js formułą z SeaAnimationView:
   sin(k1·x + φ) z wyostrzeniem Stokesa + cos(k2·x − 1.7φ) — fala
   zmienia kształt w czasie, nie tylko przesuwa się w bok. */
.crest-canvas {
  position: absolute;
  left: 0;
  top: -159px;
  width: 100%;
  height: 160px;
  display: block;
  pointer-events: none;
}

/* ---------- 3. HERO — pełnoekranowa scena morska ---------- */
.sea-hero-wrap {
  height: 185vh;
  position: relative;
  padding: 0; /* nadpisuje domyślny padding sekcji ze styles.css */
  /* hero zaczyna się pod sticky topbarem (56px) — wciągamy go pod pasek */
  margin-top: -57px;
}
.sea-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 62%, var(--sea1) 62%);
  /* znika tuż przed końcem przejścia — odsłania identyczne .sea-bg */
  opacity: calc(1 - max(0, var(--p, 0) - 0.88) * 8.4);
}

/* --- niebo: słońce + chmury (parallax wolniejszy niż fale) --- */
.sh-sky {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--p, 0) * -14vh));
  opacity: calc(1 - var(--p, 0) * 1.2);
  pointer-events: none;
}
.sh-sun {
  position: absolute;
  left: 78%;
  top: 8%;
  width: clamp(80px, 10vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff7e0;
  box-shadow: 0 0 90px 42px rgba(255, 236, 170, .85);
}
.sh-cloud {
  position: absolute;
  width: 220px;
  height: 64px;
  background: #fff;
  border-radius: 64px;
  animation: cloud-drift 90s linear infinite;
}
.sh-cloud::before {
  content: "";
  position: absolute;
  left: 40px; top: -30px;
  width: 110px; height: 80px;
  background: #fff;
  border-radius: 50%;
}
.sh-cloud::after {
  content: "";
  position: absolute;
  left: 110px; top: -18px;
  width: 84px; height: 64px;
  background: #fff;
  border-radius: 50%;
}
.sh-cloud.c1 { top: 12%; transform: scale(1.05); opacity: .9;  animation-delay: -18s; }
.sh-cloud.c2 { top: 22%; transform: scale(.75);  opacity: .75; animation-duration: 120s; animation-delay: -75s; }
.sh-cloud.c3 { top: 6%;  transform: scale(.6);   opacity: .6;  animation-duration: 70s;  animation-delay: -40s; }
@keyframes cloud-drift {
  from { left: -300px; }
  to   { left: 110%; }
}

/* --- treść hero (logo, tytuł, hasło, badge) --- */
.sh-content {
  position: absolute;
  left: 0; right: 0;
  top: clamp(56px, 8vh, 110px); /* oddech pod topbarem */
  height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 18px);
  text-align: center;
  padding: 0 var(--pad-x);
  z-index: 5;
  transform: translateY(calc(var(--p, 0) * -26vh));
  opacity: calc(1 - var(--p, 0) * 1.6);
}
.sh-logo {
  width: clamp(92px, 12vw, 168px);
  border-radius: 24%;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(11, 43, 60, .35);
  animation:
    sh-pop 900ms cubic-bezier(.34, 1.56, .64, 1) both,
    logo-float 6s ease-in-out 900ms infinite alternate;
}
.sh-logo img { display: block; width: 100%; height: auto; }
@keyframes sh-pop {
  from { opacity: 0; transform: scale(.5) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.sh-title {
  font-family: var(--font-hero);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.sh-sub {
  font-family: var(--font-hero);
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 40px);
  line-height: 1.25;
  color: var(--ink-soft);
  margin: 0;
  max-width: 22em;
}
.sh-sub .acc { color: var(--teal); }
.sea-hero .app-store-badge {
  margin-top: clamp(6px, 1.4vh, 16px);
  animation: hero-rise 900ms cubic-bezier(.22, .61, .36, 1) 1600ms both;
}

/* słowa nagłówka wjeżdżają pojedynczo (jak Kinetic w promo) */
.kin-w {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(.5em) scale(.7);
  animation: kin-in 500ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes kin-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- wskazówka scrolla --- */
.sh-hint {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  z-index: 6;
  color: #fff;
  opacity: calc(.85 - var(--p, 0) * 3);
  animation: hint-bob 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* --- FALE hero: 3 pasma (pozycje jak w promo: 62/68/80% wysokości),
       grzbiety wspólne z tłem — patrz sekcja 2b --- */
.sh-wave {
  position: absolute;
  left: 0; right: 0;
  height: 140vh;
}
.sh-wave.w1 {
  top: 62vh;
  background: var(--sea1);
  z-index: 2;
  transform: translateY(calc(var(--p, 0) * -64vh));
}
.sh-wave.w2 {
  top: 68vh;
  background: var(--sea2);
  z-index: 3;
  transform: translateY(calc(var(--p, 0) * -38vh));
}
.sh-wave.w3 {
  top: 80vh;
  background: var(--sea3);
  z-index: 4;
  transform: translateY(calc(var(--p, 0) * -25vh));
}

/* ---------- 4. STRONA NA MORZU — karty, separatory, stopka ---------- */

/* karty sekcji: mocniejszy, morski cień (pływają na wodzie) */
main > section:not(.hero) {
  border-color: rgba(255, 255, 255, .55);
  box-shadow:
    0 1px 3px rgba(11, 43, 60, .10),
    0 26px 64px -20px rgba(11, 43, 60, .38);
}

/* separatory: białe linie + jaśniejszy ster (leżą na wodzie) */
.divider::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65)); }
.divider::after  { background: linear-gradient(90deg, rgba(255, 255, 255, .65), transparent); }
.divider .helm   { opacity: .85; }

/* stopka: jasny tekst na morzu */
.site-footer { border-top-color: rgba(255, 255, 255, .4); }
.site-footer nav a, .site-footer .copy { color: #eaf6f9; }
.site-footer nav a:hover { color: #fff; }

/* strony polityki prywatności — treść na białej karcie na morzu */
main > .legal {
  background: var(--c-bg);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: clamp(20px, 3vw, 34px);
  box-shadow:
    0 1px 3px rgba(11, 43, 60, .10),
    0 26px 64px -20px rgba(11, 43, 60, .38);
  padding: clamp(36px, 5.5vw, 72px) clamp(24px, 4.5vw, 64px);
  margin: clamp(24px, 4vw, 48px) auto;
  max-width: 880px;
}

/* ---------- 5. SEKCJA FILMU PROMO ---------- */
.promo-player {
  max-width: 980px;
  margin: 0 auto;
  border-radius: clamp(16px, 2.5vw, 28px);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 80px -24px rgba(11, 43, 60, .45);
}
.promo-player video {
  display: block;
  width: 100%;
  height: auto;
}
/* animacja HTML (standalone z Claude Design) zamiast mp4 —
   kadr 16:9 bez ramki: chrome odtwarzacza ukryty patchem w standalone */
.promo-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--sky1);
}
/* starsze przeglądarki bez aspect-ratio (iOS < 15) — sztywna wysokość */
@supports not (aspect-ratio: 16 / 9) {
  .promo-player iframe { height: min(55vw, 551px); }
}

/* ---------- 6. Reduced motion / mobile ---------- */
@media (prefers-reduced-motion: reduce) {
  .sea-hero-wrap { height: 100vh; }
  .kin-w { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .sh-cloud.c1 { transform: scale(.7); }
  .sh-cloud.c2 { transform: scale(.5); left: 60% !important; }
  .sh-cloud.c3 { display: none; }
  .sh-sun { left: 70%; }
}