/* #region MARK:lenis */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}
/* #endregion */

/* #region MARK:base */
html.is-motion {
  scroll-behavior: auto;
}

html.is-motion.is-past-stage,
html.is-motion.is-past-stage body {
  background-color: var(--ds-white) !important;
}

.is-motion .ds-phrase {
  white-space: nowrap;
}

.is-motion .ds-char,
.is-motion .ds-char-mask {
  display: inline-block;
}

.is-motion :is(.ds-hero__catch, .ds-features__title, .ds-flow__title, .ds-contact__title) .ds-char-mask {
  line-height: 1.25;
}

.is-motion .ds-split-visual--lines,
.is-motion .ds-line {
  display: block;
}

.is-motion .ds-wipe {
  position: relative;
  display: inline-block;
}

.is-motion .ds-wipe__band {
  --ds-band-h: 1.15em;
  position: absolute;
  inset: calc(50% - var(--ds-band-h) / 2) 0;
  background: var(--ds-orange);
  transform-origin: 100% 50%;
  pointer-events: none;
}

.is-motion .ds-contact__title::after {
  scale: var(--ds-rule-scale, 1) 1;
}

.is-motion [data-split-text]:not(.is-split),
.is-motion .ds-contact__title:not(.is-split) {
  visibility: hidden;
}
/* #endregion */

/* #region MARK:header */
.is-motion .ds-header__logo img {
  transition: filter 0.4s var(--ds-ease);
}

.is-motion.is-header-on-dark .ds-header__logo img {
  filter: brightness(0) invert(1);
}

.is-motion.is-header-on-dark .ds-header__logo:focus-visible {
  --ds-focus-outer: var(--ds-white);
  --ds-focus-inner: var(--ds-navy-deep);
}

.is-motion.is-header-on-dark .ds-header::before {
  background-color: rgba(10, 14, 23, 0.56);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-motion.is-header-on-dark .ds-header::before {
    background-color: rgba(10, 14, 23, 0.88);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .is-motion.is-header-on-dark .ds-header::before {
    background-color: rgba(10, 14, 23, 0.92);
  }
}
/* #endregion */

/* #region MARK:stage */
.is-motion .ds-stage__inner {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  isolation: isolate;
}

.is-motion .ds-hero {
  --ds-hero-fg: var(--ds-ink);
  color: var(--ds-hero-fg);
}

.is-motion .ds-hero__text {
  position: relative;
  z-index: 3;
}

.is-motion .ds-hero__title,
.is-motion .ds-hero__lead {
  opacity: 0;
}

.is-motion .ds-hero__frame {
  position: relative;
  z-index: 1;
}

.is-motion .ds-scroll-cue {
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  background: transparent;
}

.is-motion .ds-scroll-cue__bar {
  position: absolute;
  inset: 0;
  background: var(--ds-cue-color);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.is-motion .ds-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.is-motion .ds-stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: rgba(10, 14, 23, 0.72);
}

.is-motion .ds-hero__img {
  opacity: 0;
}

html.is-motion:not(.is-gl-live) .ds-hero__frame {
  box-shadow: 0 0 calc(80px * var(--ds-halo, 0)) calc(4px * var(--ds-halo, 0)) rgb(var(--ds-glow-rgb) / calc(0.5 * var(--ds-halo, 0)));
}

html.is-motion:not(.is-gl-live) .ds-screen {
  background-image: var(--ds-a-img, none);
  background-position: var(--ds-a-pos, 50% 50%);
  background-repeat: no-repeat;
  background-size: var(--ds-a-size, cover);
  clip-path: var(--ds-clip, inset(50%));
  opacity: var(--ds-alpha, 0);
  filter: var(--ds-filter, none);
}

html.is-motion:not(.is-gl-live) .ds-screen::before,
html.is-motion:not(.is-gl-live) .ds-screen::after {
  content: "";
  position: absolute;
  inset: 0;
}

html.is-motion:not(.is-gl-live) .ds-screen::before {
  background-image: var(--ds-b-img, none);
  background-position: var(--ds-b-pos, 50% 50%);
  background-repeat: no-repeat;
  background-size: var(--ds-b-size, cover);
  clip-path: var(--ds-b-clip, inset(50%));
  opacity: var(--ds-b-alpha, 1);
}

html.is-motion:not(.is-gl-live) .ds-screen::after {
  background: var(--ds-fx, none);
}

@media (max-width: 1023px) {
  .is-motion .ds-hero {
    --ds-hero-pb: clamp(56px, 8vh, 96px);
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .is-motion .ds-hero__text {
    align-self: center;
  }

  .is-motion .ds-hero__frame {
    align-self: end;
  }
}
/* #endregion */

/* #region MARK:contact */
.is-motion .ds-contact__tel-icon path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ds-tel-ring 5.6s ease-in-out 2.4s infinite;
}

@keyframes ds-tel-ring {
  0%,
  13%,
  100% {
    rotate: 0deg;
  }

  2% {
    rotate: -11deg;
  }

  4% {
    rotate: 9deg;
  }

  6% {
    rotate: -8deg;
  }

  8% {
    rotate: 6deg;
  }

  10.5% {
    rotate: -2deg;
  }
}
/* #endregion */

/* #region MARK:stage trace */
.ds-stage__trace {
  display: none;
}

.is-motion .ds-stage__trace {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.is-motion .ds-stage__trace-glow,
.is-motion .ds-stage__trace-line,
.is-motion .ds-stage__trace-tail,
.is-motion .ds-stage__trace-head {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  opacity: 0;
}

.is-motion .ds-stage__trace-glow {
  stroke: var(--ds-white);
  stroke-width: 6;
  stroke-opacity: 0.9;
}

.is-motion .ds-stage__trace-line {
  stroke: var(--ds-white);
  stroke-width: 1;
}

.is-motion .ds-stage__trace-tail {
  stroke: var(--ds-white);
  stroke-width: 5;
}

.is-motion .ds-stage__trace-head {
  stroke: var(--ds-white);
  stroke-width: 2;
}
/* #endregion */

/* #region MARK:loader */
@keyframes ds-loader-wait {
  from,
  to {
    visibility: hidden;
  }
}

@keyframes ds-loader-turn {
  0% { transform: rotateY(-30deg); animation-timing-function: cubic-bezier(0.39, 0.69, 0.72, 1); }
  5.52% { transform: rotateY(-42deg); animation-timing-function: cubic-bezier(0.47, 0, 0.76, 0.42); }
  12.79% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.36, 0.3, 0.67, 0.64); }
  15.46% { transform: rotateY(45deg); animation-timing-function: cubic-bezier(0.2, 0.48, 0.41, 1); }
  30.24% { transform: rotateY(156.4deg); animation-timing-function: cubic-bezier(0.3, 0, 0.63, 0.31); }
  35.68% { transform: rotateY(150deg); }
  100% { transform: rotateY(150deg); }
}

@keyframes ds-loader-hop {
  0% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  5.52% { translate: 0 3%; scale: 1.035 0.94; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  15.59% { translate: 0 -26%; scale: 1; animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
  25.67% { translate: 0 0; scale: 1.03 0.95; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  29.45% { translate: 0 -3.5%; scale: 1; animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
  34.86%, 100% { translate: 0 0; scale: 1; }
}

@keyframes ds-loader-twist {
  0%, 7.5% { transform: rotateY(150deg); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  17.5% { transform: rotateY(164deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  36.67%, 100% { transform: rotateY(150deg); }
}

@keyframes ds-loader-bob {
  0% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  7.5% { translate: 0 2%; scale: 1.03 0.95; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  17.5% { translate: 0 -12%; scale: 1; animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
  26.67% { translate: 0 0; scale: 1.025 0.96; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  30.83% { translate: 0 -1.5%; scale: 1; animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
  36.67%, 100% { translate: 0 0; scale: 1; }
}
/* #endregion */