/* #assets/css/tutorial.css — Yummy Lunchbox/assets/css */

/* =========================================
   TUTORIAL HAND (РУКА-УКАЗАТЕЛЬ)
   ========================================= */

   #tutorial-hand {
    position: absolute;
    width: 60px;
    height: 60px;
    
    /* Убедитесь, что файл иконки существует по этому пути */
    background-image: url('../images/icons/hand.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    
    /* ИЗМЕНЕНИЕ: Ставим картинку в левый верхний угол, 
       так как именно там у нас теперь кончик пальца */
    background-position: left top;
    
    /* Рука не должна перехватывать клики, она только визуализирует */
    pointer-events: none; 
    
    /* Поверх всего интерфейса (кроме, возможно, лоадера) */
    z-index: 9000; 
    
    /* Точка трансформации - кончик пальца (верхний левый угол) */
    transform-origin: top left;
    
    /* Тень для лучшей видимости на пестром фоне */
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
    
    /* Скрыта по умолчанию */
    display: none; 
    opacity: 0;
    
    /* ИЗМЕНЕНИЕ: Увеличили время с 0.5s до 1.5s для плавного и медленного движения */
    transition: opacity 0.3s ease-out, left 1.5s cubic-bezier(0.25, 1, 0.5, 1), top 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Класс для показа руки */
#tutorial-hand.visible {
    display: block;
    opacity: 1;
}

/* =========================================
   ANIMATIONS
   ========================================= */

/* 1. Эффект нажатия (Tap) */
@keyframes handTap {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.8) rotate(-10deg); } /* Чуть уменьшаем и поворачиваем */
    100% { transform: scale(1) rotate(0deg); }
}

.hand-tap {
    animation: handTap 0.5s ease-in-out infinite;
}

/* 2. Эффект указания/ожидания (Float) */
@keyframes handFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.hand-point {
    animation: handFloat 1.5s ease-in-out infinite;
}

/* 3. Эффект перетаскивания (Hold) */
.hand-drag {
    transform: scale(0.9); /* Рука чуть сжата, пока тащит */
}

/* =========================================
   HINT HIGHLIGHTS (Подсветка элементов для туториала)
   ========================================= */

/* Класс, который мы можем вешать на DOM элементы (кнопки), чтобы подсветить их */
.tutorial-highlight {
    position: relative;
    z-index: 9001; /* Выше затемнения, если будем его делать */
    /* Пульсирующая обводка */
    box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.7);
    border-radius: inherit; /* Наследуем скругление элемента */
    pointer-events: auto !important; /* Разрешаем клик */
    animation: pulseHighlight 1.5s infinite;
}

@keyframes pulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 217, 61, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 217, 61, 0);
    }
}