/**
 * Friends Alpha 0.3 — creative design pass: mesh gradients, cursor glow,
 * button micro-interactions, glass refresh, lobby stagger.
 */

.showcase-shell {
  --cursor-x: 50%;
  --cursor-y: 40%;
}

/* ── Animated mesh gradient layer ── */
.site-atmosphere__mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 25%, rgba(168, 85, 247, 0.12), transparent 58%),
    radial-gradient(ellipse 45% 50% at 55% 75%, rgba(251, 191, 36, 0.08), transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 80%, rgba(52, 211, 153, 0.07), transparent 52%);
  filter: blur(40px);
  animation: alpha03-mesh-drift 28s ease-in-out infinite;
  opacity: 0.85;
}

.site-atmosphere__cursor-glow {
  position: absolute;
  width: min(50vw, 520px);
  height: min(50vw, 520px);
  left: var(--cursor-x);
  top: var(--cursor-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(168, 85, 247, 0.06) 40%, transparent 70%);
  filter: blur(48px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@keyframes alpha03-mesh-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(2%, -1.5%, 0) scale(1.03);
  }
  66% {
    transform: translate3d(-1.5%, 2%, 0) scale(0.98);
  }
}

/* ── Glass morphism refresh ── */
.showcase-sidebar,
.showcase-topbar,
.game-lobby-hero,
.game-lobby-card,
.cat-room-panel,
.slot-hud-panel,
.showcase-balance-chip {
  backdrop-filter: blur(22px) saturate(1.35);
}

.game-lobby-card {
  background: linear-gradient(
    155deg,
    rgba(14, 18, 36, 0.78) 0%,
    rgba(8, 10, 22, 0.88) 55%,
    rgba(6, 8, 18, 0.92) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 36px rgba(0, 0, 0, 0.32);
}

/* ── Lobby stagger fade-in ── */
.lobby-stagger-in .game-lobby-hero {
  animation: alpha03-fade-up 0.55s ease both;
}

.lobby-stagger-in .game-lobby-tabs {
  animation: alpha03-fade-up 0.55s ease 0.08s both;
}

.lobby-stagger-in .game-lobby-grid > * {
  animation: alpha03-fade-up 0.5s ease both;
}

.lobby-stagger-in .game-lobby-grid > *:nth-child(1) { animation-delay: 0.12s; }
.lobby-stagger-in .game-lobby-grid > *:nth-child(2) { animation-delay: 0.18s; }
.lobby-stagger-in .game-lobby-grid > *:nth-child(3) { animation-delay: 0.24s; }
.lobby-stagger-in .game-lobby-grid > *:nth-child(4) { animation-delay: 0.3s; }
.lobby-stagger-in .game-lobby-grid > *:nth-child(5) { animation-delay: 0.36s; }
.lobby-stagger-in .game-lobby-grid > *:nth-child(6) { animation-delay: 0.42s; }

@keyframes alpha03-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Primary button micro-interactions ── */
.slot-hud-spin,
.beta-ui-btn--daily,
.beta-ui-btn--race,
.game-lobby-card-cta,
[data-player-spin] {
  position: relative;
  overflow: hidden;
}

.slot-hud-spin::after,
.beta-ui-btn--daily::after,
[data-player-spin]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.35), transparent 55%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

.slot-hud-spin.ripple-active::after,
.beta-ui-btn--daily.ripple-active::after,
[data-player-spin].ripple-active::after {
  animation: alpha03-ripple 0.55s ease-out;
}

@keyframes alpha03-ripple {
  0% {
    opacity: 0.55;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

.slot-hud-spin:not(:disabled):hover,
[data-player-spin]:not(:disabled):hover {
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.35),
    0 0 28px rgba(56, 189, 248, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.35);
  animation: alpha03-neon-pulse 2.2s ease-in-out infinite;
}

@keyframes alpha03-neon-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}

/* ── Companion speech bubble frame polish ── */
.cat-room-bubble--speech {
  min-width: 96px;
  max-width: 210px;
  padding: 0.45rem 0.65rem 0.5rem;
  white-space: normal;
  line-height: 1.35;
  top: -4.75rem;
  background-image: none !important;
  background: rgba(15, 23, 42, 0.97) !important;
  border: 2px solid rgba(251, 191, 36, 0.55) !important;
  border-radius: 14px !important;
  color: #fef9c3 !important;
  text-shadow: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  filter: none;
}

.cat-room-bubble--speech.companion-mood--hype,
.cat-room-bubble--speech.companion-mood--salty {
  color: #fef9c3 !important;
  animation: alpha03-bubble-pop 0.35s ease;
}

@keyframes alpha03-bubble-pop {
  0% {
    transform: translateX(-50%) scale(0.85);
  }
  70% {
    transform: translateX(-50%) scale(1.06);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-atmosphere__mesh,
  .site-atmosphere__cursor-glow,
  .lobby-stagger-in .game-lobby-hero,
  .lobby-stagger-in .game-lobby-tabs,
  .lobby-stagger-in .game-lobby-grid > *,
  .slot-hud-spin:not(:disabled):hover,
  [data-player-spin]:not(:disabled):hover {
    animation: none !important;
    transition: none !important;
  }

  .site-atmosphere__cursor-glow {
    display: none;
  }
}