/* ==========================================================================
   JESPER MONBERG - ANIMATION SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE ANIMATION CLASSES
   -------------------------------------------------------------------------- */
.will-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.will-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.will-animate[data-delay="1"] { transition-delay: 0.1s; }
.will-animate[data-delay="2"] { transition-delay: 0.2s; }
.will-animate[data-delay="3"] { transition-delay: 0.3s; }
.will-animate[data-delay="4"] { transition-delay: 0.4s; }
.will-animate[data-delay="5"] { transition-delay: 0.5s; }
.will-animate[data-delay="6"] { transition-delay: 0.6s; }
.will-animate[data-delay="7"] { transition-delay: 0.7s; }
.will-animate[data-delay="8"] { transition-delay: 0.8s; }

/* --------------------------------------------------------------------------
   2. SPECIFIC ANIMATION TYPES
   -------------------------------------------------------------------------- */

/* Fade in + slide up (default) */
.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* Fade in + slide up small (for text) */
.animate-fade-up-sm {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 0.1s;
}

.animate-fade-up-sm.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in + slide up large (for cards) */
.animate-fade-up-lg {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-up-lg.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Scale in (for testimonials) */
.animate-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-scale.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Fade in (simple) */
.animate-fade {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.animate-fade.animate-in {
  opacity: 1;
}

/* Image reveal */
.animate-image {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: 0.1s;
}

.animate-image.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Button slide up */
.animate-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: 0.3s;
}

.animate-btn.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Number count (for stats) */
.animate-count {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.animate-count.animate-in {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. HERO ANIMATIONS
   -------------------------------------------------------------------------- */
.hero-animate {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 0.7s ease-out forwards;
}

.hero-animate-1 { animation-delay: 0.2s; }
.hero-animate-2 { animation-delay: 0.4s; }
.hero-animate-3 { animation-delay: 0.6s; }
.hero-animate-4 { animation-delay: 0.8s; }

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CTA Glow pulse */
.btn-pulse {
  position: relative;
}

.btn-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  box-shadow: 0 0 0 0 rgba(196, 149, 106, 0.4);
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(196, 149, 106, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(196, 149, 106, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(196, 149, 106, 0);
  }
}

/* --------------------------------------------------------------------------
   4. CARD STAGGER ANIMATION
   -------------------------------------------------------------------------- */
.stagger-container .card[data-index="0"] { transition-delay: 0s; }
.stagger-container .card[data-index="1"] { transition-delay: 0.1s; }
.stagger-container .card[data-index="2"] { transition-delay: 0.2s; }
.stagger-container .card[data-index="3"] { transition-delay: 0.3s; }
.stagger-container .card[data-index="4"] { transition-delay: 0.4s; }
.stagger-container .card[data-index="5"] { transition-delay: 0.5s; }
.stagger-container .card[data-index="6"] { transition-delay: 0.6s; }
.stagger-container .card[data-index="7"] { transition-delay: 0.7s; }

/* --------------------------------------------------------------------------
   5. NAVBAR TRANSITION
   -------------------------------------------------------------------------- */
.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* --------------------------------------------------------------------------
   6. MOBILE MENU ANIMATIONS
   -------------------------------------------------------------------------- */
.navbar-nav {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navbar-nav.active .nav-link {
  opacity: 0;
  transform: translateY(20px);
  animation: menuItemFadeIn 0.4s ease-out forwards;
}

.navbar-nav.active .nav-link:nth-child(1) { animation-delay: 0.1s; }
.navbar-nav.active .nav-link:nth-child(2) { animation-delay: 0.2s; }
.navbar-nav.active .nav-link:nth-child(3) { animation-delay: 0.3s; }
.navbar-nav.active .nav-link:nth-child(4) { animation-delay: 0.4s; }
.navbar-nav.active .btn { animation-delay: 0.5s; }

@keyframes menuItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   7. PAGE TRANSITION
   -------------------------------------------------------------------------- */
main {
  opacity: 0;
  animation: pageFadeIn 0.4s ease-out forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   8. HOVER ANIMATIONS
   -------------------------------------------------------------------------- */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(27, 42, 74, 0.12);
}

/* Nav link underline animation */
.nav-link::after {
  transition: transform 0.25s ease;
}

/* Button hover states are in main CSS */

/* --------------------------------------------------------------------------
   9. TESTIMONIAL SLIDER ANIMATION
   -------------------------------------------------------------------------- */
.testimonial-track {
  transition: transform 0.5s ease;
}

.testimonial-dot {
  transition: background-color 0.25s ease;
}

/* --------------------------------------------------------------------------
   10. FAQ ACCORDION ANIMATION
   -------------------------------------------------------------------------- */
.faq-answer {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-question svg {
  transition: transform 0.25s ease;
}

/* --------------------------------------------------------------------------
   11. TIMELINE ANIMATION
   -------------------------------------------------------------------------- */
.timeline-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.timeline-item:nth-child(1) { transition-delay: 0s; }
.timeline-item:nth-child(2) { transition-delay: 0.15s; }
.timeline-item:nth-child(3) { transition-delay: 0.3s; }
.timeline-item:nth-child(4) { transition-delay: 0.45s; }

/* --------------------------------------------------------------------------
   12. FILTER ANIMATION
   -------------------------------------------------------------------------- */
.masonry-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.masonry-item.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
}

/* --------------------------------------------------------------------------
   13. PROCESS STEP CONNECTION LINE
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2rem;
    right: -2rem;
    width: calc(2rem - 4px);
    height: 2px;
    background-image: linear-gradient(90deg, var(--color-accent) 50%, transparent 50%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2rem;
    background-image: linear-gradient(180deg, var(--color-accent) 50%, transparent 50%);
    background-size: 2px 10px;
    background-repeat: repeat-y;
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   14. SCROLL INDICATOR
   -------------------------------------------------------------------------- */
.hero-scroll {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* --------------------------------------------------------------------------
   15. WAVY SECTION TRANSITION
   -------------------------------------------------------------------------- */
.cta-section::before {
  animation: wave 8s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* --------------------------------------------------------------------------
   16. IMAGE PARALLAX EFFECT (subtle)
   -------------------------------------------------------------------------- */
.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-image {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   17. REDUCED MOTION SUPPORT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .will-animate,
  .animate-fade-up,
  .animate-fade-up-sm,
  .animate-fade-up-lg,
  .animate-scale,
  .animate-fade,
  .animate-image,
  .animate-btn,
  .animate-count,
  .hero-animate,
  .timeline-item,
  .masonry-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .btn-pulse::after {
    animation: none !important;
  }

  .hero-scroll {
    animation: none !important;
  }

  .cta-section::before {
    animation: none !important;
  }

  main {
    animation: none !important;
    opacity: 1 !important;
  }
}