:root {
  --color: #1e293b;
  --c1: #fbda61;
  --c2: #ff5acd;
  --c3: #2563eb;
  --gradient: linear-gradient(
    60deg,
    var(--c3),
    var(--c2),
    var(--c1),
    var(--c2),
    var(--c3)
  );
  --scale-start: 0.5;
  --scale-end: 1.001;
  --hover-offset: 5%;

  /* 
  linear easing generator
  https://linear-easing-generator.netlify.app/
  */
  /* prettier-ignore */
  --ease-elastic: linear(
    0, 0.186 2.1%, 0.778 7.2%, 1.027 9.7%, 1.133, 1.212, 1.264, 1.292 15.4%,
    1.296, 1.294, 1.285, 1.269 18.9%, 1.219 20.9%, 1.062 25.8%, 0.995 28.3%,
    0.944 31.1%, 0.93, 0.921, 0.92 35.7%, 0.926, 0.94 39.7%, 1.001 47%, 1.014,
    1.021 52.4%, 1.02 56.4%, 1 65.5%, 0.994 70.7%, 1.001 88.4%, 1
  );
  --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion) {
  :root {
    --scale-start: var(--scale-end);
    --ease-elastic: ease-out;
    --ease-bounce-out: ease-out;
    --hover-offset: 0;
  }
}

body.new-module02-scroll {
  padding-inline: 1rem;
  font-family: system-ui;
  font-weight: 800;
  font-size: calc(1rem + 10vmin);
  text-align: center;
  overflow-x: hidden;
}

.intro {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  font-size: 0.5em;
  margin-block-start: calc(50vh - 1ex);
}

.intro span {
  display: inline-block;
}

.intro span:first-child {
  transform-origin: right bottom;
  animation: wave 250ms 1s ease 3;
}

.intro span:last-child {
  animation: hover 500ms linear infinite;
}

.sc-box {
  margin-block: 25vh;
}

.sc-text {
  margin-inline: auto;
  padding-block: 0.2em;
  max-inline-size: 30ch;
  text-wrap: balance;
  background-size: 400%;
  color: #fff;
  text-align: center;
  font-size:30px;
}

@supports (animation-timeline: view()) {
  .sc-box {
    animation: trigger steps(1) both, fade linear both;
    animation-timeline: view();
    animation-range: entry 40% contain 40%;
  }

  .sc-text {
    animation: pop-back 300ms var(--ease-bounce-out) forwards;
  }

  @container style(--animate: true) {
    .sc-text {
      animation: pop 600ms var(--ease-elastic) forwards,
        text-gradient 1s cubic-bezier(0, 0.55, 0.45, 1) forwards;
    }
  }
}
.new-module02-scroll{position:relative;}
.new-module02-scroll:before {
  background-image: url(https://8198855.fs1.hubspotusercontent-na1.net/hubfs/8198855/Revnew%202025/images/home/Pattern.png);
  background-size: cover;
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: relative;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  background-attachment: fixed;
}
.new-module02-scroll .section-heading {
  height: 100vh;
  position: sticky !important;
  top: 50%;
}
.sc-box.odd {
    max-width: 400px;
}

.sc-box.even {
    max-width: 400px;
    margin-left: auto;
}


@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes trigger {
  to {
    --animate: true;
  }
}

@keyframes pop {
  from {
    scale: var(--scale-start);
  }
  to {
    scale: var(--scale-end);
  }
}

@keyframes text-gradient {
  100% {
    background-position: 150% center;
  }
}

@keyframes pop-back {
  from {
    scale: var(--scale-end);
  }
  to {
    color: var(--color);
    scale: var(--scale-start);
  }
}

@keyframes wink {
  0%,
  100% {
    translate: 0 0;
  }
  25%,
  75% {
    translate: -100% 0;
  }
  50% {
    translate: -200% 0;
  }
}

@keyframes wave {
  50% {
    rotate: 10deg;
  }
}

@keyframes hover {
  from,
  to {
    translate: 0 calc(var(--hover-offset) * -1);
  }
  50% {
    translate: 0 var(--hover-offset);
  }
}