/* ============================================================
   JURLEJ — PRELOADER
   1. Kreska rysuje kontur zębatki (jak rysunek techniczny w tłach).
   2. Sygnet wkręca się na miejsce konturu, licznik dochodzi do 100.
   3. Od środka rozchodzi się okrąg z bordową krawędzią i odsłania
      stronę; dopiero wtedy rusza wejście hero (js/hero.js czeka na
      window.jurlejWstep z js/wstep.js).
   Raz na wizytę; bez JS i przy ograniczonym ruchu się nie pokazuje.
   ============================================================ */
@property --otw {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.wstep { display: none; }
.js .wstep {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(38, 37, 37, .06) 1px, transparent 1px) 50% 50% / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .06) 1px, transparent 1px) 50% 50% / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(rgba(38, 37, 37, .035) 1px, transparent 1px) 50% 50% / calc(24 * var(--u)) calc(24 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .035) 1px, transparent 1px) 50% 50% / calc(24 * var(--u)) calc(24 * var(--u)),
    #f8f8f8;
  /* otwór w środku — rośnie przy odsłanianiu */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--otw), #000 calc(var(--otw) + .5px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--otw), #000 calc(var(--otw) + .5px));
}
html.wstep-trwa { overflow: hidden; }

/* linie wymiarowe przez środek, jak na rysunku */
.wstep::before,
.wstep::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(143, 29, 20, .28);
  translate: -50% -50%;
}
.wstep::before { width: calc(520 * var(--u)); height: 1px; animation: wstep-linia-x 1s var(--ease) both; }
.wstep::after { width: 1px; height: calc(520 * var(--u)); animation: wstep-linia-y 1s var(--ease) .1s both; }
@keyframes wstep-linia-x { from { width: 0; } }
@keyframes wstep-linia-y { from { height: 0; } }

.wstep__srodek {
  position: relative;
  z-index: 1;
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  transition: opacity .45s var(--ease), scale .6s var(--ease);
}
.wstep__rys,
.wstep__syg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* kontur zębatki — rysowany kreską */
.wstep__rys { overflow: visible; fill: none; stroke: var(--czerwien); stroke-width: .35; stroke-linejoin: round; animation: wstep-znika .5s var(--ease) 1.25s forwards; }
.wstep__rys * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.wstep__rys .z1 { animation: wstep-rysuj 1.1s cubic-bezier(.6, 0, .3, 1) .15s forwards; }
.wstep__rys .z2 { animation: wstep-rysuj .7s cubic-bezier(.6, 0, .3, 1) .55s forwards; }
.wstep__rys .z3 { animation: wstep-rysuj .8s cubic-bezier(.6, 0, .3, 1) .35s forwards; stroke: rgba(38, 37, 37, .35); stroke-width: .2; }
@keyframes wstep-rysuj { to { stroke-dashoffset: 0; } }
@keyframes wstep-znika { to { opacity: 0; } }

/* sygnet wkręca się w kontur */
.wstep__syg {
  opacity: 0;
  rotate: -150deg;
  scale: .7;
  filter: drop-shadow(0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .2));
  animation: wstep-wkrec 1.2s cubic-bezier(.16, 1, .3, 1) .95s forwards;
}
@keyframes wstep-wkrec { to { opacity: 1; rotate: 0deg; scale: 1; } }

.wstep__licznik {
  position: absolute;
  left: 50%;
  top: calc(50% + 120 * var(--u));
  margin: 0;
  translate: -50% 0;
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
  font: 400 calc(22 * var(--u))/1 'Draco', sans-serif;
  letter-spacing: .08em;
  color: var(--grafit);
  font-variant-numeric: tabular-nums;
  transition: opacity .4s var(--ease);
}
.wstep__licznik i { font-style: normal; font-size: .6em; color: var(--czerwien); }
.wstep__napis {
  position: absolute;
  left: 50%;
  top: calc(50% - 150 * var(--u));
  margin: 0;
  translate: -50% 0;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a8483;
  animation: wstep-pojaw .9s var(--ease) .3s both;
  transition: opacity .4s var(--ease);
}
@keyframes wstep-pojaw { from { opacity: 0; translate: -50% calc(10 * var(--u)); } }

/* bordowa krawędź rosnącego otworu */
.wstep__pierscien {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(2 * var(--otw) + 6px);
  height: calc(2 * var(--otw) + 6px);
  translate: -50% -50%;
  border: 3px solid var(--czerwien);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* odsłanianie */
.wstep.jest-otwarcie {
  --otw: 120vmax;
  transition: --otw 1.15s cubic-bezier(.7, 0, .2, 1);
}
.wstep.jest-otwarcie .wstep__pierscien { opacity: 1; }
.wstep.jest-otwarcie .wstep__srodek { opacity: 0; scale: 1.25; }
.wstep.jest-otwarcie .wstep__licznik,
.wstep.jest-otwarcie .wstep__napis { opacity: 0; }
.wstep.jest-otwarcie::before,
.wstep.jest-otwarcie::after { opacity: 0; transition: opacity .3s; }

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .wstep__srodek { width: calc(110 * var(--u)); height: calc(110 * var(--u)); }
  .wstep__licznik { top: calc(50% + 92 * var(--u)); font-size: calc(18 * var(--u)); }
  .wstep__napis { top: calc(50% - 116 * var(--u)); font-size: calc(9 * var(--u)); }
  .wstep::before { width: calc(300 * var(--u)); }
  .wstep::after { height: calc(300 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .wstep { display: none; }
}