.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #0b0d0c;
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  width: min(18rem, calc(100% - 2.5rem));
  text-align: center;
}

.loader__logo {
  width: 5.5rem;
  height: 5.5rem;
  animation: logo-pulse 1.8s var(--ease) infinite;
  filter: drop-shadow(0 0 24px rgba(200, 245, 66, 0.22));
}

.loader__logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.loader__mark {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: logo-draw 1.6s var(--ease) infinite;
}

.loader__dot {
  transform-origin: 32px 34px;
  animation: logo-dot 1.6s var(--ease) infinite;
}

.loader__brand {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.045em;
  color: #f2f5f0;
}

.loader__brand span {
  color: var(--accent);
}

.loader__bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(242, 245, 240, 0.1);
  overflow: hidden;
}

.loader__bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #e8ff8a);
  transition: width 0.2s linear;
}

.loader__meta {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* tylko ta podstrona — nie może wyciekać na resztę portfolio */
body.page-pokazowa.is-loading {
  overflow: hidden;
}

@keyframes logo-pulse {
  0%,
  100% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes logo-draw {
  0% {
    stroke-dashoffset: 120;
    opacity: 0.55;
  }
  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.75;
  }
}

@keyframes logo-dot {
  0%,
  35% {
    transform: scale(0.4);
    opacity: 0.3;
  }
  55%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
}