/*
 * Styles for the Goallord Image Badge widget.
 *
 * This stylesheet defines the layout and behavior of the image wrapper and
 * the badge element. It uses CSS custom properties to manage offsets,
 * scaling and rotation so that hover animations do not interfere with the
 * positioning logic. Animations are triggered by classes on the root
 * container (e.g., gl-ib--anim-pulse, gl-ib--anim-rotate).
 */

.gl-ib {
  width: 100%;
}

/* Container for the image and badge */
.gl-ib__image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* The image itself */
.gl-ib__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Base styling for the badge */
/*
 * Badge base styling
 *
 * The badge uses CSS variables to control translation, rotation, scaling and subtle additional movement.
 * Additional offset variables (--gl-ib-offset-x-add, --gl-ib-offset-y-add) are animated for a subtle “alive” motion.
 */
.gl-ib__badge {
  /* Main offset values injected via inline style */
  --gl-ib-offset-x: 0px;
  --gl-ib-offset-y: 0px;
  /* Additional offsets for alive animation */
  --gl-ib-offset-x-add: 0px;
  --gl-ib-offset-y-add: 0px;
  /* Scale and rotation variables */
  --gl-ib-scale: 1;
  --gl-ib-rotate: 0deg;

  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Ensure a minimum size for readability */
  min-width: 48px;
  min-height: 48px;

  /* Circle appearance */
  border-radius: 9999px;
  padding: 0;
  box-sizing: border-box;

  /* Let corner classes control translation; transition still applies to transforms */
  transition: transform 0.3s ease;

  /* Disable pointer events to keep the badge decorative by default. Remove if clickable badge is needed. */
  pointer-events: none;
  user-select: none;

  /* Animations are controlled via inline style based on user settings. */
}

/* Ensure images inside the badge fill the circle */
.gl-ib__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Badge content wrapper for text mode */
.gl-ib__badge-content {
  width: 100%;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* Animations are controlled via inline style based on user settings. */
}

/* Badge heading styling */
.gl-ib__badge-heading {
  margin: 0;
  line-height: 1.2;
}

/* Badge description styling */
.gl-ib__badge-description {
  margin: 0;
  line-height: 1.1;
  font-size: 0.85em;
}

/* Frosted glass effect on hover for text badges */
.gl-ib__badge--text:hover {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------- */
/* Animations */
/*
 * Badge entrance animation: zooms and spins into place while scaling from 0 to 1
 * and rotates 360 degrees. It also animates opacity. After completion, it
 * remains at its final state thanks to the forwards fill mode.
 */
@keyframes gl-ib-badge-entrance {
  0% {
    --gl-ib-scale: 0;
    --gl-ib-rotate: 0deg;
    opacity: 0;
  }
  50% {
    --gl-ib-scale: 1.2;
    opacity: 0.5;
  }
  100% {
    --gl-ib-scale: 1;
    --gl-ib-rotate: 360deg;
    opacity: 1;
  }
}

/* Alive animation: introduces a subtle oscillating movement by animating
 * auxiliary offset variables. These offsets are added to the primary offsets
 * during translation. The motion is looped infinitely and alternates direction.
 */
@keyframes gl-ib-badge-alive {
  0%, 100% {
    --gl-ib-offset-x-add: 0px;
    --gl-ib-offset-y-add: 0px;
  }
  25% {
    --gl-ib-offset-x-add: 2px;
    --gl-ib-offset-y-add: -2px;
  }
  50% {
    --gl-ib-offset-x-add: -2px;
    --gl-ib-offset-y-add: 2px;
  }
  75% {
    --gl-ib-offset-x-add: 1px;
    --gl-ib-offset-y-add: -1px;
  }
}

/* Text entrance animation: fades and slides up the badge content. */
@keyframes gl-ib-text-entrance {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Position utilities: adjust translation to align badge to corners and include animated offsets */
.gl-ib__badge--top-left {
  top: 0;
  left: 0;
  transform: translate(
      calc(-50% + var(--gl-ib-offset-x) + var(--gl-ib-offset-x-add)),
      calc(-50% + var(--gl-ib-offset-y) + var(--gl-ib-offset-y-add))
    ) rotate(var(--gl-ib-rotate)) scale(var(--gl-ib-scale));
}

.gl-ib__badge--top-right {
  top: 0;
  right: 0;
  transform: translate(
      calc(50% + var(--gl-ib-offset-x) + var(--gl-ib-offset-x-add)),
      calc(-50% + var(--gl-ib-offset-y) + var(--gl-ib-offset-y-add))
    ) rotate(var(--gl-ib-rotate)) scale(var(--gl-ib-scale));
}

.gl-ib__badge--bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(
      calc(-50% + var(--gl-ib-offset-x) + var(--gl-ib-offset-x-add)),
      calc(50% + var(--gl-ib-offset-y) + var(--gl-ib-offset-y-add))
    ) rotate(var(--gl-ib-rotate)) scale(var(--gl-ib-scale));
}

.gl-ib__badge--bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(
      calc(50% + var(--gl-ib-offset-x) + var(--gl-ib-offset-x-add)),
      calc(50% + var(--gl-ib-offset-y) + var(--gl-ib-offset-y-add))
    ) rotate(var(--gl-ib-rotate)) scale(var(--gl-ib-scale));
}

/* Hover animation: Pulse (slight scale up) */
.gl-ib--anim-pulse:hover .gl-ib__badge {
  --gl-ib-scale: 1.1;
}

/* Hover animation: Rotate a full circle */
.gl-ib--anim-rotate:hover .gl-ib__badge {
  --gl-ib-rotate: 360deg;
}