/* ============================================================
   WYDAJNOŚĆ (ładowany na końcu, po wszystkich stylach)
   Pomiar wskazał trzy najcięższe rzeczy dla karty graficznej telefonu:
   1. 18 animowanych plam z filter: blur(70px) - przeliczane w każdej klatce,
   2. 23 elementy z backdrop-filter (szkło) - rozmywanie tła przy przewijaniu,
   3. 37 elementów pojawiających się z animowanym filter: blur.
   Wygląd zostaje ten sam, zmienia się sposób rysowania.
   ============================================================ */

/* 1. Plamy pod szkłem: miękki gradient zamiast filtra rozmycia.
      Animowany jest tylko transform, który karta graficzna przesuwa bez przerysowywania. */
.orbs span {
  filter: none;
  will-change: transform;
  opacity: .6;
}
.orbs span:nth-child(1) { width: 600px; height: 600px; left: -210px; top: 2%;
  background: radial-gradient(closest-side, rgba(156, 175, 136, .95), rgba(156, 175, 136, .35) 45%, rgba(156, 175, 136, 0)); }
.orbs span:nth-child(2) { width: 500px; height: 500px; right: -160px; top: 28%;
  background: radial-gradient(closest-side, rgba(226, 201, 139, .95), rgba(226, 201, 139, .35) 45%, rgba(226, 201, 139, 0)); }
.orbs span:nth-child(3) { width: 460px; height: 460px; left: 36%; bottom: -200px;
  background: radial-gradient(closest-side, rgba(201, 212, 188, .95), rgba(201, 212, 188, .35) 45%, rgba(201, 212, 188, 0)); }
@media (max-width: 760px) {
  .orbs span { filter: none; }
  .orbs span:nth-child(1) { width: 380px; height: 380px; }
  .orbs span:nth-child(2) { width: 330px; height: 330px; }
  .orbs span:nth-child(3) { width: 300px; height: 300px; }
}

/* 2. Szkło: backdrop-filter zostaje tylko tam, gdzie pod spodem jest zdjęcie albo treść
      (wyspa, dolny pasek, podpis na dużym zdjęciu, napis na zdjęciu w hero).
      Karty leżą na ciemnym, gładkim tle - rozmycie i tak nie było tam widać. */
.card, .plan, .quotes blockquote, .form, .filters, .kal.glass, .btn--ghost {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.plan--featured { background: linear-gradient(160deg, rgba(47, 61, 50, .96), rgba(47, 61, 50, .88)); }

/* 3. Pojawianie się: tylko przezroczystość i przesunięcie, bez animowanego rozmycia */
.reveal, .reveal.is-visible { filter: none !important; }
.reveal { transition: opacity 1s var(--ease-apple), transform 1.2s var(--ease-apple); transition-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }

/* elementy przesuwane przy każdym przewinięciu dostają własną warstwę */
.hero__text, .hero__media, .zoom__photo, .zoom__caption { will-change: transform, opacity; }

/* 4. Sekcja z dużym zdjęciem (zoom) - płynność na iPhonie
      - zaokrąglenie zdjęcia było liczone w każdej klatce przewijania (z 48 do 0 px), co
        zmuszało Safari do przerysowania zdjęcia wielkości ekranu; teraz jest stałe, a zdjęcie
        tylko się skaluje (to liczy karta graficzna),
      - szklany podpis przesuwał się nad zdjęciem z rozmyciem tła, które Safari liczył od nowa
        w każdej klatce; teraz ma pełne przyciemnienie bez rozmycia (wygląda prawie tak samo). */
.zoom__photo { border-radius: 22px; will-change: transform; transform-origin: 50% 50%; }
.zoom__caption {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: rgba(22, 29, 25, .86) !important;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .zoom__photo { border-radius: 0; } }

/* 5. Jedno szkło na całej stronie: to samo co w dynamicznej wyspie, kółku języków i kapsułce
      wiadomości (--capsule-tint i --capsule-blur z wyspa.css: półprzezroczysta zieleń,
      rozmycie 10 px, nasycenie 160%, obwódka 22% bieli). Zastępuje jaśniejsze szkło z effects.css
      i wyłączone wcześniej rozmycie z punktu 2. Rozmycie 10 px jest lżejsze dla telefonu niż
      dawne 22 px, ale jeśli przewijanie na iPhonie zacznie przycinać, to jest pierwsze miejsce
      do sprawdzenia. */
.card, .plan, .quotes blockquote, .form, .filters, .kal.glass, .zoom__caption, .quickbar, .hero__chip {
  background: var(--capsule-tint) !important;
  -webkit-backdrop-filter: var(--capsule-blur) !important;
          backdrop-filter: var(--capsule-blur) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
}
/* polecany pakiet zostaje wyróżniony złotą obwódką */
.plan--featured { border-color: rgba(206, 181, 136, .7) !important; }