/* Lifecycle star badges (Early Access / Early Bird / Beta)
   Extracted from product.html.twig so it can be reused across pages (e.g. products overview cards).
*/

/* Floating lifecycle badge (used on product pages) */
.floating-badge {
  position: absolute;
  top: 15%;
  right: 5%;
  z-index: 10;
  transform-style: preserve-3d;
  will-change: transform;
  animation: float-gentle 4s ease-in-out infinite;
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.badge-star {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;

  /* Use existing theme primitives (defined on product pages). */
  background: var(--card, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  color: var(--text, #e6eef7);

  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.badge-star:hover { transform: translateY(-1px); }

.badge-star .badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card, rgba(255,255,255,0.06)) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,0.16)) 70%, transparent);
}

.badge-star .star-icon {
  width: 16px;
  height: 16px;
  color: var(--muted, rgba(230, 238, 247, 0.75));
}

.badge-star.early-access {
  border-color: color-mix(in srgb, var(--accent, rgba(55, 161, 255, 0.8)) 70%, var(--border, rgba(255,255,255,0.16)));
}

.badge-star.early-access .star-icon {
  color: var(--accent, rgba(55, 161, 255, 0.95));
}

/* Subtle highlight sweep */
.badge-star::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent, rgba(55,161,255,0.6)) 18%, transparent),
    transparent
  );
  opacity: 0.0;
}

.badge-star:hover::after {
  opacity: 0.7;
  animation: badge-sweep 1.1s ease-out 1;
}

@keyframes badge-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Gentle motion for the hero floating badge only */
.floating-badge .badge-star .star-icon {
  transform-origin: 50% 55%;
  animation: badge-star-wiggle 3.8s ease-in-out infinite;
}

@keyframes badge-star-wiggle {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.03); }
}

.badge-star.early-bird {
  border-color: var(--accent2, rgba(139, 207, 63, 0.8));
}

.badge-star.early-bird .star-icon {
  color: var(--accent2, rgba(139, 207, 63, 0.95));
}

.badge-star.beta {
  border-color: var(--muted, rgba(230, 238, 247, 0.35));
}

.badge-text {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-star.badge-star--compact {
  padding: 0.32rem 0.55rem;
}

.badge-star.badge-star--compact .badge-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.badge-star.badge-star--compact .badge-text {
  font-size: 0.72rem;
}

.badge-star.badge-link {
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 768px) {
  .floating-badge {
    top: 10%;
    right: 3%;
    transform: scale(0.8);
  }
}