/* =========================================================
   A2Z HR - Design Tokens & Animations
   Palette: Indigo #4338CA (primary) / Cyan #06B6D4 (accent)
   Type: Sora (display) / Inter (body) / JetBrains Mono (data)
   ========================================================= */

:root {
    --a2z-navy: #0B1220;
    --a2z-indigo: #4338CA;
    --a2z-indigo-light: #6366F1;
    --a2z-cyan: #06B6D4;
    --a2z-bg: #F7F8FC;
    --a2z-slate: #64748B;
    --a2z-success: #10B981;
    --a2z-warning: #F59E0B;
    --a2z-danger: #F43F5E;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--a2z-bg);
}

.font-display {
    font-family: 'Sora', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ---------- Animated gradient mesh background (landing hero) ---------- */
.mesh-bg {
    background:
        radial-gradient(circle at 15% 20%, rgba(67,56,202,0.35), transparent 40%),
        radial-gradient(circle at 85% 10%, rgba(6,182,212,0.30), transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(67,56,202,0.25), transparent 45%),
        var(--a2z-navy);
    background-size: 200% 200%;
    animation: meshShift 18s ease-in-out infinite;
}
@keyframes meshShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Fade / rise-in on load ---------- */
.rise-in {
    opacity: 0;
    transform: translateY(24px);
    animation: riseIn 0.8s cubic-bezier(.22,.68,0,1.01) forwards;
}
@keyframes riseIn {
    to { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .25s; }
.delay-3 { animation-delay: .4s; }
.delay-4 { animation-delay: .55s; }
.delay-5 { animation-delay: .7s; }

/* ---------- Floating cards (hero dashboard mockup) ---------- */
.float-card {
    animation: floatY 5s ease-in-out infinite;
}
.float-card.reverse { animation-direction: alternate-reverse; animation-delay: 1.2s; }
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ---------- Signature: License hierarchy pulse (Admin -> Reseller -> HR Owner) ---------- */
.pulse-node {
    animation: pulseNode 2.6s ease-in-out infinite;
}
.pulse-node.d2 { animation-delay: .5s; }
.pulse-node.d3 { animation-delay: 1s; }
@keyframes pulseNode {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6,182,212,0.45); }
    50% { box-shadow: 0 0 0 12px rgba(6,182,212,0); }
}

.flow-line {
    stroke-dasharray: 6 6;
    animation: dashMove 1.4s linear infinite;
}
@keyframes dashMove {
    to { stroke-dashoffset: -24; }
}

/* ---------- Scroll reveal (used with AOS-like manual observer) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Sidebar active glow ---------- */
.nav-active {
    position: relative;
    background: linear-gradient(90deg, rgba(67,56,202,0.12), transparent);
    border-left: 3px solid var(--a2z-cyan);
}

/* ---------- Table row hover ---------- */
.table-row:hover {
    background-color: rgba(67,56,202,0.04);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mesh-bg, .rise-in, .float-card, .pulse-node, .flow-line, .reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--a2z-cyan);
    outline-offset: 2px;
}