/* THE GOOD FINDS – three.js-lager (testmiljö) */
html{background:var(--cream)}
body{background:transparent}
#space{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
main#app,footer{position:relative;z-index:1}
.hero{background:rgba(242,223,228,.45);backdrop-filter:blur(1.5px)}
.band{background:rgba(30,26,26,.86);backdrop-filter:blur(2px)}

/* 3D-lutning och glöd på kort */
.grid{perspective:1100px}
.card,.cover,.pick{transform-style:preserve-3d;will-change:transform;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.card.is-tilt,.pick.is-tilt{transition:transform .08s linear,box-shadow .3s;box-shadow:0 26px 50px -24px rgba(124,30,48,.45),0 0 0 1px rgba(233,203,212,.9)}
.card .ph img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card.is-tilt .ph img{transform:translateZ(40px) scale(1.06)}
.card.is-tilt .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light}

/* Mjuk inglidning när man scrollar */
.rv{opacity:0;transform:translateY(28px) scale(.98)}
.rv.in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .card.is-tilt,.pick.is-tilt{transform:none!important}
}