/**
 * Brag Animation – time-based fade + directional offset when element enters viewport.
 * Progress 0 = offset + transparent; progress 1 = final position + opaque.
 * --brag-progress is set by JS (front-end on enter viewport; editor preview on setting change).
 * --brag-distance defaults to 40px; set via inline style or editor.
 */
.brag-animation {
  opacity: var(--brag-progress, 0);
}

/*
 * Distance: always use var(--brag-distance, 40px) so one unit is applied.
 * Formula: offset = distance * (1 - progress) for "from" direction; progress 0 = full offset, 1 = no offset.
 */
/* Bottom: start distance down */
.brag-animation--bottom {
  opacity: var(--brag-progress, 0);
  transform: translateY(calc(var(--brag-distance, 40px) * (1 - var(--brag-progress, 0))));
}

/* Top: start distance up */
.brag-animation--top {
  opacity: var(--brag-progress, 0);
  transform: translateY(calc(var(--brag-distance, 40px) * (var(--brag-progress, 0) - 1)));
}

/* Left: start distance left */
.brag-animation--left {
  opacity: var(--brag-progress, 0);
  transform: translateX(calc(var(--brag-distance, 40px) * (var(--brag-progress, 0) - 1)));
}

/* Right: start distance right */
.brag-animation--right {
  opacity: var(--brag-progress, 0);
  transform: translateX(calc(var(--brag-distance, 40px) * (1 - var(--brag-progress, 0))));
}

/* Top-right: from top-right */
.brag-animation--top-right {
  opacity: var(--brag-progress, 0);
  transform: translate(
    calc(var(--brag-distance, 40px) * (1 - var(--brag-progress, 0))),
    calc(var(--brag-distance, 40px) * (var(--brag-progress, 0) - 1))
  );
}

/* Bottom-right: from bottom-right */
.brag-animation--bottom-right {
  opacity: var(--brag-progress, 0);
  transform: translate(
    calc(var(--brag-distance, 40px) * (1 - var(--brag-progress, 0))),
    calc(var(--brag-distance, 40px) * (1 - var(--brag-progress, 0)))
  );
}

/* Bottom-left: from bottom-left */
.brag-animation--bottom-left {
  opacity: var(--brag-progress, 0);
  transform: translate(
    calc(var(--brag-distance, 40px) * (var(--brag-progress, 0) - 1)),
    calc(var(--brag-distance, 40px) * (1 - var(--brag-progress, 0)))
  );
}

/* Top-left: from top-left */
.brag-animation--top-left {
  opacity: var(--brag-progress, 0);
  transform: translate(
    calc(var(--brag-distance, 40px) * (var(--brag-progress, 0) - 1)),
    calc(var(--brag-distance, 40px) * (var(--brag-progress, 0) - 1))
  );
}