/* Progressive motion: content remains visible until the controller opts in. */
html.lenis:has(.cortex-landing) { scroll-behavior: auto !important; }

/* Motion.dev adaptations: React owns text; Motion animates the inner tracks. */
.wb-word-mask { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
[data-wb-word] { display: inline-block; transform-origin: 0 100%; }
.wb-rolling { position: relative; display: inline-flex; white-space: pre; font-kerning: none; }
.wb-roll-layer { position: absolute; inset: 0; display: flex; visibility: hidden; pointer-events: none; }
.wb-rolling[data-ready] .wb-roll-copy { visibility: hidden; }
.wb-rolling[data-ready] .wb-roll-layer { visibility: visible; }
.wb-roll-letter { display: block; overflow: hidden; }
.wb-roll-track { display: block; position: relative; }
.wb-roll-track > span { display: block; }
.wb-roll-track > span + span { position: absolute; top: 100%; left: 0; }

/* Springs already interpolate these properties; CSS must not interpolate again. */
@media (hover: hover) and (pointer: fine) {
  .cortex-landing.wb-motion-reference.wb-motion-enabled [data-wb-tilt],
  .cortex-landing.wb-motion-reference.wb-motion-enabled [data-wb-tilt].cl-spotlight:hover {
    --wb-hover-y: 0px;
    transition-property: border-color, box-shadow, opacity, translate, filter;
    transition-duration: 300ms, 300ms, 900ms, 900ms, 900ms;
    transition-timing-function: ease, ease, var(--wb-reveal-ease), var(--wb-reveal-ease), var(--wb-reveal-ease);
    transition-delay: 0ms, 0ms, var(--wb-delay, 0ms), var(--wb-delay, 0ms), var(--wb-delay, 0ms);
  }
  .cortex-landing.wb-motion-reference.wb-motion-enabled [data-wb-magnet] {
    transition:
      opacity var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
      filter var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
      background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .wb-rolling .wb-roll-copy { visibility: visible !important; }
  .wb-rolling .wb-roll-layer { visibility: hidden !important; }
  .wb-word-mask { overflow: visible; }
}

.cortex-landing.wb-motion-enabled {
  --wb-reveal-distance: 42px;
  --wb-reveal-duration: 900ms;
  --wb-reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --wb-frame-lift: -7px;
  --wb-annotation-lift: -5px;
}

.cortex-landing.wb-motion-enabled [data-wb-reveal] {
  --wb-reveal-y: 0px;
  opacity: 1;
  translate: 0 var(--wb-reveal-y);
  filter: blur(0);
  transition:
    opacity var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
    translate var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
    filter var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms);
}
.cortex-landing.wb-motion-enabled [data-wb-reveal="pending"] {
  --wb-reveal-y: var(--wb-reveal-distance);
  opacity: 0;
  filter: blur(4px);
}
.cortex-landing.wb-motion-enabled [data-wb-reveal="visible"] {
  --wb-reveal-y: 0px;
  opacity: 1;
  filter: blur(0);
}

.cortex-landing.wb-motion-enabled [data-wb-reveal]:focus-within {
  transition-duration: 0ms;
  transition-delay: 0ms;
}

/* Individual transform properties leave the screenshot's original crop intact. */
.cortex-landing.wb-motion-enabled [data-wb-parallax] {
  translate: 0 calc(var(--wb-scroll-y, 0px) + var(--wb-reveal-y, 0px));
}
.cortex-landing.wb-motion-enabled [data-wb-parallax="showcase"] {
  rotate: x var(--wb-scroll-tilt, 0deg);
  scale: var(--wb-scroll-scale, 1);
  transform-origin: 50% 20%;
}
.cortex-landing.wb-motion-enabled [data-wb-parallax]:not([data-wb-reveal]) {
  --wb-reveal-y: 0px;
  transition: translate 120ms linear, rotate 120ms linear, scale 120ms linear;
}

.wb-scroll-progress {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #3596ed, #8ddeff 65%, #b7f1ff);
  box-shadow: 0 0 10px #4ab5ff55;
  transform: scaleX(var(--wb-progress, 0));
  transform-origin: left center;
}

@media (hover: hover) and (pointer: fine) {
  .cortex-landing.wb-motion-enabled [data-wb-tilt],
  .cortex-landing.wb-motion-enabled [data-wb-tilt].cl-spotlight:hover {
    transform: perspective(1100px)
      rotateX(var(--wb-tilt-x, 0deg))
      rotateY(var(--wb-tilt-y, 0deg))
      translateY(var(--wb-hover-y, 0px));
    transition:
      transform 220ms cubic-bezier(.2, .7, .3, 1),
      border-color 300ms ease, box-shadow 300ms ease,
      opacity var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
      translate var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
      filter var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms);
  }
  .cortex-landing.wb-motion-enabled [data-wb-tilt]:hover {
    --wb-hover-y: -6px;
  }
  .cortex-landing.wb-motion-enabled [data-wb-magnet] {
    translate: var(--wb-magnet-x, 0px) calc(var(--wb-magnet-y, 0px) + var(--wb-reveal-y, 0px));
    transition: translate 300ms cubic-bezier(.2, .7, .3, 1),
      opacity var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
      filter var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
      background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
}

/* Slow secondary motions leave reading and navigation stationary. */
.cortex-landing.wb-motion-enabled .cl-product-frame {
  animation: wb-site-frame-float 7.4s ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled .cl-tour-annotation {
  animation: cl-cursor-reveal 650ms both,
    wb-site-annotation-float 5.6s 650ms ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled :is(.cl-feature, .cl-benefit) .cl-icon-box > svg {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-site-icon-sway 8s ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled .cl-feature:nth-child(even) .cl-icon-box > svg {
  animation-delay: -3.5s;
}
.cortex-landing.wb-motion-enabled .cl-feature-media::before {
  background:
    linear-gradient(108deg, transparent 40%, #d7f7ff24 50%, transparent 60%),
    linear-gradient(120deg, #d7f7ff1c, transparent 28% 63%, #5ac0ff12);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: wb-site-media-sheen 9s ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled .cl-feature:nth-child(even) .cl-feature-media::before {
  animation-delay: -4s;
}
.cortex-landing.wb-motion-enabled .cl-cb-glow {
  animation: wb-site-cta-glow 5.8s ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled .cl-eyebrow > span {
  animation: wb-site-eyebrow-pulse 3.6s ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled .clf-pixels i {
  animation: wb-site-footer-drift 8s ease-in-out infinite;
}
.cortex-landing.wb-motion-enabled .clf-pixels i:nth-child(3n + 1) {
  animation-delay: -2.7s;
  animation-duration: 9.5s;
}
.cortex-landing.wb-motion-enabled .clf-pixels i:nth-child(3n + 2) {
  animation-delay: -5.2s;
  animation-duration: 7.2s;
}

.cortex-landing.wb-motion-enabled :is(.cl-desktop-nav, .clf-links) a {
  position: relative;
}
.cortex-landing.wb-motion-enabled :is(.cl-desktop-nav, .clf-links) a::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cl-accent), var(--cl-accent-soft));
  scale: 0 1;
  transform-origin: left center;
  opacity: .8;
  transition: scale 320ms cubic-bezier(.16, 1, .3, 1);
}
.cortex-landing.wb-motion-enabled :is(.cl-desktop-nav, .clf-links) a:is(:hover, :focus-visible)::after {
  scale: 1 1;
}

/* Includes existing circuit/ambient animations, which have their own visibility observers. */
.cortex-landing.wb-motion-enabled :is(section, footer)[data-wb-in-view="false"] *,
.cortex-landing.wb-motion-enabled :is(section, footer)[data-wb-in-view="false"] *::before,
.cortex-landing.wb-motion-enabled :is(section, footer)[data-wb-in-view="false"] *::after,
.cortex-landing.wb-motion-enabled :is(section, footer)[data-wb-in-view="false"]::before,
.cortex-landing.wb-motion-enabled :is(section, footer)[data-wb-in-view="false"]::after,
.cortex-landing.wb-motion-enabled[data-wb-active="false"] *,
.cortex-landing.wb-motion-enabled[data-wb-active="false"] *::before,
.cortex-landing.wb-motion-enabled[data-wb-active="false"] *::after {
  animation-play-state: paused !important;
}

@keyframes wb-site-frame-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--wb-frame-lift); }
}
@keyframes wb-site-annotation-float {
  0%, 100% { translate: 0 1px; }
  50% { translate: 2px var(--wb-annotation-lift); }
}
@keyframes wb-site-icon-sway {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; }
}
@keyframes wb-site-media-sheen {
  0%, 48% { background-position: 160% 0, 0 0; }
  79%, 100% { background-position: -80% 0, 0 0; }
}
@keyframes wb-site-cta-glow {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
@keyframes wb-site-eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; opacity: .65; }
  50% { box-shadow: 0 0 0 5px var(--cl-accent-tint), 0 0 12px var(--cl-glow); opacity: 1; }
}
@keyframes wb-site-footer-drift {
  0%, 100% { translate: 0 3px; opacity: .07; }
  50% { translate: 0 -7px; opacity: .23; }
}

@media (max-width: 760px) {
  .cortex-landing.wb-motion-enabled {
    --wb-reveal-distance: 24px;
    --wb-frame-lift: -4px;
    --wb-annotation-lift: -3px;
  }
  .cortex-landing.wb-motion-enabled [data-wb-parallax] {
    translate: 0 calc(clamp(-24px, var(--wb-scroll-y, 0px), 24px) + var(--wb-reveal-y, 0px));
  }
}
@media (hover: none), (pointer: coarse) {
  .cortex-landing.wb-motion-enabled [data-wb-tilt],
  .cortex-landing.wb-motion-enabled [data-wb-tilt].cl-spotlight:hover {
    transform: none;
  }
  .cortex-landing.wb-motion-enabled [data-wb-magnet] {
    translate: none;
  }
}

@media print, (prefers-reduced-motion: reduce) {
  .wb-scroll-progress { display: none !important; }
  .cortex-landing *,
  .cortex-landing *::before,
  .cortex-landing *::after {
    animation: none !important;
    transition: none !important;
  }
  .cortex-landing [data-wb-reveal] {
    opacity: 1 !important;
    filter: none !important;
    translate: none !important;
  }
  .cortex-landing [data-wb-parallax],
  .cortex-landing [data-wb-magnet],
  .cortex-landing :is(.cl-product-frame, .cl-tour-annotation, .clf-pixels i) {
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
  .cortex-landing [data-wb-tilt],
  .cortex-landing [data-wb-tilt].cl-spotlight:hover {
    transform: none !important;
  }
  .cortex-landing :is(.cl-feature, .cl-benefit) .cl-icon-box > svg {
    rotate: none !important;
  }
}