/**
 * Central Wobble Animation System
 * 
 * CONSOLIDATED FILE - All wobble animations across LifeList platform
 * 
 * SOURCES CONSOLIDATED:
 * - /wp-content/plugins/lifelist-paidia/includes/class-paidia-lifelist-integration.php (dynamic injection)
 * - /wp-content/plugins/lifelist-core/assets/css/lifelist-core.css (quest-wobble class)
 * - /wp-content/plugins/lifelist-core/widgets/your-lifelist-v2.php (inline styles)
 * - /wp-content/plugins/lifelist-core/assets/js/quest-guidance-wobble.js (applies .quest-wobble class)
 * 
 * USAGE:
 * 1. Dynamic Quest Hints: class-paidia-lifelist-integration.php injects paidiaQuestWobble via wp_head
 * 2. Manual Quest Guidance: quest-guidance-wobble.js applies .quest-wobble class
 * 3. Your LifeList Widget: Applies wobble animation inline for quest progression hints
 * 
 * This file consolidates all wobble animations to ensure consistency.
 */

/* ========================================
   PRIMARY WOBBLE KEYFRAME ANIMATION
   Used by: Paidia quest system, lifelist-core, your-lifelist-v2
   ======================================== */

/**
 * Main wobble animation - CANONICAL VERSION
 * Gentle rotation + scale for attention without being intrusive
 * 
 * Used by:
 * - paidiaQuestWobble (Paidia dynamic quest hints) - loops infinitely with 0.5s delay
 * - .quest-wobble class (quest-guidance-wobble.js) - plays once on demand
 * - Your LifeList widget inline styles - plays once on quest row click
 */
@keyframes wobble {
    0% { 
        transform: rotate(0deg) scale(1); 
    }
    15% { 
        transform: rotate(-5deg) scale(1.05); 
    }
    30% { 
        transform: rotate(5deg) scale(1.05); 
    }
    45% { 
        transform: rotate(-5deg) scale(1.05); 
    }
    60% { 
        transform: rotate(5deg) scale(1.05); 
    }
    75% { 
        transform: rotate(-3deg) scale(1.02); 
    }
    85% { 
        transform: rotate(3deg) scale(1.02); 
    }
    100% { 
        transform: rotate(0deg) scale(1); 
    }
}

/**
 * Paidia Quest Wobble Alias
 * Same as 'wobble' but with distinct name for Paidia-specific usage
 * Allows Paidia to have different timing (infinite loop) without affecting other uses
 */
@keyframes paidiaQuestWobble {
    0% { transform: rotate(0deg) scale(1); }
    15% { transform: rotate(-5deg) scale(1.05); }
    30% { transform: rotate(5deg) scale(1.05); }
    45% { transform: rotate(-5deg) scale(1.05); }
    60% { transform: rotate(5deg) scale(1.05); }
    75% { transform: rotate(-3deg) scale(1.02); }
    85% { transform: rotate(3deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
}

/**
 * Quest Wobble Class
 * Applied by quest-guidance-wobble.js for manual quest hints
 * Plays once (0.8s) to draw attention to specific elements
 */
.quest-wobble {
    animation: wobble 0.8s ease-in-out;
    transform-origin: center center;
}

/**
 * Quest Wobble Infinite Class
 * Applied for critical actions that require continuous attention
 * Plays continuously (2s per cycle) until step is completed
 */
.quest-wobble-infinite {
    animation: wobble 2s ease-in-out infinite;
    transform-origin: center center;
}

/* ========================================
   ELEMENT SELECTOR MAPPING REFERENCE
   (Applied dynamically via PHP)
   ======================================== */

/**
 * QUEST 1: SEEK & UNLOCK (ID: 250364)
 * 
 * Step 3 (250318): Perform First Search
 * Elements: .lifelist-search-icon, #search-toggle, .search-widget, #ttd-search-button
 * 
 * Step 4 (250319): View First Thing To Do
 * Elements: .experience-card, .ttd-card-link, .experience-list-item
 * 
 * Step 5 (250320): Like First Experience
 * Elements: .ttd-like, .favorite-button, .like-icon
 * 
 * Step 6: Claim First Stamp
 * TODO: Add .ttd-stamp selector when step created
 * 
 * Step 7: Use Sticky Nav
 * TODO: Add sticky nav icon selectors when step created
 * 
 * Step 8: View Passions
 * TODO: Add passions modal trigger selectors when step created
 */

/**
 * QUEST 2: NAVIGATE & FILTER (ID: 250365)
 * 
 * Step 9 (250329): View First Venue
 * Elements: .venue-card, .venue-link, .venue-list-item
 * 
 * Step 10: Use TTD Actions from Sticky Nav
 * TODO: Add sticky nav TTD action icon selectors when step created
 * 
 * Step 11 (250330): View First Destination
 * Elements: .destination-card, .destination-link, .destination-list-item
 * 
 * Step 12: View Things To Do Page
 * TODO: Add main nav "Things To Do" link selector when step created
 * 
 * Additional steps TBD
 */

/**
 * QUEST 3: EXPLORE & PLAN (ID: 250366)
 * 
 * Step 13: View Your LifeList
 * TODO: Add "Your LifeList" link/button selectors when step created
 * 
 * Step 14: View Stream
 * TODO: Add stream nav link selectors when step created
 * 
 * Step 15: View XP Stats
 * TODO: Add XP widget selectors when step created
 * 
 * Step 16: Add Email
 * TODO: Add profile icon/link selectors when step created
 * 
 * Step 17: Add Phone
 * TODO: Add profile icon/link selectors when step created
 */

/**
 * QUEST 4: BUILD & SHARE (ID: 250367)
 * 
 * Step 2 (250369): Enrich Experience (Spotlight Modal)
 * Elements: .spotlight-modal-trigger, .add-review-button, .enrich-experience-cta
 * 
 * Step 3 (250370): Add Stamp Images
 * Elements: .stamp-image-upload, .add-photo-button, .media-upload-trigger
 * 
 * Step 4 (250371): Share LifeList
 * Elements: .share-lifelist-button, .lifelist-share-icon, .share-cta
 * 
 * Step 5 (250372): Unlock Content (Seek & Unlock)
 * Elements: .seek-unlock-trigger, .add-venue-button, .add-experience-button, .unlock-content-cta
 */

/**
 * QUEST 5: CONNECT & COLLABORATE (ID: 250368)
 * 
 * Step 6 (250373): Invite Friend
 * Elements: .invite-friend-button, .friend-invite-cta, .invite-link
 * 
 * Step 7 (250374): Add Friend
 * Elements: .add-friend-button, .accept-friend-request, .friend-request-accept
 * 
 * Step 8 (250375): Tag Companion on Stamp
 * Elements: .tag-companion-stamp, .companion-selector-stamp, .add-provider-stamp
 * 
 * Step 9 (250376): Tag Companion on Plan
 * Elements: .tag-companion-plan, .companion-selector-plan, .add-provider-plan
 */

/* ========================================
   ADDING NEW WOBBLE TARGETS
   ======================================== */

/**
 * TO ADD A NEW WOBBLE TARGET:
 * 
 * 1. Open /opt/bitnami/wordpress/wp-content/plugins/lifelist-paidia/includes/class-paidia-lifelist-integration.php
 * 2. Find the maybe_wobble_quest_elements() method
 * 3. Locate the $step_element_map array
 * 4. Add your step ID as a key with an array of CSS selectors:
 * 
 *    250XXX => [
 *        '.your-element-class',
 *        '#your-element-id',
 *        '.another-selector'
 *    ],
 * 
 * 5. Document the selectors in this file's reference section above
 * 6. Test by completing previous steps to make your step "next"
 * 
 * IMPORTANT: Use specific selectors to avoid wobbling unrelated elements
 */

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

/**
 * Wobble animation is consistent across all screen sizes
 * Adjust rotation/scale if needed for smaller touch targets on mobile
 */
@media (max-width: 768px) {
    /* Optional: Reduce wobble intensity on mobile if needed */
    /* @keyframes paidiaQuestWobble {
        0% { transform: rotate(0deg) scale(1); }
        25% { transform: rotate(-3deg) scale(1.03); }
        50% { transform: rotate(3deg) scale(1.03); }
        75% { transform: rotate(-3deg) scale(1.03); }
        100% { transform: rotate(0deg) scale(1); }
    } */
}

/* ========================================
   ACCESSIBILITY NOTES
   ======================================== */

/**
 * PREFERS-REDUCED-MOTION:
 * Users who prefer reduced motion should not see wobbles
 * This respects system accessibility preferences
 */
@media (prefers-reduced-motion: reduce) {
    /* Disable all wobble animations */
    [style*="paidiaQuestWobble"] {
        animation: none !important;
    }
    
    /* Replace with subtle pulse or glow instead */
    /* TODO: Implement gentle pulse animation as alternative */
}

/* ========================================
   TESTING & DEBUGGING
   ======================================== */

/**
 * TO TEST WOBBLE ANIMATIONS:
 * 
 * 1. Create a fresh test user
 * 2. Complete quest steps up to the one BEFORE your target
 * 3. Navigate to the page with your target element
 * 4. Inspect element - should have paidiaQuestWobble animation in inline style
 * 5. Verify wobble appears after 0.5s delay
 * 
 * TO DEBUG MISSING WOBBLES:
 * 
 * 1. Check error_log for "Paidia: User X completed step Y" messages
 * 2. Verify step is marked complete in wp_gamipress_user_earnings table
 * 3. Check if next step exists and is mapped in $step_element_map
 * 4. Verify selectors exist on the page (use browser inspector)
 * 5. Check for CSS specificity conflicts (!important may be needed)
 */

/* ========================================
   PERFORMANCE NOTES
   ======================================== */

/**
 * CSS is injected once per page load via wp_head
 * Only includes selectors for user's current next steps (max ~10 selectors)
 * Animation uses transform (GPU-accelerated), not layout-affecting properties
 * No JavaScript required - pure CSS animation triggered by class application
 * 
 * Performance impact: Negligible (<100 bytes CSS, GPU-accelerated animation)
 */