/* VINAR — unified scroll-reveal (scrolly-telling primitives) */

@keyframes v-reveal-fade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v-reveal-clip {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* IO fallback — hidden until revealed */
[data-reveal]:not(.is-revealed):not(.scroll-reveal--native) {
  opacity: 0;
  transform: translateY(14px);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 480ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 480ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

[data-reveal-clip]:not(.is-revealed):not(.scroll-reveal--native) {
  clip-path: inset(0 0 100% 0);
  opacity: 0.6;
}

[data-reveal-clip].is-revealed {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 520ms var(--ease-out), opacity 400ms var(--ease-out);
}

/* Stagger children */
[data-reveal-stagger] > *:not(.is-revealed):not(.scroll-reveal--native) {
  opacity: 0;
  transform: translateY(10px);
}

[data-reveal-stagger] > *.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}

/* Native view-timeline (progressive enhancement) */
@supports (animation-timeline: view()) {
  [data-reveal].scroll-reveal--native {
    opacity: 1;
    transform: none;
    animation: v-reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  [data-reveal-clip].scroll-reveal--native {
    animation: v-reveal-clip linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 35%;
  }

  [data-reveal-stagger].scroll-reveal--native > * {
    opacity: 1;
    transform: none;
    animation: v-reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  [data-reveal-stagger].scroll-reveal--native > *:nth-child(2) { animation-range: entry 4% cover 32%; }
  [data-reveal-stagger].scroll-reveal--native > *:nth-child(3) { animation-range: entry 8% cover 34%; }
  [data-reveal-stagger].scroll-reveal--native > *:nth-child(4) { animation-range: entry 12% cover 36%; }
  [data-reveal-stagger].scroll-reveal--native > *:nth-child(5) { animation-range: entry 16% cover 38%; }
}

/* Pin progress rail */
[data-pin] {
  position: sticky;
  top: var(--pin-top, 72px);
  z-index: 30;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 120;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  pointer-events: none;
  transition: width 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-clip],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}