@property --_l{syntax: "<length>"; initial-value: 0px; inherits: true;}@property --_r{syntax: "<length>"; initial-value: 0px; inherits: true;}.adc-card{--adc-depth: 14px;--adc-edge: #0c0c0c;--_d: calc(100% - var(--adc-depth));--_l: 0px;--_r: 0px;--_mx: .3;--_my: .25;position:relative;overflow:visible;outline:var(--adc-depth) solid var(--adc-edge);outline-offset:calc(-1 * var(--adc-depth));clip-path:polygon(calc(var(--adc-depth) - var(--_l)) var(--_d),calc(var(--adc-depth) - var(--_l)) var(--adc-depth),var(--adc-depth) var(--adc-depth),var(--_d) var(--adc-depth),calc(var(--_d) + var(--_r)) var(--adc-depth),calc(var(--_d) + var(--_r)) var(--_d),var(--_d) var(--_d),var(--adc-depth) var(--_d))}:where(.adc-card){transition:--_l .25s ease,--_r .25s ease}.adc-card:hover{--_l: var(--adc-depth);--_r: var(--adc-depth)}.adc-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 55% 65% at calc(var(--_mx) * 100%) calc(var(--_my) * 100%),rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 18%,rgba(255,255,255,.2) 42%,rgba(255,255,255,.06) 62%,transparent 78%),radial-gradient(ellipse 100% 50% at calc(var(--_mx) * 100%) calc(var(--_my) * 100%),rgba(255,255,255,.18) 0%,transparent 70%),linear-gradient(to right,transparent calc(var(--adc-depth) - 1px),rgba(255,255,255,.72) calc(var(--adc-depth) - 1px),rgba(255,255,255,.72) calc(var(--adc-depth) + 1px),transparent calc(var(--adc-depth) + 1px)),linear-gradient(to left,transparent calc(var(--adc-depth) - 1px),rgba(255,255,255,.55) calc(var(--adc-depth) - 1px),rgba(255,255,255,.55) calc(var(--adc-depth) + 1px),transparent calc(var(--adc-depth) + 1px)),linear-gradient(to right,rgba(0,0,0,.92) 0px,rgba(0,0,0,.92) calc(var(--adc-depth) - 1px),transparent calc(var(--adc-depth) + 1px)),linear-gradient(to left,rgba(0,0,0,.92) 0px,rgba(0,0,0,.92) calc(var(--adc-depth) - 1px),transparent calc(var(--adc-depth) + 1px)),linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 40%,transparent 60%,rgba(0,0,0,.14) 100%);mix-blend-mode:overlay;opacity:.28;transition:opacity .5s ease}.adc-card:hover:before{opacity:1}@supports not (-webkit-mask: paint(p)){:where(.adc-card){transition:none}.adc-card:hover{--_l: var(--adc-depth);--_r: 0px}}
/*# sourceMappingURL=/cdn/shop/t/49/assets/acrylic-depth-card.css.map */