/* ── Agile Automations – App Stylesheet ─────────────────────────────────── */
/* Works alongside Tailwind CDN. Custom utilities and animations live here. */

/* ── Base ─────────────────────────────────────────────────────────────────  */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Navbar states ────────────────────────────────────────────────────────  */
.nav-transparent { background: transparent; }
.nav-scrolled    {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07);
}

/* ── Scroll-triggered animation base classes ───────────────────────────── */
/* Elements start invisible; JS adds .is-visible when they scroll into view */

.animate-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-fade-in {
    opacity: 0;
    transition: opacity 0.45s ease;
}
.animate-fade-down {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Visible state (added by IntersectionObserver in agile.ts) */
.animate-fade-up.is-visible,
.animate-fade-in.is-visible,
.animate-fade-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid items (set via style="animation-delay: Xms") */
.animate-fade-up[style*="animation-delay"] {
    /* The delay is applied as a CSS variable through the style attribute in Blazor */
    transition-delay: var(--delay, 0ms);
}

/* ── Pulse animation for hero blobs ───────────────────────────────────────  */
@keyframes blobPulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(1.05); }
}
.animate-pulse { animation: blobPulse 4s ease-in-out infinite; }

/* ── Spin for loading indicators ─────────────────────────────────────────  */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.75s linear infinite; }

/* ── Line clamp utility ───────────────────────────────────────────────────  */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Blazor error UI ──────────────────────────────────────────────────────  */
#blazor-error-ui { display: none; }
#blazor-error-ui .dismiss { cursor: pointer; }

/* ── Custom range input styling ──────────────────────────────────────────  */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.25);
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    border: none;
}

/* ── Scrollbar hide utility ───────────────────────────────────────────────  */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }