.genre-card{position:relative;border-radius:1.2rem;overflow:hidden;background:rgb(var(--color-background));border:1px solid rgba(var(--color-foreground),.08);box-shadow:0 0 0 1px rgba(var(--color-shadow),.04),0 2px 8px rgba(var(--color-shadow),.06);transition:.3s cubic-bezier(.4, 0, .2, 1)}.genre-card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(var(--color-shadow),.08),0 8px 32px rgba(var(--color-shadow),.12),0 4px 16px rgba(var(--color-shadow),.08);border-color:rgba(var(--color-foreground),.12)}.genre-card-link{display:block;text-decoration:none;color:inherit;height:100%}.genre-image-container{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:1rem 1rem 0 0}.genre-image{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s}.genre-image-placeholder{width:100%;height:100%;background:linear-gradient(135deg,rgba(var(--color-button),.1) 0,rgba(var(--color-button),.05) 100%);display:flex;align-items:center;justify-content:center}.genre-card:hover .genre-image{transform:scale(1.1)}.genre-holographic-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(var(--color-button),0) 0,rgba(var(--color-button),.1) 25%,rgba(var(--color-button),.2) 50%,rgba(var(--color-button),.1) 75%,rgba(var(--color-button),0) 100%);opacity:0;transition:opacity .3s;pointer-events:none;background-size:200% 200%;background-position:-100% -100%}.genre-card:hover .genre-holographic-overlay{opacity:1;background-position:100% 100%;transition:opacity .3s,background-position .6s}.genre-count-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0,rgba(0,0,0,.4) 50%,transparent 100%);padding:1rem .6rem .6rem;backdrop-filter:blur(4px);transition:.3s}.genre-count-overlay .genre-count{font-size:1.2rem;color:#fff;margin:0;font-weight:400;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:color .3s}.genre-card:hover .genre-count-overlay .genre-count{color:rgba(var(--color-foreground),.9)}.genre-info{padding:1.5rem;text-align:center}.genre-title{font-size:1.6rem;font-weight:600;color:rgb(var(--color-foreground));margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em;transition:color .3s}.genre-card:hover .genre-title{color:rgb(var(--color-button))}@media (hover:hover){.genre-holographic-overlay::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(var(--color-button),.1) 50%,transparent 70%);transform:rotate(45deg);opacity:0;transition:opacity .3s,transform .6s}.genre-card:hover .genre-holographic-overlay::before{opacity:1;transform:rotate(45deg) translate(50%,50%)}}