/* The script prepares only content below the initial viewport. */
[data-scroll-pending] {
  opacity: 0;
  transform: translateY(40px);
}

.herocopy .hero-headline-line {
  display: block;
  animation: hero-line-drop 1500ms cubic-bezier(.22,.61,.36,1) both,
             hero-line-fade 1800ms ease-in-out both;
  animation-delay: 80ms;
}
.herocopy .hero-headline-line:nth-child(2) { animation-delay: 580ms; }
.herocopy .hero-headline-line:nth-child(3) { animation-delay: 1080ms; }

@keyframes hero-line-drop {
  from { transform: translateY(-36px); }
  to { transform: translateY(0); }
}

@keyframes hero-line-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.projects .project > .photo { border-radius: 24px; }

@media (max-width: 780px) {
  [data-scroll-pending] { transform: translateY(26px); }
  .projects .project > .photo { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-pending] { opacity: 1 !important; transform: none !important; }
  .herocopy .hero-headline-line { animation: none; }
}

@media print {
  [data-scroll-pending] { opacity: 1 !important; transform: none !important; }
  .herocopy .hero-headline-line { animation: none; }
}