/* ═════════════════════════════════════════════════════════════════
   TDN MAGAZINE v3.4.0 — GLOBAL UPGRADE LAYER
   Cross-document view transitions, scroll-driven card reveals,
   and the Trending "hot" velocity badge.

   Everything here is progressive enhancement:
   • @view-transition and animation-timeline are wrapped in @supports
     and ignored by browsers that don't implement them.
   • All motion sits inside prefers-reduced-motion: no-preference.
   • Colors come exclusively from existing brand + semantic tokens —
     no new colors introduced.
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. CROSS-DOCUMENT VIEW TRANSITIONS
   Smooth fade between page navigations, plus a hero morph:
   the card image you click visually travels into the article's
   featured image (named at click time by view-transitions.js).
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

    @view-transition {
        navigation: auto;
    }

    /* Quick, editorial crossfade — never sluggish */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: .22s;
        animation-timing-function: ease;
    }

    /* Hero morph pair. The article side is named here in CSS;
       the listing side is named per-click in JS. */
    .tdn-article-featured-inner img {
        view-transition-name: tdn-article-hero;
    }

    ::view-transition-group(tdn-article-hero) {
        animation-duration: .3s;
        animation-timing-function: cubic-bezier(.22, .8, .26, .99);
    }

    /* Old/new hero snapshots: cover-fit so aspect-ratio changes
       morph cleanly instead of squashing. */
    ::view-transition-old(tdn-article-hero),
    ::view-transition-new(tdn-article-hero) {
        height: 100%;
        width: 100%;
        object-fit: cover;
        overflow: clip;
    }
}

/* ─────────────────────────────────────────────────────────
   2. SCROLL-DRIVEN CARD REVEALS
   Cards fade and lift in as they enter the viewport.
   CSS-only via animation-timeline: view() — zero JS, zero
   layout shift (opacity + transform only).
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {

        .tdn-spotlight-card,
        .tdn-river-item,
        .tdn-trending-card,
        .tdn-archive-card,
        .tdn-cat-sub-item {
            animation: tdn-rise-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        @keyframes tdn-rise-in {
            from {
                opacity: 0;
                transform: translateY(14px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
}

/* ─────────────────────────────────────────────────────────
   3. TRENDING "HOT" BADGE
   Gold velocity indicator on trending cards whose views/day
   crosses the threshold (see tdn_post_is_hot()).
   Uses existing --tdn-gold tokens only.
   ───────────────────────────────────────────────────────── */

.tdn-hot-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tdn-black);
    background: linear-gradient(135deg, var(--tdn-gold-lt) 0%, var(--tdn-gold) 100%);
    border-radius: var(--radius-full, 999px);
    box-shadow: 0 4px 14px var(--tdn-gold-glow);
    pointer-events: none;
}

.tdn-hot-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tdn-black);
    opacity: .85;
}

/* Trending thumbs need a positioning context for the badge.
   (.tdn-trending-thumb already has one in most layers; this
   guarantees it without disturbing existing rules.) */
.tdn-trending-thumb {
    position: relative;
}

@media (prefers-reduced-motion: no-preference) {
    .tdn-hot-badge::before {
        animation: tdn-hot-pulse 1.6s ease-in-out infinite;
    }

    @keyframes tdn-hot-pulse {
        0%, 100% { opacity: .85; transform: scale(1); }
        50%      { opacity: .45; transform: scale(.7); }
    }
}

/* Dark mode: gold badge already reads well on dark surfaces;
   just soften the glow so it doesn't bloom. */
[data-theme="dark"] .tdn-hot-badge {
    box-shadow: 0 4px 12px rgba(200, 146, 42, .28);
}