/**
 * TRDiscoverIndicator Component Styles
 *
 * Scroll indicator shown within hero sections to indicate more content.
 */

.tr-discover-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tr-hero-discover-arrow-gap);
    z-index: 1;
    width: 100%;
    margin-bottom: var(--tr-hero-discover-bottom-gap);
}

.tr-discover-indicator-arrow {
    animation: var(--tr-hero-discover-arrow-animation) var(--tr-hero-discover-arrow-animation-duration) ease-in-out infinite;
    width: 20px;
    height: 20px;
    display: block;
    color: var(--tr-hero-discover-arrow-color);
    opacity: var(--tr-hero-discover-arrow-opacity);
    flex-shrink: 0;
}

.tr-discover-indicator-label {
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-font-size);
    letter-spacing: var(--tr-header-button-tracking);
    text-transform: uppercase;
    color: var(--tr-hero-discover-text-color);
    white-space: nowrap;
    text-align: center;
}

@keyframes discover-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(4px);
    }
}