/* ============================================================
   EFEKTY: szkło (glassmorphism / „liquid glass”)
   i przejścia w stylu Apple. Ładowany po style.css.
   ============================================================ */
:root {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22));
  --glass-border: rgba(255, 255, 255, .7);
  --glass-blur: blur(22px) saturate(170%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 18px 45px -22px rgba(47, 61, 50, .45);
  --ease-apple: cubic-bezier(.22, 1, .36, 1);
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* --- poświata pod szkłem: rozmyte kule szałwii i złota, powoli dryfują --- */
.hero, .section { position: relative; overflow: hidden; }
.section > .wrap, .hero > .wrap { position: relative; z-index: 1; }
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.orbs span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: drift 22s ease-in-out infinite alternate;
}
.orbs span:nth-child(1) { width: 420px; height: 420px; left: -120px; top: 10%; background: var(--sage); }
.orbs span:nth-child(2) { width: 340px; height: 340px; right: -80px; top: 35%; background: var(--gold-light); animation-duration: 28s; animation-delay: -6s; }
.orbs span:nth-child(3) { width: 300px; height: 300px; left: 40%; bottom: -120px; background: var(--sage-light); animation-duration: 25s; animation-delay: -12s; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, -40px) scale(1.12); }
  100% { transform: translate(-40px, 30px) scale(.95); }
}

/* --- nagłówek: przy przewijaniu zamienia się w szklaną „pigułkę” --- */
.topbar {
  background: transparent; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.topbar__inner {
  position: relative; height: 76px; border: 1px solid transparent; border-radius: 0;
  transition: height .5s var(--ease-apple), margin .5s var(--ease-apple), border-radius .5s var(--ease-apple),
              background .5s, box-shadow .5s, border-color .5s, max-width .5s var(--ease-apple);
}
.topbar.is-scrolled .topbar__inner {
  height: 58px; margin-top: 9px; margin-bottom: 9px; max-width: 1100px; border-radius: 999px;
  padding-left: 12px; padding-right: 12px;
  background: var(--glass-bg); border-color: var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.topbar.is-scrolled .logo-slot--small { height: 40px; }

/* --- karty, cennik, formularz, opinie: szkło --- */
.card, .plan:not(.plan--featured), .form, .quotes blockquote {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: 22px;
}
.card { overflow: hidden; }
.card::before {   /* odbłysk przesuwający się po szkle */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease-apple);
}
.card:hover::before { transform: translateX(120%); }
.card:hover { border-color: var(--glass-border); }
.quotes blockquote { padding: 2.2rem 1.6rem 1.8rem; }
.plan--featured {
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(47, 61, 50, .92), rgba(47, 61, 50, .78));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(226, 201, 139, .5), 0 30px 60px -25px rgba(47, 61, 50, .6);
}
.plan__badge { border-radius: 999px; }
.form input, .form select, .form textarea {
  background-color: rgba(255, 255, 255, .7); border-radius: 12px; border-color: rgba(156, 175, 136, .55);
}
.btn { border-radius: 999px; }
.btn--ghost {
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 22px -14px rgba(30, 40, 33, .45); }
/* strzałka listy wyboru jako SVG (zamiast gradientów) */
.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2374591c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 12px 8px; background-position: right 16px center; background-repeat: no-repeat;
}

.filters {
  width: fit-content; max-width: 100%; margin-inline: auto; padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .5); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.filter { border-radius: 999px; border: 0; }
.filter.is-active { background: var(--forest); color: var(--gold-light); }

.photo { border-radius: 18px; }
.hero__frame { border-radius: 24px; }

/* szklany „chip” na zdjęciu w hero */
.hero__chip {
  position: absolute; right: -14px; top: 9%; z-index: 2;
  padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--forest);
  animation: float 6s ease-in-out infinite;
}
.hero__chip i { font-style: normal; color: var(--gold-dark); }
@keyframes float { 50% { transform: translateY(-10px); } }

.lightbox { background: rgba(30, 40, 33, .55); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.lightbox img { border-radius: 18px; }

/* ============================================================
   PRZEJŚCIA W STYLU APPLE
   ============================================================ */

/* pojawianie się: z rozmycia, lekko z dołu, kolejne elementy z opóźnieniem */
.reveal {
  opacity: 0; transform: translateY(40px) scale(.97); filter: blur(10px);
  transition: opacity 1s var(--ease-apple), transform 1.2s var(--ease-apple), filter 1s var(--ease-apple);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* hero: wejście po załadowaniu */
@keyframes rise { from { opacity: 0; transform: translateY(40px); filter: blur(12px); } }
.hero__text > * { animation: rise 1.3s var(--ease-apple) both; }
.hero__text > *:nth-child(2) { animation-delay: .1s; }
.hero__text > *:nth-child(3) { animation-delay: .2s; }
.hero__text > *:nth-child(4) { animation-delay: .3s; }
.hero__text > *:nth-child(5) { animation-delay: .4s; }
.hero__media > * { animation: rise 1.6s .3s var(--ease-apple) both; }
.hero__media > .hero__chip { animation: rise 1.6s .7s var(--ease-apple) both, float 6s 2.3s ease-in-out infinite; }

/* hero: przy przewijaniu tekst odpływa w górę, zdjęcie zostaje w tyle (paralaksa) */
.hero__text  { transform: translateY(calc(var(--hp, 0) * -80px)); opacity: calc(1 - var(--hp, 0) * 1.3); }
.hero__media { transform: translateY(calc(var(--hp, 0) * 60px)) scale(calc(1 + var(--hp, 0) * .06)); }

/* manifest: przypięty ekran, słowa zapalają się jedno po drugim */
.statement { height: 260vh; background: var(--forest); position: relative; }
.statement__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; }
.statement__text {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.3;
  color: #fff; max-width: 20ch; margin: 0 auto; text-align: center;
}
.statement__text .w { opacity: .14; transition: opacity .5s var(--ease-apple); }
.statement__text .w.on { opacity: 1; }
.statement__text .w.gold { color: var(--gold-light); font-style: italic; }

/* zoom: zdjęcie rośnie od karty do pełnego ekranu, potem wjeżdża szklany podpis */
.zoom { height: 250vh; background: var(--cream); position: relative; }
.zoom__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.zoom__photo {
  position: absolute; inset: 0; margin: 0;
  transform: scale(calc(.55 + .45 * var(--z, 0)));
  border-radius: calc(48px * (1 - var(--z, 0)));
}
.zoom__photo::after { font-size: 1.6rem; }
.zoom__caption {
  position: absolute; left: 50%; bottom: max(6vh, calc(24px + env(safe-area-inset-bottom)));
  width: min(560px, calc(100% - 32px)); padding: 2rem 2.2rem; border-radius: 26px; text-align: center;
  opacity: var(--c, 0);
  transform: translate(-50%, calc(50px * (1 - var(--c, 0)))) scale(calc(.94 + .06 * var(--c, 0)));
}
.zoom__caption h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.zoom__caption p:last-child { margin: 0; color: var(--ink); }
.zoom__caption .eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--gold); }

/* galeria: kafelki wjeżdżają z lekkim powiększeniem */
.gallery .photo.reveal { transform: translateY(50px) scale(.9); }
.gallery .photo.reveal.is-visible { transform: none; }

/* ---------- telefon ---------- */
@media (max-width: 760px) {
  .topbar.is-scrolled .topbar__inner { margin-left: 10px; margin-right: 10px; width: auto; padding-left: 10px; padding-right: 6px; }
  .nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; border-radius: 26px;
    background: rgba(247, 244, 236, .94); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .topbar:not(.is-scrolled) .nav { left: 10px; right: 10px; }
  .hero__chip { right: 4px; font-size: .72rem; letter-spacing: .08em; }
  .orbs span { filter: blur(50px); }
  .orbs span:nth-child(1) { width: 260px; height: 260px; }
  .orbs span:nth-child(2) { width: 220px; height: 220px; }
  .orbs span:nth-child(3) { width: 200px; height: 200px; }
  .statement { height: 220vh; }
  .zoom { height: 220vh; }
  .zoom__photo { transform: scale(calc(.7 + .3 * var(--z, 0))); }
  .zoom__caption { padding: 1.5rem 1.4rem; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .card, .plan:not(.plan--featured), .form, .quotes blockquote, .plan--featured { border-radius: 18px; }
  .quickbar { background: var(--glass-bg); }
}

/* „Ogranicz ruch” w iOS: wersja bez animacji */
@media (prefers-reduced-motion: reduce) {
  .orbs span, .hero__chip, .hero__text > *, .hero__media > * { animation: none; }
  .hero__text, .hero__media { transform: none; opacity: 1; }
  .reveal { filter: none; }
  .statement, .zoom { height: auto; }
  .statement__sticky { position: static; height: auto; padding: 6rem 0; }
  .statement__text .w { opacity: 1; }
  .zoom__sticky { position: relative; height: 80svh; }
  .zoom__photo { transform: none; border-radius: 0; }
  .zoom__caption { opacity: 1; transform: translateX(-50%); }
  .card::before { display: none; }
}

/* ============================================================
   CIEMNE TŁO STRONY (tylko tło - reszta bez zmian)
   ============================================================ */
:root { --page-bg: #1c241f; }
body, .hero, .section:not(.section--deep), .zoom { background: var(--page-bg); }

/* --- tekst na ciemnym tle: jasny (szklane karty zostają z ciemnym tekstem) --- */
:root { --on-dark: #f1ede2; --on-dark-muted: #b8c2b2; }
body { color: var(--on-dark); }
.nav a:not(.btn) { color: var(--on-dark); }
.burger span { background: var(--on-dark); }
.logo-slot.is-empty { color: var(--gold-light); border-color: var(--gold-light); }
.hero__text h1, .about__text h2, .section__head h2, .contact__info h2 { color: var(--on-dark); }
.hero__text h1 em, .about__text h2 em, .section__head h2 em, .contact__info h2 em { color: var(--gold-light); }
.hero__text .eyebrow, .about__text .eyebrow, .section__head .eyebrow, .contact__info .eyebrow { color: var(--gold-light); }
.lead, .about__text p, .contact__info > p, .note { color: var(--on-dark-muted); }
.stats strong { color: var(--gold-light); }
.stats span { color: var(--on-dark-muted); }
.contact__list li, .contact__list a { color: var(--on-dark); }
.contact__list span { color: var(--gold-light); }
.btn--ghost { color: var(--on-dark); border-color: var(--gold-light); background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { color: var(--forest); }
.filters { background: rgba(255, 255, 255, .06); border-color: rgba(226, 201, 139, .35); }
.filter { color: var(--on-dark-muted); }
.filter:hover { color: var(--on-dark); }
.topbar.is-scrolled .topbar__inner { background: rgba(28, 36, 31, .62); border-color: rgba(226, 201, 139, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 45px -22px rgba(0, 0, 0, .6); }

/* --- szkło na ciemnym tle: ciemne szkło + jasny tekst --- */
:root {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  --glass-border: rgba(226, 201, 139, .28);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 24px 50px -24px rgba(0, 0, 0, .7);
}
.card::before { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 48%, transparent 66%); }
.card h3, .plan h3, .zoom__caption h2 { color: var(--on-dark); }
.card p, .plan li, .plan__price, .zoom__caption p:last-child { color: var(--on-dark-muted); }
.card__num, .zoom__caption .eyebrow, .zoom__caption h2 em, .quotes cite, .form label { color: var(--gold-light); }
.plan__price strong { color: var(--on-dark); }
.plan li { border-color: rgba(226, 201, 139, .16); }
.quotes p { color: var(--on-dark); }
.form input, .form select, .form textarea { background-color: rgba(255, 255, 255, .06); color: var(--on-dark); border-color: rgba(226, 201, 139, .3); }
.form input[type="date"] { color-scheme: dark; }
.form select option { color: var(--ink); }
.hero__chip { color: var(--on-dark); }
.hero__chip i { color: var(--gold-light); }
@media (max-width: 760px) {
  .nav { background: rgba(28, 36, 31, .94); }
  .quickbar { background: rgba(28, 36, 31, .8) !important; }
}

/* szkło leżące na jasnym zdjęciu: mocniej przyciemnione, żeby jasny tekst był czytelny */
.hero__chip, .zoom__caption { background: linear-gradient(135deg, rgba(28, 36, 31, .62), rgba(28, 36, 31, .45)); }
.zoom__caption p:last-child { color: var(--on-dark); }

/* --- prawdziwe logo (gdy plik jest wgrany) --- */
.logo-slot:not(.is-empty) { min-width: 0; width: auto; }
.logo-slot--small:not(.is-empty) { height: 46px; }
.topbar.is-scrolled .logo-slot--small:not(.is-empty) { height: 38px; }
.logo-slot--big:not(.is-empty) { height: 230px; margin-bottom: 2rem; }
@media (max-width: 760px) { .logo-slot--big:not(.is-empty) { height: 170px; } .logo-slot--small:not(.is-empty) { height: 40px; } }
.logo-slot:not(.is-empty) img { height: 100%; width: auto; }

/* logo w hero: wersja bez nazwiska, większa */
.logo-slot--big:not(.is-empty) { height: 340px; margin-bottom: 2.4rem; }
@media (max-width: 960px) { .logo-slot--big:not(.is-empty) { height: 300px; } }
@media (max-width: 760px) { .logo-slot--big:not(.is-empty) { height: 240px; margin-inline: auto; } }
.logo-slot--big:not(.is-empty) { width: fit-content; justify-content: flex-start; }

/* ============================================================
   PŁYNNE PRZEJŚCIA MIĘDZY SEKCJAMI
   ============================================================ */
/* poświata wygasa przy górnej i dolnej krawędzi sekcji, więc nie ma ostrego cięcia */
.orbs {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
/* ciemnozielone sekcje przechodzą w tło strony gradientem zamiast ostrej linii */
.ribbon { background: linear-gradient(to bottom, var(--page-bg), var(--forest)); }
.statement { background: linear-gradient(to bottom, var(--forest) 0, var(--forest) calc(100% - 240px), var(--page-bg) 100%); }
.section--deep { background: linear-gradient(to bottom, var(--page-bg) 0, var(--forest) 160px, var(--forest) calc(100% - 160px), var(--page-bg) 100%); }
.footer { background: linear-gradient(to bottom, var(--page-bg), var(--forest) 70%); }

/* ============================================================
   ANDROID (Samsung Internet, Chrome): strona deklaruje, że jest ciemna,
   więc przeglądarka nie nakłada własnego „trybu ciemnego” na kolory.
   ============================================================ */
:root { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
/* lista rozwijana w ciemnym schemacie: jasny tekst na ciemnym tle */
.form select option { background: var(--page-bg); color: var(--on-dark); }