Animation Master

interface:
  display_name: "Animation Master"
  short_description: "Reusable CSS motion effects"
  default_prompt: "Use $animation-master to add reusable motion CSS to my page."

/* Animation master - Avatar hover */

/*
  Usage:
    <div class="t-avatar-hover">
      <span class="t-avatar-hover-item">A</span>
      <span class="t-avatar-hover-item">B</span>
    </div>

  Set `--avatar-hover-shift` and `--avatar-hover-active-scale`
  on each item to create the grouped hover lift.
*/

:root {
  --avatar-hover-lift: -4px;
  --avatar-hover-dur: 320ms;
  --avatar-hover-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-hover-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  --avatar-hover-scale: 1.05;
  --avatar-hover-falloff: 0.45;
}

.t-avatar-hover {
  display: flex;
  align-items: center;
}

.t-avatar-hover-item {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -8px;
  border: 1.5px solid #f9f9f9;
  border-radius: 50%;
  background: var(--avatar-color, #d9d9d9);
  color: rgba(0, 0, 0, 0.68);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  position: relative;
  transform:
    translateY(var(--avatar-hover-shift, 0px))
    scale(var(--avatar-hover-active-scale, 1));
  transform-origin: center;
  transition: transform var(--avatar-hover-dur) var(--avatar-hover-ease-in);
  will-change: transform;
}

.t-avatar-hover-item:last-child {
  margin-right: 0;
}

.t-avatar-hover-more {
  background: color-mix(in srgb, #f9f9f9 80%, #000 20%);
  color: #0d0d0d;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .t-avatar-hover-item {
    transition: none !important;
  }
}

/* Animation master - Badge */

/*
  Usage:
    <span class="t-badge" data-open="true">
      <span class="t-badge-dot"></span>
    </span>

  State: set data-open="true" or "false" on `.t-badge`.
  The badge slides in first, then the dot scales and fades.
*/

:root {
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes t-badge-slide-in {
  from {
    transform: translate(var(--badge-offset-x), var(--badge-offset-y));
  }

  to {
    transform: translate(0, 0);
  }
}

.t-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  pointer-events: none;
  will-change: transform;
}

.t-badge[data-open="true"] {
  animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease);
}

.t-badge-dot {
  display: block;
  transform-origin: center;
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  transition:
    transform var(--badge-pop-dur) var(--badge-pop-ease),
    opacity var(--badge-fade-dur) var(--badge-pop-ease),
    filter var(--badge-pop-dur) var(--badge-pop-ease);
  will-change: transform, opacity, filter;
}

.t-badge[data-open="false"] .t-badge-dot {
  transform: scale(0);
  opacity: 0;
  filter: blur(var(--badge-blur));
  transition:
    transform var(--badge-pop-close-dur) var(--badge-close-ease),
    opacity var(--badge-fade-close-dur) var(--badge-close-ease),
    filter var(--badge-pop-close-dur) var(--badge-close-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-badge,
  .t-badge-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* Animation master - Blink swing */

/*
  Usage:
    <div class="t-blink-swing">...</div>

  Put `.t-blink-swing` on any icon, badge, card, or control
  that should pop in, swing left and right, then blink out.
*/

:root {
  --blink-swing-dur: 1000ms;
  --blink-swing-scale-min: 0.001;
  --blink-swing-rotate-a: 20deg;
  --blink-swing-rotate-b: -20deg;
}

.t-blink-swing {
  animation: t-blink-swing var(--blink-swing-dur) infinite both;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-blink-swing {
  0% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(var(--blink-swing-scale-min));
    animation-timing-function: ease-in-out;
  }

  15% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(1);
    animation-timing-function: ease-in-out;
  }

  30% {
    transform: rotate(var(--blink-swing-rotate-b)) scale(1);
    animation-timing-function: ease-in-out;
  }

  45% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(1);
    animation-timing-function: ease-in-out;
  }

  58.33% {
    transform: rotate(var(--blink-swing-rotate-b)) scale(1);
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(1);
    animation-timing-function: linear;
  }

  88.33%,
  100% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(var(--blink-swing-scale-min));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-blink-swing {
    animation: none !important;
  }
}

/* Animation master - Blink */

/*
  Usage:
    <div class="t-blink">...</div>

  Put `.t-blink` on any icon, badge, card, or control
  that should repeatedly pop in and blink out.
*/

:root {
  --blink-dur: 1000ms;
  --blink-scale-min: 0.001;
  --blink-scale-max: 1;
  --blink-ease-in: cubic-bezier(0.218, 0.809, 0.58, 1);
}

.t-blink {
  animation: t-blink var(--blink-dur) infinite both;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-blink {
  0% {
    transform: scale(var(--blink-scale-min));
    animation-timing-function: var(--blink-ease-in);
  }

  25% {
    transform: scale(var(--blink-scale-max));
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: scale(var(--blink-scale-min));
    animation-timing-function: ease-out;
  }

  75% {
    transform: scale(var(--blink-scale-max));
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: scale(var(--blink-scale-min));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-blink {
    animation: none !important;
  }
}

/* Animation master - blur-out-up */

/*
  Usage:
    <div class="t-text-animation t-blur-out-up is-previewing">
      <span class="t-text-row"><span class="t-text-whole">China Ad</span></span>
      <span class="t-text-row"><span class="t-text-whole">Product Design</span></span>
    </div>

  Add `.t-blur-out-up` and `.is-previewing` to run this text animation.
*/

:root {
  --text-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --text-motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --text-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.t-text-animation {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-content: inherit;
  gap: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char,
.t-text-animation .t-word,
.t-text-animation .t-line,
.t-text-animation .t-text-row,
.t-text-animation .t-text-whole {
  display: inline-block;
  opacity: 1;
  transform-origin: center;
  will-change: transform, opacity, filter, clip-path, background-position;
}

.t-text-animation .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-line {
  flex-basis: 100%;
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-text-whole {
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char-space {
  width: 0.32em;
}

.t-text-animation .t-text-word-group {
  display: inline-block;
  white-space: nowrap;
}

/* Optional preview wrapper for Animation master demo pages. */
.text-preview {
  width: 272px;
  max-width: calc(100% - 24px);
  min-height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0 6px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: inherit;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.09;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-line {
  flex-basis: 100%;
  max-width: 100%;
  line-height: 1.09;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-whole {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-char-space {
  width: 0.32em;
}

.text-preview:not(.is-previewing) .t-char,
.text-preview:not(.is-previewing) .t-word,
.text-preview:not(.is-previewing) .t-line,
.text-preview:not(.is-previewing) .t-text-whole {
  animation: none;
}

.t-blur-out-up.is-previewing .t-word {
  animation: t-blur-out-up 850ms var(--text-motion-ease-out) both;
  animation-delay: calc(var(--i) * 65ms);
}

@keyframes t-blur-out-up {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(8px);
  }

  55% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-blur-out-up,
  .t-blur-out-up * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* Animation master - bottom-up-letters */

/*
  Usage:
    <div class="t-text-animation t-bottom-up-letters is-previewing">
      <span class="t-text-row"><span class="t-text-whole">China Ad</span></span>
      <span class="t-text-row"><span class="t-text-whole">Product Design</span></span>
    </div>

  Add `.t-bottom-up-letters` and `.is-previewing` to run this text animation.
*/

:root {
  --text-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --text-motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --text-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.t-text-animation {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-content: inherit;
  gap: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char,
.t-text-animation .t-word,
.t-text-animation .t-line,
.t-text-animation .t-text-row,
.t-text-animation .t-text-whole {
  display: inline-block;
  opacity: 1;
  transform-origin: center;
  will-change: transform, opacity, filter, clip-path, background-position;
}

.t-text-animation .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-line {
  flex-basis: 100%;
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-text-whole {
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char-space {
  width: 0.32em;
}

.t-text-animation .t-text-word-group {
  display: inline-block;
  white-space: nowrap;
}

/* Optional preview wrapper for Animation master demo pages. */
.text-preview {
  width: 272px;
  max-width: calc(100% - 24px);
  min-height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0 6px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: inherit;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.09;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-line {
  flex-basis: 100%;
  max-width: 100%;
  line-height: 1.09;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-whole {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-char-space {
  width: 0.32em;
}

.text-preview:not(.is-previewing) .t-char,
.text-preview:not(.is-previewing) .t-word,
.text-preview:not(.is-previewing) .t-line,
.text-preview:not(.is-previewing) .t-text-whole {
  animation: none;
}

.t-bottom-up-letters.is-previewing .t-char {
  animation: t-bottom-up-letters 660ms var(--text-motion-ease-out) both;
  animation-delay: calc(var(--i) * 32ms);
}

@keyframes t-bottom-up-letters {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-bottom-up-letters,
  .t-bottom-up-letters * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* Animation master - Button animation */

/*
  Usage:
    <button class="t-button-animation">...</button>

  Put `.t-button-animation` on any button or control to create
  a subtle repeated click/press animation.
*/

:root {
  --button-animation-dur: 1150ms;
  --button-animation-ease: cubic-bezier(0.25, 0, 0.62, 1);
}

.t-button-animation {
  animation: t-button-animation var(--button-animation-dur) var(--button-animation-ease) infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-button-animation {
  0% {
    transform: scale(1, 1);
  }

  13.04% {
    transform: scale(0.878, 0.877);
  }

  30.44% {
    transform: scale(1, 1);
  }

  43.48% {
    transform: scale(0.904, 0.904);
  }

  60.87% {
    transform: scale(1, 1);
  }

  72.46% {
    transform: scale(0.941, 0.937);
  }

  100% {
    transform: scale(1, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-button-animation {
    animation: none !important;
  }
}

/* Animation master - Click */

/*
  Usage:
    <button class="t-click">...</button>

  Put `.t-click` on any button, icon, card, or control
  that should show a repeated pointer click motion.
*/

:root {
  --click-dur: 1000ms;
  --click-ease: ease-in-out;
  --click-scale: 0.88;
  --click-rotate: -25deg;
  --click-x: 4.75px;
  --click-y: 10.1px;
}

.t-click {
  animation: t-click var(--click-dur) var(--click-ease) infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-click {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  25% {
    transform:
      translate(var(--click-x), var(--click-y))
      rotate(var(--click-rotate))
      scale(var(--click-scale));
  }

  50% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  75% {
    transform:
      translate(var(--click-x), var(--click-y))
      rotate(var(--click-rotate))
      scale(var(--click-scale));
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-click {
    animation: none !important;
  }
}

/* Animation master - Digit roll */

/*
  Usage:
    <span class="t-digit-roll is-animating">
      <span class="t-digit-roll-slot t-digit-roll-item">
        <span class="t-digit-roll-anchor">3</span>
        <span class="t-digit-roll-viewport">
          <span class="t-digit-roll-reel">
            <span class="t-digit-roll-cell">0</span>
            <span class="t-digit-roll-cell">1</span>
            <span class="t-digit-roll-cell">2</span>
            <span class="t-digit-roll-cell">3</span>
          </span>
        </span>
      </span>
      <span class="t-digit-roll-item">.</span>
      <span class="t-digit-roll-viewport t-digit-roll-item">
        <span class="t-digit-roll-reel">
          <span class="t-digit-roll-cell">0</span>
          <span class="t-digit-roll-cell">1</span>
        </span>
      </span>
    </span>

  Set `--digit-roll-scroll-distance`, `--digit-roll-duration`,
  and `--digit-roll-stagger` on each reel/item to control timing.
*/

:root {
  --digit-roll-dur: 500ms;
  --digit-roll-distance: 8px;
  --digit-roll-stagger: 70ms;
  --digit-roll-blur: 2px;
  --digit-roll-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-roll-dir-x: 0;
  --digit-roll-dir-y: 1;
  --digit-roll-settle-overshoot: 1.8px;
}

.t-digit-roll {
  display: inline;
  align-items: baseline;
  font-variant-numeric: inherit;
}

.t-digit-roll-item {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.t-digit-roll.is-animating .t-digit-roll-item {
  animation: t-digit-roll-pop-in var(--digit-roll-dur) var(--digit-roll-ease) both;
  animation-delay: calc(var(--digit-roll-stagger) * var(--digit-roll-stagger-index, 0));
}

.t-digit-roll-viewport {
  width: 0.62em;
  height: 1.08em;
  overflow: hidden;
}

.t-digit-roll-slot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
}

.t-digit-roll-anchor {
  visibility: hidden;
}

.t-digit-roll-slot .t-digit-roll-viewport {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1lh;
}

.t-digit-roll-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em)));
  will-change: transform;
}

.t-digit-roll.is-animating .t-digit-roll-reel {
  animation: t-digit-roll-scroll var(--digit-roll-duration, var(--digit-roll-dur)) cubic-bezier(0.2, 0.82, 0.16, 1) forwards;
}

.t-digit-roll-cell {
  display: block;
  width: 0.62em;
  height: 1.08em;
  line-height: 1.08em;
  text-align: center;
}

.t-digit-roll-slot .t-digit-roll-cell {
  width: 100%;
  height: 1lh;
  line-height: inherit;
}

@keyframes t-digit-roll-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-roll-distance) * var(--digit-roll-dir-x)),
      calc(var(--digit-roll-distance) * var(--digit-roll-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-roll-blur));
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes t-digit-roll-scroll {
  0% {
    transform: translateY(0);
  }

  62% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em) - var(--digit-roll-settle-overshoot)));
  }

  78% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em) + var(--digit-roll-settle-overshoot) * 0.34));
  }

  90% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em) - var(--digit-roll-settle-overshoot) * 0.12));
  }

  100% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-roll,
  .t-digit-roll * {
    animation: none !important;
    filter: none !important;
  }
}

/* Animation master - Digit */

/*
  Usage:
    <span class="t-digit-group">
      <span class="t-digit">1</span>
      <span class="t-digit">2</span>
    </span>

  Put `.t-digit-group` around number characters and add
  `.is-animating` when each character should pop into place.
*/

:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
}

@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

.t-digit-group {
  display: inline;
  align-items: baseline;
}

.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
  animation-delay: calc(var(--digit-stagger) * var(--i, 0));
}

.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}

.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit {
    animation: none !important;
  }
}

/* Animation master - Drift down */

/*
  Usage:
    <div class="t-drift-down">...</div>

  Put `.t-drift-down` on any icon, badge, card, or control
  that should appear, rotate, and drift downward.
*/

:root {
  --drift-down-dur: 1000ms;
  --drift-down-y: 128px;
  --drift-down-rotate: 129deg;
  --drift-down-scale-min: 0.001;
}

.t-drift-down {
  animation: t-drift-down var(--drift-down-dur) infinite both;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-drift-down {
  0% {
    transform: translateY(0) rotate(0deg) scale(var(--drift-down-scale-min));
    animation-timing-function: ease-in-out;
  }

  13.33% {
    transform: translateY(0) rotate(17deg) scale(1);
    animation-timing-function: ease-in-out;
  }

  76.67% {
    transform: translateY(calc(var(--drift-down-y) * 0.75)) rotate(99deg) scale(1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    transform: translateY(var(--drift-down-y)) rotate(var(--drift-down-rotate)) scale(var(--drift-down-scale-min));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-drift-down {
    animation: none !important;
  }
}

/* Animation master - Dropdown */

/*
  Usage:
    <div class="t-dropdown" data-origin="top-center">...</div>

  State: add `.is-open` to show the menu, then `.is-closing`
  while dismissing it. Use data-origin to control transform origin.
*/

:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}

.t-dropdown[data-origin="top-right"] {
  transform-origin: top right;
}

.t-dropdown[data-origin="top-center"] {
  transform-origin: top center;
}

.t-dropdown[data-origin="bottom-left"] {
  transform-origin: bottom left;
}

.t-dropdown[data-origin="bottom-center"] {
  transform-origin: bottom center;
}

.t-dropdown[data-origin="bottom-right"] {
  transform-origin: bottom right;
}

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown {
    transition: none !important;
  }
}

/* Animation master - Error shake */

/*
  Usage:
    <div class="t-error-shake-wrap">
      <div class="t-error-shake">
        <input class="t-error-shake-input">
      </div>
      <p class="t-error-shake-message">Please enter a valid email.</p>
    </div>

  State: add `.is-error` to wrapper and input shell.
  Add `.is-shaking` to `.t-error-shake` to replay the shake.
*/

:root {
  --error-shake-distance: 6px;
  --error-shake-overshoot: 4px;
  --error-shake-dur-a: 80ms;
  --error-shake-dur-b: 60ms;
  --error-shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --error-shake-border: #e23014;
  --error-shake-text: #d62b11;
  --error-shake-revert-hold: 3000ms;
  --error-shake-revert-dur: 280ms;
}

.t-error-shake-wrap {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.t-error-shake {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #ffffff;
  outline: none;
  transition: border-color 150ms ease-out;
  will-change: transform;
}

.t-error-shake:focus-within {
  border-color: #585858;
}

.t-error-shake.is-error {
  border-color: var(--error-shake-border);
  transition: border-color var(--error-shake-revert-dur) ease-out;
}

.t-error-shake-input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #0d0d0d;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.t-error-shake-input::placeholder {
  color: #6c6c6c;
}

.t-error-shake-message {
  margin: 0;
  color: var(--error-shake-text);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--error-shake-revert-dur) ease-out,
    visibility 0s linear var(--error-shake-revert-dur);
}

.t-error-shake-wrap.is-error .t-error-shake-message {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--error-shake-revert-dur) ease-out,
    visibility 0s linear 0s;
}

.t-error-shake.is-shaking {
  animation: t-error-shake calc(var(--error-shake-dur-a) * 2 + var(--error-shake-dur-b) * 2) linear;
}

@keyframes t-error-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--error-shake-ease);
  }

  28.57% {
    transform: translateX(var(--error-shake-distance));
    animation-timing-function: var(--error-shake-ease);
  }

  57.14% {
    transform: translateX(calc(var(--error-shake-distance) * -1));
    animation-timing-function: var(--error-shake-ease);
  }

  78.57% {
    transform: translateX(var(--error-shake-overshoot));
    animation-timing-function: var(--error-shake-ease);
  }

  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-error-shake {
    animation: none !important;
    transition: none !important;
  }
}

/* Animation master - fade-through */

/*
  Usage:
    <div class="t-text-animation t-fade-through is-previewing">
      <span class="t-text-row"><span class="t-text-whole">China Ad</span></span>
      <span class="t-text-row"><span class="t-text-whole">Product Design</span></span>
    </div>

  Add `.t-fade-through` and `.is-previewing` to run this text animation.
*/

:root {
  --text-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --text-motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --text-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.t-text-animation {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-content: inherit;
  gap: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char,
.t-text-animation .t-word,
.t-text-animation .t-line,
.t-text-animation .t-text-row,
.t-text-animation .t-text-whole {
  display: inline-block;
  opacity: 1;
  transform-origin: center;
  will-change: transform, opacity, filter, clip-path, background-position;
}

.t-text-animation .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-line {
  flex-basis: 100%;
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-text-whole {
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char-space {
  width: 0.32em;
}

.t-text-animation .t-text-word-group {
  display: inline-block;
  white-space: nowrap;
}

/* Optional preview wrapper for Animation master demo pages. */
.text-preview {
  width: 272px;
  max-width: calc(100% - 24px);
  min-height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0 6px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: inherit;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.09;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-line {
  flex-basis: 100%;
  max-width: 100%;
  line-height: 1.09;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-whole {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-char-space {
  width: 0.32em;
}

.text-preview:not(.is-previewing) .t-char,
.text-preview:not(.is-previewing) .t-word,
.text-preview:not(.is-previewing) .t-line,
.text-preview:not(.is-previewing) .t-text-whole {
  animation: none;
}

.t-fade-through.is-previewing .t-text-whole {
  animation: t-fade-through 720ms var(--text-motion-ease-out) both;
}

@keyframes t-fade-through {
  0% {
    opacity: 0;
  }

  34% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-fade-through,
  .t-fade-through * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* Animation master - Float rise */

/*
  Usage:
    <div class="t-float-rise">...</div>

  Put `.t-float-rise` on any icon, badge, card, or control
  that should drift upward and softly rotate back.
*/

:root {
  --float-rise-dur: 1000ms;
  --float-rise-y: 57px;
  --float-rise-rotate: 27deg;
}

.t-float-rise {
  animation: t-float-rise var(--float-rise-dur) infinite both;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-float-rise {
  0% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: translateY(calc(var(--float-rise-y) * -1)) rotate(var(--float-rise-rotate));
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-float-rise {
    animation: none !important;
  }
}

/* Animation master - Float */

/*
  Usage:
    <div class="t-float">...</div>

  Put `.t-float` on any element that should gently float.
*/

:root {
  --float-dur: 1000ms;
  --float-y: 20px;
  --float-rot-a: -1.5deg;
  --float-rot-b: 8deg;
  --float-rot-c: -8deg;
}

.t-float {
  transform-origin: center center;
  animation:
    t-float-y var(--float-dur) infinite,
    t-float-rotate var(--float-dur) infinite;
  will-change: translate, rotate;
}

@keyframes t-float-y {
  0% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  50% {
    translate: 0 calc(var(--float-y) * -1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    translate: 0 0;
  }
}

@keyframes t-float-rotate {
  0% {
    rotate: var(--float-rot-a);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

  25% {
    rotate: var(--float-rot-b);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  75% {
    rotate: var(--float-rot-c);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }

  100% {
    rotate: var(--float-rot-a);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-float {
    animation: none !important;
  }
}

/* Animation master - focus-blur-resolve */

/*
  Usage:
    <div class="t-text-animation t-focus-blur-resolve is-previewing">
      <span class="t-text-row"><span class="t-text-whole">China Ad</span></span>
      <span class="t-text-row"><span class="t-text-whole">Product Design</span></span>
    </div>

  Add `.t-focus-blur-resolve` and `.is-previewing` to run this text animation.
*/

:root {
  --text-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --text-motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --text-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.t-text-animation {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-content: inherit;
  gap: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char,
.t-text-animation .t-word,
.t-text-animation .t-line,
.t-text-animation .t-text-row,
.t-text-animation .t-text-whole {
  display: inline-block;
  opacity: 1;
  transform-origin: center;
  will-change: transform, opacity, filter, clip-path, background-position;
}

.t-text-animation .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-line {
  flex-basis: 100%;
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-text-whole {
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char-space {
  width: 0.32em;
}

.t-text-animation .t-text-word-group {
  display: inline-block;
  white-space: nowrap;
}

/* Optional preview wrapper for Animation master demo pages. */
.text-preview {
  width: 272px;
  max-width: calc(100% - 24px);
  min-height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0 6px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: inherit;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.09;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-line {
  flex-basis: 100%;
  max-width: 100%;
  line-height: 1.09;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-whole {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-char-space {
  width: 0.32em;
}

.text-preview:not(.is-previewing) .t-char,
.text-preview:not(.is-previewing) .t-word,
.text-preview:not(.is-previewing) .t-line,
.text-preview:not(.is-previewing) .t-text-whole {
  animation: none;
}

.t-focus-blur-resolve.is-previewing .t-text-whole {
  animation: t-focus-blur-resolve 900ms var(--text-motion-ease-out) both;
}

@keyframes t-focus-blur-resolve {
  from {
    opacity: 0;
    filter: blur(18px);
    transform: scale(1.02);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-focus-blur-resolve,
  .t-focus-blur-resolve * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* Animation master - Heartbeat */

/*
  Usage:
    <div class="t-heartbeat">...</div>

  Put `.t-heartbeat` on any icon, badge, card, or control
  that should pulse with a repeated heartbeat rhythm.
*/

:root {
  --heartbeat-dur: 1000ms;
  --heartbeat-scale-a: 0.7;
  --heartbeat-scale-b: 0.77;
  --heartbeat-scale-c: 0.895;
}

.t-heartbeat {
  animation: t-heartbeat var(--heartbeat-dur) infinite both;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-heartbeat {
  0% {
    transform: scale(1);
    animation-timing-function: ease-in-out;
  }

  16.67% {
    transform: scale(var(--heartbeat-scale-a));
    animation-timing-function: ease-in-out;
  }

  35% {
    transform: scale(1);
    animation-timing-function: ease-in-out;
  }

  51.67% {
    transform: scale(var(--heartbeat-scale-b));
    animation-timing-function: ease-in-out;
  }

  70% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.478, 0.279, 0.458, 1.186);
  }

  85% {
    transform: scale(var(--heartbeat-scale-c));
    animation-timing-function: cubic-bezier(0.586, 0.07, 0.415, 0.973);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-heartbeat {
    animation: none !important;
  }
}

/* Animation master - Icon swap */

/*
  Usage:
    <span class="t-icon-swap" data-state="a">
      <span class="t-icon" data-icon="a">...</span>
      <span class="t-icon" data-icon="b">...</span>
    </span>

  State: set data-state="a" or "b" on `.t-icon-swap`.
*/

:root {
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}

.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--icon-swap-dur) var(--icon-swap-ease),
    filter var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon {
    transition: none !important;
  }
}

/* Animation master - Jump */

/*
  Usage:
    <div class="t-jump">...</div>

  Put `.t-jump` on any icon, badge, card, or control
  that should bounce upward with a squash-and-stretch motion.
*/

:root {
  --jump-dur: 1000ms;
  --jump-y: 59px;
  --jump-squash-x: 1.15;
  --jump-squash-y: 0.85;
  --jump-stretch-x: 0.85;
  --jump-stretch-y: 1.15;
}

.t-jump {
  animation: t-jump var(--jump-dur) infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes t-jump {
  0%,
  3.33% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in-out;
  }

  23.33% {
    transform: translateY(0) scale(var(--jump-squash-x), var(--jump-squash-y));
    animation-timing-function: cubic-bezier(0.245, 0.53, 0.58, 1);
  }

  43.33% {
    transform:
      translateY(calc(var(--jump-y) * -1))
      scale(var(--jump-stretch-x), var(--jump-stretch-y));
    animation-timing-function: cubic-bezier(0.727, -0.016, 0.58, 1);
  }

  63.33% {
    transform: translateY(0) scale(var(--jump-squash-x), var(--jump-squash-y));
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: translateY(0) scale(0.895, 1.067);
    animation-timing-function: cubic-bezier(0.393, 0, 0.55, 1);
  }

  85% {
    transform: translateY(0) scale(1.024, 0.945);
    animation-timing-function: cubic-bezier(0.494, 0.293, 0.58, 1);
  }

  95%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-jump {
    animation: none !important;
  }
}

/* Animation master - kinetic-center-build */

/*
  Usage:
    <div class="t-text-animation t-kinetic-center-build is-previewing">
      <span class="t-text-row"><span class="t-text-whole">China Ad</span></span>
      <span class="t-text-row"><span class="t-text-whole">Product Design</span></span>
    </div>

  Add `.t-kinetic-center-build` and `.is-previewing` to run this text animation.
*/

:root {
  --text-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --text-motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --text-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.t-text-animation {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: inherit;
  align-content: inherit;
  gap: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char,
.t-text-animation .t-word,
.t-text-animation .t-line,
.t-text-animation .t-text-row,
.t-text-animation .t-text-whole {
  display: inline-block;
  opacity: 1;
  transform-origin: center;
  will-change: transform, opacity, filter, clip-path, background-position;
}

.t-text-animation .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-line {
  flex-basis: 100%;
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-text-whole {
  max-width: 100%;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.t-text-animation .t-char-space {
  width: 0.32em;
}

.t-text-animation .t-text-word-group {
  display: inline-block;
  white-space: nowrap;
}

/* Optional preview wrapper for Animation master demo pages. */
.text-preview {
  width: 272px;
  max-width: calc(100% - 24px);
  min-height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0 6px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: inherit;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.09;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-line {
  flex-basis: 100%;
  max-width: 100%;
  line-height: 1.09;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-row {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  line-height: inherit;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-text-whole {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.text-preview .t-char-space {
  width: 0.32em;
}

.text-preview:not(.is-previewing) .t-char,
.text-preview:not(.is-previewing) .t-word,
.text-preview:not(.is-previewing) .t-line,
.text-preview:not(.is-previewing) .t-text-whole {
  animation: none;
}

.t-kinetic-center-build.is-previewing .t-word {
  animation: t-kinetic-center-build 780ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 220ms);
}

@keyframes t-kinetic-center-build {
  from {
    opacity: 0;
    transform: translateX(88px) translateY(6px) scale(0.992);
    filter: blur(3.5px);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-kinetic-center-build,
  .t-kinetic-center-build * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}