/*
 * koi-home-ssr-smooth.css — Change C (Web) leftover: homepage SSR masonry "seam".
 *
 * Problem: B2 server-renders the two index feeds (#post-item-syy /
 * #post-item-new_art_main, both `.post-2`) as a 4-column FLEX-WRAP grid on first
 * paint (`.post-2 ul.b2_gap.grid{display:flex;flex-flow:wrap}` + inline
 * `li{width:25%}`). Then main.js's top-level `b2PackeryLoad()` wraps each grid in
 * `new Packery()`, which repositions every `<li>` to `position:absolute` and packs
 * them into independent masonry columns. The visible jump from flex-rows (items
 * bottom-aligned per row, uneven gaps) to packed columns (items slide up to fill
 * gaps) is the "tab/SSR seam" flash.
 *
 * Fix (no main.js touch): hold the SSR grid invisible until Packery has laid the
 * items out, then fade in — the user only ever sees the final masonry.
 * koi-home-ssr-smooth.js adds `.koi-grid-ready` once items are absolute-positioned.
 * A pure-CSS safety animation reveals the grid even if that JS never runs
 * (script blocked / error), so the feed can never stay permanently hidden.
 *
 * Enqueued ONLY on is_home()/is_front_page(), so `#primary-home .post-2 ...grid`
 * cannot affect archive/tag/search grids.
 */

#primary-home .post-2 ul.b2_gap.grid{
    opacity: 0;
    transition: opacity .22s ease;
    /* Failsafe: if the reveal JS never signals, un-hide anyway at 1.6s. */
    animation: koiHomeSsrSafetyReveal 1ms linear 1600ms forwards;
}

/* JS adds this the moment Packery has positioned the items -> smooth fade-in. */
#primary-home .post-2 ul.b2_gap.grid.koi-grid-ready{
    opacity: 1;
    animation: none;
}

@keyframes koiHomeSsrSafetyReveal{ to{ opacity: 1; } }