/* Shared title effects (reusable across categories) */

:root {
    --tr-title-accent: #6366f1;
    --tr-title-hover-bg: rgba(99, 102, 241, 0.07);
    --tr-title-hover-bg-border: rgba(99, 102, 241, 0.12);
    --tr-title-hover-bg-shadow: rgba(99, 102, 241, 0.10);
}

.tr-title-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-title-compact {
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 700;
    color: #111827;
}

.tr-title-lg {
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
}

.tr-news-title-lg {
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

.tr-title-hover-accent {
    transition: color 0.15s ease;
}

.tr-title-hover-accent:hover {
    color: var(--tr-title-accent);
}

.tr-title-hover-bg {
    display: inline-block;
    max-width: 100%;
    position: relative;
    border-radius: 10px;
    padding: 2px 10px;
    background: transparent;
    border: 1px solid transparent;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.tr-title-hover-bg:hover {
    background-color: var(--tr-title-hover-bg);
    border-color: var(--tr-title-hover-bg-border);
    box-shadow: 0 2px 10px var(--tr-title-hover-bg-shadow);
    transform: translateY(-1px);
}

.tr-hover-glass {
    position: relative;
    border-radius: 10px;
    padding: 2px 10px;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.tr-hover-glass:hover {
    background-color: var(--tr-title-hover-bg);
    box-shadow: 0 2px 10px var(--tr-title-hover-bg-shadow);
}

.tr-title-hover-wave {
    overflow: hidden;
}

.tr-title-hover-wave::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 30%,
        rgba(255, 255, 255, 0.20) 46%,
        rgba(255, 255, 255, 0.36) 52%,
        rgba(255, 255, 255, 0.20) 58%,
        rgba(255, 255, 255, 0.00) 74%,
        transparent 100%
    );
    transform: translateX(-130%) skewX(-12deg);
    opacity: 0;
    filter: blur(5px);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.tr-title-hover-wave:hover::after {
    opacity: 0.85;
    animation: tr-title-wave-sweep 0.78s ease-out;
}

@keyframes tr-title-wave-sweep {
    from {
        transform: translateX(-130%) skewX(-12deg);
    }
    to {
        transform: translateX(130%) skewX(-12deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tr-title-hover-bg {
        transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        transform: none;
    }

    .tr-title-hover-bg:hover {
        transform: none;
    }

    .tr-title-hover-wave:hover::after {
        animation: none;
        transform: none;
        opacity: 0;
    }
}