/* ============================================
   Hive Dashboard — Global Micro-Interactions
   Opt-in utility classes for animation & polish.
   Honors prefers-reduced-motion.
   ============================================ */

:root {
    --mi-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mi-ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mi-dur-fast: 180ms;
    --mi-dur: 280ms;
    --mi-dur-slow: 520ms;
}

/* ---------- Smooth focus ring (global, accessibility win) ---------- */
*:focus-visible {
    outline: 2px solid var(--primary, #f59e0b);
    outline-offset: 2px;
    border-radius: 6px;
    transition: outline-offset var(--mi-dur-fast) var(--mi-ease);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

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

/* ---------- Button micro-interactions ---------- */
button,
.btn,
.submit-btn,
[role="button"] {
    transition:
        transform var(--mi-dur-fast) var(--mi-ease),
        box-shadow var(--mi-dur-fast) var(--mi-ease),
        background-color var(--mi-dur-fast) var(--mi-ease),
        border-color var(--mi-dur-fast) var(--mi-ease),
        filter var(--mi-dur-fast) var(--mi-ease);
}

button:not(:disabled):hover,
.btn:not(:disabled):hover,
.submit-btn:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
.submit-btn:not(:disabled):active {
    transform: translateY(0) scale(0.985);
    transition-duration: 60ms;
}

button:disabled,
.btn:disabled,
.submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ---------- Ripple (paired with JS) ---------- */
.mi-ripple-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mi-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: 0.28;
    pointer-events: none;
    animation: mi-ripple-anim 600ms var(--mi-ease) forwards;
    z-index: 0;
    mix-blend-mode: screen;
}

@keyframes mi-ripple-anim {
    to {
        transform: scale(3.2);
        opacity: 0;
    }
}

/* ---------- Reveal on scroll ---------- */
.mi-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--mi-dur-slow) var(--mi-ease),
        transform var(--mi-dur-slow) var(--mi-ease);
    will-change: opacity, transform;
}
.mi-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mi-reveal-left  { transform: translateX(-24px); }
.mi-reveal-right { transform: translateX(24px); }
.mi-reveal-left.is-visible,
.mi-reveal-right.is-visible { transform: translateX(0); }

.mi-reveal[data-delay="1"] { transition-delay: 80ms; }
.mi-reveal[data-delay="2"] { transition-delay: 160ms; }
.mi-reveal[data-delay="3"] { transition-delay: 240ms; }
.mi-reveal[data-delay="4"] { transition-delay: 320ms; }
.mi-reveal[data-delay="5"] { transition-delay: 400ms; }

/* Bridge for existing landing.html convention */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Card / panel lift ---------- */
.mi-lift {
    transition:
        transform var(--mi-dur) var(--mi-ease),
        box-shadow var(--mi-dur) var(--mi-ease),
        border-color var(--mi-dur) var(--mi-ease);
    will-change: transform;
}
.mi-lift:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(245, 158, 11, 0.18);
}

/* ---------- Subtle tilt (paired with JS) ---------- */
.mi-tilt {
    transform-style: preserve-3d;
    transition: transform var(--mi-dur) var(--mi-ease);
    will-change: transform;
}

/* ---------- Animated number ---------- */
.mi-count {
    font-variant-numeric: tabular-nums;
}

/* ---------- Soft pulse (for live status dots) ---------- */
.mi-pulse {
    animation: mi-pulse-anim 2.2s ease-in-out infinite;
}
@keyframes mi-pulse-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50%      { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

/* ---------- Gradient text shimmer (headings opt-in) ---------- */
.mi-shimmer {
    background: linear-gradient(
        90deg,
        var(--primary, #f59e0b) 0%,
        var(--primary-light, #fbbf24) 30%,
        #ffffff 50%,
        var(--primary-light, #fbbf24) 70%,
        var(--primary, #f59e0b) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mi-shimmer-anim 3.5s linear infinite;
}
@keyframes mi-shimmer-anim {
    to { background-position: 200% center; }
}

/* ---------- Page entrance ---------- */
.mi-page-in {
    animation: mi-page-in-anim 420ms var(--mi-ease) both;
}
@keyframes mi-page-in-anim {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Tab content fade ---------- */
.tab-content.active,
.admin-tab-content.active {
    animation: mi-tab-fade 300ms var(--mi-ease) both;
}
@keyframes mi-tab-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Inputs ---------- */
input, select, textarea {
    transition:
        border-color var(--mi-dur-fast) var(--mi-ease),
        box-shadow var(--mi-dur-fast) var(--mi-ease),
        background-color var(--mi-dur-fast) var(--mi-ease);
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* ---------- Links ---------- */
a {
    transition: color var(--mi-dur-fast) var(--mi-ease), opacity var(--mi-dur-fast) var(--mi-ease);
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .mi-reveal { opacity: 1; transform: none; }
}