/* RAMIX polish: layout fixes + motion. Loaded last on account and public pages. */

/* ---------- Fixes ---------- */

/* Dashboard: grid columns sized by content made the mobile page ~2x wider than the screen. */
.dashboard-primary,
.dashboard-secondary > * ,
.dashboard-card {
    min-width: 0;
}
.dashboard-primary {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 760px) {
    .dashboard-secondary {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Releases list: fixed column minimums pushed the action buttons outside the card. */
.release-catalog-row {
    grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr) 190px 84px;
    column-gap: 16px;
}
@media (max-width: 1120px) {
    .release-catalog-row {
        grid-template-columns: 58px minmax(0, 1.3fr) minmax(0, 1fr) 168px 84px;
    }
}
@media (max-width: 768px) {
    .release-catalog-row {
        grid-template-columns: 56px minmax(0, 1fr) max-content;
    }
}
.release-catalog-row .status-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Chart axis labels were cut to "1…" — let them show in full, centred under the bar. */
.chart-label {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
}

/* Public header: the 260px actions column was narrower than RU/EN + two buttons,
   so the language switch covered the last menu item. */
.header-inner {
    grid-template-columns: 180px minmax(0, 1fr) auto;
    column-gap: 24px;
}
@media (max-width: 1180px) {
    .header-inner { grid-template-columns: 120px minmax(0, 1fr) auto; }
    .desktop-nav { gap: 22px; }
}


/* ---------- Motion ---------- */

@keyframes ramix-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes ramix-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes ramix-spin {
    to { transform: rotate(360deg); }
}
@keyframes ramix-shine {
    from { transform: translateX(-120%) skewX(-20deg); }
    to { transform: translateX(220%) skewX(-20deg); }
}

@media (prefers-reduced-motion: no-preference) {
    /* Account: cards rise in one after another on page load. */
    .account-main .stat-card,
    .account-main .dashboard-card,
    .account-main .side-card,
    .account-main .release-count-card,
    .account-main .release-catalog-row,
    .account-main .flow-card,
    .account-main .promo-row,
    .account-main .stats-kpi {
        animation: ramix-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--ramix-i, 0) * 45ms);
    }

    /* Chart bars grow from the baseline. */
    .listens-chart .chart-bar {
        transform-origin: bottom;
        animation: ramix-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--ramix-bar, 0) * 14ms);
    }

    /* Release covers: gentle lift and zoom on hover. */
    .release-card img,
    .catalog-cover img {
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .release-card:hover img,
    .release-catalog-row:hover .catalog-cover img {
        transform: scale(1.06);
    }
    .stat-card {
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(227, 123, 71, 0.45);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(227, 123, 71, 0.12);
    }

    /* Primary buttons: a light sweep on hover. */
    .button-primary,
    .button-hero,
    .flow-button-primary,
    .sidebar-create {
        position: relative;
        overflow: hidden;
    }
    .button-primary::before,
    .button-hero::before,
    .flow-button-primary::before,
    .sidebar-create::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
        transform: translateX(-120%) skewX(-20deg);
        pointer-events: none;
    }
    .button-primary:hover::before,
    .button-hero:hover::before,
    .flow-button-primary:hover::before,
    .sidebar-create:hover::before {
        animation: ramix-shine 0.75s ease;
    }

    /* Home: the hero disc slowly spins like a record. */
    .hero-disk img {
        animation: ramix-spin 38s linear infinite;
    }

    /* Home: sections fade up as they scroll into view (class toggled by ramix-motion.js). */
    .js-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--ramix-i, 0) * 70ms);
    }
    .js-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Settings: the username field (with a hint below) sat higher than its neighbours. */
.settings-grid { align-items: start; }

/* Balance history: status badges had no colour for these states. */
.balance-operation-list .status-completed { color: #3ddc84; background: rgba(61, 220, 132, 0.12); }
.balance-operation-list .status-processing,
.balance-operation-list .status-pending { color: #f3b23c; background: rgba(243, 178, 60, 0.12); }
.balance-operation-list .status-cancelled,
.balance-operation-list .status-rejected { color: #ef5350; background: rgba(239, 83, 80, 0.12); }

/* Releases list: keep meta labels on one line. */
.catalog-meta dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }