/* Feed feel: the double-tap heart, the cards that arrive while you scroll, and the
   skeletons that hold their place. Loaded after app.css so none of this restyles a card
   that is already on screen. */

.mtv-post__media { position: relative; touch-action: manipulation; }

.mtv-heartburst {
    position: absolute;
    z-index: 6;
    width: 0;
    height: 0;
    pointer-events: none;
}
.mtv-heartburst svg {
    position: absolute;
    left: -46px;
    top: -46px;
    width: 92px;
    height: 92px;
    fill: #fff;
    stroke: rgba(0, 0, 0, .12);
    stroke-width: .6;
    filter: drop-shadow(0 6px 18px rgba(9, 34, 56, .35));
    animation: mtv-heart-pop .92s cubic-bezier(.22, .68, 0, 1) forwards;
}
@keyframes mtv-heart-pop {
    0% { transform: scale(0) rotate(-12deg); opacity: 0; }
    22% { transform: scale(1.18) rotate(4deg); opacity: 1; }
    40% { transform: scale(1) rotate(0deg); opacity: 1; }
    70% { transform: scale(1) translateY(-6px); opacity: 1; }
    100% { transform: scale(.86) translateY(-46px); opacity: 0; }
}

/* Once the feed loads pages itself the numbered pager is only a no-JS fallback. */
.mtv-pagination--auto { display: none; }
.mtv-feed__sentinel { height: 1px; }

.mtv-post--arriving { animation: mtv-card-in .3s cubic-bezier(.22, .68, 0, 1) both; }
@keyframes mtv-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.mtv-skel {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0, 69, 116, .08);
}
.mtv-skel__head { display: flex; align-items: center; gap: 12px; }
.mtv-skel__avatar,
.mtv-skel__lines i,
.mtv-skel__media {
    display: block;
    background: linear-gradient(100deg, rgba(0, 69, 116, .07) 30%, rgba(0, 69, 116, .14) 50%, rgba(0, 69, 116, .07) 70%);
    background-size: 220% 100%;
    animation: mtv-skel-slide 1.25s linear infinite;
}
.mtv-skel__avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.mtv-skel__lines { flex: 1 1 auto; display: grid; gap: 8px; }
.mtv-skel__lines i { height: 10px; border-radius: 6px; }
.mtv-skel__lines i:first-child { width: 42%; }
.mtv-skel__lines i:last-child { width: 26%; }
.mtv-skel__media { margin-top: 16px; height: 240px; border-radius: 14px; }
@keyframes mtv-skel-slide {
    from { background-position: 120% 0; }
    to { background-position: -80% 0; }
}

.mtv-feed__retry {
    display: block;
    width: calc(100% - 40px);
    margin: 18px 20px;
    padding: 13px 16px;
    border: 1px solid rgba(0, 69, 116, .18);
    border-radius: 12px;
    background: transparent;
    color: var(--mtv-navy, #004574);
    font: 600 14px/1.4 var(--mtv-font-ui, inherit);
    cursor: pointer;
}
.mtv-feed__end {
    margin: 26px 20px 30px;
    text-align: center;
    color: rgba(0, 69, 116, .55);
    font: 600 13px/1.5 var(--mtv-font-ui, inherit);
}

:root[data-theme="dark"] .mtv-skel { border-bottom-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .mtv-skel__avatar,
:root[data-theme="dark"] .mtv-skel__lines i,
:root[data-theme="dark"] .mtv-skel__media {
    background: linear-gradient(100deg, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .06) 70%);
    background-size: 220% 100%;
}
:root[data-theme="dark"] .mtv-feed__retry { border-color: rgba(255, 255, 255, .2); color: #e8eef4; }
:root[data-theme="dark"] .mtv-feed__end { color: rgba(232, 238, 244, .55); }

@media (prefers-reduced-motion: reduce) {
    .mtv-heartburst svg,
    .mtv-post--arriving,
    .mtv-skel__avatar,
    .mtv-skel__lines i,
    .mtv-skel__media { animation: none; }
}