/* =============================================================
   EXPERIA — Scroll Animations & Micro-interactions
   ============================================================= */

/* ---- Will-animate initial states ---- */
.will-animate {
  opacity: 0;
}

.will-animate.fade-up {
  transform: translateY(24px);
  opacity: 0;
}

.will-animate.fade-in {
  opacity: 0;
}

.will-animate.from-left {
  transform: translateX(-16px);
  opacity: 0;
}

.will-animate.from-right {
  transform: translateX(16px);
  opacity: 0;
}

/* ---- Animated (triggered state) ---- */
.animated.fade-up,
.animated.fade-in,
.animated.from-left,
.animated.from-right {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animated.fade-up-fast {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animated.fade-in-slow {
  opacity: 1;
  transition: opacity 0.9s ease-in-out;
}

/* ---- Stagger children ---- */
.animated .animate-child {
  opacity: 1;
  transform: none;
}

.animate-child {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-child.from-left-child {
  transform: translateX(-16px);
  transition-duration: 0.4s;
}

.animate-child.visible {
  opacity: 1;
  transform: none;
}

/* ---- Logo Ribbon scroll ---- */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ribbon-track {
  display: flex;
  animation: scroll-left 30s linear infinite;
  width: max-content;
}

.ribbon-track-wrapper:hover .ribbon-track {
  animation-play-state: paused;
}

/* ---- Hover micro-interactions ---- */
.testimonial-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.faq-item {
  transition: background 0.18s ease;
}

/* ---- Reduced motion overrides ---- */
@media (prefers-reduced-motion: reduce) {
  .will-animate,
  .will-animate.fade-up,
  .will-animate.fade-in,
  .will-animate.from-left,
  .will-animate.from-right,
  .animate-child {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ribbon-track {
    animation: none;
  }

  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}