/* Animation Classes V2 */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--trans-slow), transform var(--trans-slow);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Elegant Floating */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.floating {
  animation: float 8s ease-in-out infinite;
}

/* Image reveal effect */
.reveal-image {
  position: relative;
  overflow: hidden;
}

.reveal-image::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--bg-panel);
  z-index: 10;
  transform-origin: right;
  transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
}

.reveal-image.is-visible::before {
  transform: scaleX(0);
}