.mainVisual img {
  width: 100%;
  height: auto;
}

.section-textEffects {
  margin-top: 200px;
  margin-bottom: 200px;
}

.section__textEffects--catchcopy {
  margin-bottom: 1em;
  font-size: 2em;
  text-align: center;
}

.section__textEffects--subtitle {
  opacity: 0.1;
  text-align: center;
}

.section__textEffects--title {
  font-size: 32px;
  margin-top: -1em;
  margin-bottom: 40px;
  text-align: center;
}

.sample {
  margin-bottom: 2em;
}
.sample h3 {
  padding-bottom: 0.5em;
  text-align: center;
  border-bottom: 1px solid var(--tantive-main-color);
}

.sample__items {
  display: flex;
  gap: 1em;
}

.sample__item {
  padding: 1em;
  background-color: white;
  box-shadow: 0 0 5px white;
}

.sample__drawingArea {
  border: 1px solid var(--tantive-main-dark-color);
  margin-top: 1em;
  padding: 1em;
}

.outline {
  margin-bottom: 2em;
}
.outline p {
  line-height: 2;
}

.outLine__voice {
  margin-left: 1em;
  margin-right: 1em;
  padding: 1em;
  background-color: var(--tantive-main-color);
  border: 1px solid var(--tantive-main-dark-color);
}

.outline__content {
  padding-left: 1em;
}

.feature__list {
  margin: 1em;
  padding: 1em;
  background-color: var(--tantive-main-color);
  border: 1px solid var(--tantive-main-dark-color);
}

.feature {
  margin-bottom: 2em;
}

.feature__item {
  font-weight: bold;
}

.install {
  margin-bottom: 2em;
}

.install__content {
  padding-left: 1em;
  line-height: 2;
}
.install__content a {
  color: var(--tantive-main-dark-color);
  text-decoration: underline;
}

.installButton--parent {
  margin-top: 1em;
  margin-right: auto;
  margin-left: auto;
}

.usage {
  margin-bottom: 2em;
}

.usage__content {
  padding-left: 1em;
}
.usage__content h3 {
  margin-top: 1em;
}
.usage__content p {
  line-height: 2;
}

.usage__figure {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.usage__figure img {
  border: 1px solid var(--tantive-main-color);
}
.usage__figure figcaption {
  font-size: 0.75rem;
}

.usage__figure--arrow {
  width: 30px;
  height: 50px;
  background-color: var(--tantive-main-color);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.catalog {
  margin-bottom: 2em;
}

.catalog__content {
  margin-bottom: 1em;
  padding-left: 1em;
}
.catalog__content p {
  line-height: 2;
}

.catalog__items {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.catalog__item {
  flex: 0 0 calc((100% - 2em) / 3);
  padding: 1em;
  background-color: white;
  box-shadow: 0 0 5px white;
}
.catalog__item h3 {
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  text-align: center;
  border-bottom: 1px solid var(--tantive-main-color);
}

.catalogue__drawingArea {
  padding: 1em;
  border: 1px solid var(--tantive-main-dark-color);
}

.catalogue__item--content p {
  line-height: 2;
}

.animCurtainSlideL .animCurtainSlideL__Square {
  position: relative;
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
}
.animCurtainSlideL .animCurtainSlideL__Square::before {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  background-color: REd;
  top: 0;
}
.animCurtainSlideL .animCurtainSlideL__content {
  transform: translateX(-100%);
}
.animCurtainSlideL.visible .animCurtainSlideL__Square::before {
  animation: animSquareSlideInFromLeft__square--before 1s forwards;
}
.animCurtainSlideL.visible .animCurtainSlideL__content {
  animation: animSquareSlideInFromLeft__content 0.2s 0.8s forwards;
}

@keyframes animSquareSlideInFromLeft__square--before {
  0% {
    width: 0;
    left: 0;
    transform: translateX(0);
  }
  30% {
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
  80% {
    width: 100%;
    left: 0;
    right: 100%;
  }
  100% {
    width: 0;
    right: 0;
    left: 100%;
  }
}
@keyframes animSquareSlideInFromLeft__content {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.animWavyDrop .tteLetter {
  display: inline-block;
  transform: translateY(-100%);
  opacity: 0;
}
.animWavyDrop.visible .tteLetter {
  animation-name: animWavyDrop;
  animation-duration: 0.75s;
  animation-delay: calc(0.1s * var(--animWavyDropDuration));
  animation-timing-function: cubic-bezier(0.42, 0, 0.33, 1);
  animation-fill-mode: forwards;
  transform: translateY(0);
}

@keyframes animWavyDrop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50% {
    opacity: 1;
    transform: translateY(30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animWavyRise .tteLetter {
  display: inline-block;
  transform: translateY(-100%);
  opacity: 0;
}
.animWavyRise.visible .tteLetter {
  animation-name: animWavyRise;
  animation-duration: 0.75s;
  animation-delay: calc(0.1s * var(--animWavyRiseDuration));
  animation-timing-function: cubic-bezier(0.42, 0, 0.33, 1);
  animation-fill-mode: forwards;
  transform: translateY(0);
}

@keyframes animWavyRise {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  50% {
    opacity: 1;
    transform: translateY(-30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animPopOut .tteLetter {
  display: inline-block;
  margin-right: 0.25em;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}
.animPopOut .tteLetter:nth-child(odd) {
  animation-name: animPopOut-odd;
}
.animPopOut .tteLetter:nth-child(even) {
  animation-name: animPopOut-even;
}

@keyframes animPopOut-odd {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0.1em, -0.1em);
    text-shadow: -0.1em 0.1em RED;
  }
  75% {
    transform: translate(0, 0);
    text-shadow: 0 0 RED;
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes animPopOut-even {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0.1em, -0.1em);
    text-shadow: -0.1em 0.1em RED;
  }
  100% {
    transform: translate(0, 0);
  }
}
.animLineSwipe {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.animLineSwipe.visible::before {
  animation: animLineSwipeBarSwipe 1s cubic-bezier(0.77, 0, 0.175, 1) forwards, animLineSwipeBarFadeOut 0.1s ease-in-out forwards;
  animation-delay: 0s, 1s;
}
.animLineSwipe.visible::after {
  animation: animLineSwipeBorder 2s 1s ease-in-out forwards;
}
.animLineSwipe.visible .animLineSwipe__content {
  animation: animLineSwipeContents 1s 0.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.animLineSwipe::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: RED;
}
.animLineSwipe::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: RED;
  opacity: 0;
}
.animLineSwipe .animLineSwipe__content {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  padding-left: 1em;
  clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
}

@keyframes animLineSwipeBarSwipe {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes animLineSwipeBarFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animLineSwipeBorder {
  to {
    opacity: 1;
  }
}
@keyframes animLineSwipeContents {
  0% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  }
}
.animGateMark .animGateMark__content {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 0.5em;
  padding-right: 0.5em;
  transform: scale(0);
  opacity: 0;
}
.animGateMark.visible .animGateMark__content {
  animation: animGateMarkContent 1s ease-in-out forwards;
}
.animGateMark.visible .animGateMark__content::before, .animGateMark.visible .animGateMark__content::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  top: 0;
  background-color: RED;
  transform: scale(0, 1);
  animation: animGateMarkGate 0.5s 1s ease-in-out forwards;
}
.animGateMark.visible .animGateMark__content::before {
  left: 0;
  transform-origin: 0 50%;
}
.animGateMark.visible .animGateMark__content::after {
  right: 0;
  transform-origin: 100% 50%;
}

@keyframes animGateMarkContent {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes animGateMarkGate {
  to {
    transform: scale(1, 1);
  }
}
.animDashOneByOne {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
.animDashOneByOne.visible span {
  display: inline-block;
  transform: translateX(calc(-1em * var(--animDashOneByOneNum)));
  animation: animDashOneByOneSlideIn 0.3s calc(0.3s * var(--animDashOneByOneNum)) forwards;
}

@keyframes animDashOneByOneSlideIn {
  0% {
    transform: translatex(calc(-1em * var(--animDashOneByOneNum)));
  }
  90% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
.animBorderRoundTrail .animBorderRoundTrail__content {
  position: relative;
  padding: 1em;
  width: -moz-fit-content;
  width: fit-content;
  outline: 0px solid RED;
}
.animBorderRoundTrail.visible .animBorderRoundTrail__content {
  animation: animBorderRoundTrail--finish 0.1s calc(0.1s * var(--num) * 2 + 1s) ease-in-out forwards;
}
.animBorderRoundTrail.visible .animBorderRoundTrail__content::before {
  content: "";
  position: absolute;
  width: 4px;
  top: 0;
  background-color: RED;
  animation: animBorderRoundTrail--t2b 0.5s ease-out forwards, animBorderRoundTrail--b2t 0.5s calc(0.1s * var(--num)) ease-out forwards;
}
.animBorderRoundTrail.visible .animBorderRoundTrail__content::after {
  content: "";
  position: absolute;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: RED;
  animation: animBorderRoundTrail--l2r calc(0.1s * var(--num)) 0.25s ease-out forwards, animBorderRoundTrail--r2l calc(0.1s * var(--num)) calc(0.1s * var(--num) + 0.25s) ease-out forwards;
}

@keyframes animBorderRoundTrail--t2b {
  0% {
    height: 0;
    left: 0;
  }
  50% {
    height: 100%;
    top: 0;
    left: 0;
    bottom: 100%;
  }
  100% {
    height: 0;
    left: 0;
    top: 100%;
    bottom: 0;
  }
}
@keyframes animBorderRoundTrail--l2r {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
    left: 0;
    right: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
    right: 0;
  }
}
@keyframes animBorderRoundTrail--b2t {
  0% {
    height: 0;
    right: 0;
    left: 100%;
  }
  50% {
    height: 100%;
    right: 0;
    left: 100%;
    top: 0;
    bottom: 100%;
  }
  100% {
    height: 0;
    right: 0;
    left: 100%;
    top: 0;
    bottom: 100%;
  }
}
@keyframes animBorderRoundTrail--r2l {
  0% {
    width: 0;
    top: 0;
    bottom: 100%;
  }
  50% {
    width: 100%;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 100%;
  }
  100% {
    width: 0%;
    top: 0;
    left: 0;
    right: 100%;
  }
}
@keyframes animBorderRoundTrail--finish {
  to {
    outline-width: 4px;
  }
}
.animBorderSplitTrailT2B {
  --animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);
  --animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);
  --animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);
  --animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);
  --animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);
  --animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);
  --animBorderSplitTrail-a25: polygon(50% 0%, 100% 0%, 100% 0%, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 50% 4px);
  --animBorderSplitTrail-a50: polygon(50% 0%, 100% 0%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 50% 4px);
  --animBorderSplitTrail-a75: polygon(50% 0%, 100% 0%, 100% 100%, calc(100% - 4px) 100%, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 4px, 50% 4px);
  --animBorderSplitTrail-a100: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 4px, 50% 4px);
}

.animBorderSplitTrailB2T {
  --animBorderSplitTrail-b0: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-b25: polygon(50% 100%, 0 100%, 0 calc(100% - 4px), 0 calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-a0: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-a25: polygon(50% 100%, 100% 100%, 100% calc(100% - 4px), 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-a50: polygon(50% 100%, 100% 100%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-a75: polygon(50% 100%, 100% 100%, 100% 0, calc(100% - 4px) 0, calc(100% - 4px) 4px,calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));
  --animBorderSplitTrail-a100: polygon(50% 100%, 100% 100%, 100% 0, 50% 0, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));
}

.animBorderSplitTrailL2R {
  --animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);
  --animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);
  --animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);
  --animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);
  --animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);
  --animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);
  --animBorderSplitTrail-a25: polygon(0 50%, 0 100%, 4px 100% , 4px 100%, 4px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);
  --animBorderSplitTrail-a50: polygon(0 50%, 0 100%, 50% 100% , 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);
  --animBorderSplitTrail-a75: polygon(0 50%, 0 100%, 100% 100%, 100% calc(100% - 4px), 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);
  --animBorderSplitTrail-a100: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);
}

.animBorderSplitTrailR2L {
  --animBorderSplitTrail-b0: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%);
  --animBorderSplitTrail-b25: polygon(100% 50%, 100% 0, calc(100% - 4px) 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);
  --animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);
  --animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);
  --animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);
  --animBorderSplitTrail-a0: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%);
  --animBorderSplitTrail-a25: polygon(100% 50%, 100% 100%, calc(100% - 4px) 100% , calc(100% - 4px) 100%, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);
  --animBorderSplitTrail-a50: polygon(100% 50%, 100% 100%, 50% 100% , 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);
  --animBorderSplitTrail-a75: polygon(100% 50%, 100% 100%, 0 100%, 0 calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);
  --animBorderSplitTrail-a100: polygon(100% 50%, 100% 100%, 0 100%, 0 50%, 4px 50%, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);
}

.animBorderSplitTrail .animBorderSplitTrail__wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.animBorderSplitTrail .animBorderSplitTrail__content {
  padding: 1em;
}
.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before, .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before {
  animation: animBorderSplitTrail--b 0.5s 0.5s forwards;
  clip-path: var(--animBorderSplitTrail-b0);
}
.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after {
  animation: animBorderSplitTrail--a 0.5s 0.5s forwards;
  clip-path: var(--animBorderSplitTrail-a0);
}
.animBorderSplitTrail.visible .animBorderSplitTrailT2B__wrap::before, .animBorderSplitTrail.visible .animBorderSplitTrailT2B__wrap::after {
  background-color: RED;
}
.animBorderSplitTrail.visible .animBorderSplitTrailB2T__wrap::before, .animBorderSplitTrail.visible .animBorderSplitTrailB2T__wrap::after {
  background-color: RED;
}
.animBorderSplitTrail.visible .animBorderSplitTrailL2R__wrap::before, .animBorderSplitTrail.visible .animBorderSplitTrailL2R__wrap::after {
  background-color: RED;
}
.animBorderSplitTrail.visible .animBorderSplitTrailR2L__wrap::before, .animBorderSplitTrail.visible .animBorderSplitTrailR2L__wrap::after {
  background-color: RED;
}

@keyframes animBorderSplitTrail--b {
  0% {
    clip-path: var(--animBorderSplitTrail-b0);
  }
  25% {
    clip-path: var(--animBorderSplitTrail-b25);
  }
  50% {
    clip-path: var(--animBorderSplitTrail-b50);
  }
  75% {
    clip-path: var(--animBorderSplitTrail-b75);
  }
  100% {
    clip-path: var(--animBorderSplitTrail-b100);
  }
}
@keyframes animBorderSplitTrail--a {
  0% {
    clip-path: var(--animBorderSplitTrail-a0);
  }
  25% {
    clip-path: var(--animBorderSplitTrail-a25);
  }
  50% {
    clip-path: var(--animBorderSplitTrail-a50);
  }
  75% {
    clip-path: var(--animBorderSplitTrail-a75);
  }
  100% {
    clip-path: var(--animBorderSplitTrail-a100);
  }
}
.animLineCurtain .animLineCurtain__wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.animLineCurtain .animLineCurtain__content {
  opacity: 0;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}
.animLineCurtain.visible .animLineCurtain__wrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  top: -3px;
  background-color: var(--tte-lineCurtainLineColor);
  animation: animLineCurtain--wrap 1s forwards;
}
.animLineCurtain.visible .animLineCurtain__content {
  animation: animLineCurtain--content 1s 1s forwards;
}

@keyframes animLineCurtain--wrap {
  0% {
    top: -3px;
  }
  20% {
    top: calc(100% - 3px);
  }
  60% {
    top: 50%;
  }
  75% {
    top: calc(100% - 3px);
  }
  90% {
    top: 70%;
  }
  100% {
    top: calc(100% - 3px);
  }
}
@keyframes animLineCurtain--content {
  to {
    opacity: 1;
  }
}
.animFlipCascade {
  display: flex;
}
.animFlipCascade span {
  display: inline-block;
  position: relative;
  transform: perspective(10000px) rotate3d(0, 1, 0, 0deg);
  transition: transform 1s;
}
.animFlipCascade.visible span {
  transition-delay: calc(var(--num) * 0.2s);
  transform: perspective(1000px) rotate3d(0, 1, 0, 720deg);
}

.animClockReveal .animClockReveal__content {
  width: -moz-fit-content;
  width: fit-content;
  clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
}
.animClockReveal.visible .animClockReveal__content {
  animation: animClockReveal--right 2s 0.5s linear forwards;
}

@keyframes animClockReveal--right {
  0% {
    clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
  25% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%);
  }
  75% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0);
  }
}
.animBlurZoomIn span {
  display: inline-block;
  opacity: 0;
  transform: scale(2);
}
.animBlurZoomIn.visible span {
  animation: animBlurZoomIn 1s calc(var(--num) * 0.2s + 0.5s) forwards;
}

@keyframes animBlurZoomIn {
  0% {
    transform: scale(4);
    filter: blur(4px);
    opacity: 0;
  }
  20% {
    transform: scale(1.6);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before, .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: var(--tte-doubleLineSlideInLineColor);
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before {
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after {
  bottom: 0;
  right: 0;
  transform: translateX(100%);
}
.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before, .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after {
  animation: animDoubleLineSlideIn 0.3s 0.5s ease-in-out forwards;
}
.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content {
  animation: animDoubleLineSlideIn 0.3s 0.7s ease-in-out forwards;
}

.animDoubleLineSlideIn__content {
  transform: translateX(-100%);
}

@keyframes animDoubleLineSlideIn {
  to {
    transform: translateX(0);
  }
}
.animLineCurtain .animLineCurtain__wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.animLineCurtain .animLineCurtain__content {
  opacity: 0;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}
.animLineCurtain.visible .animLineCurtain__wrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  top: -3px;
  background-color: RED;
  animation: animLineCurtain--wrap 1s forwards;
}
.animLineCurtain.visible .animLineCurtain__content {
  animation: animLineCurtain--content 1s 1s forwards;
}

@keyframes animLineCurtain--wrap {
  0% {
    top: -3px;
  }
  20% {
    top: calc(100% - 3px);
  }
  60% {
    top: 50%;
  }
  75% {
    top: calc(100% - 3px);
  }
  90% {
    top: 70%;
  }
  100% {
    top: calc(100% - 3px);
  }
}
@keyframes animLineCurtain--content {
  to {
    opacity: 1;
  }
}
.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}
.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 50%;
  background-color: RED;
  transform-origin: 50% 0;
}
.animHalfBackgroundRotate .animHalfBackgroundRotate__content {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  z-index: 1;
}
.animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after {
  animation: animHalfBackgroundRotate 1s 0.5s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards;
}

@keyframes animHalfBackgroundRotate {
  to {
    transform: rotate(360deg);
  }
}
.animFlipCascade {
  display: flex;
}
.animFlipCascade span {
  display: inline-block;
  position: relative;
  transform: perspective(10000px) rotate3d(0, 1, 0, 0deg);
  transition: transform 1s;
}
.animFlipCascade.visible span {
  transition-delay: calc(var(--num) * 0.2s);
  transform: perspective(1000px) rotate3d(0, 1, 0, 720deg);
}

.animClockReveal .animClockReveal__content {
  width: -moz-fit-content;
  width: fit-content;
  clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
}
.animClockReveal.visible .animClockReveal__content {
  animation: animClockReveal--right 2s 0.5s linear forwards;
}

@keyframes animClockReveal--right {
  0% {
    clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
  25% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%);
  }
  75% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0);
  }
}
.animBlurZoomIn span {
  display: inline-block;
  opacity: 0;
  transform: scale(2);
}
.animBlurZoomIn.visible span {
  animation: animBlurZoomIn 1s calc(var(--num) * 0.2s + 0.5s) forwards;
}

@keyframes animBlurZoomIn {
  0% {
    transform: scale(4);
    filter: blur(4px);
    opacity: 0;
  }
  20% {
    transform: scale(1.6);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before, .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: RED;
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before {
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after {
  bottom: 0;
  right: 0;
  transform: translateX(100%);
}
.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before, .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after {
  animation: animDoubleLineSlideIn 0.3s 0.5s ease-in-out forwards;
}
.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content {
  animation: animDoubleLineSlideIn 0.3s 0.7s ease-in-out forwards;
}

.animDoubleLineSlideIn__content {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  transform: translateX(-100%);
}

@keyframes animDoubleLineSlideIn {
  to {
    transform: translateX(0);
  }
}
.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 0.5em;
}
.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before, .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: RED;
  transform: translate(-50%, 50%) scaleX(0);
  transform-origin: 50% 50%;
}
.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before {
  width: min(80%, 4em);
  height: 1px;
}
.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after {
  width: min(20%, 1em);
  height: 4px;
}
.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before, .animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after {
  animation: animAccentUnderlineGrow1 0.3s 0.5s ease-in-out forwards;
}

@keyframes animAccentUnderlineGrow1 {
  to {
    transform: translate(-50%, 50%) scaleX(1);
  }
}
.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 0.5em;
}
.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before, .animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: RED;
  transform-origin: 0 50%;
}
.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before {
  width: 100%;
  height: 1px;
  left: 0;
  transform: translateY(50%) scaleX(0);
}
.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after {
  width: min(20%, 1em);
  height: 4px;
  right: 0;
  transform: translateY(50%);
  opacity: 0;
}
.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before {
  animation: animAccentUnderlineGrow2__long 0.3s 0.5s ease-in-out forwards;
}
.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after {
  animation: animAccentUnderlineGrow2__short 0.5s 0.8s ease-in-out forwards;
}

@keyframes animAccentUnderlineGrow2__long {
  to {
    transform: translateY(50%) scaleX(1);
  }
}
@keyframes animAccentUnderlineGrow2__short {
  0% {
    opacity: 0;
    right: 0;
    left: 100%;
  }
  70% {
    left: 0;
  }
  85% {
    left: 0.5em;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::before {
  animation: animAccentUnderlineGrow3--line 0.3s 0.3s ease-in-out forwards;
}
.animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::after {
  animation: animAccentUnderlineGrow3--dot 0.3s ease-in-out forwards;
}

.animAccentUnderlineGrow3__content {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 0.5em;
}
.animAccentUnderlineGrow3__content::before, .animAccentUnderlineGrow3__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: RED;
}
.animAccentUnderlineGrow3__content::before {
  width: min(80%, 4em);
  height: 1px;
  transform: translate(-50%, 50%) scaleX(0);
}
.animAccentUnderlineGrow3__content::after {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  opacity: 0;
}

@keyframes animAccentUnderlineGrow3--line {
  to {
    transform: translate(-50%, 50%) scaleX(1);
  }
}
@keyframes animAccentUnderlineGrow3--dot {
  to {
    opacity: 1;
  }
}
.animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::before {
  animation: animAccentUnderlineGrow4--line 0.3s ease-in-out forwards;
}
.animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::after {
  animation: animAccentUnderlineGrow4--dot 1s 0.3s linear forwards;
}

.animAccentUnderlineGrow4__content {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 0.5em;
}
.animAccentUnderlineGrow4__content::before, .animAccentUnderlineGrow4__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: RED;
}
.animAccentUnderlineGrow4__content::before {
  width: 100%;
  height: 1px;
  transform: translate(-50%, 50%) scaleX(0);
  transform-origin: 0 50%;
}
.animAccentUnderlineGrow4__content::after {
  width: 10px;
  height: 10px;
  left: 100%;
  border-radius: 50%;
  transform: translateY(50%);
  opacity: 0;
}

@keyframes animAccentUnderlineGrow4--line {
  to {
    transform: translate(-50%, 50%) scaleX(1);
  }
}
@keyframes animAccentUnderlineGrow4--dot {
  0% {
    opacity: 1;
  }
  60% {
    left: 0;
  }
  70% {
    left: 1.6em;
  }
  80% {
    left: 0.7em;
  }
  90% {
    left: 1.2em;
  }
  100% {
    left: 1em;
    opacity: 1;
  }
}/*# sourceMappingURL=style-text-effects.css.map */