/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: scroll-reveal-motion */

.strand-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
    transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
}

.strand-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.strand-reveal-group > .strand-reveal:nth-child(1) {
  transition-delay: 0ms;
}

.strand-reveal-group > .strand-reveal:nth-child(2) {
  transition-delay: var(--strand-stagger-delay);
}

.strand-reveal-group > .strand-reveal:nth-child(3) {
  transition-delay: calc(var(--strand-stagger-delay) * 2);
}

.strand-reveal-group > .strand-reveal:nth-child(4) {
  transition-delay: calc(var(--strand-stagger-delay) * 3);
}

.strand-reveal-group > .strand-reveal:nth-child(5) {
  transition-delay: calc(var(--strand-stagger-delay) * 4);
}

.strand-reveal-group > .strand-reveal:nth-child(6) {
  transition-delay: var(--strand-duration-slow);
}

/* ── CSS-only scroll-driven animation (no JS required) ── */
@supports (animation-timeline: view()) {
  .strand-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: none;
    animation: strand-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .strand-reveal-group > .strand-reveal {
    animation: strand-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes strand-reveal-up {
    from {
      opacity: 0;
      transform: translateY(24px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.strand-reveal-group--manual > .strand-reveal {
  animation: none;
  animation-timeline: auto;
  transition:
    opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
    transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
}

.strand-reveal-group--manual > .strand-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .strand-reveal,
  .strand-reveal-group > .strand-reveal,
  .strand-reveal-group--manual > .strand-reveal {
    transform: none;
    transition: none;
    animation: none;
    animation-timeline: auto;
  }

  .strand-reveal,
  .strand-reveal-group > .strand-reveal {
    opacity: 1;
  }

  .strand-reveal-group--manual > .strand-reveal:not(.strand-reveal--visible) {
    opacity: 0;
  }
}