/*
 * =============================================================================
 * Copyright (c) 2026 Paseo Platform LLC. All rights reserved.
 *
 * CONFIDENTIAL AND PROPRIETARY
 *
 * This file is part of the Paseo Platform software system and constitutes
 * proprietary trade secret information of Paseo Platform LLC. This source
 * code is protected under applicable trade secret laws and may not be
 * copied, modified, distributed, or disclosed without the express written
 * permission of Paseo Platform LLC.
 *
 * For licensing inquiries: www.paseoplatform.com
 * =============================================================================
 */

/**
 * Paseo Platform - Animations
 * Section 6: Animation & Micro-interactions
 * Version: 3.0.0
 */

/* =============================================================================
   Golden S Loader Animation (Section 6.1)
   ============================================================================= */

@keyframes paseo-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes paseo-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes paseo-loader-combined {
    0% {
        transform: rotate(0deg) scale(0.95);
    }
    25% {
        transform: rotate(90deg) scale(1.05);
    }
    50% {
        transform: rotate(180deg) scale(0.95);
    }
    75% {
        transform: rotate(270deg) scale(1.05);
    }
    100% {
        transform: rotate(360deg) scale(0.95);
    }
}

.paseo-loader {
    animation: paseo-loader-combined 1.5s ease-in-out infinite;
    display: inline-block;
}

.paseo-loader-rotate {
    animation: paseo-rotate 1.5s linear infinite;
}

.paseo-loader-pulse {
    animation: paseo-pulse 1.5s ease-in-out infinite;
}

/* =============================================================================
   Page Transitions (Section 6.1)
   ============================================================================= */

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.page-transition-enter {
    animation: fade-up 0.3s ease forwards;
}

.page-transition-exit {
    animation: fade-up 0.3s ease reverse forwards;
}

/* =============================================================================
   Card Hover Animation (Section 6.1)
   ============================================================================= */

.card-hover-lift {
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.card-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

/* Feature card with golden left border animation */
.card-feature {
    position: relative;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.card-feature::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition-slow);
}

.card-feature:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.card-feature:hover::before {
    transform: scaleY(1);
}

/* =============================================================================
   Button Hover Animations (Section 6.1)
   ============================================================================= */

.btn-animate {
    transition: background-color var(--transition-normal),
                transform var(--transition-normal),
                box-shadow var(--transition-normal);
}

.btn-animate:hover {
    transform: scale(1.02);
}

.btn-animate:active {
    transform: scale(0.98);
}

/* CTA Button with arrow slide */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-normal);
}

.btn-cta .btn-arrow {
    transition: transform var(--transition-normal);
}

.btn-cta:hover .btn-arrow {
    transform: translateX(8px);
}

/* =============================================================================
   Sidebar Toggle Animation (Section 6.1)
   ============================================================================= */

.sidebar-toggle-icon {
    transition: transform var(--transition-slow);
}

.sidebar.collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.sidebar-nav-label {
    transition: opacity var(--transition-slow), width var(--transition-slow);
    overflow: hidden;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-nav-label {
    opacity: 0;
    width: 0;
}

/* =============================================================================
   Modal Animations (Section 6.1)
   ============================================================================= */

@keyframes modal-backdrop-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-backdrop {
    animation: modal-backdrop-in 0.2s ease-out forwards;
}

.modal-content {
    animation: modal-content-in 0.2s ease-out forwards;
}

/* =============================================================================
   Toast Notifications (Section 6.1)
   ============================================================================= */

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-enter {
    animation: toast-slide-in 0.3s ease forwards;
}

.toast-exit {
    animation: toast-slide-out 0.3s ease forwards;
}

/* Toast auto-dismiss timer bar */
.toast-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--color-accent);
    animation: toast-timer 5s linear forwards;
}

@keyframes toast-timer {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}

/* =============================================================================
   Dropdown Animations (Section 6.1)
   ============================================================================= */

@keyframes dropdown-open {
    from {
        opacity: 0;
        transform: scaleY(0.95);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.dropdown-menu-animate {
    transform-origin: top;
    animation: dropdown-open 0.15s ease forwards;
}

/* =============================================================================
   Celebration Animations (Section 6.2)
   ============================================================================= */

/* Checkmark draw animation */
@keyframes checkmark-draw {
    0% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkmark-animate {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkmark-draw 0.3s ease-out forwards;
}

/* Task completion fade */
@keyframes task-complete {
    0% {
        opacity: 1;
        background-color: transparent;
    }
    50% {
        background-color: var(--color-success-light);
    }
    100% {
        opacity: 0.7;
        background-color: transparent;
    }
}

.task-complete-animate {
    animation: task-complete 0.5s ease forwards;
}

/* Confetti burst */
@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100px) rotate(720deg);
    }
}

.confetti-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: confetti-fall 1s ease-out forwards;
}

/* Milestone achievement overlay */
@keyframes milestone-badge {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes milestone-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(229, 168, 59, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(229, 168, 59, 0.6);
    }
}

.milestone-badge {
    animation: milestone-badge 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
               milestone-glow 2s ease-in-out infinite;
}

/* Typewriter effect for milestone text */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typewriter-text {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 0.5s steps(20) forwards;
}

/* =============================================================================
   Navigation Link Underline Animation (Section 3.1)
   ============================================================================= */

.nav-link-animated {
    position: relative;
}

.nav-link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition-normal);
}

.nav-link-animated:hover::after,
.nav-link-animated.active::after {
    width: 100%;
}

/* =============================================================================
   Mobile Menu Animation (Section 3.1.2)
   ============================================================================= */

@keyframes mobile-menu-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mobile-menu-item-stagger {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu {
    animation: mobile-menu-fade 0.3s ease forwards;
}

.mobile-menu-item {
    opacity: 0;
    animation: mobile-menu-item-stagger 0.3s ease forwards;
}

.mobile-menu-item:nth-child(1) { animation-delay: 0.0s; }
.mobile-menu-item:nth-child(2) { animation-delay: 0.1s; }
.mobile-menu-item:nth-child(3) { animation-delay: 0.2s; }
.mobile-menu-item:nth-child(4) { animation-delay: 0.3s; }
.mobile-menu-item:nth-child(5) { animation-delay: 0.4s; }
.mobile-menu-item:nth-child(6) { animation-delay: 0.5s; }

/* =============================================================================
   Scroll Reveal Animation (Hero Section)
   ============================================================================= */

@keyframes scroll-reveal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-reveal {
    opacity: 0;
}

.scroll-reveal.revealed {
    animation: scroll-reveal 0.6s ease forwards;
}

/* =============================================================================
   Loading Skeleton Animation
   ============================================================================= */

@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* =============================================================================
   Spin Animation for Loading Icons
   ============================================================================= */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* =============================================================================
   Accessibility: Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .paseo-loader,
    .paseo-loader-rotate,
    .paseo-loader-pulse,
    .page-transition-enter,
    .page-transition-exit,
    .card-hover-lift,
    .card-feature,
    .btn-animate,
    .btn-cta .btn-arrow,
    .modal-backdrop,
    .modal-content,
    .toast-enter,
    .toast-exit,
    .dropdown-menu-animate,
    .checkmark-animate,
    .task-complete-animate,
    .confetti-particle,
    .milestone-badge,
    .typewriter-text,
    .nav-link-animated::after,
    .mobile-menu,
    .mobile-menu-item,
    .scroll-reveal.revealed,
    .skeleton,
    .spin {
        animation: none !important;
        transition: none !important;
    }

    /* Provide instant state changes instead */
    .card-hover-lift:hover {
        transform: none;
    }

    .btn-animate:hover,
    .btn-animate:active {
        transform: none;
    }

    .nav-link-animated::after {
        transition: none;
    }
}