/**
 * Evolabs Global Motion Design System
 * Shared entrance, interaction, and navigation motion — GPU-friendly only.
 */

/* ── Page continuity ── */
.page-main {
  opacity: 0;
  transform: translateY(var(--motion-distance-sm, 10px));
  transition:
    opacity var(--motion-page-enter, 420ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--motion-page-enter, 420ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

body.page-enter-ready .page-main {
  opacity: 1;
  transform: translateY(0);
}

body.page-leaving .page-main {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--motion-page-leave, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--motion-page-leave, 220ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Instant restore after Back/Forward (bfcache) — avoid replaying leave/enter at opacity 0 */
html.page-restore-instant .page-main,
html.page-restore-instant .evo-hero-sequence > *,
html.page-restore-instant .evo-hero-visual {
  transition: none !important;
}

html.evo-smooth-scroll {
  scroll-behavior: smooth;
}

/* ── Section / item reveal (once) ── */
.motion-reveal-item,
.evo-reveal,
.solx-reveal,
.demo-reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance, 24px));
  filter: blur(6px);
  transition:
    opacity var(--motion-reveal, 560ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--motion-reveal, 560ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    filter var(--motion-reveal, 560ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.motion-reveal-item.is-visible,
.evo-reveal.is-visible,
.solx-reveal.is-visible,
.demo-reveal.is-visible,
.motion-reveal-item.is-revealed,
.evo-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.evo-reveal--media,
.motion-reveal-media {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity var(--motion-reveal, 560ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform calc(var(--motion-reveal, 560ms) + 40ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--reveal-delay, 80ms);
  will-change: opacity, transform;
}

.evo-reveal--media.is-visible,
.motion-reveal-media.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Hero stagger sequence ── */
.evo-hero-sequence > .evo-hero-item,
.evo-hero-sequence > .eyebrow,
.evo-hero-sequence > h1,
.evo-hero-sequence > h2,
.evo-hero-sequence > p,
.evo-hero-sequence > .hero-actions,
.evo-hero-sequence > .hero-cta,
.evo-hero-sequence > .cta-row {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--motion-reveal, 560ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--motion-reveal, 560ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

.evo-hero-sequence.is-ready > .evo-hero-item,
.evo-hero-sequence.is-ready > .eyebrow,
.evo-hero-sequence.is-ready > h1,
.evo-hero-sequence.is-ready > h2,
.evo-hero-sequence.is-ready > p,
.evo-hero-sequence.is-ready > .hero-actions,
.evo-hero-sequence.is-ready > .hero-cta,
.evo-hero-sequence.is-ready > .cta-row {
  opacity: 1;
  transform: translateY(0);
}

.evo-hero-sequence.is-ready > :nth-child(1) { transition-delay: calc(var(--motion-stagger, 60ms) * 0); }
.evo-hero-sequence.is-ready > :nth-child(2) { transition-delay: calc(var(--motion-stagger, 60ms) * 1); }
.evo-hero-sequence.is-ready > :nth-child(3) { transition-delay: calc(var(--motion-stagger, 60ms) * 2); }
.evo-hero-sequence.is-ready > :nth-child(4) { transition-delay: calc(var(--motion-stagger, 60ms) * 3); }
.evo-hero-sequence.is-ready > :nth-child(5) { transition-delay: calc(var(--motion-stagger, 60ms) * 4); }
.evo-hero-sequence.is-ready > :nth-child(6) { transition-delay: calc(var(--motion-stagger, 60ms) * 5); }
.evo-hero-sequence.is-ready > :nth-child(7) { transition-delay: calc(var(--motion-stagger, 60ms) * 6); }
.evo-hero-sequence.is-ready > :nth-child(8) { transition-delay: calc(var(--motion-stagger, 60ms) * 7); }

.evo-hero-visual {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  transition:
    opacity calc(var(--motion-reveal, 560ms) + 80ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform calc(var(--motion-reveal, 560ms) + 80ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: calc(var(--motion-stagger, 60ms) * 5);
  will-change: opacity, transform;
}

.evo-hero-visual.is-ready,
.evo-hero-sequence.is-ready ~ .evo-hero-visual,
.page-enter-ready .evo-hero-visual {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Cards ── */
.evo-card-motion,
.suite-card,
.product-card,
.eco-card,
.explorer-card,
.integ-card {
  transition:
    transform var(--motion-ui, 240ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

@media (hover: hover) and (pointer: fine) {
  .evo-card-motion:hover,
  .suite-card:hover,
  .product-card:hover,
  .eco-card:hover,
  .explorer-card:hover,
  .integ-card:hover {
    transform: translateY(-2px);
  }

  .product-card:hover .card-display,
  .product-card:hover .card-visual img,
  .suite-card:hover img {
    transform: translateY(-3px);
  }
}

.product-card .card-display,
.product-card .card-visual img,
.suite-card img {
  transition: transform var(--motion-ui, 240ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}

.product-card .card-logo,
.product-card .card-logo-stage {
  transition: opacity var(--motion-ui, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ── Buttons ── */
.demo-button:not(.btn-liquid),
.primary-action:not(.btn-liquid),
.secondary-action,
.platform-band-demo,
.platform-band-learn,
.suite-demo,
.nav-capsule {
  transition:
    transform var(--motion-micro, 160ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    background var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

@media (hover: hover) and (pointer: fine) {
  .demo-button:not(.btn-liquid):hover,
  .primary-action:not(.btn-liquid):hover,
  .secondary-action:hover,
  .suite-demo:hover {
    transform: translateY(-2px);
  }

  .demo-button:not(.btn-liquid):hover span[aria-hidden],
  .primary-action:not(.btn-liquid):hover span[aria-hidden],
  .platform-band-demo:hover span[aria-hidden],
  .suite-demo:hover .suite-cta-arrow,
  .suite-demo:hover span[aria-hidden="true"] {
    transform: translateX(5px);
  }
}

.demo-button:not(.btn-liquid):active,
.primary-action:not(.btn-liquid):active,
.secondary-action:active,
.platform-band-demo:active,
.suite-demo:active,
.nav-capsule:active {
  transform: scale(var(--motion-scale-press, 0.98));
}

.demo-button span[aria-hidden],
.primary-action span[aria-hidden],
.platform-band-demo span[aria-hidden],
.suite-cta-arrow,
.suite-demo span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--motion-micro, 160ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── Solution Builder CTA pulse + fill (non-nav CTAs) ── */
.evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule),
.sol-sb-entry .primary-action,
.sol-sb-entry .suite-demo,
.builder-cta,
a[href="solution-builder.html"].primary-action,
a[href="solution-builder.html"].demo-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule)::before,
.sol-sb-entry .primary-action::before,
.sol-sb-entry .suite-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(107, 33, 168, 0.18), rgba(124, 58, 237, 0.28));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-premium, 400ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule):not(:hover):not(:focus-visible) {
    animation: evoSbPulse 2.8s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
  }

  .evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule):hover,
  .evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule):focus-visible,
  .sol-sb-entry .primary-action:hover,
  .sol-sb-entry .suite-demo:hover {
    animation: none;
  }

  .evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule):hover::before,
  .evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule):focus-visible::before,
  .sol-sb-entry .primary-action:hover::before,
  .sol-sb-entry .suite-demo:hover::before {
    transform: scaleX(1);
  }
}

.evo-sb-cta:not(.nav-capsule):not(.mobile-nav-capsule).is-filling::before {
  transform: scaleX(1);
  background: linear-gradient(90deg, #6b21a8, #7c3aed);
}

@keyframes evoSbPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.12);
  }
}

/* ── Solution Builder nav pill — primary attention ── */
a.nav-link.nav-capsule[href*="solution-builder"],
.mobile-menu a.mobile-nav-capsule[href*="solution-builder"] {
  position: relative;
  z-index: 1;
  overflow: visible;
  isolation: auto;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow:
    0 0 0 0 rgba(124, 58, 237, 0),
    0 4px 14px rgba(124, 58, 237, 0.28);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(55, 20, 100, 0.18);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    background 280ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 280ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms ease,
    border-color 280ms ease;
}

a.nav-link.nav-capsule[href*="solution-builder"]::before,
.mobile-menu a.mobile-nav-capsule[href*="solution-builder"]::before {
  content: none;
  display: none;
}

a.nav-link.nav-capsule[href*="solution-builder"].active,
a.nav-link.nav-capsule[href*="solution-builder"]:hover,
a.nav-link.nav-capsule[href*="solution-builder"]:focus-visible,
.mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:hover,
.mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  border-color: rgba(255, 255, 255, 0.32);
}

@media (prefers-reduced-motion: no-preference) {
  a.nav-link.nav-capsule[href*="solution-builder"]:not(:hover):not(:focus-visible),
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:not(:hover):not(:focus-visible) {
    animation: navSbBreathe 3s ease-in-out infinite;
  }
}

@media (hover: hover) and (pointer: fine) {
  a.nav-link.nav-capsule[href*="solution-builder"]:hover,
  a.nav-link.nav-capsule[href*="solution-builder"]:focus-visible,
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:hover,
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:focus-visible {
    animation: none;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
      0 0 0 7px rgba(124, 58, 237, 0.16),
      0 10px 28px rgba(124, 58, 237, 0.42);
  }
}

a.nav-link.nav-capsule[href*="solution-builder"]:focus-visible,
.mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 3px;
}

a.nav-link.nav-capsule[href*="solution-builder"]:active,
.mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:active {
  animation: none;
  transform: translateY(0) scale(var(--motion-scale-press, 0.98));
  filter: brightness(0.98);
}

@keyframes navSbBreathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(124, 58, 237, 0),
      0 4px 14px rgba(124, 58, 237, 0.26);
  }
  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 0 6px rgba(124, 58, 237, 0.14),
      0 8px 22px rgba(124, 58, 237, 0.36);
  }
}

/* ── Mega menu polish (open state driven by .is-open from mega-menu.js) ── */
.mega-menu .mega-item {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out,
    background var(--motion-micro, 160ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

.menu-trigger.is-open .mega-menu .mega-item {
  opacity: 1;
  transform: translateY(0);
}

.menu-trigger.is-open .mega-menu .mega-item:nth-child(1) { transition-delay: 20ms; }
.menu-trigger.is-open .mega-menu .mega-item:nth-child(2) { transition-delay: 35ms; }
.menu-trigger.is-open .mega-menu .mega-item:nth-child(3) { transition-delay: 50ms; }
.menu-trigger.is-open .mega-menu .mega-item:nth-child(4) { transition-delay: 65ms; }
.menu-trigger.is-open .mega-menu .mega-item:nth-child(5) { transition-delay: 80ms; }
.menu-trigger.is-open .mega-menu .mega-item:nth-child(6) { transition-delay: 95ms; }

.menu-trigger .chevron {
  transition: transform var(--motion-micro, 160ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── Nav active feel ── */
.nav-shell .nav-link {
  transition:
    color var(--motion-micro, 160ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    background var(--motion-ui, 240ms) var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--motion-ui, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html.evo-smooth-scroll {
    scroll-behavior: auto;
  }

  .page-main,
  .motion-reveal-item,
  .evo-reveal,
  .solx-reveal,
  .demo-reveal,
  .evo-reveal--media,
  .motion-reveal-media,
  .evo-hero-sequence > *,
  .evo-hero-visual,
  .mega-menu,
  .mega-menu .mega-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .evo-sb-cta,
  a.nav-link.nav-capsule[href*="solution-builder"],
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"] {
    animation: none !important;
  }

  a.nav-link.nav-capsule[href*="solution-builder"],
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"] {
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
  }

  a.nav-link.nav-capsule[href*="solution-builder"]:hover,
  a.nav-link.nav-capsule[href*="solution-builder"]:focus-visible,
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:hover,
  .mobile-menu a.mobile-nav-capsule[href*="solution-builder"]:focus-visible {
    transform: none !important;
    filter: brightness(1.06);
    box-shadow:
      0 0 0 5px rgba(124, 58, 237, 0.14),
      0 8px 22px rgba(124, 58, 237, 0.36);
  }

  .evo-card-motion:hover,
  .suite-card:hover,
  .product-card:hover,
  .eco-card:hover,
  .demo-button:hover,
  .primary-action:hover,
  .secondary-action:hover {
    transform: none !important;
  }
}