{"version":3,"file":"animatedText.module.mjs","names":[],"sources":["../../../../package/common/animatedText/animatedText.module.pcss"],"sourcesContent":[".animatedText {\n  display: inline-block;\n  position: relative;\n\n  &-visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  &-letter {\n    display: inline-block;\n    white-space: pre;\n    opacity: 0;\n    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);\n    animation-fill-mode: forwards;\n  }\n\n  &-variant {\n    &-rise-up {\n      animation-name: animatedTextRiseUp;\n    }\n\n    &-blur-in {\n      animation-name: animatedTextBlurIn;\n    }\n\n    &-bounce {\n      animation-name: animatedTextBounceIn;\n      animation-timing-function: ease-out;\n    }\n\n    &-glitch {\n      animation-name: animatedTextGlitch;\n      animation-timing-function: steps(5, jump-none);\n    }\n\n    &-wave {\n      /* Ambient/looping, not an entrance, so the letter stays visible throughout, overriding\n         `.animatedText-letter`'s opacity:0 base (meant for one-shot entrance variants). */\n      opacity: 1;\n      animation-name: animatedTextWave;\n      animation-iteration-count: infinite;\n      animation-timing-function: ease-in-out;\n    }\n  }\n\n  &-typewriter-letter {\n    display: inline-block;\n    white-space: pre;\n  }\n\n  &-scramble-letter {\n    display: inline-block;\n    white-space: pre;\n  }\n\n  &-cursor {\n    display: inline-block;\n    width: 0.08em;\n    min-width: 1px;\n    height: 0.85em;\n    margin-left: 0.05em;\n    background: var(--text-color);\n    vertical-align: baseline;\n\n    &-blinking {\n      animation: animatedTextCursorBlink 1s step-end infinite;\n    }\n  }\n\n  &-shine {\n    display: inline-block;\n    white-space: pre;\n\n    /* currentColor can't be used here: it would resolve against this same rule's\n       `color: transparent` below, making the whole gradient transparent. */\n    background-image: linear-gradient(90deg, var(--text-color) 25%, var(--primary-lighter) 50%, var(--text-color) 75%);\n    background-size: 200% 100%;\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n    -webkit-text-fill-color: transparent;\n    animation-name: animatedTextShineSweep;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n  }\n\n  &-highlight {\n    display: inline-block;\n    white-space: pre;\n    background-image: linear-gradient(var(--primary-lighter), var(--primary-lighter));\n    background-repeat: no-repeat;\n    background-position: left center;\n    background-size: 0% 100%;\n    animation-name: animatedTextHighlightSweep;\n    animation-timing-function: ease-out;\n    animation-fill-mode: forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &-letter {\n      animation: none;\n      opacity: 1;\n    }\n\n    &-shine {\n      animation: none;\n      background-image: none;\n      color: currentcolor;\n      -webkit-text-fill-color: currentcolor;\n    }\n\n    &-highlight {\n      animation: none;\n      background-size: 100% 100%;\n    }\n\n    &-cursor-blinking {\n      animation: none;\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes animatedTextRiseUp {\n  from {\n    opacity: 0;\n    transform: translateY(0.6em);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes animatedTextBlurIn {\n  from {\n    opacity: 0;\n    filter: blur(8px);\n  }\n\n  to {\n    opacity: 1;\n    filter: blur(0);\n  }\n}\n\n@keyframes animatedTextBounceIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-0.8em);\n  }\n\n  60% {\n    opacity: 1;\n    transform: translateY(0.15em);\n  }\n\n  80% {\n    transform: translateY(-0.05em);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes animatedTextGlitch {\n  0% {\n    opacity: 0;\n    transform: translate(0, 0);\n    text-shadow: none;\n  }\n\n  15% {\n    opacity: 1;\n    transform: translate(-0.05em, 0.03em);\n    text-shadow:\n      0.06em 0 var(--error-color),\n      -0.06em 0 var(--info-color);\n  }\n\n  30% {\n    transform: translate(0.05em, -0.03em);\n    text-shadow:\n      -0.06em 0 var(--error-color),\n      0.06em 0 var(--info-color);\n  }\n\n  45% {\n    transform: translate(-0.03em, 0);\n    text-shadow:\n      0.03em 0 var(--error-color),\n      -0.03em 0 var(--info-color);\n  }\n\n  60%,\n  100% {\n    opacity: 1;\n    transform: translate(0, 0);\n    text-shadow: none;\n  }\n}\n\n@keyframes animatedTextWave {\n  0%,\n  100% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(-0.25em);\n  }\n}\n\n@keyframes animatedTextShineSweep {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes animatedTextHighlightSweep {\n  from {\n    background-size: 0% 100%;\n  }\n\n  to {\n    background-size: 100% 100%;\n  }\n}\n\n@keyframes animatedTextCursorBlink {\n  0%,\n  50% {\n    opacity: 1;\n  }\n\n  50.01%,\n  100% {\n    opacity: 0;\n  }\n}\n"],"mappings":""}