/* ============================================================
   TechPulse Pro — News Ticker Styles
   ============================================================ */

/* Ticker container is styled in components.css.
   This file handles animation keyframes + refinements. */

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Pause on hover */
.ticker__track:hover .ticker__inner,
.ticker__track:focus-within .ticker__inner {
    animation-play-state: paused;
}

/* Fade edges */
.ticker__track::before,
.ticker__track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 1;
    pointer-events: none;
}

.ticker__track::before {
    left: 0;
    background: linear-gradient(to right, var(--surface), transparent);
}

.ticker__track::after {
    right: 0;
    background: linear-gradient(to left, var(--surface), transparent);
}

[data-theme="dark"] .ticker__track::before {
    background: linear-gradient(to right, var(--color-dark-surface), transparent);
}

[data-theme="dark"] .ticker__track::after {
    background: linear-gradient(to left, var(--color-dark-surface), transparent);
}

/* Mobile: hide ticker on very small screens */
@media (max-width: 480px) {
    .topbar__ticker { display: none; }
}