/* glossy.css - animated shine */
.glossy{width:100%;position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#fff,#fff6fb);box-shadow:0 6px 24px rgba(233,30,99,0.12);transition:transform .18s,box-shadow .18s}
.glossy:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(233,30,99,0.18)}
.glossy::after{content:'';position:absolute;top:-120%;left:-60%;width:50%;height:260%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);transform:rotate(25deg);transition:all .9s cubic-bezier(.2,.9,.3,1)}
.glossy:hover::after{left:150%;top:-20%}
.btn-glossy{position:relative;overflow:hidden}
.btn-glossy .ripple{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.18);transform:scale(0);animation:ripple 0.6s linear;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%) scale(1)}
@keyframes ripple{from{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}