/* ============================================================
 Buildro Scroll Story styles
 ============================================================ */

[data-scroll-stage] {
  position: relative;
}

/* Sticky pinned items: vertical centering + all transforms */
[data-scroll-pin] {
  transform:
    translateY(calc(-50% + var(--story-ty, 0px) + var(--story-ty-vh, 0vh)))
    rotateX(var(--story-rotate-x, 0deg))
    rotateY(var(--story-rotate-y, 0deg))
    rotateZ(var(--story-rotate-z, 0deg))
    scale(var(--story-scale, 1));
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Non-pinned scroll-driven items: ALL share one comprehensive transform */
[data-scroll-fade-at]:not([data-scroll-pin]),
[data-scroll-translate-y]:not([data-scroll-pin]),
[data-scroll-rotate-y]:not([data-scroll-pin]),
[data-scroll-rotate-x]:not([data-scroll-pin]),
[data-scroll-rotate-z]:not([data-scroll-pin]),
[data-scroll-scale]:not([data-scroll-pin]) {
  transform:
    translateY(calc(var(--story-ty, 0px) + var(--story-ty-vh, 0vh)))
    rotateX(var(--story-rotate-x, 0deg))
    rotateY(var(--story-rotate-y, 0deg))
    rotateZ(var(--story-rotate-z, 0deg))
    scale(var(--story-scale, 1));
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Word-by-word reveal */
.story-word {
  display: inline-block;
  opacity: 0.18;
  transition: opacity 0.35s ease-out;
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-pin], [data-scroll-fade-at], [data-scroll-translate-y], [data-scroll-scale] {
    transform: none !important;
    opacity: 1 !important;
  }
  .story-word { opacity: 1 !important; }
}