/* ============ FALLBACK — tier lite / static ============
   lite:   bez WebGL — CSS blobs + statyczne WebP butelki
   static: jak lite, ale gradienty zamrożone (reduced-motion / brak GL)
   ======================================================== */

/* Blobs ukryte na full (WebGL renderuje ciecz) */
.blobs { display: none; }

html[data-tier="lite"] .gl,
html[data-tier="static"] .gl { display: none; }

html[data-tier="lite"] .bottle-fallback,
html[data-tier="static"] .bottle-fallback {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(78%, 380px);
  height: auto;
}

html[data-tier="lite"] .bottle-fallback {
  animation: bottleFloat 7s ease-in-out infinite;
}
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-12px) rotate(1.2deg); }
}

/* Płynne tło z CSS — tanie blur bloby, compositor-only transform */
html[data-tier="lite"] .blobs,
html[data-tier="static"] .blobs {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(195deg, var(--navy-night) 0%, var(--navy) 38%, #571049 68%, var(--pink-deep) 100%);
}

.blobs__b {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}
.blobs__b--1 {
  width: 55vw; height: 55vw;
  left: -12vw; top: -8vh;
  background: radial-gradient(circle, var(--pink) 0%, transparent 65%);
  animation: blobDrift1 26s ease-in-out infinite alternate;
}
.blobs__b--2 {
  width: 48vw; height: 48vw;
  right: -14vw; top: 28vh;
  background: radial-gradient(circle, var(--orange) 0%, transparent 65%);
  animation: blobDrift2 31s ease-in-out infinite alternate;
}
.blobs__b--3 {
  width: 42vw; height: 42vw;
  left: 18vw; bottom: -16vh;
  background: radial-gradient(circle, var(--yellow) 0%, transparent 65%);
  animation: blobDrift3 23s ease-in-out infinite alternate;
  opacity: .4;
}

@keyframes blobDrift1 { to { transform: translate(14vw, 16vh) scale(1.15); } }
@keyframes blobDrift2 { to { transform: translate(-12vw, -10vh) scale(.9); } }
@keyframes blobDrift3 { to { transform: translate(10vw, -14vh) scale(1.2); } }

html[data-tier="static"] .blobs__b,
html[data-tier="static"] .bottle-fallback { animation: none; }

/* Marquee CSS-only na lite/static (na full napędza GSAP) */
html[data-tier="lite"] .marquee__track,
html[data-tier="static"] .marquee__track {
  animation: marqueeLoop 26s linear infinite;
}
html[data-tier="lite"] .marquee--rev .marquee__track,
html[data-tier="static"] .marquee--rev .marquee__track {
  animation-direction: reverse;
}
@keyframes marqueeLoop {
  to { transform: translateX(-50%); }
}
html[data-tier="static"] .marquee__track { animation: none; }

/* Manifest czytelny bez scrub-reveala */
html[data-tier="lite"] .s-manifesto__line .w,
html[data-tier="static"] .s-manifesto__line .w { opacity: 1; }

/* Pin-sekcje działają jak zwykłe bloki */
html[data-tier="lite"] .s-how__step,
html[data-tier="static"] .s-how__step {
  position: static;
  opacity: 1;
  visibility: visible;
  margin-bottom: 40px;
}

/* Sekcja "kiedy": elementy widoczne bez GSAP */
html[data-tier="lite"] .s-when__line,
html[data-tier="static"] .s-when__line { transform: scaleY(1) scaleX(1); }

html[data-tier="lite"] .s-how__railfill,
html[data-tier="static"] .s-how__railfill { transform: scaleY(1); }

/* Loader nie blokuje na static (brak JS-owych animacji wejścia) */
html[data-tier="static"] .loader { display: none; }