@charset "utf-8";
/* CSS Document */

/* swipe-hint.css — подсказки-пальцы для свайпа (только мобильные/планшеты) */

@media (max-width: 1024px) {
    .painting-image-container {
        position: relative;
    }

    .swipe-hint {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        border-radius: 50%;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 15;
        opacity: 0;
        transition: opacity 0.8s ease-out;
    }

    .swipe-hint-left {
        left: 15px;
    }

    .swipe-hint-right {
        right: 15px;
    }

    .hand-icon {
        font-size: 32px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }

    .swipe-hint-left .hand-icon {
        animation: handSwipeLeft 1s infinite ease-in-out;
    }

    .swipe-hint-right .hand-icon {
        animation: handSwipeRight 1s infinite ease-in-out;
    }

    @keyframes handSwipeLeft {
        0%   { transform: translateX(0); opacity: 0.6; }
        50%  { transform: translateX(-8px); opacity: 1; }
        100% { transform: translateX(0); opacity: 0.6; }
    }

    @keyframes handSwipeRight {
        0%   { transform: translateX(0); opacity: 0.6; }
        50%  { transform: translateX(8px); opacity: 1; }
        100% { transform: translateX(0); opacity: 0.6; }
    }

    .swipe-hint.show {
        opacity: 1;
    }

    .swipe-hint.hide {
        opacity: 0;
        transition: opacity 0.6s ease-in;
    }
}

@media (min-width: 1025px) {
    .swipe-hint {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .swipe-hint {
        width: 44px;
        height: 44px;
    }
    .hand-icon {
        font-size: 26px;
    }
    .swipe-hint-left {
        left: 8px;
    }
    .swipe-hint-right {
        right: 8px;
    }
}