.bco-motion {
  --bco-x: 0;
  --bco-y: 0;
  opacity: 0;
  translate: var(--bco-x) var(--bco-y);
  scale: var(--bco-scale, 1);
  transition-property: opacity, translate, scale;
  transition-duration: var(--bco-element-duration, var(--bco-motion-duration, 800ms));
  transition-timing-function: var(--bco-motion-easing, cubic-bezier(.22, 1, .36, 1));
  transition-delay: var(--bco-delay, 0ms);
  will-change: opacity, translate, scale;
}

.bco-motion--fade-up { --bco-y: var(--bco-motion-distance, 28px); }
.bco-motion--fade-down { --bco-y: calc(var(--bco-motion-distance, 28px) * -1); }
.bco-motion--fade-right { --bco-x: calc(var(--bco-motion-distance, 28px) * -1); }
.bco-motion--fade-left { --bco-x: var(--bco-motion-distance, 28px); }
.bco-motion--zoom-in { --bco-scale: .96; }
.bco-motion--fade { --bco-x: 0; --bco-y: 0; }

.bco-motion.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  will-change: auto;
}

.bco-motion-stagger {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.bco-motion-stagger .bco-motion-child {
  --bco-child-x: 0;
  --bco-child-y: var(--bco-motion-distance, 28px);
  --bco-child-scale: 1;
  opacity: 0;
  translate: var(--bco-child-x) var(--bco-child-y);
  scale: var(--bco-child-scale);
  transition: opacity var(--bco-element-duration, var(--bco-motion-duration, 800ms)) var(--bco-motion-easing), translate var(--bco-element-duration, var(--bco-motion-duration, 800ms)) var(--bco-motion-easing), scale var(--bco-element-duration, var(--bco-motion-duration, 800ms)) var(--bco-motion-easing);
  transition-delay: calc(var(--bco-delay, 0ms) + (var(--bco-index, 0) * var(--bco-element-stagger, var(--bco-motion-stagger, 110ms))));
  will-change: opacity, translate, scale;
}

.bco-motion-stagger.bco-stagger--fade-down .bco-motion-child { --bco-child-y: calc(var(--bco-motion-distance, 28px) * -1); }
.bco-motion-stagger.bco-stagger--fade-right .bco-motion-child { --bco-child-x: calc(var(--bco-motion-distance, 28px) * -1); --bco-child-y: 0; }
.bco-motion-stagger.bco-stagger--fade-left .bco-motion-child { --bco-child-x: var(--bco-motion-distance, 28px); --bco-child-y: 0; }
.bco-motion-stagger.bco-stagger--zoom-in .bco-motion-child { --bco-child-y: 0; --bco-child-scale: .96; }
.bco-motion-stagger.bco-stagger--fade .bco-motion-child { --bco-child-y: 0; }

.bco-motion-stagger.is-visible .bco-motion-child {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  will-change: auto;
}

.bco-hover--lift,
.bco-hover--zoom,
.bco-hover--glow {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.bco-hover--lift:hover { transform: translateY(-6px); }
.bco-hover--zoom:hover { transform: scale(1.025); }
.bco-hover--glow:hover { box-shadow: 0 18px 42px rgba(25, 33, 51, .13); }

@media (prefers-reduced-motion: reduce) {
  .bco-motion,
  .bco-motion-child {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bco-hover--lift:hover,
  .bco-hover--zoom:hover { transform: none !important; }
}