/* ── AnimatedTextCycle — vanilla CSS port of the framer-motion component ────── */

/* Inline container that animates its width like framer-motion's spring */
.atc-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  overflow: visible;          /* labels can overflow while animating */
  white-space: nowrap;

  /* Spring-like width transition (matches stiffness:150 damping:15 mass:1.2) */
  transition: width 0.45s cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* The visible cycling word */
.atc-word {
  display: inline-block;
  font-weight: 700;
  white-space: nowrap;
  color: #C8A96A;         /* primary-container gold — brand accent */
  font-family: 'Cinzel', serif;
  position: relative;
}

/* ── Enter animation (y: -20→0, blur: 8→0, opacity: 0→1) ──────────────────── */
.atc-word--enter {
  animation: atc-in 0.4s ease-out forwards;
}

@keyframes atc-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* ── Exit animation (y: 0→20, blur: 0→8, opacity: 1→0) ───────────────────── */
.atc-word--exit {
  animation: atc-out 0.3s ease-in forwards;
}

@keyframes atc-out {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
  }
}

/* ── Hidden measurement element (mirrors React's measureRef) ─────────────── */
.atc-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  top: 0;
  left: 0;
}