/* Luxury Motion & Animations for Key Finders */

/* Entrance Transition Classes (triggered via JS IntersectionObserver) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers for staggered entrances */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Image reveal masks (Clip Path slider reveals - FWA style) */
.image-reveal-mask {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path var(--transition-cinematic);
}

.image-reveal-mask.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.image-reveal-mask img {
  transform: scale(1.15);
  transition: transform var(--transition-cinematic);
}

.image-reveal-mask.active img {
  transform: scale(1);
}

/* Split Text Reveal (line-by-line slide-up) */
.line-overflow-wrapper {
  overflow: hidden;
  display: block;
}

.line-text-reveal {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--transition-smooth);
}

.active .line-text-reveal {
  transform: translateY(0);
}

/* Cinematic Scale-In (for hero background or full-screen visuals) */
@keyframes cinematicZoom {
  0% { transform: scale(1.1); }
  100% { transform: scale(1.0); }
}

.zoom-in-active {
  animation: cinematicZoom 15s var(--ease-slow) forwards;
}

/* Fade in up keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up-animation {
  animation: fadeInUp 0.8s var(--ease-custom) forwards;
}

/* Loader Screen Animations */
@keyframes sweep {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  51% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Scroll Indicator Dot bounce */
@keyframes scrollDot {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 15px);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Custom Cursor pulse */
@keyframes cursorPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Hover morphing keyframe for canvas or custom blobs */
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  50% { border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; }
}

/* Mobile Animation Fallbacks & Safety overrides */
@media (max-width: 768px) {
  .image-reveal-mask {
    clip-path: none !important;
    opacity: 1 !important;
  }
  .image-reveal-mask img {
    transform: none !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}