/**
 * ===================================================================
 * VIBEPOSTAI MIXES - ANIMATIONS & MICRO-INTERACTIONS
 * ===================================================================
 * 
 * Subtle, delightful micro-interactions for the Mixes feature.
 * All animations use 0.4s cubic-bezier(0.4, 0, 0.2, 1) for consistency.
 * GPU accelerated (transform & opacity only).
 * Respects prefers-reduced-motion.
 * 
 * @package VibePostAI
 * @version 1.0.0
 */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

/**
 * Hero image entrance (fade + zoom)
 * Used on: single-mix.php hero section
 */
@keyframes heroImageEnter {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1.0);
    }
}

/**
 * Title slide up from bottom
 * Used on: single-mix.php hero title
 */
@keyframes titleEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Generic fade in with upward slide
 * Used on: Author info, stats, sidebar elements
 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Vipey entrance with bounce
 * Bouncy ease-out gives friendly feeling
 */
@keyframes vipeyEnter {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    60% {
        opacity: 1;
        transform: translateX(2px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * Vipey idle breathing effect
 * Very subtle continuous animation
 */
@keyframes breathing {
    0%, 100% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.02);
    }
}

/**
 * Card entrance with stagger
 * Used on: Playlist cards, related mixes cards
 */
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Sidebar slide in from right
 * Used on: Related mixes sidebar
 */
@keyframes sidebarEnter {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * Like button bounce on click
 * Creates satisfying click feedback
 */
@keyframes likeClick {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1.2);
    }
}

/**
 * Spinner rotation (for loading states)
 * Continuous smooth rotation
 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/**
 * Loading pulse effect
 * Fades opacity for loading indication
 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/**
 * Prompt number elevation
 * Makes number "float" up on hover
 */
@keyframes numberElevate {
    from {
        transform: translateY(0) scale(1.0);
    }
    to {
        transform: translateY(-2px) scale(1.1);
    }
}

/* ===================================================================
 * ARCHIVE-MIX.PHP ANIMATIONS
 * ================================================================ */

/**
 * Mix card container
 * Foundation for all card animations
 */
.mix-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

/**
 * Mix card hover state
 * Glow effect with card lift
 */
.mix-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(95, 212, 159, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.1);
}

/**
 * Mix card featured image
 * Brightness increase on hover
 */
.mix-card__image {
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: filter;
}

.mix-card:hover .mix-card__image {
    filter: brightness(1.05);
}

/**
 * Mix card title
 * Slight scale and color emphasis on hover
 */
.mix-card__title {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: color, transform;
}

.mix-card:hover .mix-card__title {
    color: #1a1a1a;
    transform: scale(1.01);
}

/**
 * Mix card stats (views, likes, prompts)
 * Staggered elevation effect
 */
.mix-card__stat {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.mix-card:hover .mix-card__stat:nth-child(1) {
    transform: translateY(-2px);
    transition-delay: 0s;
}

.mix-card:hover .mix-card__stat:nth-child(2) {
    transform: translateY(-2px);
    transition-delay: 0.05s;
}

.mix-card:hover .mix-card__stat:nth-child(3) {
    transform: translateY(-2px);
    transition-delay: 0.1s;
}

/**
 * Mix card background overlay
 * Subtle background enhancement on hover
 */
.mix-card__overlay {
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mix-card:hover .mix-card__overlay {
    background: rgba(255, 255, 255, 0.04);
}

/* ===================================================================
 * SINGLE-MIX.PHP ANIMATIONS - HERO SECTION
 * ================================================================ */

/**
 * Hero featured image entrance
 */
.single-mix__hero-image {
    animation: heroImageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/**
 * Hero title entrance with stagger
 */
.single-mix__hero-title {
    animation: titleEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
    opacity: 0; /* Start invisible until animation */
}

/**
 * Hero author/description entrance
 */
.single-mix__hero-author,
.single-mix__hero-description {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
    opacity: 0; /* Start invisible until animation */
}

/**
 * Hero stats entrance
 */
.single-mix__hero-stats {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    opacity: 0; /* Start invisible until animation */
}

/**
 * Action buttons entrance
 */
.single-mix__actions {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
    opacity: 0; /* Start invisible until animation */
}

/* ===================================================================
 * SINGLE-MIX.PHP ANIMATIONS - PROMPT PLAYLIST
 * ================================================================ */

/**
 * Individual prompt card container
 */
.prompt-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

/**
 * Prompt card entrance with stagger
 * Uses CSS variable for dynamic delay
 */
.prompt-card {
    animation: cardEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--stagger-index, 0) * 0.1s);
    opacity: 0; /* Start invisible until animation */
}

/**
 * Prompt card hover state
 * Glow with category color
 */
.prompt-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(95, 212, 159, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.08);
}

/**
 * Prompt position number
 * Elevates and scales on card hover
 */
.prompt-card__position {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.prompt-card:hover .prompt-card__position {
    transform: translateY(-2px) scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/**
 * Prompt category badge/pill
 * Saturates and scales on hover
 */
.prompt-card__category {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, filter;
}

.prompt-card:hover .prompt-card__category {
    transform: scale(1.08);
    filter: saturate(1.2);
}

/**
 * Prompt thumbnail image
 * Zooms and slides up on hover
 */
.prompt-card__thumbnail {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.prompt-card:hover .prompt-card__thumbnail {
    transform: translateY(-2px) scale(1.03);
    opacity: 1;
}

/**
 * Prompt card active/click state
 * Provides press feedback
 */
.prompt-card:active {
    transform: scale(0.98);
    filter: brightness(1.1);
}

/**
 * Prompt card title
 * Text emphasis on hover
 */
.prompt-card__title {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.prompt-card:hover .prompt-card__title {
    color: #1a1a1a;
    opacity: 1;
}

/* ===================================================================
 * VIPEY MASCOT ANIMATIONS
 * ================================================================ */

/**
 * Vipey character entrance
 * Slides in with bounce effect
 */
.vipey-mascot {
    animation: vipeyEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards;
    opacity: 0; /* Start invisible until animation */
    will-change: transform, opacity;
}

/**
 * Vipey idle breathing effect
 * Continuous subtle pulsing
 */
.vipey-mascot.idle {
    animation: breathing 3s ease-in-out infinite;
}

/**
 * Vipey hover interaction
 * Tilts and glows when hovered
 */
.vipey-mascot:hover {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 4px 12px rgba(95, 212, 159, 0.4));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Vipey tooltip/bubble
 * Fade in when Vipey is hovered
 */
.vipey-tooltip {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.vipey-mascot:hover .vipey-tooltip {
    opacity: 1;
}

/* ===================================================================
 * ACTION BUTTON ANIMATIONS
 * ================================================================ */

/**
 * Share button hover
 * Color change with icon rotation
 */
.btn-share {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: background, color, transform;
}

.btn-share:hover {
    background: #5FD49F;
    color: white;
    transform: rotate(12deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(95, 212, 159, 0.3);
}

/**
 * Like button click animation
 * Bounces on click
 */
.btn-like {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-like:active,
.btn-like.liked {
    animation: likeClick 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/**
 * Like button icon
 */
.btn-like__icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.btn-like.liked .btn-like__icon {
    transform: scale(1.2);
}

/**
 * Edit/Delete button hover
 * Highlights and slides for readiness
 */
.btn-edit,
.btn-delete {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: color, background, transform;
}

.btn-edit:hover,
.btn-delete:hover {
    color: #5FD49F;
    background: rgba(95, 212, 159, 0.1);
    transform: translateX(3px);
}

/**
 * Generic button hover effects
 */
button:not(.btn-share):not(.btn-like):not(.btn-edit):not(.btn-delete) {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:not(.btn-share):not(.btn-like):not(.btn-edit):not(.btn-delete):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

/**
 * Related mixes sidebar entrance
 * Slides in from right
 */
.single-mix__sidebar {
    animation: sidebarEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0; /* Start invisible until animation */
}

/**
 * Sidebar card hover
 * Same as mix card but slightly different timing
 */
.sidebar-mix-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-mix-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(95, 212, 159, 0.2);
}

/* ===================================================================
 * LOADING STATE ANIMATIONS
 * ================================================================ */

/**
 * Loading spinner rotation
 */
.loading-spinner {
    animation: spin 3s linear infinite;
    will-change: transform;
}

/**
 * Loading pulse (overlay effect)
 */
.loading-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/**
 * Form submission loading state
 * Disabled look with fade
 */
.loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    transition: opacity 0.3s ease;
}

/**
 * Loading text/icon state
 */
.loading-text {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ===================================================================
 * SCROLL ANIMATIONS & TRANSITIONS
 * ================================================================ */

/**
 * Smooth scroll behavior
 */
html {
    scroll-behavior: smooth;
}

/**
 * Scrolled content fade-in
 * JavaScript will control these based on viewport
 */
.scroll-fade-in {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-in.in-view {
    opacity: 1;
    transform: translateY(0);
}

.scroll-fade-in:not(.in-view) {
    opacity: 0;
    transform: translateY(20px);
}

/* ===================================================================
 * TOUCH-FRIENDLY ANIMATIONS
 * ================================================================ */

/**
 * Touch-friendly tap feedback
 * Works on mobile without hover
 */
@media (hover: none) and (pointer: coarse) {
    /* Reduce motion on touch devices */
    .mix-card,
    .prompt-card,
    button {
        transition-duration: 0.2s;
    }
    
    /* Provide touch feedback instead of hover */
    .mix-card:active,
    .prompt-card:active {
        transform: scale(0.98);
        filter: brightness(1.05);
    }
}

/* ===================================================================
 * ACCESSIBILITY UTILITIES
 * ================================================================ */

/**
 * Focus visible styles for keyboard navigation
 */
button:focus-visible,
a:focus-visible,
.prompt-card:focus-visible {
    outline: 2px solid #5FD49F;
    outline-offset: 2px;
}

/**
 * Remove animations for users who prefer reduced motion
 * Already handled at top of file, but reinforcing key elements
 */
@media (prefers-reduced-motion: reduce) {
    .mix-card,
    .prompt-card,
    .vipey-mascot,
    button,
    .single-mix__hero-image,
    .single-mix__hero-title,
    .single-mix__hero-author,
    .single-mix__sidebar {
        animation: none !important;
        transition: none !important;
    }
}

/* ===================================================================
 * UTILITY CLASSES
 * ================================================================ */

/**
 * Animate on demand
 */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-spin {
    animation: spin 3s linear infinite;
}

.animate-bounce {
    animation: likeClick 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/**
 * Disable animations (override)
 */
.no-animate,
.no-animate * {
    animation: none !important;
    transition: none !important;
}

/**
 * Force GPU acceleration
 */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}