/* Hareket: kaydırınca belirme, gecikme sınıfları, başlık satır maskesi, Ken Burns.
   .is-pre sınıfını reveal.js yalnızca ilk ekranın altındaki öğelere ekler (ilk ekran beklemeden görünür). */

.reveal {
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}

.reveal.is-pre {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

/* Yandan giriş yalnızca geniş ekranda; mobilde alttan gelir (taşma ve kayma olmasın) */
@media (min-width: 1024px) {
  .reveal-left.is-pre {
    transform: translateX(calc(-1 * var(--reveal-distance)));
  }

  .reveal-right.is-pre {
    transform: translateX(var(--reveal-distance));
  }
}

.reveal-zoom.is-pre {
  transform: scale(0.94);
}

/* Kademeli gecikme (inline style yerine sınıf) */
.d-1 { transition-delay: calc(var(--delay-step) * 1); animation-delay: calc(var(--delay-step) * 1); }
.d-2 { transition-delay: calc(var(--delay-step) * 2); animation-delay: calc(var(--delay-step) * 2); }
.d-3 { transition-delay: calc(var(--delay-step) * 3); animation-delay: calc(var(--delay-step) * 3); }
.d-4 { transition-delay: calc(var(--delay-step) * 4); animation-delay: calc(var(--delay-step) * 4); }

/* Başlık satırları: maske içinden yukarı kayar */
.lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.lines .line > span {
  display: block;
  animation: line-up var(--duration-line) var(--ease-out) both;
}

.lines .line:nth-child(2) > span { animation-delay: calc(var(--delay-step) * 1.5); }
.lines .line:nth-child(3) > span { animation-delay: calc(var(--delay-step) * 3); }

@keyframes line-up {
  from { transform: translateY(105%); }
  to { transform: none; }
}

/* Alttan yumuşak giriş (rozet, metin, butonlar) */
.rise {
  animation: rise var(--duration-reveal) var(--ease-out) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes kenburns {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-pre {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lines .line > span,
  .rise,
  .page-hero-media img {
    animation: none;
  }
}