/**
 * Post-it Onboarding Animations
 * Styles pour la gesture "Animated Hand"
 * Animation contrôlée par JavaScript avec trajectoire naturelle
 */

/* ========================================
   POST-IT ONBOARDING - ANIMATED HAND
   Trajectoire contrôlée par JavaScript
   ======================================== */

.animated-hand-cursor {
    position: absolute;
    font-size: 32px;
    pointer-events: none;
    z-index: 20;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    /* Animation contrôlée par JavaScript - pas de CSS animation */
    will-change: transform, left, top, opacity;
    transition: opacity 0.2s ease-out;
}

.animated-hand-cursor.click {
    animation: hand-click 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hand-click {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(0.55) rotate(-10deg);
    }
    50% {
        transform: scale(1.25) rotate(4deg);
    }
    70% {
        transform: scale(0.9) rotate(-1deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Pulse mode - hand stays on post-it */
.animated-hand-cursor.pulse-mode {
    animation: hand-pulse 1.5s ease-in-out infinite !important;
    transform-origin: center;
}

@keyframes hand-pulse {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.15) rotate(2deg);
        opacity: 0.9;
    }
}

/* Demo post-it styling */
.demo-postit {
    animation: postit-demo-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.demo-postit .postit-line1 {
    font-weight: 600;
}

.demo-postit .postit-line2 {
    font-style: italic;
}

@keyframes postit-demo-appear {
    0% {
        opacity: 0;
        transform: translateY(-100px) rotate(-15deg) scale(0.5);
    }
    60% {
        transform: translateY(10px) rotate(2deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(var(--rotation)) scale(1);
    }
}

/* Falling leaf animation for demo post-it exit */
.demo-postit.falling {
    animation: postit-fall 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    pointer-events: none;
}

@keyframes postit-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(var(--rotation, 0deg));
    }
    20% {
        opacity: 0.9;
        transform: translateY(50px) rotate(8deg) translateX(15px);
    }
    45% {
        opacity: 0.7;
        transform: translateY(140px) rotate(-6deg) translateX(-12px);
    }
    70% {
        opacity: 0.35;
        transform: translateY(270px) rotate(10deg) translateX(18px);
    }
    100% {
        opacity: 0;
        transform: translateY(420px) rotate(-7deg) translateX(-8px);
    }
}

/* Responsive - hide on mobile */
@media (max-width: 1024px) {
    .animated-hand-cursor,
    .demo-postit {
        display: none !important;
    }
}

/* Accessibility - respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animated-hand-cursor {
        /* Pour reduced motion, on place directement la main à la position finale */
        animation: none !important;
        opacity: 1;
    }

    .demo-postit {
        animation: none !important;
    }
}