body.sooye-motion-experience {
  --motion-ease: cubic-bezier(.22, .72, .24, 1);
  --motion-fast: 180ms;
  --motion-medium: 620ms;
}

.sooye-motion-progress {
  background: rgba(255, 255, 255, .16);
  height: 2px;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10020;
}

.sooye-motion-progress span {
  background: #b58b4b;
  display: block;
  height: 100%;
  transform: scaleX(var(--sooye-scroll-progress, 0));
  transform-origin: left center;
  width: 100%;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  body.sooye-motion-experience.sooye-motion-ready [data-sooye-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity var(--motion-medium) var(--motion-ease) var(--sooye-motion-delay, 0ms),
      transform var(--motion-medium) var(--motion-ease) var(--sooye-motion-delay, 0ms);
  }

  body.sooye-motion-experience.sooye-motion-ready [data-sooye-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.sooye-motion-experience.sooye-motion-ready .sooye-motion-line-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 760ms var(--motion-ease) 120ms;
  }

  body.sooye-motion-experience.sooye-motion-ready .sooye-motion-line-reveal.is-visible {
    clip-path: inset(0 0 0 0);
  }

  body.sooye-motion-experience .syv3-hero-media {
    transform: scale(1.025) translate3d(var(--sooye-hero-x, 0), var(--sooye-hero-y, 0), 0);
    transition: transform 240ms ease-out;
    will-change: transform;
  }

  body.sooye-motion-experience .syv3-bridge > img,
  body.sooye-motion-experience .syv3-visual img,
  body.sooye-motion-experience .sooye-client-catalog__cover img {
    transition: transform 700ms var(--motion-ease), filter 400ms ease;
  }

  body.sooye-motion-experience .syv3-bridge:hover > img,
  body.sooye-motion-experience .syv3-visual figure:hover img,
  body.sooye-motion-experience .sooye-client-catalog__cover:hover img {
    transform: scale(1.018);
  }

  body.sooye-motion-experience .sooye-motion-tilt.is-visible {
    transform: perspective(900px)
      rotateX(var(--sooye-tilt-x, 0deg))
      rotateY(var(--sooye-tilt-y, 0deg))
      translate3d(0, var(--sooye-tilt-lift, 0), 0);
    transition:
      opacity var(--motion-medium) var(--motion-ease) var(--sooye-motion-delay, 0ms),
      transform var(--motion-fast) ease-out,
      border-color var(--motion-fast) ease,
      background-color var(--motion-fast) ease;
    transform-style: preserve-3d;
    will-change: transform;
  }

  body.sooye-motion-experience .sooye-motion-tilt.is-pointer-active {
    --sooye-tilt-lift: -3px;
  }
}

body.sooye-motion-experience .sooye-motion-button {
  --sooye-magnet-x: 0px;
  --sooye-magnet-y: 0px;
  --sooye-press-scale: 1;
  transform: translate3d(var(--sooye-magnet-x), var(--sooye-magnet-y), 0) scale(var(--sooye-press-scale));
  transition:
    transform var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

body.sooye-motion-experience .sooye-motion-button:active {
  --sooye-press-scale: .99;
}

body.sooye-motion-experience .sooye-motion-arrow {
  display: inline-block;
  transition: transform var(--motion-fast) ease;
}

body.sooye-motion-experience .sooye-motion-surface {
  --sooye-pointer-x: 50%;
  --sooye-pointer-y: 50%;
  isolation: isolate;
  overflow: hidden;
}

body.sooye-motion-experience .sooye-motion-surface::after {
  background: radial-gradient(circle 180px at var(--sooye-pointer-x) var(--sooye-pointer-y), rgba(181, 139, 75, .13), rgba(181, 139, 75, 0) 72%);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 260ms ease;
  z-index: 0;
}

body.sooye-motion-experience .sooye-motion-surface > * {
  position: relative;
  z-index: 1;
}

body.sooye-motion-experience .sooye-motion-surface.is-pointer-active::after {
  opacity: 1;
}

body.sooye-motion-experience .sooye-motion-context > span {
  display: inline-block;
  transition: color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

body.sooye-motion-experience .sooye-motion-context.is-sooye-current > span {
  color: #b58b4b;
  transform: translateX(4px);
}

body.sooye-motion-experience .syv3-path-item a,
body.sooye-motion-experience .syv3-answer a,
body.sooye-motion-experience .syv3-section-link a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 320ms var(--motion-ease), color var(--motion-fast) ease;
}

body.sooye-motion-experience .syv3-faq-list details,
body.sooye-motion-experience .syv3-library-group {
  transition: background-color var(--motion-fast) ease, padding var(--motion-fast) ease;
}

body.sooye-motion-experience .syv3-faq-list details[open],
body.sooye-motion-experience .syv3-library-group[open] {
  background: rgba(23, 78, 61, .035);
}

body.sooye-motion-experience .syv3-faq-list summary span,
body.sooye-motion-experience .syv3-library-group summary span {
  transition: color var(--motion-fast) ease, transform 260ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.sooye-motion-experience a:hover .sooye-motion-arrow,
  body.sooye-motion-experience button:hover .sooye-motion-arrow {
    transform: translateX(4px);
  }

  body.sooye-motion-experience .syv3-path-item a:hover,
  body.sooye-motion-experience .syv3-path-item a:focus-visible,
  body.sooye-motion-experience .syv3-answer a:hover,
  body.sooye-motion-experience .syv3-answer a:focus-visible,
  body.sooye-motion-experience .syv3-section-link a:hover,
  body.sooye-motion-experience .syv3-section-link a:focus-visible {
    background-size: 100% 1px;
  }
}

@media (max-width: 780px) {
  .sooye-motion-progress {
    height: 2px;
  }

  body.sooye-motion-experience .sooye-motion-button:active {
    --sooye-press-scale: .985;
  }

  body.sooye-motion-experience .sooye-motion-surface::after {
    display: none;
  }

  body.sooye-motion-experience .sooye-motion-context.is-sooye-current {
    box-shadow: inset 3px 0 0 rgba(181, 139, 75, .72);
  }

  body.sooye-motion-experience .syv3-hero-media {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sooye-motion-progress {
    display: none;
  }

  body.sooye-motion-experience *,
  body.sooye-motion-experience *::before,
  body.sooye-motion-experience *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}