/* Shared motion preset helpers (used with data-cb-motion + classes toggled by JS) */
.cb-motion--visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: inset(0% 0% 0% 0%) !important;
}

.cb-motion-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.cb-motion-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--cb-marquee-gap, 3rem);
  animation: cb-marquee-x var(--cb-marquee-duration, 28s) linear infinite;
}

.cb-motion-marquee:hover .cb-motion-marquee__track {
  animation-play-state: paused;
}

@keyframes cb-marquee-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.cb-motion-grain::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: var(--cb-grain-opacity, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: cb-grain-shift 0.8s steps(4) infinite;
}

@keyframes cb-grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.cb-motion-glitch {
  position: relative;
}

.cb-motion-glitch::before,
.cb-motion-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}

.cb-motion-glitch::before {
  animation: cb-glitch-1 2.5s infinite linear alternate-reverse;
  color: #f0f;
  z-index: -1;
}

.cb-motion-glitch::after {
  animation: cb-glitch-2 3s infinite linear alternate-reverse;
  color: #0ff;
  z-index: -2;
}

@keyframes cb-glitch-1 {
  0%, 90%, 100% { transform: translate(0); }
  91% { transform: translate(-3px, 1px); }
  92% { transform: translate(2px, -2px); }
}

@keyframes cb-glitch-2 {
  0%, 88%, 100% { transform: translate(0); }
  89% { transform: translate(2px, 2px); }
  90% { transform: translate(-2px, 0); }
}

.cb-motion-float {
  animation: cb-float-y 5s ease-in-out infinite;
}

@keyframes cb-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .cb-motion-marquee__track {
    animation: none;
    transform: none;
  }
  .cb-motion-grain::after {
    animation: none;
  }
  .cb-motion-glitch::before,
  .cb-motion-glitch::after {
    animation: none;
    display: none;
  }
  .cb-motion-float {
    animation: none;
  }
}