/* Strona główna: tryptyk z logo i dyscypliny. Wartości z tokens.css. */

/* === Motta wzdłuż krawędzi ekranu (ozdobnik) === */

.home-motto {
  position: fixed;
  top: 50%;
  z-index: var(--z-content);
  font-family: var(--font-jp);
  font-size: var(--fs-label);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-airy);
  color: var(--color-ink-faint);
  writing-mode: vertical-rl;
}

.home-motto--right { right: var(--space-6); transform: translateY(-50%); }

.home-motto--left { left: var(--space-6); transform: translateY(-50%) rotate(180deg); }

@media (max-width: 64rem) {
  .home-motto { display: none; }
}

/* === Tryptyk: trzy prace w passe-partout logo === */

/* Tryptyk w oknach ramki (ramka: base.css); odstęp 20/520 szerokości okien */
.hero-gallery {
  display: flex;
  gap: 3.846%;
}

.hero-slot {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Praca czekająca na swoją kolej w tryptyku (dokłada ją skrypt) */
.hero-photo[data-waiting] { opacity: 0; }


/* === Nagłówek i dyscypliny === */

.home-masthead { padding-top: var(--space-6); }

.disciplines {
  max-width: var(--width-text);
  margin: 0 auto;
  padding: var(--space-2) var(--space-6) 0;
}

.discipline-list {
  list-style: none;
  padding-left: var(--space-7);
}

.discipline {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  text-decoration: none;
  border-bottom: var(--line-width) solid var(--color-accent-soft);
}

.discipline::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--line-width));
  left: 0;
  width: 0;
  height: var(--line-width);
  background: var(--color-accent);
  transition: width 0.8s ease;
}

.discipline:hover::after { width: 100%; }

.discipline-name {
  font-size: var(--fs-title-sm);
  transition: color var(--dur-fast) ease;
}

.discipline:hover .discipline-name { color: var(--color-accent); }

.discipline-latin {
  font-family: var(--font-jp);
  font-size: var(--fs-small);
  font-weight: var(--weight-regular);
  color: var(--color-ink-soft);
}

@media (max-width: 40rem) {
  .disciplines { padding: var(--space-2) var(--space-5) 0; }

  .discipline-list { padding-left: var(--space-5); }
}

/* === Pulsująca kropka u dołu ekranu === */

.tomato-accent {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  z-index: var(--z-ornament);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.3;
  transform: translateX(-50%);
}

/* === Wejście strony: kolejne elementy pojawiają się po sobie === */

@media (prefers-reduced-motion: no-preference) {
  .hero-photo { transition: opacity 2.5s ease; }

  .home-masthead .masthead-title { animation: rise var(--dur-slow) ease-out 0.8s both; }

  .home-masthead .masthead-subtitle { animation: rise var(--dur-slow) ease-out 1.2s both; }

  .home-divider { animation: fade-in 1s ease-out 1.6s both; }

  .disciplines { animation: rise 1s ease-out 2s both; }

  .home-motto--right { animation: fade-in 2s ease-out 2.5s both; }

  .home-motto--left { animation: fade-in 2s ease-out 2.8s both; }

  .home .footer { animation: fade-in 1s ease-out 3.2s both; }

  .tomato-accent { animation: tomato-pulse 4s ease-in-out 3s infinite, fade-in 1s ease-out 3s both; }
}

@keyframes tomato-pulse {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateX(-50%) scale(1.5); }
}