/* bento.css — Bento dashboard grid: parallax viewport, cards, payments, salary, churn, schedule, analytics, notifications, groups, chat, homework, funnel, revenue, integrations, security */

/* ═══ Bento Dashboard — Parallax Viewport ═══ */
.bd-parallax {
    height: 520px;
    overflow: hidden;
    border-radius: 28px;
    position: relative;
    margin-top: 2.5rem;
    background: linear-gradient(145deg, #f4f5fa 0%, #eceef5 100%);
    border: 1px solid rgba(0,0,0,0.07);
}

/* Fade edges */
.bd-parallax::before,
.bd-parallax::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}
.bd-parallax::before {
    top: 0;
    background: linear-gradient(to bottom, #f4f5fa, transparent);
}
.bd-parallax::after {
    bottom: 0;
    background: linear-gradient(to top, #eceef5, transparent);
}

.bd-parallax .bd {
    transform: rotate(-12deg) scale(0.82);
    transform-origin: center center;
    padding: 3rem;
    will-change: transform;
}

@media (max-width: 900px) {
    .bd-parallax {
        height: 380px;
        border-radius: 20px;
    }
    .bd-parallax .bd {
        width: 1100px;
        transform-origin: top left;
        transform: rotate(-12deg) scale(0.38);
        padding: 2rem;
        margin-left: -40px;
    }
}

@media (max-width: 600px) {
    .bd-parallax {
        height: 300px;
        border-radius: 16px;
    }
    .bd-parallax .bd {
        width: 1100px;
        transform-origin: top left;
        transform: rotate(-12deg) scale(0.32);
        padding: 2rem;
        margin-left: -20px;
    }
}

/* ═══ Bento Dashboard ═══ */
.bd { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.bd__card { background:white; border-radius:20px; padding:1.5rem; border:1px solid rgba(0,0,0,0.06); overflow:hidden; position:relative; transition:all 0.5s cubic-bezier(0.4,0,0.2,1); }
.bd__card::after { content:''; position:absolute; inset:0; border-radius:20px; box-shadow:0 0 0 0 rgba(237,83,138,0); transition:box-shadow 0.5s; pointer-events:none; }
.bd__card.bd--visible { animation:cardEnter 0.6s ease both; }
.bd-parallax .bd__card { opacity:1; }
.bd-parallax .bd__card.bd--visible { animation:none; }
.bd__card:hover::after { box-shadow:0 20px 50px rgba(0,0,0,0.08); }
.bd__card:hover { transform:translateY(-4px); border-color:rgba(237,83,138,0.12); }
@keyframes cardEnter { from{opacity:0;transform:translateY(30px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.bd__card--w2 { grid-column:span 2; }
.bd__card h4 { font-size:1rem; font-weight:700; margin-bottom:0.25rem; }
.bd__card > p { font-size:0.8rem; color:var(--text-light); margin-bottom:1rem; line-height:1.4; }
.bd__scene { font-size:0.8rem; }

/* Payments */
.bd__pay-item { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; border-bottom:1px solid rgba(0,0,0,0.04); opacity:0; transform:translateX(-15px); transition:all 0.4s ease; }
.bd--visible .bd__pay-item { opacity:1; transform:translateX(0); }
.bd--visible .bd__pay-item:nth-child(1){transition-delay:0.1s} .bd--visible .bd__pay-item:nth-child(2){transition-delay:0.2s} .bd--visible .bd__pay-item:nth-child(3){transition-delay:0.3s} .bd--visible .bd__pay-item:nth-child(4){transition-delay:0.4s} .bd--visible .bd__pay-item:nth-child(5){transition-delay:0.6s}
.bd__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bd__pay-name { font-weight:600; } .bd__pay-desc { flex:1; color:var(--text-light); font-size:0.75rem; }
.bd__tag { margin-left:auto; font-size:0.68rem; font-weight:600; padding:0.2rem 0.55rem; border-radius:5px; }
.bd__tag--g{color:#059669;background:#d1fae5} .bd__tag--b{color:#2563eb;background:#dbeafe} .bd__tag--y{color:#d97706;background:#fef3c7}

/* Salary */
.bd__sal-row { display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid rgba(0,0,0,0.04); opacity:0; transition:all 0.4s ease; }
.bd--visible .bd__sal-row{opacity:1} .bd--visible .bd__sal-row:nth-child(1){transition-delay:0.15s} .bd--visible .bd__sal-row:nth-child(2){transition-delay:0.25s} .bd--visible .bd__sal-row:nth-child(3){transition-delay:0.35s}
.bd__sal-row span{color:var(--text-light)} .bd__sal-num{font-weight:700;font-variant-numeric:tabular-nums}
.bd__sal-total { padding-top:0.6rem; margin-top:0.3rem; font-size:0.85rem; border-top:2px solid rgba(0,0,0,0.06); opacity:0; transition:all 0.5s 0.5s ease; }
.bd--visible .bd__sal-total{opacity:1} .bd__sal-total strong{color:var(--primary);font-size:1.1rem}

/* Churn */
.bd__churn-ring { width:80px; height:80px; margin:0 auto 0.75rem; border-radius:50%; background:conic-gradient(#34d399 0% 84%,#fee2e2 84% 100%); display:flex; align-items:center; justify-content:center; position:relative; }
.bd__churn-ring::before { content:'84%'; position:absolute; width:60px; height:60px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:#059669; }
.bd__churn-alert { display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.6rem; background:#fee2e2; border-radius:8px; font-size:0.72rem; color:#dc2626; margin-top:0.5rem; opacity:0; transition:all 0.4s 0.5s ease; }
.bd--visible .bd__churn-alert{opacity:1}

/* Hidden Risk (churn mini-case) */
.bd__hidden-risk { font-size:0.78rem; }
.bd__risk-row { display:flex; align-items:center; justify-content:space-between; padding:0.35rem 0.5rem; background:#f0fdf4; border-radius:8px; margin-bottom:0.35rem; }
.bd__risk-name { font-weight:600; font-size:0.78rem; }
.bd__risk-metrics { display:flex; gap:0.25rem; }
.bd__risk-ml { display:flex; align-items:center; gap:0.3rem; padding:0.35rem 0.5rem; background:#fef2f2; border-radius:8px; font-size:0.72rem; opacity:0; transition:all 0.5s 0.5s ease; }
.bd--visible .bd__risk-ml { opacity:1; }

/* Schedule */
.bd__sch-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.45rem; }
.bd__sch-t { font-size:0.7rem; color:var(--text-light); width:32px; }
.bd__sch-bar { height:26px; border-radius:8px; display:flex; align-items:center; padding-left:0.5rem; font-size:0.68rem; font-weight:600; width:0; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); }
.bd--visible .bd__sch-bar{width:var(--w)}

/* Analytics */
.bd__bars { display:flex; align-items:flex-end; gap:4px; height:80px; }
.bd__bar { flex:1; border-radius:4px 4px 0 0; background:var(--primary-pale); height:0; transition:height 0.6s cubic-bezier(0.4,0,0.2,1); }
.bd--visible .bd__bar{height:var(--h)} .bd--visible .bd__bar:nth-child(1){transition-delay:0.1s} .bd--visible .bd__bar:nth-child(2){transition-delay:0.15s} .bd--visible .bd__bar:nth-child(3){transition-delay:0.2s} .bd--visible .bd__bar:nth-child(4){transition-delay:0.25s} .bd--visible .bd__bar:nth-child(5){transition-delay:0.3s} .bd--visible .bd__bar:nth-child(6){transition-delay:0.35s} .bd--visible .bd__bar:nth-child(7){transition-delay:0.4s}
.bd__bar--hot{background:var(--primary)}
.bd__chart-label { text-align:right; margin-top:0.4rem; font-size:0.75rem; font-weight:700; color:#059669; opacity:0; transition:opacity 0.4s 0.7s; }
.bd--visible .bd__chart-label{opacity:1}

/* Notifications */
.bd__notif { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.85rem; background:#f9fafb; border-radius:10px; margin-bottom:0.5rem; transform:translateX(-30px); opacity:0; transition:all 0.5s cubic-bezier(0.4,0,0.2,1); }
.bd--visible .bd__notif:nth-child(1){opacity:1;transform:translateX(0);transition-delay:0.1s} .bd--visible .bd__notif:nth-child(2){opacity:1;transform:translateX(0);transition-delay:0.25s} .bd--visible .bd__notif:nth-child(3){opacity:1;transform:translateX(0);transition-delay:0.4s} .bd--visible .bd__notif:nth-child(4){opacity:1;transform:translateX(0);transition-delay:0.55s}
.bd__notif-icon{font-size:1.1rem;display:flex;align-items:center} .bd__notif-text{flex:1;font-size:0.8rem} .bd__notif-to{font-size:0.68rem;color:var(--text-light);white-space:nowrap}

/* Groups */
.bd__group { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; border-bottom:1px solid rgba(0,0,0,0.04); opacity:0; transition:all 0.4s ease; }
.bd--visible .bd__group{opacity:1} .bd--visible .bd__group:nth-child(1){transition-delay:0.1s} .bd--visible .bd__group:nth-child(2){transition-delay:0.2s} .bd--visible .bd__group:nth-child(3){transition-delay:0.3s}
.bd__group-color{width:4px;height:28px;border-radius:2px;flex-shrink:0} .bd__group-name{font-weight:600;font-size:0.82rem} .bd__group-info{font-size:0.7rem;color:var(--text-light)} .bd__group-count{font-weight:700;font-size:0.85rem;margin-left:auto}

/* Chat */
.bd__chat { display:flex; gap:0.5rem; margin-bottom:0.6rem; max-width:85%; opacity:0; transform:translateY(10px); transition:all 0.4s ease; }
.bd__chat--right{margin-left:auto;flex-direction:row-reverse;max-width:75%}
.bd--visible .bd__chat{opacity:1;transform:translateY(0)} .bd--visible .bd__chat:nth-child(1){transition-delay:0.1s} .bd--visible .bd__chat:nth-child(2){transition-delay:0.3s} .bd--visible .bd__chat:nth-child(3){transition-delay:0.5s}
.bd__chat-ava{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--primary-pale)}
.bd__chat-msg{padding:0.45rem 0.7rem;border-radius:12px;font-size:0.75rem;line-height:1.4;background:#f3f4f6}
.bd__chat--right .bd__chat-msg{background:var(--primary-pale)}

/* Homework */
.bd__hw { padding:0.5rem 0.75rem; background:#f9fafb; border-radius:10px; margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; opacity:0; transform:scale(0.95); transition:all 0.4s ease; }
.bd--visible .bd__hw{opacity:1;transform:scale(1)} .bd--visible .bd__hw:nth-child(1){transition-delay:0.1s} .bd--visible .bd__hw:nth-child(2){transition-delay:0.25s} .bd--visible .bd__hw:nth-child(3){transition-delay:0.4s}
.bd__hw-icon{display:flex;flex-shrink:0} .bd__hw-text{flex:1;font-size:0.78rem} .bd__hw-badge{font-size:0.65rem;font-weight:600;padding:0.15rem 0.4rem;border-radius:4px}

/* Funnel */
.bd__funnel{display:flex;flex-direction:column;align-items:center;gap:0.3rem}
.bd__funnel-step{display:flex;align-items:center;justify-content:center;padding:0.5rem;border-radius:8px;font-size:0.78rem;font-weight:500;width:100%;opacity:0;transition:all 0.5s ease}
.bd--visible .bd__funnel-step{opacity:1} .bd--visible .bd__funnel-step:nth-child(1){transition-delay:0.1s} .bd--visible .bd__funnel-step:nth-child(3){transition-delay:0.25s} .bd--visible .bd__funnel-step:nth-child(5){transition-delay:0.4s} .bd--visible .bd__funnel-step:nth-child(7){transition-delay:0.55s}
.bd__funnel-arrow{color:var(--text-light);opacity:0;transition:opacity 0.3s 0.7s;display:flex} .bd--visible .bd__funnel-arrow{opacity:0.5}

/* Revenue */
.bd__rev-item{display:flex;align-items:center;gap:0.5rem;padding:0.45rem 0;opacity:0;transition:all 0.4s ease}
.bd--visible .bd__rev-item{opacity:1} .bd--visible .bd__rev-item:nth-child(1){transition-delay:0.1s} .bd--visible .bd__rev-item:nth-child(2){transition-delay:0.2s} .bd--visible .bd__rev-item:nth-child(3){transition-delay:0.3s}
.bd__rev-icon{display:flex;flex-shrink:0} .bd__rev-name{flex:1;font-size:0.82rem} .bd__rev-sum{font-weight:700;font-size:0.85rem;color:#059669}

/* Integrations */
.bd__integ{display:inline-block;padding:0.4rem 0.85rem;background:#f3f4f6;border-radius:8px;font-size:0.78rem;font-weight:500;opacity:0;transform:scale(0.9);transition:all 0.3s ease}
.bd--visible .bd__integ{opacity:1;transform:scale(1)} .bd--visible .bd__integ:nth-child(1){transition-delay:0.05s} .bd--visible .bd__integ:nth-child(2){transition-delay:0.1s} .bd--visible .bd__integ:nth-child(3){transition-delay:0.15s} .bd--visible .bd__integ:nth-child(4){transition-delay:0.2s} .bd--visible .bd__integ:nth-child(5){transition-delay:0.25s} .bd--visible .bd__integ:nth-child(6){transition-delay:0.3s} .bd--visible .bd__integ:nth-child(7){transition-delay:0.35s} .bd--visible .bd__integ:nth-child(8){transition-delay:0.4s}
.bd__integ:hover{background:var(--primary-pale);color:var(--primary)}

/* Security */
.bd__sec-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;font-size:0.82rem;opacity:0;transition:all 0.4s ease}
.bd--visible .bd__sec-row{opacity:1} .bd--visible .bd__sec-row:nth-child(1){transition-delay:0.1s} .bd--visible .bd__sec-row:nth-child(2){transition-delay:0.2s} .bd--visible .bd__sec-row:nth-child(3){transition-delay:0.3s}