/**
 * animations.css — Micro-interactions, transitions, and motion signals
 * Goals: Smooth view transitions, tactile button feedback, loading skeletons,
 *        progress states, ripple clicks, and accessibility-safe animations.
 */

/* ── Respect reduced motion preference ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes rippleOut {
    0% {
        transform: scale(0);
        opacity: 0.35;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

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

@keyframes bounceIn {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    60% {
        transform: scale(1.04);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes checkPop {
    0% {
        transform: scale(0.5) rotate(-10deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.2) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes urgentPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

@keyframes warningBlink {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
    }
}

@keyframes dotBounce {

    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── View entrance ──────────────────────────────────────────────────────────── */
.view-inner {
    animation: slideInUp 0.28s var(--ease-out) both;
}

/* Stagger children of dashboard grid */
.dashboard-grid>.card:nth-child(1) {
    animation-delay: 0.04s;
}

.dashboard-grid>.card:nth-child(2) {
    animation-delay: 0.08s;
}

.dashboard-grid>.card:nth-child(3) {
    animation-delay: 0.12s;
}

.dashboard-grid>.card:nth-child(4) {
    animation-delay: 0.16s;
}

.dashboard-grid>.card:nth-child(5) {
    animation-delay: 0.20s;
}

/* ── Enhanced Button Interactions ───────────────────────────────────────────── */
.btn {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all var(--dur-med) var(--ease-out);
}

.btn:active {
    transform: translateY(1px) scale(0.98) !important;
}

/* Ripple effect on click */
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    animation: rippleOut 0.6s var(--ease) forwards;
    transform-origin: center;
}

/* ── Nav Item hover glow ────────────────────────────────────────────────────── */
.nav-item {
    transition: all var(--dur-fast) var(--ease-out);
}

.nav-item:hover {
    transform: translateX(2px);
}

.nav-item.active {
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

/* ── Card hover lift ────────────────────────────────────────────────────────── */
.card {
    transition: all var(--dur-med) var(--ease-out);
}

.project-card {
    transition: all var(--dur-med) var(--ease-out);
}

/* ── Task Item animations ───────────────────────────────────────────────────── */
.task-item {
    animation: slideInLeft 0.2s var(--ease-out) both;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
        transform 0.12s var(--ease);
}

.task-item:hover {
    transform: translateX(3px);
}

.task-item:nth-child(1) {
    animation-delay: 0.02s;
}

.task-item:nth-child(2) {
    animation-delay: 0.04s;
}

.task-item:nth-child(3) {
    animation-delay: 0.06s;
}

.task-item:nth-child(4) {
    animation-delay: 0.08s;
}

.task-item:nth-child(5) {
    animation-delay: 0.10s;
}

.task-item:nth-child(6) {
    animation-delay: 0.12s;
}

/* Checkbox pop on completion */
.task-checkbox {
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
        transform 0.12s var(--ease);
}

.task-checkbox.checked {
    animation: checkPop 0.3s var(--ease-out);
}

.task-checkbox:hover {
    transform: scale(1.1);
}

/* ── Urgent task visual signal ──────────────────────────────────────────────── */
.task-overdue {
    animation: urgentPulse 2s infinite;
}

.task-urgent {
    animation: warningBlink 2.5s infinite;
}

/* ── Kanban card animations ─────────────────────────────────────────────────── */
.kanban-card {
    animation: scaleIn 0.18s var(--ease-out) both;
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease),
        border-color 0.15s var(--ease);
}

.kanban-card:nth-child(1) {
    animation-delay: 0.02s;
}

.kanban-card:nth-child(2) {
    animation-delay: 0.04s;
}

.kanban-card:nth-child(3) {
    animation-delay: 0.06s;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.sidebar {
    transition: transform 0.28s var(--ease-out), width 0.28s var(--ease-out);
}

/* ── Modal entrance ─────────────────────────────────────────────────────────── */
.modal {
    animation: bounceIn 0.28s var(--ease-out) both;
}

/* ── Skeleton loading states ────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-surface) 25%,
            var(--bg-surface-hover) 50%,
            var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-title {
    height: 18px;
    width: 60%;
    margin-bottom: 12px;
    border-radius: 4px;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Loading dots ───────────────────────────────────────────────────────────── */
.loading-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: dotBounce 1.2s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* ── Sync indicator pulse ───────────────────────────────────────────────────── */
.status-online {
    background: var(--accent-success);
    animation: warningBlink 3s infinite;
}

.status-syncing {
    background: var(--accent-info);
    animation: spin 1s linear infinite;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── Search overlay animation ───────────────────────────────────────────────── */
.search-box {
    animation: slideInUp 0.2s var(--ease-out) both;
}

/* ── Topbar breadcrumb transition ───────────────────────────────────────────── */
.breadcrumbs .current {
    transition: opacity 0.2s var(--ease);
}

/* ── Progress bar animated fill ─────────────────────────────────────────────── */
.progress-fill {
    transition: width 0.7s var(--ease-out);
    background: linear-gradient(90deg,
            var(--accent-primary) 0%,
            var(--accent-teal) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

/* ── Form focus glow ────────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
    transition: all var(--dur-med) var(--ease-out);
}

/* ── Toast enhanced ─────────────────────────────────────────────────────────── */
.toast {
    animation: slideInRight 0.3s var(--ease-out) both;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

/* ── Touch ripple target areas ──────────────────────────────────────────────── */
.btn,
.nav-item,
.task-item,
.kanban-card,
.project-card,
.decision-card,
.tab-btn {
    -webkit-tap-highlight-color: transparent;
}

/* ── Active state for mobile (touch feedback) ───────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn:active {
        filter: brightness(0.88);
    }

    .task-item:active,
    .kanban-card:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .nav-item:active {
        background: var(--bg-surface-hover);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   REACT BITS-INSPIRED ENHANCEMENTS
   Premium animations adapted from reactbits.dev for vanilla CSS/JS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Animated gradient text (ShinyText / GradientText) ──────────────────── */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradient-text {
    background: linear-gradient(135deg,
            var(--accent-primary) 0%,
            var(--accent-teal) 40%,
            var(--accent-purple) 70%,
            var(--accent-primary) 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 6s ease infinite;
}

/* Subtle version for view h1 titles */
.view-header-text h1 {
    background: linear-gradient(120deg, var(--text-primary) 60%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 2. Floating ambient orbs (Aurora background effect) ───────────────────── */
@keyframes floatOrb1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -40px) scale(1.05);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.97);
    }
}

@keyframes floatOrb2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-40px, 30px) scale(1.03);
    }

    66% {
        transform: translate(25px, -15px) scale(1.06);
    }
}

/* Orbs are injected via body::before and body::after — we override them */
body::before {
    animation: floatOrb1 14s ease-in-out infinite;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 75% 110%, rgba(45, 212, 191, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: floatOrb2 18s ease-in-out infinite;
}

/* ── 3. Staggered card reveal (react-bits Fade / BlurIn) ───────────────────── */
@keyframes blurFadeIn {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.matrix-quadrant,
.integration-card {
    animation: blurFadeIn 0.35s var(--ease-out) both;
}

.matrix-quadrant:nth-child(1) {
    animation-delay: 0.04s;
}

.matrix-quadrant:nth-child(2) {
    animation-delay: 0.10s;
}

.matrix-quadrant:nth-child(3) {
    animation-delay: 0.16s;
}

.matrix-quadrant:nth-child(4) {
    animation-delay: 0.22s;
}

.integration-card:nth-child(1) {
    animation-delay: 0.04s;
}

.integration-card:nth-child(2) {
    animation-delay: 0.10s;
}

.integration-card:nth-child(3) {
    animation-delay: 0.16s;
}

.integration-card:nth-child(4) {
    animation-delay: 0.22s;
}

/* ── 4. Nav item active glow pulse ─────────────────────────────────────────── */
@keyframes navGlowPulse {

    0%,
    100% {
        box-shadow: inset 0 0 0 0 transparent;
    }

    50% {
        box-shadow: inset 3px 0 12px -2px var(--accent-primary-glow);
    }
}

.nav-item.active {
    animation: navGlowPulse 3s ease-in-out infinite;
}

/* ── 5. Page-load shimmer skeleton ───────────────────────────────────────────── */
.page-shimmer-container {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--bg-base);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-shimmer-container.hidden {
    opacity: 0;
    visibility: hidden;
}

.shimmer-header {
    height: 32px;
    width: 40%;
    border-radius: var(--radius-md);
}

.shimmer-row {
    height: 56px;
    width: 100%;
    border-radius: var(--radius-md);
}

/* ── 6. PWA Install Banner ──────────────────────────────────────────────────── */
.pwa-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    width: calc(100% - 48px);
    max-width: 480px;
    animation: slideInUp 0.4s var(--ease-out) both;
}

.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

#pwa-install-dismiss {
    color: var(--text-muted);
    transition: all var(--dur-fast);
    padding: 8px;
    margin-right: -4px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pwa-install-dismiss:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
    transform: scale(1.1);
}

#pwa-install-dismiss i {
    width: 18px;
    height: 18px;
}

/* ── 7. Enhanced task checkbox ─────────────────────────────────────────────── */
@keyframes checkOrbPop {
    0% {
        box-shadow: 0 0 0 0 var(--accent-primary-glow);
    }

    50% {
        box-shadow: 0 0 0 8px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.task-checkbox.checked {
    animation: checkPop 0.3s var(--ease-out), checkOrbPop 0.6s var(--ease-out);
}

/* ── 8. Morphing border for active inputs (SpotLight / MagicCard) ──────────── */
@keyframes borderPulse {

    0%,
    100% {
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.08);
    }

    50% {
        border-color: var(--accent-teal);
        box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.08);
    }
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    animation: borderPulse 3s ease-in-out infinite;
}

/* ── 9. Button shimmer on hover (MetallicPaint inspired) ───────────────────── */
@keyframes btnShimmer {
    from {
        background-position: -200% 0;
    }

    to {
        background-position: 200% 0;
    }
}

.btn-primary:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 20%,
            rgba(255, 255, 255, 0.12) 50%,
            transparent 80%);
    background-size: 200% 100%;
    animation: btnShimmer 1.5s ease forwards;
    pointer-events: none;
    border-radius: inherit;
}

/* ── 10. Scroll-based reveal (InViewWrapper behavior via CSS) ──────────────── */
.project-card {
    opacity: 0;
    animation: blurFadeIn 0.4s var(--ease-out) both;
}

.project-card:nth-child(1) {
    animation-delay: 0.03s;
}

.project-card:nth-child(2) {
    animation-delay: 0.07s;
}

.project-card:nth-child(3) {
    animation-delay: 0.11s;
}

.project-card:nth-child(4) {
    animation-delay: 0.15s;
}

.project-card:nth-child(5) {
    animation-delay: 0.19s;
}

.project-card:nth-child(6) {
    animation-delay: 0.23s;
}

/* ── 11. Glowing avatar ring ────────────────────────────────────────────────── */
.avatar {
    transition: box-shadow 0.3s var(--ease), transform 0.2s var(--ease);
}

.user-profile:hover .avatar {
    box-shadow: 0 0 0 2px var(--accent-primary), 0 0 16px var(--accent-primary-glow);
    transform: scale(1.06) rotate(-3deg);
}

/* ── 12. d-desktop utility ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .d-desktop {
        display: none !important;
    }
}

/* ── 13. Sidebar collapsed icon tooltips ─────────────────────────────────────── */
.collapsed-sidebar .nav-item {
    position: relative;
}

.collapsed-sidebar .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
    box-shadow: var(--shadow-md);
    z-index: 100;
}

.collapsed-sidebar .nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}

/* ── 14. Focus Ring Upgrade for Accessibility ─────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}