/* ==========================================================================
   JAKUBIEC MEDIA — intro (tylko HOME)
   Pełnoekranowa nakładka nad gotową treścią strony (position: fixed, nie
   wpływa na layout ani CLS). Chowana natychmiast przez klasę html.no-intro,
   ustawianą inline-skryptem w <head> PRZED pierwszym malowaniem, gdy intro
   było już widziane w tej sesji albo użytkownik woli ograniczony ruch.
   ========================================================================== */

html.no-intro .intro {
  display: none;
}

html.intro-lock {
  overflow: hidden;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--gutter);
  background: var(--color-black);
  overflow: hidden;
  opacity: 1;
  transition: opacity 500ms ease;
}

.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.intro.is-leaving.is-fast {
  transition-duration: 250ms;
}

.intro__line {
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 550ms var(--ease-out);
}

.intro.is-line .intro__line {
  width: 7rem;
}

.intro__logo {
  width: clamp(170px, 32vw, 260px);
  height: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 600ms ease, transform 600ms var(--ease-out);
}

.intro.is-logo .intro__logo {
  opacity: 1;
  transform: none;
}

.intro__tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55em;
  max-width: 90vw;
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 0.85rem + 1vw, 1.375rem);
  color: var(--color-white);
  text-align: center;
}

.intro__word {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.intro.is-tagline .intro__word {
  opacity: 1;
  transform: none;
}

.intro.is-tagline .intro__word:nth-child(1) { transition-delay: 0ms; }
.intro.is-tagline .intro__word:nth-child(2) { transition-delay: 140ms; }
.intro.is-tagline .intro__word:nth-child(3) { transition-delay: 280ms; }

.intro__skip {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  padding: 0.65em 1.15em;
  background: transparent;
  border: 1px solid rgb(250 250 248 / 0.25);
  border-radius: var(--radius-sm);
  color: rgb(250 250 248 / 0.7);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms ease 300ms, color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.intro.is-line .intro__skip {
  opacity: 1;
}

.intro__skip:hover,
.intro__skip:focus-visible {
  color: var(--color-white);
  border-color: var(--color-gold);
}

@media (max-width: 480px) {
  .intro__skip {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

/* Dodatkowe zabezpieczenie: nawet gdyby inline-skrypt w <head> zawiódł
   (np. zablokowany JS), reduced-motion i tak chowa animację przez CSS. */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}