/* ============================================================
   WEDDING-22 | animations.css
   Supporting reveals — the headline kinetic-letter logic lives
   in main.css (.kchar-hero / .kinetic-title .kchar) driven by JS.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-guest {
  animation: heroFadeIn 0.7s var(--ease-out) 0.1s both;
}
.hero-sub {
  animation: heroFadeIn 0.7s var(--ease-out) 1.1s both;
}
.hero-meta {
  animation: heroFadeIn 0.7s var(--ease-out) 1.25s both;
}
.hero-actions {
  animation: heroFadeIn 0.7s var(--ease-out) 1.4s both;
}

@keyframes stripeShift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}
.hero-stripes {
  animation: stripeShift 20s linear infinite;
}

@keyframes imgFadeLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
img.loaded {
  animation: imgFadeLoad 0.5s ease forwards;
}