.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scroll-reveal.is-visible.is-immediate {
  transition: none;
}

/* Detail pages: section keeps its background; inner layer animates */
.figma-web-section > .scroll-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-end > .scroll-reveal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Full-bleed sections: fade only — avoid translate/scale gaps between blocks */
.scroll-reveal-fade {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity;
}

.scroll-reveal-fade.is-visible {
  opacity: 1;
}

.scroll-reveal-fade.is-visible.is-immediate {
  transition: none;
}

/* Framer-style project card entrance: scale(0.5) + rotate(10deg) → normal */
.scroll-reveal-card {
  opacity: 0.5;
  transform: scale(0.5) rotate(var(--reveal-rotate, 10deg));
  transform-origin: center center;
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.34, 1.28, 0.64, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.scroll-reveal-card.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.scroll-reveal-card.is-visible.is-immediate {
  transition: none;
}

/* About: polaroid scale + rotate entrance (Framer-style) */
.scroll-reveal-about-photo {
  opacity: 0;
  transform: scale(0.86) rotate(-11deg);
  transform-origin: center center;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.34, 1.28, 0.64, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.scroll-reveal-about-photo.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.scroll-reveal-about-photo.is-visible.is-immediate {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-fade,
  .scroll-reveal-card,
  .scroll-reveal-about-photo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}