/* ==========================================================================
   Scroll Animations
   ========================================================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delays — Timeline */
.timeline > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.timeline > .animate-on-scroll:nth-child(2) { transition-delay: 150ms; }
.timeline > .animate-on-scroll:nth-child(3) { transition-delay: 300ms; }
.timeline > .animate-on-scroll:nth-child(4) { transition-delay: 450ms; }

/* Staggered delays — Details grid */
.details-grid > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.details-grid > .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.details-grid > .animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.details-grid > .animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.details-grid > .animate-on-scroll:nth-child(5) { transition-delay: 400ms; }

/* ==========================================================================
   Parallax Effect
   ========================================================================== */

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@supports (-webkit-touch-callout: none) {
  .parallax {
    background-attachment: scroll;
  }
}

.parallax.parallax-fallback {
  background-attachment: scroll;
  will-change: transform;
}