/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/dark-mode/dark-mode-animations.css                   ║
║  Purpose: Dark mode animations, transitions, and special effects   ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                      ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. Animations & Transitions
  2. Hover & Active States
  3. Focus & Accessibility States
  4. Loading & Skeleton States
  5. Special Effects
*/

@media (prefers-color-scheme: dark) {
    /* ========================================== */
    /* 1. ANIMATIONS & TRANSITIONS */
    /* ========================================== */

    /* Smooth transitions for all interactive elements */
    .rv-header,
    .rv-nav a,
    .rv-nav-link,
    .rv-header-client,
    .rv-header-practitioner,
    .modal,
    .modal-content,
    .modal__content,
    .dropdown-menu,
    .nav-tab,
    .inbox-tab,
    .button,
    .btn,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        transition: all 0.3s ease !important;
    }

    /* Message bubbles animation */
    .message-bubble,
    .message-bubble--own,
    .message-bubble--other,
    .message-group {
        animation: messageSlideIn 0.3s ease-out;
    }

    @keyframes messageSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Notification toast animation */
    .toast,
    .notification-toast {
        animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes toastSlideIn {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Modal fade in */
    .modal,
    .modal-overlay,
    .modal__overlay {
        animation: modalFadeIn 0.3s ease-out;
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Card hover lift effect */
    .card-section,
    .universal-card,
    .article-card,
    .choice-card,
    .category-card,
    .projects-sidebar__card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-section:hover,
    .universal-card:hover,
    .article-card:hover,
    .choice-card:hover,
    .category-card:hover,
    .projects-sidebar__card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
    }

    /* Button animations */
    .rv-auth-submit,
    .signup-submit,
    .chat-input-button,
    .message-send-btn,
    .btn-path-style,
    button.form-control {
        transition: all 0.2s ease;
    }

    .rv-auth-submit:active,
    .signup-submit:active,
    .chat-input-button:active,
    .message-send-btn:active,
    .btn-path-style:active {
        transform: scale(0.98);
    }

    /* Input focus animation */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="tel"]:focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .signup-form input:focus,
    .signup-form select:focus,
    .signup-form textarea:focus,
    .modal__body input:focus,
    .modal__body select:focus,
    .modal__body textarea:focus,
    .rv-auth-modal input:focus {
        transition: all 0.2s ease;
    }

    /* Dropdown menu animation */
    .dropdown-menu,
    .rv-avatar-dropdown,
    .rv-notifications-dropdown {
        animation: dropdownSlideDown 0.2s ease-out;
    }

    @keyframes dropdownSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Toggle switch animation */
    .toggle-switch,
    .toggle-label,
    .toggle-slider {
        transition: all 0.3s ease;
    }

    .toggle-switch input:checked + .toggle-slider,
    .toggle-checkbox:checked + .toggle-slider {
        transition: background-color 0.3s ease;
    }

    /* ========================================== */
    /* 2. HOVER & ACTIVE STATES */
    /* ========================================== */

    /* Link hover effects */
    a:not(.no-hover),
    .rv-footer-nav a,
    .rv-auth-footer a,
    .signup-consent a,
    .rv-auth-actions a,
    .rv-forgot {
        transition: color 0.2s ease, text-decoration 0.2s ease;
    }

    /* Tab hover effects */
    .nav-tab:not(.active):hover,
    .inbox-tab:not(.active):hover {
        transform: translateY(-1px);
    }

    /* Conversation/thread item hover */
    .conversation-item:not(.active):hover,
    .thread-item:not(.active):hover,
    .message-list-item:not(.active):hover {
        transition: all 0.2s ease;
    }

    /* Sidebar item hover */
    .sidebar-item:not(.active):hover,
    .nav-item:not(.active):hover {
        transition: all 0.2s ease;
    }

    /* Filter button hover */
    .filter-button:not(.active):hover {
        transition: all 0.2s ease;
    }

    /* Category/choice card hover */
    .category-card:hover,
    .category-item:hover,
    .choice-card:hover,
    .subcategory-card:hover {
        transition: all 0.2s ease;
    }

    /* ========================================== */
    /* 3. FOCUS & ACCESSIBILITY STATES */
    /* ========================================== */

    /* Focus ring for keyboard navigation */
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    button:focus-visible,
    a:focus-visible,
    .rv-dropdown-item:focus,
    .rv-nav-link:focus,
    .sidebar-item:focus,
    .nav-item:focus {
        outline: 2px solid #d9cc94 !important;
        outline-offset: 2px !important;
    }

    /* Tab focus */
    .nav-tab:focus,
    .inbox-tab:focus {
        outline: 2px solid #d9cc94 !important;
        outline-offset: 2px !important;
        border-color: #77883e !important;
    }

    /* Modal close button focus */
    .modal-close:focus,
    .modal__close:focus,
    .rv-auth-close:focus {
        outline: 2px solid #d9cc94 !important;
        outline-offset: 2px !important;
    }

    /* Dropdown item focus */
    .dropdown-item:focus,
    .rv-dropdown-item:focus {
        outline: 2px solid #d9cc94 !important;
        outline-offset: -2px !important;
        background-color: var(--dm-bg-card-secondary) !important;
    }

    /* ========================================== */
    /* 4. LOADING & SKELETON STATES */
    /* ========================================== */

    /* Loading animation */
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }
        100% {
            background-position: 1000px 0;
        }
    }

    .loading-state,
    .skeleton,
    [data-loading="true"] {
        animation: shimmer 2s infinite;
        background: linear-gradient(
            90deg,
            var(--dm-bg-card-secondary) 25%,
            var(--dm-bg-card) 50%,
            var(--dm-bg-card-secondary) 75%
        );
        background-size: 1000px 100%;
    }

    /* Loading spinner */
    .spinner,
    .loading-spinner {
        animation: spin 1s linear infinite;
    }

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

    /* Pulse animation for notification badges */
    .rv-notification-badge,
    [data-badge] {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }

    /* ========================================== */
    /* 5. SPECIAL EFFECTS */
    /* ========================================== */

    /* Background color transition for dark mode */
    body,
    body[data-theme="dark"] {
        background-color: var(--dm-bg-page) !important;
        color: var(--dm-text-primary) !important;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

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

    /* Selection color in dark mode */
    ::selection {
        background-color: rgba(119, 136, 62, 0.3) !important;
        color: #ffffff !important;
    }

    ::-moz-selection {
        background-color: rgba(119, 136, 62, 0.3) !important;
        color: #ffffff !important;
    }

    /* Placeholder text appearance */
    ::placeholder {
        color: var(--dm-form-placeholder, #8f8b87) !important;
        opacity: 1 !important;
    }

    ::-moz-placeholder {
        color: var(--dm-form-placeholder, #8f8b87) !important;
        opacity: 1 !important;
    }

    :-ms-input-placeholder {
        color: var(--dm-form-placeholder, #8f8b87) !important;
    }

    ::-ms-input-placeholder {
        color: var(--dm-form-placeholder, #8f8b87) !important;
    }

    /* Scrollbar styling */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: var(--dm-bg-page) !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--dm-bg-card-secondary) !important;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #77883e !important;
    }

    /* Caret color for inputs */
    input,
    textarea {
        caret-color: #d9cc94 !important;
    }

    /* Backdrop blur for modals */
    .modal-overlay,
    .modal__overlay,
    .rv-auth-overlay {
        backdrop-filter: blur(2px) !important;
    }

    /* Smooth border transitions */
    .form-control,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea,
    .modal,
    .modal-content,
    .modal__content,
    .card-section,
    .universal-card,
    .nav-tab,
    .inbox-tab,
    .choice-card,
    .category-card {
        transition: border-color 0.2s ease;
    }

    /* Box shadow transition */
    .modal-content,
    .modal__content,
    .card-section,
    .universal-card,
    .dropdown-menu,
    .rv-avatar-dropdown,
    .rv-notifications-dropdown {
        transition: box-shadow 0.3s ease;
    }

    /* Text color transition */
    .text-primary,
    .text-secondary,
    .text-accent,
    .text-muted {
        transition: color 0.2s ease;
    }

    /* Background opacity transition for hover states */
    button:not(:disabled),
    .filter-button,
    .filter-item,
    .nav-section-item,
    .menu-item,
    .sidebar-item,
    .nav-item {
        transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    /* Disabled state styling with transition */
    input:disabled,
    select:disabled,
    textarea:disabled,
    button:disabled,
    .rv-auth-submit:disabled,
    .signup-submit:disabled {
        transition: all 0.2s ease;
        opacity: 0.6 !important;
        cursor: not-allowed !important;
    }

    /* Badge/label animations */
    .rv-notification-badge,
    .sidebar-tab__badge,
    .status-badge,
    .status-label {
        transition: all 0.2s ease;
    }
}