/* ============ FALLBACK — tier lite / static ============
   Bloki/rules/tabele/outline = czysty CSS, identyczne na każdym tierze.
   Sandwich przeżywa bez WebGL: WebP na z-index 2 między liniami z1/z3.
   ======================================================== */

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

/* WebP butelki w środku sandwicha (hero + kup) */
html[data-tier="lite"] .s-hero .bottle-fallback,
html[data-tier="static"] .s-hero .bottle-fallback,
html[data-tier="lite"] .s-buy .bottle-fallback,
html[data-tier="static"] .s-buy .bottle-fallback {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
}
html[data-tier="lite"] .s-hero .bottle-fallback,
html[data-tier="static"] .s-hero .bottle-fallback {
  top: 16%;
  left: 56%;
  width: min(32vw, 460px);
}
html[data-tier="lite"] .s-buy .bottle-fallback,
html[data-tier="static"] .s-buy .bottle-fallback {
  top: clamp(40px, 8vh, 120px);
  left: 58%;
  width: min(24vw, 320px);
}
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); }
}

/* marquee CSS-only */
html[data-tier="lite"] .marquee__track,
html[data-tier="static"] .marquee__track {
  animation: marqueeLoop 22s linear infinite;
}
html[data-tier="lite"] .s-wall__row--outline .marquee__track,
html[data-tier="static"] .s-wall__row--outline .marquee__track {
  animation-direction: reverse;
}
@keyframes marqueeLoop {
  to { transform: translateX(-50%); }
}

/* mega-liczby bez pinu: 3 stackowane rzędy */
html[data-tier="lite"] .s-num__pin,
html[data-tier="static"] .s-num__pin { min-height: 0; }
html[data-tier="lite"] .s-num__stage,
html[data-tier="static"] .s-num__stage {
  flex-direction: column;
  min-height: 0;
}
html[data-tier="lite"] .s-num__slide,
html[data-tier="static"] .s-num__slide {
  position: static;
  min-height: 60vh;
}
html[data-tier="lite"] .s-num .bottle-anchor,
html[data-tier="static"] .s-num .bottle-anchor,
html[data-tier="lite"] .s-num__progress,
html[data-tier="static"] .s-num__progress { display: none; }

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

@media (max-width: 899px) {
  html[data-tier="lite"] .s-hero .bottle-fallback,
  html[data-tier="static"] .s-hero .bottle-fallback { left: 48%; width: min(52vw, 300px); top: 14%; }
}