/*!
 * WellMade Components — v1.0
 * Text rotator (fade / slide / typing) + pause on hover
 * Note: .wma-breath and .wma-float keyframes are injected inline
 * (duration and values driven by plugin settings).
 */

/* ============================================================
   ROTATOR — shared base
   ============================================================ */
.wma-rotate {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}

/* The actual text items inside the rotator.
   JS swaps one active item at a time; CSS handles animation. */
.wma-rotate .wma-rotate-item {
  display: inline-block;
  transition:
    opacity .6s cubic-bezier(0.16,1,0.3,1),
    transform .6s cubic-bezier(0.16,1,0.3,1),
    filter .6s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   STYLE: FADE (with subtle blur — elegant, matches live site)
   ============================================================ */
.wma-rotate-fade .wma-rotate-item {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
}
.wma-rotate-fade .wma-rotate-item.wma-rotate-item-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ============================================================
   STYLE: SLIDE (up/down in a clipped window)
   ============================================================ */
.wma-rotate-slide {
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: top;
}
.wma-rotate-slide .wma-rotate-item {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity .5s cubic-bezier(0.16,1,0.3,1),
    transform .6s cubic-bezier(0.77,0,0.175,1);
}
.wma-rotate-slide .wma-rotate-item.wma-rotate-item-active {
  opacity: 1;
  transform: translateY(0);
}
.wma-rotate-slide .wma-rotate-item.wma-rotate-item-leaving {
  opacity: 0;
  transform: translateY(-100%);
}

/* ============================================================
   STYLE: TYPING (character-by-character — handled by JS)
   ============================================================ */
.wma-rotate-typing .wma-rotate-item {
  opacity: 1;
  transform: none;
  filter: none;
}
.wma-rotate-typing .wma-rotate-cursor {
  display: inline-block;
  margin-left: 2px;
  width: 1px;
  background: currentColor;
  animation: wma-rotate-blink 1s steps(2) infinite;
}
.wma-rotate-typing .wma-rotate-cursor::before {
  content: "\00a0"; /* non-breaking space to give height */
}
@keyframes wma-rotate-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Pause on hover (applied only if data-pause="yes" — JS detects) */
.wma-rotate-pauseable.wma-rotate-paused .wma-rotate-item,
.wma-rotate-pauseable.wma-rotate-paused .wma-rotate-cursor {
  animation-play-state: paused;
}