/* Native motion equivalents for the requested React/GSAP effects. */
.motion-title--split,
.motion-title--blur {
  overflow: hidden;
}

.motion-char,
.motion-blur-char {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
}

.motion-char {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
}

.motion-title--split.is-motion-visible .motion-char {
  animation: nova-char-rise 1.25s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--motion-index) * 45ms);
}

.motion-blur-char {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, -50px, 0);
}

.motion-title--blur.is-motion-visible .motion-blur-char {
  animation: nova-blur-focus .72s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--motion-index) * 45ms);
}

@keyframes nova-char-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes nova-blur-focus {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, -50px, 0);
  }
  55% {
    opacity: .5;
    filter: blur(5px);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

/* Layered backdrop blur, equivalent to GradualBlur without introducing React. */
.technology-gradual-target {
  position: relative;
  isolation: isolate;
}

.technology-gradual-target > :not(.technology-gradual-blur) {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    filter 1.05s cubic-bezier(.22, 1, .36, 1),
    transform 1.05s cubic-bezier(.22, 1, .36, 1);
}

.technology-gradual-target.is-gradual-visible > :not(.technology-gradual-blur) {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.technology-gradual-blur {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .85s .16s ease-out;
}

.technology-gradual-target.is-gradual-visible .technology-gradual-blur {
  opacity: 0;
}

.technology-gradual-blur__layer {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--gradual-blur));
  -webkit-backdrop-filter: blur(var(--gradual-blur));
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--mask-from), #000 var(--mask-mid), transparent var(--mask-to));
  mask-image: linear-gradient(to bottom, transparent var(--mask-from), #000 var(--mask-mid), transparent var(--mask-to));
}

/* Scroll-triggered GradualBlur for the NOVA AR chapter and its lead title. */
.product-gradual-target {
  position: relative;
  isolation: isolate;
}

.product-gradual-target > :not(.product-gradual-blur) {
  opacity: 0;
  filter: blur(15px);
  transform: translate3d(0, 48px, 0) scale(.985);
  transition:
    opacity .92s cubic-bezier(.22, 1, .36, 1),
    filter 1.16s cubic-bezier(.22, 1, .36, 1),
    transform 1.16s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, filter, transform;
}

.product-gradual-target > :nth-child(2):not(.product-gradual-blur) {
  transition-delay: 90ms;
}

.product-gradual-target > :nth-child(3):not(.product-gradual-blur) {
  transition-delay: 170ms;
}

.product-gradual-target.is-gradual-visible > :not(.product-gradual-blur) {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.product-gradual-blur {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .9s .08s ease-out,
    transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.product-gradual-target.is-gradual-visible > .product-gradual-blur {
  opacity: 0;
  transform: translate3d(0, 18%, 0);
}

.product-gradual-blur__layer {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--gradual-blur));
  -webkit-backdrop-filter: blur(var(--gradual-blur));
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--mask-from), #000 var(--mask-mid), transparent var(--mask-to));
  mask-image: linear-gradient(to bottom, transparent var(--mask-from), #000 var(--mask-mid), transparent var(--mask-to));
}

/* JS controls the marquee with smoothed velocity and pauses it on hover. */
.partner-marquee__track.is-logo-loop-enhanced {
  animation: none !important;
  transition: none !important;
  will-change: transform;
  backface-visibility: hidden;
}

.partner-marquee:has(.is-logo-loop-enhanced) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .motion-char,
  .motion-blur-char,
  .technology-gradual-target > :not(.technology-gradual-blur),
  .product-gradual-target > :not(.product-gradual-blur) {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .technology-gradual-blur,
  .product-gradual-blur {
    display: none;
  }

  .partner-marquee__track.is-logo-loop-enhanced {
    transform: none !important;
  }
}