/* =========================================================================
   Scroll Animations (Intersection Observer Targets)
   ========================================================================= */

/* Base state: Hidden and moved down */
.fade-in-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);
}

/* Active state: Visible and original position */
.fade-in-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delays for staggered animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* In mobile, we might want to reduce delay to not keep users waiting */
@media (max-width: 768px) {
  .delay-100 { transition-delay: 50ms; }
  .delay-200 { transition-delay: 100ms; }
  .delay-300 { transition-delay: 150ms; }
}

/* =========================================================================
   Keyframe Animations
   ========================================================================= */

/* Bounce Animation (FAB etc) */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Pulse Animation (Main CTA Button) */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 160, 233, 0.7); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(0, 160, 233, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 160, 233, 0); }
}

.animate-pulse {
  animation: pulse 2s infinite;
}
.animate-pulse:hover {
  animation: none; /* Stop pulsing on hover since button hover effect takes over */
}

/* Scroll indicator bounce */
@keyframes scrolldown {
  0% { transform: translateY(0); opacity: 0; }
  50% { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

.animate-scrolldown {
  animation: scrolldown 2s infinite;
}

/* Background Zoom (Ken Burns) */
@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.animate-kenburns {
  animation: kenburns 15s ease-out forwards;
}

/* =========================================================================
   Parallax (Simple CSS interpretation if JS is not used)
   However, we will use simple background-attachment for css-based parallax
   where supported by viewport.
   ========================================================================= */
.parallax-bg {
  /* Using fixed attachment for simple parallax effect. Note: Support varies on mobile */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* on iOS devices background-attachment: fixed has performance/rendering issues, 
   so we might disable it and let JS handle it or just keep it simple */
@supports (-webkit-touch-callout: none) {
  .parallax-bg {
      background-attachment: scroll;
  }
}

/* Vertical Guide Line Animation */
@keyframes line-draw {
  0% { transform: scaleY(0); transform-origin: top; }
  100% { transform: scaleY(1); transform-origin: top; }
}

@keyframes line-dash {
  to { stroke-dashoffset: -20; }
}

.animate-line {
  animation: line-draw 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subtle Path Flow */
@keyframes path-flow {
  0% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.5; }
}

.animate-path-flow {
  animation: path-flow 3s ease-in-out infinite;
}

/* Floating Animation (100 Icon etc) */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  33% { transform: translateY(-10px) rotate(2deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

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

/* Rotating Circle Animation */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-rotate {
  animation: rotate-slow 20s linear infinite;
}

/* Shimmer Highlight (for text or badges) */
@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(-20deg); }
  50%, 100% { transform: translateX(100%) skewX(-20deg); }
}

.animate-shimmer {
  position: relative;
  overflow: hidden;
}

.animate-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 3s infinite;
}

/* Scanline/Grid Pulse */
@keyframes grid-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

.animate-grid {
  animation: grid-pulse 4s ease-in-out infinite;
}

/* Title Reveal Line */
@keyframes title-reveal {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-reveal {
  display: inline-block;
  animation: title-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}