/**
 * FrachtTower motion layer.
 *
 * All rules are progressive and scoped to the server-side body class. Without
 * the companion script no content is hidden; JS only marks elements below the
 * viewport as pending immediately before observing them.
 */

body.ft-motion-enabled {
  --ft-motion-card-lift: -2px;
  --ft-motion-marketing-enter: 640ms;
  --ft-motion-marketing-visual: 760ms;
  --ft-motion-marketing-stagger: 90ms;
  --ft-motion-marketing-stagger-2: 180ms;
  --ft-motion-marketing-stagger-3: 270ms;
  --ft-motion-marketing-distance: 28px;
  --ft-motion-ambient: 6200ms;
  --ft-motion-ambient-secondary: 5400ms;
  --ft-ease-marketing: cubic-bezier(0.22, 0.8, 0.25, 1);
}

body.ft-motion-enabled .ft-motion-hero-copy,
body.ft-motion-enabled .ft-motion-hero-visual {
  animation: none;
}

/*
 * The blocking head primer applies the hero start state before the browser can
 * paint body content. motion.js takes over these same values atomically; its
 * head-side failsafe removes the class if the deferred runtime never arrives.
 */
@media (prefers-reduced-motion: no-preference) {
  html.ft-motion-preload body.ft-motion-enabled :where(
    .hero-copy,
    .route-hero-copy,
    .pilot-hero-copy,
    .tour-intro > .container,
    .knowledge-hero-grid > :first-child,
    .partner-hero > .container > :first-child,
    .special-hero > .container
  ) > * {
    opacity: 0;
    transform: translate3d(0, var(--ft-motion-marketing-distance), 0);
  }

  html.ft-motion-preload body.ft-motion-enabled :where(
    .hero-visual,
    .route-hero-visual,
    .pilot-offer-card,
    .knowledge-index,
    .partner-hero > .container > svg
  ) {
    opacity: 0;
    transform: translate3d(34px, 0, 0) scale(0.97);
  }
}

body.ft-motion-enabled :where(
  .button,
  .menu-button,
  .icon-button,
  .nav-trigger,
  .tab-list button,
  .tour-controls button,
  .tour-sidebar nav button,
  .accordion-item > button,
  .swatches button,
  .module-toggles button
) {
  transition:
    color var(--ft-motion-fast) ease,
    background-color var(--ft-motion-fast) ease,
    border-color var(--ft-motion-fast) ease,
    box-shadow var(--ft-motion-fast) ease,
    transform var(--ft-motion-fast) var(--ft-ease-enter);
}

body.ft-motion-enabled :where(
  .button,
  .menu-button,
  .icon-button,
  .nav-trigger,
  .tab-list button,
  .tour-controls button,
  .tour-sidebar nav button,
  .accordion-item > button,
  .swatches button,
  .module-toggles button
):active:not(:disabled) {
  transform: scale(0.97);
}

body.ft-motion-enabled :where(.button, .text-link) svg {
  transition: transform var(--ft-motion-fast) var(--ft-ease-enter);
}

body.ft-motion-enabled .nav-menu {
  transition:
    opacity var(--ft-motion-fast) var(--ft-ease-drawer),
    transform var(--ft-motion-fast) var(--ft-ease-drawer),
    box-shadow var(--ft-motion-fast) ease;
  transform-origin: top left;
}

body.ft-motion-enabled .mobile-drawer::backdrop {
  transition: background-color var(--ft-motion-base) ease;
}

body.ft-motion-enabled :where(
  .section-cards > a,
  .topic-path-grid > a,
  .related-articles a,
  .asset-panel > a
) {
  transition:
    transform var(--ft-motion-fast) var(--ft-ease-enter),
    border-color var(--ft-motion-fast) ease,
    box-shadow var(--ft-motion-fast) ease,
    background-color var(--ft-motion-fast) ease;
}

body.ft-motion-enabled .accordion-item > button i {
  transition:
    color var(--ft-motion-fast) ease,
    border-color var(--ft-motion-fast) ease,
    background-color var(--ft-motion-fast) ease,
    transform var(--ft-motion-fast) var(--ft-ease-enter);
}

body.ft-motion-enabled .accordion-item.open > button i {
  transform: scale(0.92);
}

body.ft-motion-enabled .ft-motion-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--ft-motion-marketing-enter) var(--ft-ease-marketing),
    transform var(--ft-motion-marketing-enter) var(--ft-ease-marketing);
  transition-delay: var(--ft-motion-delay, 0ms);
  will-change: opacity, transform;
}

body.ft-motion-enabled .ft-motion-reveal.ft-motion-pending {
  opacity: 0;
  transform: translate3d(0, var(--ft-motion-marketing-distance), 0);
  transition: none;
}

body.ft-motion-enabled .ft-motion-relay {
  position: relative;
}

body.ft-motion-enabled .ft-motion-relay::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--ft-color-action) 48%, transparent 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.16) translateX(-42%);
  transform-origin: left center;
}

body.ft-motion-enabled .ft-motion-relay.is-relaying::after {
  animation: ft-motion-relay var(--ft-motion-marketing-enter) var(--ft-ease-marketing) both;
}

@media (hover: hover) and (pointer: fine) {
  body.ft-motion-enabled :where(.button, .text-link):hover svg {
    transform: translate3d(3px, 0, 0);
  }

  body.ft-motion-enabled :where(
    .section-cards > a,
    .topic-path-grid > a,
    .related-articles a,
    .asset-panel > a
  ):hover {
    transform: translate3d(0, var(--ft-motion-card-lift), 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.ft-motion-enabled.ft-motion-mounted .ft-motion-hero-copy > * {
    animation: ft-motion-hero-item var(--ft-motion-marketing-enter) var(--ft-ease-marketing) both;
  }

  body.ft-motion-enabled.ft-motion-mounted .ft-motion-hero-copy > :nth-child(2) {
    animation-delay: var(--ft-motion-marketing-stagger);
  }

  body.ft-motion-enabled.ft-motion-mounted .ft-motion-hero-copy > :nth-child(3) {
    animation-delay: var(--ft-motion-marketing-stagger-2);
  }

  body.ft-motion-enabled.ft-motion-mounted .ft-motion-hero-copy > :nth-child(n + 4) {
    animation-delay: var(--ft-motion-marketing-stagger-3);
  }

  body.ft-motion-enabled.ft-motion-primed:not(.ft-motion-mounted) .ft-motion-hero-copy > * {
    opacity: 0;
    transform: translate3d(0, var(--ft-motion-marketing-distance), 0);
  }

  body.ft-motion-enabled.ft-motion-mounted .ft-motion-hero-visual {
    animation: ft-motion-hero-visual var(--ft-motion-marketing-visual) 160ms var(--ft-ease-marketing) both;
  }

  body.ft-motion-enabled.ft-motion-primed:not(.ft-motion-mounted) .ft-motion-hero-visual {
    opacity: 0;
    transform: translate3d(34px, 0, 0) scale(0.97);
  }

  body.ft-motion-enabled.ft-motion-mounted .home-hero .admin-window {
    animation: ft-motion-float-down var(--ft-motion-ambient) 1100ms ease-in-out infinite alternate;
  }

  body.ft-motion-enabled.ft-motion-mounted .home-hero .orbit-note {
    animation: ft-motion-float-up var(--ft-motion-ambient-secondary) 1350ms ease-in-out infinite alternate;
  }

  body.ft-motion-enabled.ft-motion-mounted .mobile-demo-bar {
    animation: ft-motion-mobile-bar var(--ft-motion-base) var(--ft-ease-enter) both;
  }
}

@media (width <= 680px) and (prefers-reduced-motion: no-preference) {
  body.ft-motion-enabled {
    --ft-motion-marketing-distance: 20px;
  }

  body.ft-motion-enabled.ft-motion-primed:not(.ft-motion-mounted) .ft-motion-hero-visual {
    transform: translate3d(0, 20px, 0) scale(0.98);
  }

  body.ft-motion-enabled.ft-motion-mounted .home-hero :is(.admin-window, .orbit-note) {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ft-motion-enabled *,
  body.ft-motion-enabled *::before,
  body.ft-motion-enabled *::after {
    scroll-behavior: auto !important;
  }

  body.ft-motion-enabled .ft-motion-reveal,
  body.ft-motion-enabled .ft-motion-reveal.ft-motion-pending {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  body.ft-motion-enabled .ft-motion-relay::after {
    display: none;
  }

  body.ft-motion-enabled.ft-motion-primed .ft-motion-hero-copy > *,
  body.ft-motion-enabled.ft-motion-primed .ft-motion-hero-visual {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes ft-motion-hero-item {
  from {
    opacity: 0;
    transform: translate3d(0, var(--ft-motion-marketing-distance), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ft-motion-hero-visual {
  from {
    opacity: 0;
    transform: translate3d(34px, 0, 0) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ft-motion-float-down {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 5px, 0);
  }
}

@keyframes ft-motion-float-up {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes ft-motion-relay {
  0% {
    opacity: 0;
    transform: scaleX(0.16) translateX(-42%);
  }

  28% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: scaleX(0.3) translateX(275%);
  }
}

@keyframes ft-motion-mobile-bar {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}