/* Achievement unlock: a banner slides in, then the card flips in with the rarity glow.
   Only transform and opacity are animated (60 fps on mid-range phones). */

.unlock {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rarity) 22%, transparent), transparent 60%),
    var(--c-scrim);
  animation: unlock-fade 250ms ease-out both;
  perspective: 900px;
}

.unlock--leaving {
  animation: unlock-out 220ms ease-in forwards;
}

.unlock__banner {
  position: absolute;
  top: calc(var(--sp-4) + var(--safe-top));
  left: 50%;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  width: min(calc(100% - 2 * var(--sp-4)), 420px);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rarity);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--c-surface-2);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: unlock-banner 450ms var(--ease-spring) both;
}

.unlock__banner img {
  width: 40px;
  height: 40px;
}

.unlock__kicker {
  color: var(--rarity);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unlock__banner-title {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

.unlock__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 360px);
}

.unlock__card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--rarity) 70%, transparent);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 14%, var(--c-surface)), var(--c-surface));
  box-shadow:
    0 0 60px color-mix(in srgb, var(--rarity) 35%, transparent),
    var(--shadow);
  text-align: center;
  transform-style: preserve-3d;
  animation: unlock-card 750ms var(--ease-spring) 300ms both;
}

.unlock__icon {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
}

.unlock__icon::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 55%, transparent), transparent 70%);
  animation: unlock-glow 2400ms ease-in-out 900ms infinite;
}

.unlock__icon img {
  position: relative;
  width: 100%;
  height: 100%;
}

.unlock__title {
  font-size: var(--fs-xl);
}

.unlock__desc {
  color: var(--c-muted);
}

.unlock__share {
  color: var(--c-faint);
  font-size: var(--fs-sm);
}

.unlock__reward {
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgb(232 176 74 / 12%);
  color: var(--c-gold);
  font-size: var(--fs-sm);
}

/* Epic and legendary: rotating rays and a burst of particles. */
.unlock__rays {
  position: absolute;
  z-index: 1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--rarity) 28%, transparent) 0deg 8deg,
    transparent 8deg 24deg
  );
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation:
    unlock-fade 600ms ease-out 400ms both,
    unlock-spin 18s linear infinite;
}

.unlock__particles {
  position: absolute;
  z-index: 3;
  top: 38%;
  left: 50%;
  pointer-events: none;
}

.unlock__p {
  position: absolute;
  width: var(--s, 8px);
  height: var(--s, 8px);
  border-radius: 50%;
  background: var(--rarity);
  box-shadow: 0 0 8px var(--rarity);
  opacity: 0;
  animation: unlock-particle var(--d, 1200ms) var(--ease-out) var(--delay, 650ms) forwards;
}

.unlock__p--spark {
  border-radius: 1px;
  background: #fff;
}

@keyframes unlock-fade {
  from {
    opacity: 0;
  }
}

@keyframes unlock-out {
  to {
    opacity: 0;
  }
}

@keyframes unlock-banner {
  from {
    opacity: 0;
    transform: translate(-50%, -120%);
  }
}

@keyframes unlock-card {
  from {
    opacity: 0;
    transform: scale(0.4) rotateY(-100deg);
  }
  60% {
    opacity: 1;
  }
}

@keyframes unlock-glow {
  50% {
    opacity: 0.45;
    transform: scale(1.12);
  }
}

@keyframes unlock-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes unlock-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}

/* Reduced motion: no flips, rays or particles — a calm fade instead. */
@media (prefers-reduced-motion: reduce) {
  .unlock__rays,
  .unlock__particles {
    display: none;
  }

  .unlock__card,
  .unlock__banner {
    animation: unlock-fade 300ms ease-out both !important;
  }

  .unlock__banner {
    transform: translateX(-50%);
  }

  .unlock__icon::before {
    animation: none !important;
  }
}