/* Custom utility classes — Tailwind is injected by @astrojs/tailwind */

.candy-gloss {
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
}

.glossy-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(193, 119, 84, 0.1);
}

.dark .glossy-card {
  background: rgba(40, 50, 65, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.grid-bg {
  background-image: 
    linear-gradient(rgba(193, 119, 84, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 119, 84, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Base resets & scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--tw-colors-slate-100);
}
.dark ::-webkit-scrollbar-track {
  background: var(--tw-colors-slate-900);
}
::-webkit-scrollbar-thumb {
  background: var(--tw-colors-primary);
  border-radius: 4px;
}

/* Animations */
@keyframes explode {
  0% { transform: scale(1) translate(0,0); opacity: 1; }
  100% { transform: scale(1.1) translate(var(--x), var(--y)); opacity: 0; }
}

.hover-explode:hover .piece {
  animation: explode 0.5s forwards ease-out;
}