/* Generated by tools/build_css.py from assets/css. Edit the sources there, not this file. */
/* Home page (templates/fileapp/index.html): hero animation, actions and the recent payouts ticker. */

.home {
    display: grid;
    gap: 2.5rem;
    width: 100%;
    max-width: 880px;
    text-align: center;
}

/* Hero illustration (motion lives in js/home.js). Only white tints, so it stays in the palette. */
.hero-flow {
    display: block;
    width: min(540px, 100%);
    height: auto;
    margin: 0 auto 0.75rem;
    overflow: visible;
}

.hero-flow__route { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 8; }
.hero-flow__trail { fill: none; stroke: var(--color-white); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.hero-flow__card { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; }
.hero-flow__person { fill: rgba(255, 255, 255, 0.92); }
.hero-flow__halo { fill: var(--color-white); opacity: 0.14; }
.hero-flow__ring { fill: none; stroke: var(--color-white); stroke-width: 1.5; opacity: 0; }
.hero-flow__file, .hero-flow__coin, .hero-flow__check, .hero-flow__reward { opacity: 0; }
.hero-flow__file path { fill: var(--color-white); }
.hero-flow__file .hero-flow__file-fold { fill: none; stroke: var(--color-brand); stroke-width: 1.5; stroke-linejoin: round; }
.hero-flow__coin circle { fill: var(--color-white); }
.hero-flow__coin text { fill: var(--color-brand); font: 600 12.5px var(--font-sans); }
.hero-flow__check circle { fill: var(--color-white); }
.hero-flow__check path { fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-flow__reward { fill: var(--color-white); font: 17px var(--font-sans); }

.home__title { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }

.home__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Recent payouts: one quiet line under the actions, linking to the payouts page. */
.payout-ticker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    justify-self: center;
    max-width: 100%;
    margin-top: -0.75rem;
    padding: 0.45rem 0.6rem 0.45rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-white);
    font-size: 0.92rem;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}

.payout-ticker:hover { background: var(--color-surface); border-color: var(--color-border-strong); }

.payout-ticker__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-white);
}

.payout-ticker__pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-white);
    animation: payout-pulse 2s ease-out infinite;
}

@keyframes payout-pulse {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(2.8); opacity: 0; }
}

.payout-ticker__label { color: var(--color-text-muted); white-space: nowrap; }

/* Every item sits in the same cell, so the pill is as wide as the longest one and never jumps. */
.payout-ticker__items { display: grid; min-width: 0; }

.payout-ticker__item {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.payout-ticker__item.is-active { opacity: 1; visibility: visible; transform: none; }
.payout-ticker__item strong { font-weight: 400; }
.payout-ticker__item .coin-mark--sm { margin-right: 0; }
.payout-ticker__meta { overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; }

.payout-ticker__more {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.3rem 0.2rem 0.75rem;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.payout-ticker:hover .payout-ticker__more { color: var(--color-white); }

@media (max-width: 520px) {
    .payout-ticker { gap: 0.55rem; font-size: 0.88rem; }
    .payout-ticker__more { padding: 0; border-left: 0; }
    .payout-ticker__more-text { display: none; }
}