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

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

/* ----- 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);
  }
}

/* ----- Header scroll polish ----- */
header.cwp-header-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

header.cwp-header-sticky nav.navbar-custom {
  transition: 0.3s ease;
}

header.cwp-header-scrolled nav.navbar-custom {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(15, 11, 42, 0.08);
  padding: 16px 0px;
}

header.cwp-header-scrolled .header__action-btn--bar {
  padding: 15px 25px;
  transition: 0.3s ease;
}

/* ----- 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;
  }

  header.cwp-header-sticky nav.navbar-custom {
    transition: none;
  }

  .logos-marquee .marquee-track,
  .reviews-marquee-track,
  .cubewp-infra-status-indicator .status-dot {
    animation: none !important;
  }

  .cubewp-banner-floating-elements.fixed-bottom,
  .cubewp-banner-floating-elements.slide-out-right {
    animation: none !important;
  }
}