/* Intro strony V2 (js/v2-intro.js). Nakładkę buduje moduł; zasłonę przed jego startem daje bramka w <head>
   (lib/intro.mjs). Tylko tokeny semantyczne. Nakładka leży nad wszystkim, nie zmienia układu strony. */

.gs-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

/* 1 „Znak”: powierzchnia z wyrastającym znakiem, potem unosi się jak kurtyna. */
.gs-intro--1 {
  display: grid;
  place-items: center;
  background: var(--gs-surface);
}

.gs-intro__mark {
  /* Maska liter z zapasem na ogonki (g, ę); własny element, więc padding nie rusza strony. */
  overflow: clip;
  padding: 0.12em 0.08em 0.22em;
  color: var(--gs-ink);
  font-family: var(--gs-font-display);
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.gs-intro__mark .gs-logo__accent {
  color: var(--gs-brand);
}

.gs-intro__char {
  display: inline-block;
  will-change: transform;
}

/* 2 „Karta”: bez nakładki kolorem; tło strony jest powierzchnią, rośnie sama karta hero (clip-path).
   Nakładka jest przezroczysta i tylko łapie kliknięcie „pomiń”. */
.gs-intro--2 {
  background: transparent;
}

/* 2 „Karta” z galerią: aranżacje w małej karcie nad kartą hero; ramka ustawiana w px przez moduł. */
.gs-intro__gallery {
  position: absolute;
  overflow: hidden;
  border-radius: 20px;
}

.gs-intro__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, clip-path;
}

/* 3 „Tkanina”: pasy jak próbki tkanin w odcieniach marki, z delikatnym splotem, opadają po kolei. */
.gs-intro--3 {
  display: flex;
}

/* Pasy zachodzą na siebie o 1 px (bez szczeliny ze zdjęciem); dół zaokrąglony jak próbka w próbniku. */
.gs-intro__strip {
  flex: 1 1 0;
  height: 100%;
  margin-right: -1px;
  border-radius: 0 0 var(--gs-radius-sheet) var(--gs-radius-sheet);
  background-color: var(--gs-intro-strip, var(--gs-brand-deep));
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--gs-bg) 7%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--gs-ink) 9%, transparent) 0 1px, transparent 1px 4px);
  will-change: transform;
}

.gs-intro__strip:nth-child(6n + 1) {
  --gs-intro-strip: var(--gs-brand-deep);
}
.gs-intro__strip:nth-child(6n + 2) {
  --gs-intro-strip: color-mix(in srgb, var(--gs-brand) 78%, var(--gs-ink));
}
.gs-intro__strip:nth-child(6n + 3) {
  --gs-intro-strip: var(--gs-brand);
}
.gs-intro__strip:nth-child(6n + 4) {
  --gs-intro-strip: color-mix(in srgb, var(--gs-brand-deep) 55%, var(--gs-ink));
}
.gs-intro__strip:nth-child(6n + 5) {
  --gs-intro-strip: color-mix(in srgb, var(--gs-brand) 55%, var(--gs-brand-tint));
}
.gs-intro__strip:nth-child(6n + 6) {
  --gs-intro-strip: color-mix(in srgb, var(--gs-brand-deep) 80%, var(--gs-brand));
}

/* Maska linii H1 w trakcie intro (jak w js/motion.js): zapas na ogonki bez zmiany układu. */
.gs-intro-line-mask {
  overflow-clip-margin: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .gs-intro {
    display: none;
  }
}