/* smooth.css — fluid page-load animations & CLS prevention
   Linked globally from base.php.
   Body reveal is handled by an inline critical style + inline script in base.php.
   ─────────────────────────────────────────────────────────── */

/* ── Feed-item entrance: staggered slide-up when items enter the DOM ─────── */
@keyframes feedIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feed-item {
    animation: feedIn 0.28s ease-out both;
}
.feed-item:nth-child(1)  { animation-delay:   0ms; }
.feed-item:nth-child(2)  { animation-delay:  35ms; }
.feed-item:nth-child(3)  { animation-delay:  70ms; }
.feed-item:nth-child(4)  { animation-delay: 105ms; }
.feed-item:nth-child(5)  { animation-delay: 140ms; }
.feed-item:nth-child(6)  { animation-delay: 175ms; }
.feed-item:nth-child(7)  { animation-delay: 210ms; }
.feed-item:nth-child(8)  { animation-delay: 245ms; }
.feed-item:nth-child(9)  { animation-delay: 280ms; }
.feed-item:nth-child(10) { animation-delay: 315ms; }
.feed-item:nth-child(n+11) { animation-delay: 340ms; }

/* ── Hero skeleton: reserve the exact space the live cards occupy ─────────── */

/* Desktop (lg+): hero card is h-[30rem] */
.hero-sk-main {
    height: 30rem;
    min-height: 20rem;
}

.hero-sk-sidebar {
    height: 30rem;
    min-height: 20rem;
    opacity: 0.6;
}

/* Mobile / tablet: hero is 70vh — cap at 420px so it doesn't dominate */
@media (max-width: 1023px) {
    .hero-sk-main {
        height: 70vh;
        max-height: 420px;
        min-height: 200px;
    }
    .hero-sk-sidebar {
        height: 14rem;
        min-height: 10rem;
    }
    /* Also cap the live card to match the skeleton */
    .main-featured {
        height: 70vh !important;
        max-height: 420px !important;
        min-height: 200px !important;
    }
}

/* ── Hero x-transition enter-start class ────────────────────────────────── */
.hero-enter-start {
    opacity: 0;
    transform: translateY(6px) scale(0.993);
}

/* ── Circle card entrance (used in circles tab) ─────────────────────────── */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.circle-card {
    animation: cardIn 0.3s ease-out both;
}
.circle-card:nth-child(1) { animation-delay:  0ms; }
.circle-card:nth-child(2) { animation-delay: 50ms; }
.circle-card:nth-child(3) { animation-delay:100ms; }
.circle-card:nth-child(4) { animation-delay:150ms; }
.circle-card:nth-child(n+5) { animation-delay: 180ms; }

/* ── Mobile-specific: tighten up entrance distance ──────────────────────── */
@media (max-width: 640px) {
    .feed-item {
        /* Shorter translateY feels snappier on small screens */
        animation-name: feedInMobile;
        animation-duration: 0.22s;
    }
    @keyframes feedInMobile {
        from { opacity: 0; transform: translateY(5px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Tighter stagger on mobile so all items appear quickly */
    .feed-item:nth-child(1)  { animation-delay:  0ms; }
    .feed-item:nth-child(2)  { animation-delay: 25ms; }
    .feed-item:nth-child(3)  { animation-delay: 50ms; }
    .feed-item:nth-child(4)  { animation-delay: 75ms; }
    .feed-item:nth-child(5)  { animation-delay:100ms; }
    .feed-item:nth-child(n+6){ animation-delay:120ms; }
}

/* ── Respect user's motion preference ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .feed-item,
    .circle-card,
    .animate-fade-in,
    .floating-orb,
    .trending-fire {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .feed-item:nth-child(n),
    .circle-card:nth-child(n) {
        animation-delay: 0ms !important;
    }
    .hero-enter-start {
        opacity: 1 !important;
        transform: none !important;
    }
}