.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 0.125rem solid rgb(var(--color-action-theme-rgb)); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0; /* Adjust as needed */
  animation:
    typing 5s steps(60, end),
    blink-caret 0.75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: rgb(var(--color-action-theme-rgb));
  }
}

@keyframes infinite-horizon-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes feature-btn-spark-flip {
  to {
    rotate: 360deg;
  }
}

@keyframes feature-btn-spark-rotate {
  to {
    transform: rotate(90deg);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    display: none;
    transform: translateX(-20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    display: none;
    transform: translateX(-20px);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes autoScaleFill1 {
  0% {
    fill: none;
    stroke: #2d4546;
  }
  10%,
  80% {
    fill: url(#paint0_linear_897_925);
    stroke: #00f6ff;
  }
  100% {
    fill: none;
    stroke: #2d4546;
  }
}

@keyframes autoScaleFill2 {
  0%,
  20% {
    fill: #324855;
    stroke: #2d4546;
  }
  30%,
  70% {
    fill: url(#paint0_linear_897_925);
    stroke: #00f6ff;
  }
  100% {
    fill: #324855;
    stroke: #2d4546;
  }
}

@keyframes autoScaleFill3 {
  0%,
  30% {
    fill: #222d34;
    stroke: #2d4546;
  }
  40%,
  60% {
    fill: url(#paint0_linear_897_925);
    stroke: #00f6ff;
  }
  70%,
  100% {
    fill: #222d34;
    stroke: #2d4546;
  }
}

@keyframes animateStrokeDash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes animatePathFillOpacity {
  0%,
  75% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }
  80%,
  100% {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
}

@keyframes showOn10 {
  0%,
  3% {
    opacity: 0;
  }
  5%,
  100% {
    opacity: 1;
  }
}

@keyframes showOn25 {
  0%,
  30% {
    opacity: 0;
  }
  35%,
  100% {
    opacity: 1;
  }
}

@keyframes showOn70 {
  0%,
  50% {
    opacity: 0;
  }
  55%,
  100% {
    opacity: 1;
  }
}

@keyframes heroBorderOpacityChange {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes heroLightRotate {
  100% {
    transform: rotate(1turn);
  }
}

.customSpan {
  border-right: 0.05em solid;
  animation: blink-caret 1s steps(1) infinite;

  :global(.Typewriter) {
    display: inline-block;
  }
}

.galleryHorizonScroll {
  animation: infinite-horizon-scroll 25s linear infinite;
}

.featureBtn {
  /* box-shadow: 0 0 0 1px hsl(0 0% 20%) inset; */
  box-shadow: 0 0 0 2px hsl(0 0% 100% / 0.1) inset;
  transition:
    box-shadow 0.25s,
    background 0.25s,
    transform 0.25s;
  /* background: linear-gradient(
    90deg,
    rgba(19, 54, 125, 0.2) 0%,
    rgba(15, 49, 65, 0.2) 38.54%,
    rgba(0, 111, 93, 0.2) 100%
  ); */
  background: var(--Button-Gradient);
}

.featureBtnSpark {
  mask: linear-gradient(white, transparent 50%);
  animation: feature-btn-spark-flip 6s infinite steps(2, end);

  &::before {
    content: '';
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    inset: 0 auto auto 50%;
    z-index: -1;
    translate: -50% -15%;
    rotate: 0;
    transform: rotate(-90deg);
    opacity: 1;
    background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
    transition: opacity 0.25s;
    animation: feature-btn-spark-rotate 3s linear infinite both;
  }
}

.featureBtnBackdrop {
  transition: background 0.25s opacity 0.25s;
  /* background: linear-gradient(
    90deg,
    rgba(19, 54, 125, 0.2) 0%,
    rgba(15, 49, 65, 0.2) 38.54%,
    rgba(0, 111, 93, 0.2) 100%
  ); */
  background: var(--Button-Gradient);
}

/* .featureBtnText {
  background-image: linear-gradient(
    90deg,
    #0ca6f2 -1.46%,
    #0aadc4 19.31%,
    #006fc2 30.37%,
    #0ca6f2 40.95%,
    #01ecb0 95.03%,
    #00f261 100%
  );
} */

.svgAutoScale {
  :global(.autoscale-inner1) {
    animation: autoScaleFill1 8s infinite;
  }

  :global(.autoscale-inner2) {
    animation: autoScaleFill2 8s infinite;
  }

  :global(.autoscale-inner3) {
    animation: autoScaleFill3 8s infinite;
  }
}

.svgElasticWorkload {
  :global(.elastic-workload-1) {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: animateStrokeDash 5s linear infinite;
  }
  :global(.elastic-workload-2) {
    animation: animatePathFillOpacity 5s linear infinite;
  }
  :global(.elastic-workload-tip-1) {
    animation: showOn10 5s linear infinite;
  }
  :global(.elastic-workload-tip-2) {
    animation: showOn25 5s linear infinite;
  }
  :global(.elastic-workload-tip-3) {
    animation: showOn70 5s linear infinite;
  }
}

.heroVideo {
  --borderWidth: 2px;
  --bRadius: 30px;
  /* background-color: #000; */
  /* padding: 20px; */
  border-radius: var(--bRadius);

  .heroVideoBackdrop {
    /* width: 60%;
    height: 60%; */
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 0.125rem;
    z-index: 0;
    border-radius: var(--bRadius);
    &::after,
    &::before {
      box-sizing: border-box;
    }
    &::before {
      content: '';
      position: absolute;
      z-index: -2;
      left: -50%;
      top: -50%;
      width: 200%;
      height: 200%;
      /* background-color: rgb(var(--color-dark-grey-1-rgb)); */
      background-repeat: no-repeat;
      background-position: 0 0;
      background-image: conic-gradient(transparent, #5ccae2, transparent 30%);
      animation: heroLightRotate 4s linear infinite;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      left: calc(var(--borderWidth) / 2);
      top: calc(var(--borderWidth) / 2);
      width: calc(100% - var(--borderWidth));
      height: calc(100% - var(--borderWidth));
      background: rgb(var(--color-background-rgb));
      border-radius: var(--bRadius);
    }
  }

  .heroVideoMock {
    position: absolute;
    z-index: -1;
    inset: 2px;
    width: calc(100% - var(--borderWidth) * 2);
    height: calc(100% - var(--borderWidth) * 2);
    background: rgb(var(--color-background-rgb));
    border-radius: var(--bRadius);
  }
}

.heroVideoBackdrop::after {
  animation: heroBorderOpacityChange 5s infinite linear;
}