:root {
  --bg-night: #0a1f29;
  --bg-final: #fffaf3;
  --star: #fef8de;
  --text: #000;
  --accent: #ea5b0c;
  --font-main: "Poppins", system-ui, sans-serif;

  --fade-in: 600ms;
  --fade-out: 700ms;
  --bg-swap: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg-night);
  color: var(--text);
  font-family: var(--font-main);
  overflow: hidden;
  transition: background-color var(--bg-swap) ease-in-out;
  -webkit-font-smoothing: antialiased;
}

body.is-final { background: var(--bg-final); }

.stage {
  position: fixed;
  inset: 0;
  height: 100dvh;
  transition: opacity var(--fade-out) ease-in-out, visibility 0s linear var(--fade-out);
}

body.is-final .stage {
  opacity: 0;
  visibility: hidden;
}

.stage canvas,
.stage__anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Do wczytania animacji widać samo tło z gwiazdkami, potem pierwsza klatka płynnie się pojawia */
  opacity: 0;
  transition: opacity var(--fade-in) ease-out;
}

body.is-ready .stage canvas,
body.is-ready .stage__anim { opacity: 1; }

/* Zapasowy odtwarzacz (lottie-web, SVG) — gdy WebAssembly jest niedostępny */
.stage__anim svg { display: block; }

/* 4 gwiazdki w tle — pozycje z ramki 1440 × 760 przeliczone na % */
.star {
  position: absolute;
  margin: 0;
  color: var(--star);
  line-height: normal;
  pointer-events: none;
  user-select: none;
}
.star--1 { left: 6.94%;  top: 7.89%;  font-size: 20px; opacity: .5; }
.star--2 { left: 90.28%; top: 10.53%; font-size: 16px; opacity: .4; }
.star--3 { left: 5.56%;  top: 78.95%; font-size: 14px; opacity: .45; }
.star--4 { left: 93.06%; top: 76.32%; font-size: 18px; opacity: .35; }

/* Ekran końcowy */
.final {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Treść wyśrodkowana marginesami auto (logo i stopka), a nie justify-content: center —
     przy niskim ekranie (telefon poziomo) stopka nie nachodzi na tekst, a całość da się przewinąć */
  padding: 24px 16px max(32px, env(safe-area-inset-bottom));
  text-align: center;
  visibility: hidden;
  overflow-y: auto;
}

body.is-final .final { visibility: visible; }

.final > * {
  opacity: 0;
  transform: translateY(16px);
}

body.is-final .final > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--bg-swap) * .6 + var(--i, 0) * 140ms);
}

.logo {
  position: relative;
  flex-shrink: 0;
  width: clamp(170px, min(18.4vw, 34.8vh), 265px);
  aspect-ratio: 265 / 67.178;
  margin: auto 0 clamp(32px, min(5vw, 9.6vh), 73px);
}
.logo img {
  position: absolute;
  display: block;
  max-width: none;
}
.logo .l1 { left: 0;      top: 0;      width: 54.36%; height: 99.7%; }
.logo .l2 { left: 57.82%; top: 0;      width: 32.14%; height: 31.16%; }
.logo .l3 { left: 56.85%; top: 37.18%; width: 43.15%; height: 25.58%; }
.logo .l4 { left: 57.39%; top: 75.84%; width: 32.44%; height: 24.16%; }

.title {
  margin: 0 0 24px;
  font-weight: 500;
  font-size: clamp(44px, min(6.67vw, 12.6vh), 96px);
  line-height: 1.1;
}

.lead {
  --fs: clamp(18px, min(2.5vw, 4.75vh), 36px);
  max-width: min(24em, 100%);
  margin: 0 0 calc(var(--fs) * .667);
  font-size: var(--fs);
  font-weight: 300;
  line-height: 1.2;
  text-wrap: balance;
}
.lead:last-of-type { margin-bottom: 0; }

.lead strong,
.lead--accent {
  color: var(--accent);
  font-weight: 500;
}

.credits {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 32px; /* minimalny odstęp od ostatniego akapitu */
  display: flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}
.credits img { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  body, .stage, .stage canvas, .stage__anim, .final > *, body.is-final .final > * {
    transition: none !important;
  }
}