/* ==========================================================================
   Classified Landing Page — Scroll & Load Animations
   Additive layer only. Does not override style.css hovers or interactions.
   ========================================================================== */

:root {
  --cwp-reveal-duration: 0.6s;
  --cwp-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cwp-stagger-gap: 80ms;
}

/* ----- Base reveal states ----- */
.cwp-reveal {
  opacity: 0;
  transition:
    opacity var(--cwp-reveal-duration) var(--cwp-reveal-ease),
    transform var(--cwp-reveal-duration) var(--cwp-reveal-ease);
  will-change: opacity, transform;
}

.cwp-reveal--fade-up {
  transform: translateY(18px);
}

.cwp-reveal--fade-left {
  transform: translateX(-20px);
}

.cwp-reveal--fade-right {
  transform: translateX(20px);
}

.cwp-reveal--scale {
  transform: scale(0.98);
}

.cwp-reveal--fade {
  transform: none;
}

.cwp-is-revealed {
  opacity: 1;
  transform: none;
}

.cwp-is-revealed.cwp-reveal {
  will-change: auto;
}

.cwp-stagger-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--cwp-reveal-duration) var(--cwp-reveal-ease),
    transform var(--cwp-reveal-duration) var(--cwp-reveal-ease);
  transition-delay: var(--cwp-stagger-delay, 0ms);
}

.cwp-stagger-group.cwp-is-revealed .cwp-stagger-item {
  opacity: 1;
  transform: none;
}

.cwp-hero-item {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
}

.cwp-hero-ready .cwp-hero-item {
  animation: cwpHeroBounceIn 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  animation-delay: var(--cwp-hero-delay, 0ms);
}

@keyframes cwpHeroBounceIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }

  55% {
    opacity: 1;
    transform: translateY(-2px) scale(1.005);
  }

  75% {
    transform: translateY(1px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ----- Compare table — one-time highlight pulse when grid reveals ----- */
.cwp-compare-pulse.cwp-is-revealed .classified-compare-col-classified {
  animation: cwpCompareHighlightPulse 1.4s var(--cwp-reveal-ease) forwards;
}

@keyframes cwpCompareHighlightPulse {
  0% {
    opacity: 0.75;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* ----- Mobile — simplify directional reveals ----- */
@media (max-width: 767px) {
  :root {
    --cwp-stagger-gap: 60ms;
  }

  .cwp-reveal--fade-left,
  .cwp-reveal--fade-right {
    transform: translateY(16px);
  }

  .cwp-stagger-item {
    transform: translateY(14px);
  }
}

/* ----- Reduced motion — show everything instantly ----- */
@media (prefers-reduced-motion: reduce) {
  .cwp-reveal,
  .cwp-stagger-item,
  .cwp-hero-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .cwp-compare-pulse.cwp-is-revealed .classified-compare-col-classified {
    animation: none;
  }
}