/* =========================================================
   Avori Website - Animations
   UI area affected: all motion on the page.
   Purpose: controls the top promo ticker, customer/testimonial
   marquee movement, scroll-reveal effects, hero floating motion,
   projected metrics carousel, and reduced-motion accessibility.
   Load order: after sections.css, before chatbot.css.
========================================================= */

/* Top promo ticker strip: moving “Limited-time offer” message under the nav. */
.promo-ticker {
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(255,118,0,.18), rgba(11,110,234,.13));
  overflow: hidden;
}

/* Promo ticker moving wrapper. */
.promo-marquee {
  display: flex;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  animation: promoLoop 34s linear infinite;
}

/* Individual repeated promo text group. Two copies create the loop. */
.promo-track {
  display: flex;
  flex-shrink: 0;
  gap: 28px;
  align-items: center;
  padding: 12px 14px;
  color: #fff;
  font-weight: 850;
  letter-spacing: .2px;
  animation: none;
}

.promo-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.promo-track b {
  color: #ffd5b2;
}

/* Continuous leftward ticker movement for .promo-marquee. */
@keyframes promoLoop {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-50%,0,0);
  }
}

.promo-ticker {
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(255,118,0,.18), rgba(11,110,234,.13));
  overflow: hidden;
  white-space: nowrap;
}

.promo-track {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  padding: 12px 0;
  color: #fff;
  font-weight: 850;
  letter-spacing: .2px;
  animation: promoMarquee 24s linear infinite;
}

.promo-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.promo-track b {
  color: #ffd5b2;
}

/* Legacy/alternate promo track animation kept for compatibility. */
@keyframes promoMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Customer logo and testimonial scrolling tracks. */
.logo-track,
.testimonial-track {
  display: flex;
  width: max-content;
  gap: 18px;
  padding: 20px;
  animation: logoMarquee 28s linear infinite;
}

.testimonial-track {
  animation-duration: 38s;
  align-items: stretch;
}

/* Continuous leftward movement for customer/testimonial marquees. */
@keyframes logoMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Scroll-reveal starting state added by main.js. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);
}

/* Scroll-reveal visible state when element enters viewport. */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal delay for visual rhythm. */
.reveal-delay-1 {
  transition-delay: .08s;
}

.reveal-delay-2 {
  transition-delay: .16s;
}

.reveal-delay-3 {
  transition-delay: .24s;
}

/* Accessibility: disables/reduces motion for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .promo-marquee {
    animation: none;
  }
}

/* Optional floating motion for hero artwork if applied. */
@keyframes heroFloat {
  0%, 100% {
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(0);
  }
  50% {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-8px);
  }
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  filter: blur(6px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1), filter .75s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .promo-marquee {
    animation: none !important;
  }

  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Legacy metric ticker animation retained for compatibility. */
@keyframes metricTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  filter: blur(10px);
  transition: opacity .85s cubic-bezier(.22,.68,.19,1), transform .85s cubic-bezier(.22,.68,.19,1), filter .85s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.reveal-delay-1 {
  transition-delay: .08s;
}

.reveal-delay-2 {
  transition-delay: .16s;
}

.reveal-delay-3 {
  transition-delay: .24s;
}

/* Legacy metric marquee animation retained for compatibility. */
@keyframes metricMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 20px));
  }
}

/* Projected impact metrics carousel viewport. */
.metric-loop {
  --metric-gap: 20px;
  --metric-duration: 34s;
  overflow: hidden;
  padding: 8px 0 12px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* Moving track containing two duplicated metric groups for seamless looping. */
.metric-loop-track {
  display: flex;
  gap: var(--metric-gap);
  width: max-content;
  will-change: transform;
  animation: metricContinuousLoop var(--metric-duration) linear infinite;
}

/* Pause metrics carousel on hover for readability. */
.metric-loop:hover .metric-loop-track {
  animation-play-state: paused;
}

/* One complete set of metric slides inside the loop. */
.metric-loop-group {
  display: flex;
  gap: var(--metric-gap);
  flex: 0 0 auto;
}

/* Smooth continuous loop for the projected impact metric cards. */
@keyframes metricContinuousLoop {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(calc((-100% - var(--metric-gap)) / 2),0,0);
  }
}

/* Metric slide width inside animated loop. */
.metric-loop .metric-slide {
  min-width: 300px;
  max-width: 300px;
  flex: 0 0 300px;
}