/**
 * HomeProp activity ticker -- stock-ticker-tape styling.
 *
 * Reads as a financial ticker tape: a dark full-bleed band with a continuous
 * horizontal crawl of metric "quotes" (label as the symbol, value as the price),
 * gold accents on-brand. All selectors are rooted at .hp-ticker to avoid the
 * bare-element CSS leak retired on the legal-page mu-plugins (DEFERRED_WORK #64).
 *
 * The band defaults to display:none; the client reveals it only when the honesty
 * gate passes (source live/mock with metrics). So if JS never runs, nothing shows.
 */

.hp-ticker {
    --hp-tk-bg: #212221;
    --hp-tk-gold: #EEB211;
    --hp-tk-label: #B2B3B2;
    --hp-tk-value: #FFFFFF;
    --hp-tk-rule: rgba(238, 178, 17, 0.35);

    display: none; /* fail closed; JS reveals on a passing honesty gate */
    /* Full-bleed: span the entire viewport width even when the [hp_ticker]
       shortcode sits inside a constrained, centered content column (the theme /
       Elementor content width). width:100vw + margin:calc(50% - 50vw) breaks the
       band out of its centered parent so it reads as an edge-to-edge divider /
       hero strip. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--hp-tk-bg);
    border-top: 2px solid var(--hp-tk-gold);
    border-bottom: 1px solid var(--hp-tk-rule);
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.hp-ticker[hidden] {
    display: none !important;
}

.hp-ticker *,
.hp-ticker *::before,
.hp-ticker *::after {
    box-sizing: border-box;
}

/* The crawling tape. Two identical groups sit side by side; translating the
 * track by -50% scrolls exactly one group width, so the loop is seamless. */
.hp-ticker__track {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation-name: hp-ticker-crawl;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 30s; /* JS overrides per content length */
}

.hp-ticker:hover .hp-ticker__track {
    animation-play-state: paused;
}

@keyframes hp-ticker-crawl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hp-ticker__group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* One "quote" on the tape. */
.hp-ticker__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.85em 1.5em;
    font-size: 0.95rem;
    position: relative;
}

/* Vertical hairline separators between quotes, ticker-tape style. */
.hp-ticker__item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.1em;
    width: 1px;
    background: var(--hp-tk-rule);
}

.hp-ticker__label {
    color: var(--hp-tk-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    font-size: 0.78rem;
}

.hp-ticker__value {
    color: var(--hp-tk-gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.01em;
}

/* prefers-reduced-motion: no crawl, no count-up. Render a static, wrapping
 * row centered in the band so every value stays readable. */
@media (prefers-reduced-motion: reduce) {
    .hp-ticker__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }
}

/* Tighter spacing on small screens. */
@media (max-width: 600px) {
    .hp-ticker__item {
        padding: 0.7em 1em;
        font-size: 0.9rem;
    }
    .hp-ticker__label {
        font-size: 0.72rem;
    }
}