/* Intro "kropka-matka": see. -> see. architecture + see. construction -> reveal strony. */

html.see-intro {
  overflow: hidden;
}

/* Biała zasłona od pierwszej klatki, zanim JS zbuduje overlay (brak mignięcia strony). */
html.see-intro::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 2147483646;
}

.see-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(56px, 12vh, 140px);
  background: #fff;
  cursor: pointer;
  -webkit-mask-image: radial-gradient(circle at var(--see-hole-x, 50%) var(--see-hole-y, 50%), transparent var(--see-hole-r, 0px), #000 calc(var(--see-hole-r, 0px) + 1px));
  mask-image: radial-gradient(circle at var(--see-hole-x, 50%) var(--see-hole-y, 50%), transparent var(--see-hole-r, 0px), #000 calc(var(--see-hole-r, 0px) + 1px));
}

.see-intro-parent {
  width: clamp(200px, 36vw, 440px);
}

.see-intro-children {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 14vw, 220px);
}

.see-intro-child {
  width: clamp(130px, 20vw, 260px);
}

/* Okno maskujące: logo wjeżdża od dołu spod krawędzi. */
.see-intro-mask {
  overflow: hidden;
  line-height: 0;
}

.see-intro-mask img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(105%);
  /* Kropka z grafiki jest ukryta - zastępuje ją animowane kółko .see-intro-dot. */
  clip-path: inset(0 10% 0 0);
}

.see-intro-dot {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: #000;
  transform: scale(0);
  will-change: transform;
}

.see-intro-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.see-intro-lines line {
  stroke: #000;
  stroke-width: 1;
  opacity: 0.35;
}

.see-intro-skip {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font: 400 12px/1 Satoshi, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  opacity: 0.4;
}