/* ============================================================
   Helper utilities used by the blockchain service page
   components. The other helpers they rely on (.glass,
   .text-gradient, .shadow-glow, bg-surface, animate-pulse-glow)
   already exist in index.css / tailwind.config; only these two
   were missing.
   ============================================================ */

/* Subtle technical grid backdrop */
.grid-bg {
    background-image:
        linear-gradient(to right, hsl(var(--foreground) / 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(var(--foreground) / 0.06) 1px, transparent 1px);
    background-size: 42px 42px;
}

/* Card surface gradient used by the "Challenges" pain cards */
.bg-card-gradient {
    background-image: linear-gradient(135deg,
        hsl(var(--secondary)) 0%,
        hsl(var(--background)) 100%);
}

/* Hero image entrance (was a framer-motion fade/scale; CSS keeps the exact
   same look but doesn't depend on JS hydration, so the LCP image paints early). */
@keyframes bc-hero-in {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}
.bc-hero-img {
    animation: bc-hero-in 1.2s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .bc-hero-img { animation: none; }
}