:root {
  --animation-duration-first: 20s; /* First word total animation duration */
  --animation-duration: 10s; /* Total animation duration */
}

@keyframes word {
  0% {
    transform: translateY(100%);
  }
  10% {
    transform: translateY(-10%);
    animation-timing-function: ease-out;
  }
  12.5% {
    transform: translateY(0);
  }
  25%,
  100% {
    transform: translateY(-110%);
  }
}

/* Subtle pattern for pinned cards */
.pinned-card { background: none; }

.animate-word {
  animation: word var(--animation-duration) infinite;
}
.animate-word-delay-1 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-1 * (var(--animation-duration) / 8));
}
.animate-word-delay-2 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-2 * (var(--animation-duration) / 8));
}
.animate-word-delay-3 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-3 * (var(--animation-duration) / 8));
}
.animate-word-delay-4 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-4 * (var(--animation-duration) / 8));
}
.animate-word-delay-5 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-5 * (var(--animation-duration) / 8));
}
.animate-word-delay-6 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-6 * (var(--animation-duration) / 8));
}
.animate-word-delay-7 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-7 * (var(--animation-duration) / 8));
}

/* Make an inner link clickable across its parent card */
/* Do NOT position the link itself so the pseudo-element fills the positioned parent (the card) */
.stretched-link { position: static; }
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}