.resin-card{isolation:isolate;border-radius:calc(var(--radius) + 12px);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(14px)saturate(1.25);background:radial-gradient(120% 90% at 50% -20%,oklch(100% 0 0/.14) 0%,oklch(100% 0 0/.04) 38%,#0000 70%),linear-gradient(165deg,oklch(42% .014 260/.34) 0%,oklch(22% .01 260/.28) 46%,oklch(12% .008 260/.4) 100%);padding:9px;transition:border-color .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:inset 0 1px oklch(100% 0 0/.28),inset 0 -1px oklch(100% 0 0/.07),inset 5px 0 16px -12px oklch(100% 0 0/.55),inset -5px 0 16px -12px oklch(100% 0 0/.55),inset 0 -18px 30px -20px oklch(0% 0 0/.6),0 26px 54px -34px oklch(0% 0 0/.75)}.resin-card:hover{border-color:var(--glass-edge-hover);transform:translateY(-2px);box-shadow:inset 0 1px oklch(100% 0 0/.36),inset 0 -1px oklch(100% 0 0/.09),inset 6px 0 26px -16px oklch(100% 0 0/.6),inset -6px 0 26px -16px oklch(100% 0 0/.6),inset 0 -26px 46px -26px oklch(0% 0 0/.55),0 34px 66px -34px oklch(0% 0 0/.8)}.resin-card__content{z-index:1;border-radius:calc(var(--radius) + 3px);background:oklch(8% .006 260/.35);height:100%;position:relative;overflow:hidden;box-shadow:inset 0 1px oklch(100% 0 0/.05),0 1px 10px -4px oklch(0% 0 0/.7)}.resin-card__glass,.resin-card:before{content:"";z-index:2;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;opacity:.9;background:radial-gradient(140% 100% at 50% 120%,oklch(0% 0 0/.34) 0%,#0000 55%),linear-gradient(100deg,oklch(100% 0 0/.1) 0%,#0000 18% 82%,oklch(100% 0 0/.08) 100%);position:absolute;inset:0}.resin-card__reflection,.resin-card:after{content:"";z-index:3;pointer-events:none;border-radius:inherit;opacity:.5;mix-blend-mode:screen;background:linear-gradient(118deg,#0000 0%,oklch(100% 0 0/.1) 34%,oklch(100% 0 0/.22) 44%,oklch(100% 0 0/.05) 52%,#0000 64%);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s;position:absolute;inset:0;transform:translate(-12%)}.resin-card:hover .resin-card__reflection,.resin-card:hover:after{opacity:.75;transform:translate(10%)}@media (prefers-reduced-motion:reduce){.resin-card,.resin-card__reflection,.resin-card:after{transition:none}}.resin-card:has(>.resin-card__glass):before{content:none}.resin-card:has(>.resin-card__reflection):after{content:none}
