/* --- Asset Carousel --- */
#carousel-viewport {
    perspective: 1200px;
    overflow: hidden !important;
}
#coin-list {
    position: relative;
    transform-style: preserve-3d;
}
#coin-list.is-dragging .asset-card {
    transition: none !important;
}
.asset-card {
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 176px;
    background: rgba(1, 4, 9, 0.8);
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 1rem;
    cursor: pointer;
    transform: scale(0.85);
    opacity: 0.5;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                background 0.4s ease,
                border-color 0.4s ease;
    will-change: transform, opacity;
}
@media (min-width: 640px) {
    .asset-card {
        width: 208px;
        height: 260px;
    }
}
#coin-list.is-loading .asset-card {
    opacity: 0 !important;
    transform: translateY(60px) scale(0.7) !important;
}
.asset-card.is-active {
    transform: scale(1);
    opacity: 1;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 25px var(--accent-glow);
    background: radial-gradient(circle at center, rgba(0, 229, 255, 0.15) 0%, transparent 70%), rgba(1, 4, 9, 0.9);
}
.asset-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="bp" patternUnits="userSpaceOnUse" width="20" height="20"><path d="M0 0 L0 20 M0 0 L20 0" stroke="%2300E5FF" stroke-width="0.5" opacity="0.3"/></pattern><pattern id="bp-dots" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="25" cy="25" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="75" cy="25" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="25" cy="75" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%2300E5FF" opacity="0.3"/></pattern></defs><rect width="100%" height="100%" fill="url(%23bp)"/><rect width="100%" height="100%" fill="url(%23bp-dots)"/></svg>');
    background-position: center;
    opacity: 0.1;
    transition: opacity 0.6s ease;
}
.asset-card.is-active::before {
    opacity: 0.25;
    animation: standard-bg-grid-pan 30s linear infinite;
}
.asset-card::after {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
}
.asset-card.is-active::after {
    animation: sonar-pulse 2.5s ease-out infinite;
    animation-delay: 0.5s;
}
.carousel-arrow { flex-shrink: 0; z-index: 20; background-color: rgba(1, 4, 9, 0.9); border: 2px solid rgba(0, 229, 255, 0.3); border-radius: 9999px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-out; }