/* public_html/assets/css/builder.public.css */

/*
  CSS público para tipografia e animações do Page Builder.
  Este arquivo é compartilhado entre preview do builder e frontend público.
*/

.builder-typo {
  font-family: var(--b-ff, inherit);
  font-weight: var(--b-fw, inherit);
  text-transform: var(--b-tt, none);
  font-style: var(--b-fst, normal);
  text-decoration: var(--b-td, none);
  font-size: var(--b-fs-d, inherit);
  line-height: var(--b-lh-d, normal);
  letter-spacing: var(--b-ls-d, normal);
  word-spacing: var(--b-ws-d, normal);
}

@media (max-width: 1024px) {
  .builder-typo {
    font-size: var(--b-fs-t, var(--b-fs-d, inherit));
    line-height: var(--b-lh-t, var(--b-lh-d, normal));
    letter-spacing: var(--b-ls-t, var(--b-ls-d, normal));
    word-spacing: var(--b-ws-t, var(--b-ws-d, normal));
  }
}

@media (max-width: 768px) {
  .builder-typo {
    font-size: var(--b-fs-m, var(--b-fs-t, var(--b-fs-d, inherit)));
    line-height: var(--b-lh-m, var(--b-lh-t, var(--b-lh-d, normal)));
    letter-spacing: var(--b-ls-m, var(--b-ls-t, var(--b-ls-d, normal)));
    word-spacing: var(--b-ws-m, var(--b-ws-t, var(--b-ws-d, normal)));
  }
}

.builder-heading-animated {
  --builder-animate-duration: 1s;
  --builder-animate-timing: ease;
  --builder-animate-delay: 0ms;
  animation-duration: var(--builder-animate-duration);
  animation-delay: var(--builder-animate-delay);
  animation-fill-mode: both;
  animation-timing-function: var(--builder-animate-timing);
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform, opacity, clip-path, filter, letter-spacing, color, width, border-color;
}

.builder-heading-animated.wow {
  animation-duration: var(--builder-animate-duration);
  animation-delay: var(--builder-animate-delay);
  animation-fill-mode: both;
}

.builder-heading-animated.pxl-split-text,
.builder-heading-animated.pxl-slip-text-color,
.builder-heading-animated.pxl-transform-left,
.builder-heading-animated.pxl-transform-right,
.builder-heading-animated.pxl-clip-left {
  animation-duration: var(--builder-animate-duration);
  animation-delay: var(--builder-animate-delay);
  animation-fill-mode: both;
}

.builder-heading-animated.bounce { animation-name: builderBounce; }
.builder-heading-animated.flash { animation-name: builderFlash; }
.builder-heading-animated.pulse { animation-name: builderPulse; }
.builder-heading-animated.rubberBand { animation-name: builderRubberBand; }
.builder-heading-animated.shake { animation-name: builderShakeX; }
.builder-heading-animated.swing { animation-name: builderSwing; transform-origin: top center; }
.builder-heading-animated.tada { animation-name: builderTada; }
.builder-heading-animated.wobble { animation-name: builderWobble; }
.builder-heading-animated.bounceIn { animation-name: builderBounceIn; }
.builder-heading-animated.bounceInDown { animation-name: builderBounceInDown; }
.builder-heading-animated.bounceInLeft { animation-name: builderBounceInLeft; }
.builder-heading-animated.bounceInRight { animation-name: builderBounceInRight; }
.builder-heading-animated.bounceInUp { animation-name: builderBounceInUp; }
.builder-heading-animated.bounceOut { animation-name: builderBounceOut; }
.builder-heading-animated.bounceOutDown { animation-name: builderBounceOutDown; }
.builder-heading-animated.bounceOutLeft { animation-name: builderBounceOutLeft; }
.builder-heading-animated.bounceOutRight { animation-name: builderBounceOutRight; }
.builder-heading-animated.bounceOutUp { animation-name: builderBounceOutUp; }
.builder-heading-animated.fadeIn { animation-name: builderFadeIn; }
.builder-heading-animated.fadeInDown { animation-name: builderFadeInDown; }
.builder-heading-animated.fadeInDownBig { animation-name: builderFadeInDownBig; }
.builder-heading-animated.fadeInLeft { animation-name: builderFadeInLeft; }
.builder-heading-animated.fadeInLeftBig { animation-name: builderFadeInLeftBig; }
.builder-heading-animated.fadeInRight { animation-name: builderFadeInRight; }
.builder-heading-animated.fadeInRightBig { animation-name: builderFadeInRightBig; }
.builder-heading-animated.fadeInUp { animation-name: builderFadeInUp; }
.builder-heading-animated.fadeInUpBig { animation-name: builderFadeInUpBig; }
.builder-heading-animated.fadeOut { animation-name: builderFadeOut; }
.builder-heading-animated.fadeOutDown { animation-name: builderFadeOutDown; }
.builder-heading-animated.fadeOutDownBig { animation-name: builderFadeOutDownBig; }
.builder-heading-animated.fadeOutLeft { animation-name: builderFadeOutLeft; }
.builder-heading-animated.fadeOutLeftBig { animation-name: builderFadeOutLeftBig; }
.builder-heading-animated.fadeOutRight { animation-name: builderFadeOutRight; }
.builder-heading-animated.fadeOutRightBig { animation-name: builderFadeOutRightBig; }
.builder-heading-animated.fadeOutUp { animation-name: builderFadeOutUp; }
.builder-heading-animated.fadeOutUpBig { animation-name: builderFadeOutUpBig; }
.builder-heading-animated.flip { animation-name: builderFlip; }
.builder-heading-animated.flipCase { animation-name: builderFlip; }
.builder-heading-animated.flipInX { animation-name: builderFlipInX; backface-visibility: visible; }
.builder-heading-animated.flipInY { animation-name: builderFlipInY; backface-visibility: visible; }
.builder-heading-animated.flipOutX { animation-name: builderFlipOutX; backface-visibility: visible; }
.builder-heading-animated.flipOutY { animation-name: builderFlipOutY; backface-visibility: visible; }
.builder-heading-animated.lightSpeedIn { animation-name: builderLightSpeedInRight; animation-timing-function: ease-out; }
.builder-heading-animated.lightSpeedOut { animation-name: builderLightSpeedOutRight; animation-timing-function: ease-in; }
.builder-heading-animated.rotateBg { animation-name: builderRotateBg; }
.builder-heading-animated.rotateIn { animation-name: builderRotateIn; }
.builder-heading-animated.rotateInDownLeft { animation-name: builderRotateInDownLeft; transform-origin: left bottom; }
.builder-heading-animated.rotateInDownRight { animation-name: builderRotateInDownRight; transform-origin: right bottom; }
.builder-heading-animated.rotateInUpLeft { animation-name: builderRotateInUpLeft; transform-origin: left bottom; }
.builder-heading-animated.rotateInUpRight { animation-name: builderRotateInUpRight; transform-origin: right bottom; }
.builder-heading-animated.rotateOut { animation-name: builderRotateOut; }
.builder-heading-animated.rotateOutDownLeft { animation-name: builderRotateOutDownLeft; transform-origin: left bottom; }
.builder-heading-animated.rotateOutDownRight { animation-name: builderRotateOutDownRight; transform-origin: right bottom; }
.builder-heading-animated.rotateOutUpLeft { animation-name: builderRotateOutUpLeft; transform-origin: left bottom; }
.builder-heading-animated.rotateOutUpRight { animation-name: builderRotateOutUpRight; transform-origin: right bottom; }
.builder-heading-animated.hinge { animation-name: builderHinge; transform-origin: top left; }
.builder-heading-animated.rollIn { animation-name: builderRollIn; }
.builder-heading-animated.rollOut { animation-name: builderRollOut; }
.builder-heading-animated.zoomInSmall { animation-name: builderZoomInSmall; }
.builder-heading-animated.zoomIn { animation-name: builderZoomIn; }
.builder-heading-animated.zoomOut { animation-name: builderZoomOut; }
.builder-heading-animated.skewIn { animation-name: builderSkewInLeft; }
.builder-heading-animated.skewInRight { animation-name: builderSkewInRight; }
.builder-heading-animated.RotatingY { animation-name: builderRotatingY; }
.builder-heading-animated.PXLfadeInUp { animation-name: builderFadeInUp; }
.builder-heading-animated.TextOutlineAnimation { animation-name: builderTextOutlineAnimation; }
.builder-heading-animated.drawRightToLeft { animation-name: builderDrawRightToLeft; }

.builder-heading-animated.split-in-fade { animation-name: builderSplitFade; }
.builder-heading-animated.split-in-right { animation-name: builderSplitRight; }
.builder-heading-animated.split-in-left { animation-name: builderSplitLeft; }
.builder-heading-animated.split-in-up { animation-name: builderSplitUp; }
.builder-heading-animated.split-in-down { animation-name: builderSplitDown; }
.builder-heading-animated.split-in-rotate { animation-name: builderSplitRotate; }
.builder-heading-animated.split-in-scale { animation-name: builderSplitScale; }
.builder-heading-animated.pxl-slip-text-color { animation-name: builderSlipTextColor; }
.builder-heading-animated.pxl-transform-left { animation-name: builderTransformLeft; }
.builder-heading-animated.pxl-transform-right { animation-name: builderTransformRight; }
.builder-heading-animated.pxl-clip-left { animation-name: builderClipLeft; }

.builder-heading-animated.typewriter {
  display: inline-block;
  width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation-name: builderTypewriter;
  animation-duration: var(--builder-animate-duration);
  animation-delay: var(--builder-animate-delay);
  animation-fill-mode: forwards;
  animation-timing-function: steps(30, end);
  will-change: width;
}

.builder-heading-animated.typewriter-cursor {
  display: inline-block;
  width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 2px solid currentColor;
  animation-name: builderTypewriterCursor, builderTypewriterCaret;
  animation-duration: var(--builder-animate-duration), 0.75s;
  animation-delay: var(--builder-animate-delay), var(--builder-animate-delay);
  animation-fill-mode: forwards, both;
  animation-timing-function: steps(30, end), step-end;
  animation-iteration-count: 1, infinite;
  will-change: width, border-color;
}

@media (max-width: 768px) {
  .builder-heading-animated.typewriter,
  .builder-heading-animated.typewriter-cursor {
    max-width: 100%;
  }
}

.builder-showcase-overlay {
  --builder-showcase-max-width: 1000px;
  --builder-showcase-main-radius: 28px;
  --builder-showcase-overlay-radius: 22px;
  --builder-showcase-left-x: -72px;
  --builder-showcase-left-y: 48px;
  --builder-showcase-right-x: -52px;
  --builder-showcase-right-y: 72px;
  --builder-showcase-left-width: 260px;
  --builder-showcase-right-width: 240px;
  --builder-showcase-z-main: 1;
  --builder-showcase-z-left: 2;
  --builder-showcase-z-right: 3;
  --builder-showcase-motion-strength: 12px;
  position: relative;
  width: 100%;
  max-width: var(--builder-showcase-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: visible;
  min-height: 360px;
}

.builder-showcase-overlay__main {
  position: relative;
  z-index: var(--builder-showcase-z-main);
  width: 100%;
}

.builder-showcase-overlay__main img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--builder-showcase-main-radius);
  object-fit: cover;
}

.builder-showcase-overlay__floating {
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 48%;
  will-change: transform;
  transition: transform 220ms ease-out;
  pointer-events: none;
}

.builder-showcase-overlay__floating img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--builder-showcase-overlay-radius);
  object-fit: cover;
  background: #ffffff;
}

.builder-showcase-overlay__floating--left {
  left: var(--builder-showcase-left-x);
  top: var(--builder-showcase-left-y);
  width: var(--builder-showcase-left-width);
  z-index: var(--builder-showcase-z-left);
}

.builder-showcase-overlay__floating--right {
  right: calc(var(--builder-showcase-right-x) * -1);
  bottom: calc(var(--builder-showcase-right-y) * -1);
  width: var(--builder-showcase-right-width);
  z-index: var(--builder-showcase-z-right);
}

.builder-showcase-overlay--motion .builder-showcase-overlay__floating--left {
  animation: builderShowcaseFloatLeft 4.8s ease-in-out infinite;
}

.builder-showcase-overlay--motion .builder-showcase-overlay__floating--right {
  animation: builderShowcaseFloatRight 5.4s ease-in-out infinite;
}

.builder-showcase-overlay-block,
.builder-showcase-overlay {
  isolation: isolate;
}

@media (max-width: 1024px) {
  .builder-showcase-overlay {
    min-height: 320px;
  }

  .builder-showcase-overlay__floating {
    max-width: 44%;
  }
}

@media (max-width: 768px) {
  .builder-showcase-overlay {
    min-height: auto;
  }

  .builder-showcase-overlay--stack-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .builder-showcase-overlay--stack-mobile .builder-showcase-overlay__floating {
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    transform: none !important;
    animation: none !important;
  }

  .builder-showcase-overlay--stack-mobile .builder-showcase-overlay__floating--left,
  .builder-showcase-overlay--stack-mobile .builder-showcase-overlay__floating--right {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
  }
}

@keyframes builderBounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
  40%, 43% { transform: translate3d(0, -18px, 0); }
  70% { transform: translate3d(0, -8px, 0); }
  90% { transform: translate3d(0, -3px, 0); }
}

@keyframes builderFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes builderPulse {
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes builderRubberBand {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes builderShakeX {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-8px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(8px, 0, 0); }
}

@keyframes builderSwing {
  20% { transform: rotate3d(0, 0, 1, 12deg); }
  40% { transform: rotate3d(0, 0, 1, -8deg); }
  60% { transform: rotate3d(0, 0, 1, 4deg); }
  80% { transform: rotate3d(0, 0, 1, -4deg); }
  100% { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes builderTada {
  0% { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes builderWobble {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { transform: translate3d(-6%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { transform: translate3d(4%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes builderBounceIn {
  0%, 20%, 40%, 60%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes builderBounceInDown {
  0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(0.9); }
  75% { transform: translate3d(0, -10px, 0) scaleY(0.95); }
  90% { transform: translate3d(0, 5px, 0) scaleY(0.985); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes builderBounceInLeft {
  0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(-10px, 0, 0) scaleX(0.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(0.995); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes builderBounceInRight {
  0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(10px, 0, 0) scaleX(0.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(0.995); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes builderBounceInUp {
  0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9); }
  75% { transform: translate3d(0, 10px, 0) scaleY(0.95); }
  90% { transform: translate3d(0, -5px, 0) scaleY(0.985); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes builderBounceOut {
  20% { transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}

@keyframes builderBounceOutDown {
  20% { transform: translate3d(0, 10px, 0) scaleY(0.985); }
  40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9); }
  100% { opacity: 0; transform: translate3d(0, 2000px, 0) scaleY(3); }
}

@keyframes builderBounceOutLeft {
  20% { opacity: 1; transform: translate3d(20px, 0, 0) scaleX(0.9); }
  100% { opacity: 0; transform: translate3d(-2000px, 0, 0) scaleX(2); }
}

@keyframes builderBounceOutRight {
  20% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleX(0.9); }
  100% { opacity: 0; transform: translate3d(2000px, 0, 0) scaleX(2); }
}

@keyframes builderBounceOutUp {
  20% { transform: translate3d(0, -10px, 0) scaleY(0.985); }
  40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(0.9); }
  100% { opacity: 0; transform: translate3d(0, -2000px, 0) scaleY(3); }
}

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

@keyframes builderFadeInDown {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInDownBig {
  from { opacity: 0; transform: translate3d(0, -160px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInLeft {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInLeftBig {
  from { opacity: 0; transform: translate3d(-160px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInRight {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInRightBig {
  from { opacity: 0; transform: translate3d(160px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderFadeInUpBig {
  from { opacity: 0; transform: translate3d(0, 160px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes builderFadeOutDown {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, 24px, 0); }
}

@keyframes builderFadeOutDownBig {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, 160px, 0); }
}

@keyframes builderFadeOutLeft {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-24px, 0, 0); }
}

@keyframes builderFadeOutLeftBig {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-160px, 0, 0); }
}

@keyframes builderFadeOutRight {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(24px, 0, 0); }
}

@keyframes builderFadeOutRightBig {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(160px, 0, 0); }
}

@keyframes builderFadeOutUp {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, -24px, 0); }
}

@keyframes builderFadeOutUpBig {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, -160px, 0); }
}

@keyframes builderFlip {
  from {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(400px) scale3d(1, 1, 1);
    animation-timing-function: ease-in;
  }
}

@keyframes builderFlipInX {
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { transform: perspective(400px); }
}

@keyframes builderFlipInY {
  from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { transform: perspective(400px); }
}

@keyframes builderFlipOutX {
  from { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}

@keyframes builderFlipOutY {
  from { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
  to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
}

@keyframes builderLightSpeedInRight {
  from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { transform: skewX(20deg); opacity: 1; }
  80% { transform: skewX(-5deg); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes builderLightSpeedOutRight {
  from { opacity: 1; }
  to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; }
}

@keyframes builderRotateBg {
  from { transform: rotate(-8deg) scale(0.96); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes builderRotateIn {
  from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  to { transform-origin: center; transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes builderRotateInDownLeft {
  from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
  to { transform-origin: left bottom; transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes builderRotateInDownRight {
  from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { transform-origin: right bottom; transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes builderRotateInUpLeft {
  from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { transform-origin: left bottom; transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes builderRotateInUpRight {
  from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
  to { transform-origin: right bottom; transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes builderRotateOut {
  from { transform-origin: center; opacity: 1; }
  to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; }
}

@keyframes builderRotateOutDownLeft {
  from { transform-origin: left bottom; opacity: 1; }
  to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
}

@keyframes builderRotateOutDownRight {
  from { transform-origin: right bottom; opacity: 1; }
  to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
}

@keyframes builderRotateOutUpLeft {
  from { transform-origin: left bottom; opacity: 1; }
  to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
}

@keyframes builderRotateOutUpRight {
  from { transform-origin: right bottom; opacity: 1; }
  to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; }
}

@keyframes builderHinge {
  0% { transform-origin: top left; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; }
  to { transform: translate3d(0, 700px, 0); opacity: 0; }
}

@keyframes builderRollIn {
  from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderRollOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }
}

@keyframes builderZoomInSmall {
  from { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); }
  50% { opacity: 1; }
}

@keyframes builderZoomIn {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
}

@keyframes builderZoomOut {
  from { opacity: 1; }
  50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  to { opacity: 0; }
}

@keyframes builderSkewInLeft {
  from { opacity: 0; transform: translate3d(-24px, 0, 0) skewX(18deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewX(0deg); }
}

@keyframes builderSkewInRight {
  from { opacity: 0; transform: translate3d(24px, 0, 0) skewX(-18deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewX(0deg); }
}

@keyframes builderRotatingY {
  from { opacity: 0; transform: perspective(800px) rotateY(-90deg); }
  to { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}

@keyframes builderTextOutlineAnimation {
  0% {
    color: transparent;
    -webkit-text-stroke: 1px currentColor;
    text-shadow: none;
    opacity: 0;
  }
  100% {
    color: currentColor;
    -webkit-text-stroke: 0 currentColor;
    opacity: 1;
  }
}

@keyframes builderDrawRightToLeft {
  from {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes builderSplitFade {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes builderSplitRight {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderSplitLeft {
  from { opacity: 0; transform: translate3d(-26px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderSplitUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderSplitDown {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes builderSplitRotate {
  from { opacity: 0; transform: rotate(-8deg) translate3d(0, 18px, 0); }
  to { opacity: 1; transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes builderSplitScale {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes builderSlipTextColor {
  0% { color: transparent; filter: saturate(0.6); }
  100% { color: inherit; filter: saturate(1); }
}

@keyframes builderTransformLeft {
  from { opacity: 0; transform: translate3d(-32px, 0, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes builderTransformRight {
  from { opacity: 0; transform: translate3d(32px, 0, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes builderClipLeft {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes builderTypewriter {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

@keyframes builderTypewriterCursor {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

@keyframes builderTypewriterCaret {
  0%, 49% {
    border-right-color: currentColor;
  }
  50%, 100% {
    border-right-color: transparent;
  }
}

@keyframes builderShowcaseFloatLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(calc(var(--builder-showcase-motion-strength) * -0.35), calc(var(--builder-showcase-motion-strength) * -0.8), 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes builderShowcaseFloatRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(calc(var(--builder-showcase-motion-strength) * 0.45), calc(var(--builder-showcase-motion-strength) * 0.85), 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}