/* Base Masking Logic */
[class*="ms-mask-"]:not(.ms-mask-none) {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover Effects for Interactivity */
[class*="ms-mask-"]:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

/* Coffee Cup Mask (Silhouette + Steam) */
.ms-mask-coffee-cup {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,40 Q20,30 50,30 Q80,30 80,40 L75,80 Q75,90 50,90 Q25,90 25,80 Z M80,45 Q90,45 90,55 Q90,65 80,65'/%3E%3Cpath d='M40,25 Q45,15 40,5 M60,25 Q65,15 60,5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
}

/* Hexagon Mask */
.ms-mask-hexagon {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,1 95,25 95,75 50,99 5,75 5,25'/%3E%3C/svg%3E");
}

/* Paint Swipe Mask */
.ms-mask-paint-swipe {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M5,40 Q20,10 50,30 Q80,50 95,20 L90,80 Q60,60 30,90 Z'/%3E%3C/svg%3E");
}