/*
 * Kaison Motion System
 *
 * Three speed tiers:
 *   --motion-quick:  150ms  (button states, toggles, hovers)
 *   --motion-normal: 250ms  (content reveals, panel opens, tabs)
 *   --motion-slow:   450ms  (page transitions, first-load reveals)
 *
 * One curve:
 *   --ease-out: cubic-bezier(0.16, 1, 0.3, 1)
 *   Fast start, gentle finish. Nothing bounces. Nothing overshoots.
 *
 * Rule: interactions < 100ms get NO animation (instant response).
 *       Results of interactions get animation (the content that appears).
 */

:root {
    --motion-quick: 150ms;
    --motion-normal: 250ms;
    --motion-slow: 450ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-quick: 0ms;
        --motion-normal: 0ms;
        --motion-slow: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================
   GLOBAL TRANSITIONS
   ========================================== */

a {
    transition: color var(--motion-quick) ease;
}

button, .btn, [role="button"],
input[type="submit"], a[class*="btn"] {
    transition: background-color var(--motion-quick) ease,
                border-color var(--motion-quick) ease,
                color var(--motion-quick) ease,
                transform var(--motion-quick) ease,
                box-shadow var(--motion-quick) ease;
}

button:active, .btn:active, [role="button"]:active,
input[type="submit"]:active {
    transform: scale(0.97);
}

input, select, textarea {
    transition: border-color var(--motion-quick) ease,
                box-shadow var(--motion-quick) ease;
}

.card {
    transition: border-color var(--motion-normal) ease,
                box-shadow var(--motion-normal) ease,
                transform var(--motion-normal) var(--ease-out);
}


/* ==========================================
   HOVER STATES
   ========================================== */

.card:hover,
a.card:hover {
    border-color: rgba(201, 168, 76, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

tbody tr {
    transition: background-color var(--motion-quick) ease;
}
tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

nav a, .sidebar a {
    transition: color var(--motion-quick) ease,
                background-color var(--motion-quick) ease;
}


/* ==========================================
   CONTENT REVEALS
   ========================================== */

.page-content {
    animation: contentReveal var(--motion-slow) var(--ease-out) both;
}

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

.stagger-reveal > * {
    opacity: 0;
    transform: translateY(12px);
    animation: staggerIn var(--motion-normal) var(--ease-out) both;
}

.stagger-reveal > *:nth-child(1) { animation-delay: 50ms; }
.stagger-reveal > *:nth-child(2) { animation-delay: 100ms; }
.stagger-reveal > *:nth-child(3) { animation-delay: 150ms; }
.stagger-reveal > *:nth-child(4) { animation-delay: 200ms; }
.stagger-reveal > *:nth-child(5) { animation-delay: 250ms; }
.stagger-reveal > *:nth-child(6) { animation-delay: 300ms; }

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


/* ==========================================
   HTMX TRANSITIONS
   ========================================== */

.htmx-added {
    opacity: 0;
    animation: htmxReveal var(--motion-normal) var(--ease-out) forwards;
}

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

.htmx-indicator {
    opacity: 0;
    transition: opacity var(--motion-quick) ease;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}

.tab-content {
    animation: tabReveal var(--motion-normal) var(--ease-out) both;
}

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


/* ==========================================
   SKELETON LOADERS
   ========================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--graphite, #1a1a1e) 25%,
        var(--slate, #242428) 50%,
        var(--graphite, #1a1a1e) 75%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.8s ease-in-out infinite;
    border-radius: 2px;
}

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

.skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-text:last-child { width: 60%; }
.skeleton-heading { height: 24px; width: 50%; margin-bottom: 16px; }
.skeleton-card { height: 80px; margin-bottom: 12px; }
.skeleton-metric { height: 40px; width: 120px; }


/* ==========================================
   COMPONENT ANIMATIONS
   ========================================== */

.sidebar-section {
    overflow: hidden;
    transition: max-height var(--motion-normal) var(--ease-out),
                opacity var(--motion-normal) ease;
}

.badge {
    transition: background-color var(--motion-quick) ease,
                transform var(--motion-quick) ease;
}

.progress-bar, .utilization-fill {
    transition: width var(--motion-slow) var(--ease-out);
}

.notification-bell.has-new {
    animation: bellPulse 2s ease-in-out;
}

@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
}

.toast-enter {
    animation: toastIn var(--motion-normal) var(--ease-out) both;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-exit {
    animation: toastOut var(--motion-quick) var(--ease-in) both;
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(-8px); }
}

/* Modal backdrop */
.modal-backdrop {
    transition: opacity var(--motion-normal) ease;
}

/* Panel transitions for Alpine x-show */
.panel-enter { opacity: 0; transform: translateY(8px) scale(0.98); }
.panel-enter-active {
    transition: opacity var(--motion-normal) var(--ease-out),
                transform var(--motion-normal) var(--ease-out);
}
.panel-enter-to { opacity: 1; transform: translateY(0) scale(1); }
.panel-leave { opacity: 1; }
.panel-leave-active { transition: opacity var(--motion-quick) var(--ease-in); }
.panel-leave-to { opacity: 0; }


/* ==========================================
   KAI CHAT WIDGET
   ========================================== */

/* Chat trigger button */
.kai-chat-trigger:active {
    transform: scale(0.92) !important;
}

/* Panel open */
@keyframes kaiPanelOpen {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Panel close */
@keyframes kaiPanelClose {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}

/* Staggered content reveal inside chat panel */
@keyframes kaiContentReveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.kai-panel-header {
    opacity: 0;
    animation: kaiContentReveal var(--motion-normal) var(--ease-out) both;
    animation-delay: 150ms;
}
.kai-panel-messages {
    opacity: 0;
    animation: kaiContentReveal var(--motion-normal) var(--ease-out) both;
    animation-delay: 250ms;
}
.kai-panel-input {
    opacity: 0;
    animation: kaiContentReveal var(--motion-normal) var(--ease-out) both;
    animation-delay: 350ms;
}

/* Typing indicator dots */
@keyframes kaiDotPulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.kai-typing-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent, #C9A84C);
    animation: kaiDotPulse 1.2s ease-in-out infinite;
}
.kai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.kai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Thinking pulse — subtle border breathe while Kai processes */
.kai-thinking {
    animation: kaiThinking 2s ease-in-out infinite;
}

@keyframes kaiThinking {
    0%, 100% {
        border-color: var(--iron, #2E2E33);
    }
    50% {
        border-color: var(--pewter, #4A4A52);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
    }
}

/* ==========================================
   k.Ai BREATHING — UNIVERSAL LOADING STATE
   ========================================== */

.kai-loading-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    animation: kaiBreathe 2s ease-in-out infinite;
    line-height: 1;
}

.kai-loading-symbol svg {
    width: 100%;
    height: 100%;
}

.kai-loading-symbol--sm {
    width: 1.25rem;
    height: 1.25rem;
}

@keyframes kaiBreathe {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
}


/* ==========================================
   k.Ai WATERMARK — SUBLIMINAL BRAND TOUCH
   ========================================== */

.kai-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40vw;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    color: var(--slate, #242428);
}

@media print {
    .kai-watermark { display: none; }
}


/* ==========================================
   MICRO-INTERACTIONS
   ========================================== */

/* Save confirmation flash — gold pulse on successful save */
.btn-save-flash {
    animation: saveFlash 0.6s ease-out;
}

@keyframes saveFlash {
    0% { box-shadow: 0 0 0 0 var(--accent, #C9A84C); }
    30% { box-shadow: 0 0 12px 2px var(--accent, #C9A84C); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Delete row slide-out */
.row-removing {
    animation: slideOutRight 0.3s var(--ease-out) forwards;
}

@keyframes slideOutRight {
    to {
        opacity: 0;
        transform: translateX(30px) scaleY(0);
    }
}

/* Card hover — alias text brightens */
.property-card:hover .property-alias,
.card:hover .card-title {
    color: var(--cream, #F5F5F2);
    transition: color var(--motion-quick) ease;
}

/* Toast container */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 12px 16px;
    border-radius: 2px;
    font-size: 13px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    max-width: 360px;
    animation: toastIn var(--motion-normal) var(--ease-out) both;
}

.toast-success {
    background: var(--graphite, #1A1A1E);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--accent, #C9A84C);
}

.toast-error {
    background: var(--graphite, #1A1A1E);
    border: 1px solid rgba(140, 74, 74, 0.3);
    color: var(--no-go, #8C4A4A);
}

.toast-dismissing {
    animation: toastOut 0.2s ease-in forwards;
}

/* Breadcrumbs */
.breadcrumbs a {
    transition: color var(--motion-quick) ease;
}
.breadcrumbs a:hover {
    color: var(--silver, #B8B8C0);
}


/* Mobile: full-screen slide-up */
@media (max-width: 767px) {
    @keyframes kaiPanelOpen {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes kaiPanelClose {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(100%);
        }
    }
}