/* static/css/components/protected-image.css */
/* CSS-защита изображений от выделения и перетаскивания. */
/* Плавная загрузка через fade-in и shimmer-placeholder. */

.protected-image {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    /* Плавное появление при загрузке */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.protected-image.is-loaded {
    opacity: 1;
}

/* Shimmer-анимация на контейнерах пока изображение загружается */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.service-logo:has(.is-loading),
.service-logo-section:has(.is-loading),
.logo-container:has(.is-loading),
.site-logo:has(.is-loading),
.screenshot-section:has(.is-loading) {
    background: linear-gradient(90deg, #dde6ef 25%, #eef3f8 50%, #dde6ef 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: shimmer 1.4s ease-in-out infinite;
}

.protected-image::selection,
.protected-image::-moz-selection {
    background: transparent;
}

.protected-image,
.service-logo,
.logo-container {
    -webkit-user-drag: none;
    user-drag: none;
}