/* ============ FALLBACK — tier lite / static ============
   lite:   bez WebGL — gradient nieba z CSS custom props (JS pisze te same
           keyframe'y co shader), gwiazdy SVG speckle, słońce radial-gradient
   static: zamrożony świt (najbardziej brandowy keyframe), zero animacji
   ======================================================== */

:root {
  /* start: noc (lite nadpisuje co klatkę z sky-keyframes.js) */
  --sky-top: #05030F;
  --sky-mid: #0D0826;
  --sky-hor: #1B1346;
  --star-fade: 1;
  --sun-glow: 0;
  --sun-x: 62%;
  --sun-y: 112%;
}

/* niebo CSS ukryte na full (WebGL renderuje) */
.sky-css { display: none; }

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

html[data-tier="lite"] .sky-css,
html[data-tier="static"] .sky-css {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(to top, var(--sky-hor), var(--sky-mid) 45%, var(--sky-top));
}

.sky-css__stars {
  position: absolute;
  inset: 0;
  opacity: var(--star-fade);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='white'><circle cx='12' cy='34' r='1'/><circle cx='67' cy='12' r='.7'/><circle cx='121' cy='58' r='1.1'/><circle cx='180' cy='25' r='.8'/><circle cx='203' cy='98' r='.6'/><circle cx='44' cy='112' r='.9'/><circle cx='90' cy='156' r='.7'/><circle cx='150' cy='130' r='1'/><circle cx='28' cy='190' r='.8'/><circle cx='175' cy='185' r='.6'/><circle cx='105' cy='88' r='.5'/><circle cx='205' cy='160' r='.9'/></g></svg>");
  background-size: 220px 220px;
}

.sky-css__sun {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: 38vmin;
  height: 38vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: var(--sun-glow);
  background: radial-gradient(circle,
    rgba(255, 247, 230, .95) 0%,
    rgba(255, 179, 71, .7) 18%,
    rgba(255, 107, 53, .35) 45%,
    rgba(255, 31, 143, 0) 72%);
}

/* statyczne WebP butelki */
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); }
}

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

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

/* sceny 3D bez fallback-imga = puste gapy — chowamy */
html[data-tier="lite"] .s-how__stage,
html[data-tier="static"] .s-how__stage,
html[data-tier="lite"] .s-sen__stage,
html[data-tier="static"] .s-sen__stage { display: none; }

/* piny spłaszczone do zwykłych bloków */
html[data-tier="lite"] .s-how__step,
html[data-tier="static"] .s-how__step,
html[data-tier="lite"] .s-sen__beat,
html[data-tier="static"] .s-sen__beat {
  position: static;
  opacity: 1;
  visibility: visible;
  margin-bottom: 28px;
}
html[data-tier="lite"] .s-how__railfill,
html[data-tier="static"] .s-how__railfill { transform: scaleY(1); }

/* sekcja świt — tekst widoczny bez scrubu */
html[data-tier="lite"] .s-swit,
html[data-tier="static"] .s-swit { min-height: 90vh; }

/* ============ STATIC: zamrożony świt ============ */
html[data-tier="static"] {
  --sky-top: #1B1346;
  --sky-mid: #E91E63;
  --sky-hor: #FF6B35;
  --star-fade: 0;
  --sun-glow: 0.9;
  --sun-x: 56%;
  --sun-y: 62%;
}
html[data-tier="static"] .sky-css__stars,
html[data-tier="static"] .marquee__track,
html[data-tier="static"] .bottle-fallback { animation: none; }
html[data-tier="static"] .loader { display: none; }
html[data-tier="static"] .hud { display: none; }