/* ----------------------------------------------------------------
   18. CINEMATIC IMAGE REVEAL LIBRARY
   ---------------------------------------------------------------- */

.cinematic-reveal {
  visibility: hidden; /* Hidden until observer triggers */
  will-change: transform, opacity, filter, clip-path;
}

.cinematic-reveal.revealed {
  visibility: visible;
}

/* 1. Zoom In */
.reveal-zoom-in.revealed {
  animation: revZoomIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revZoomIn {
  0% { transform: scale(1.08); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 2. Fade Up */
.reveal-fade-up.revealed {
  animation: revFadeUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revFadeUp {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 3. Fade Down */
.reveal-fade-down.revealed {
  animation: revFadeDown 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revFadeDown {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 4. Fade Left */
.reveal-fade-left.revealed {
  animation: revFadeLeft 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revFadeLeft {
  0% { transform: translateX(-40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* 5. Fade Right */
.reveal-fade-right.revealed {
  animation: revFadeRight 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revFadeRight {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* 6. Scale Reveal */
.reveal-scale.revealed {
  animation: revScale 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revScale {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 7. Soft Rotation */
.reveal-rotate.revealed {
  animation: revRotate 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revRotate {
  0% { transform: rotate(3deg) scale(1.02); opacity: 0; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* 8. Blur Reveal */
.reveal-blur.revealed {
  animation: revBlur 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revBlur {
  0% { filter: blur(12px); opacity: 0; transform: scale(1.02); }
  100% { filter: blur(0); opacity: 1; transform: scale(1); }
}

/* 9. Paper Reveal */
.reveal-paper.revealed {
  animation: revPaper 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revPaper {
  0% { clip-path: inset(10% 10% 10% 10%); opacity: 0; transform: scale(1.05); }
  100% { clip-path: inset(0% 0% 0% 0%); opacity: 1; transform: scale(1); }
}

/* 10. Mask Reveal */
.reveal-mask.revealed {
  animation: revMask 1.4s cubic-bezier(0.8, 0, 0.2, 1) forwards;
}
@keyframes revMask {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.5; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* 11. Floating Reveal */
.reveal-floating.revealed {
  animation: revFloating 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes revFloating {
  0% { transform: translateY(30px); opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
  100% { transform: translateY(0); opacity: 1; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
}

/* 12. Parallax Reveal (pseudo-parallax) */
.reveal-parallax.revealed {
  animation: revParallax 2s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
}
@keyframes revParallax {
  0% { transform: translateY(50px) scale(1.05); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 13. Spotlight Reveal */
.reveal-spotlight.revealed {
  animation: revSpotlight 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes revSpotlight {
  0% { clip-path: circle(0% at 50% 50%); filter: brightness(1.5) contrast(1.2); opacity: 0; }
  10% { opacity: 1; }
  100% { clip-path: circle(150% at 50% 50%); filter: brightness(1) contrast(1); opacity: 1; }
}

/* 14. Golden Light Reveal */
.reveal-golden-light.revealed {
  animation: revGolden 1.8s ease-out forwards;
}
@keyframes revGolden {
  0% { filter: sepia(0.8) brightness(1.5) hue-rotate(-10deg); opacity: 0; transform: scale(1.02); }
  100% { filter: sepia(0) brightness(1) hue-rotate(0deg); opacity: 1; transform: scale(1); }
}

/* 15. Memory Effect */
.reveal-memory.revealed {
  animation: revMemory 2s ease-in-out forwards;
}
@keyframes revMemory {
  0% { filter: grayscale(100%) sepia(20%) brightness(0.8); opacity: 0; }
  50% { opacity: 1; filter: grayscale(80%) sepia(20%) brightness(0.9); }
  100% { filter: grayscale(0%) sepia(0%) brightness(1); opacity: 1; }
}