/* Inline wrapper to keep size consistent with surrounding text */
.np-flip-inline {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1.2;
}

/* Flip container: width/height are auto, taken from the hidden sizer */
.np-flip-card {
  position: relative;
  display: inline-block;
  perspective: 900px;
  font: inherit;
  line-height: 1.2;
font-family: 'Lato', Arial, sans-serif;

}

/* Hidden sizer reserves space using the longest phrase */
.np-flip-card::before {
  content: attr(data-sizer);
  display: inline-block;
  padding: 0.05em 0.25em;         /* match face padding */
  background: transparent;        /* invisible, only for sizing */
  border-radius: 0.2em;
  white-space: nowrap;            /* single-line width */
  visibility: hidden;
}

/* Faces sit exactly on top of the reserved box */
.np-flip-face {
  position: absolute;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.25em;
  box-sizing: border-box;

  background: #ff471d;
  border-radius: 0.2em;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Initial rotation states */
.np-flip-front { transform: rotateY(0deg); }
.np-flip-back  { transform: rotateY(180deg); }

/* Auto-flip animation every 3 seconds (6s full cycle) */
.np-auto .np-flip-front { animation: flipFront 6s infinite; }
.np-auto .np-flip-back  { animation: flipBack 6s infinite; }

@keyframes flipFront {
  0%, 45%   { transform: rotateY(0deg); }
  55%, 100% { transform: rotateY(180deg); }
}
@keyframes flipBack {
  0%, 45%   { transform: rotateY(180deg); }
  55%, 100% { transform: rotateY(360deg); }
}

/* Optional: slightly shrink long back text on very small screens */
@media (max-width: 420px) {
  .np-flip-card { font-size: 0.95em; }
}