/**
 * VRAJ MOTORS - Motion & Animation System
 * Cinematic reveals, micro-interactions, and 60fps transitions
 */

/* Reveal Masks & Staggers */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-up.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Image Parallax Mask */
.parallax-mask-reveal {
  position: relative;
  overflow: hidden;
}

.parallax-mask-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0B0B0D;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
}

.parallax-mask-reveal.is-in-view::after {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* Glowing Pulsing Ring */
@keyframes orangePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 26, 0.6); }
  70% { box-shadow: 0 0 0 16px rgba(255, 77, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 26, 0); }
}

.pulse-glow {
  animation: orangePulse 2.4s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* Animated Tick Mark */
@keyframes strokeTick {
  0% { stroke-dashoffset: 16; }
  100% { stroke-dashoffset: 0; }
}

.animated-check-icon {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: strokeTick 0.6s ease forwards 0.3s;
}

/* Subtle Floating 3D Depth Elements */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

.floating-element {
  animation: floatGentle 6s ease-in-out infinite;
}

/* Speed Lines Background Motion */
@keyframes speedLines {
  0% { background-position: 0 0; }
  100% { background-position: 80px 0; }
}

.speed-lines-bg {
  animation: speedLines 2.5s linear infinite;
}

/* Reduced Motion Safety Query */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-fade-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .parallax-mask-reveal::after {
    display: none !important;
  }
}