/* The site's thread (public/js/site-thread.js): under the active nav item, across the top edge while a page loads,
   along forum rows as they arrive, and the header's Resume chip. */

.site-thread-nav,
.site-thread-nav-knot {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), width 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.site-thread-nav {
    width: var(--thread-w, 0px);
    height: 2px;
    background: linear-gradient(90deg, rgba(242, 208, 138, 0), #f2d08a 35%, #fff3cf);
    box-shadow: 0 0 8px rgba(242, 208, 138, 0.55);
    transform: translate(var(--thread-x, 0px), var(--thread-y, 0px));
}
/* The knot trails the thread by 40 ms: a little tug. */
.site-thread-nav-knot {
    width: 10px;
    height: 10px;
    margin: -4px 0 0 -5px;
    background: var(--fate-knot-image) center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(242, 208, 138, 0.8));
    transform: translate(calc(var(--thread-x, 0px) + var(--thread-w, 0px)), var(--thread-y, 0px));
    transition-delay: 40ms;
}
.site-thread-nav.is-visible,
.site-thread-nav-knot.is-visible { opacity: 1; }
.site-thread-nav.is-instant,
.site-thread-nav-knot.is-instant { transition: none; }

/* A click to another page draws the thread across the top edge, holding at 85% until the next page paints. */
.site-thread-loader {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #d7ae58, #f2d08a 60%, #fff3cf);
    box-shadow: 0 0 8px rgba(242, 208, 138, 0.8);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}
.site-thread-loader.is-loading { opacity: 1; animation: site-thread-load 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes site-thread-load { from { transform: scaleX(0); } to { transform: scaleX(0.85); } }

/* Forum rows: a hairline thread draws along each row's top edge as it arrives. */
.has-card-thread::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(242, 208, 138, 0), rgba(242, 208, 138, 0.7) 25%, rgba(255, 243, 207, 0.85) 70%, rgba(242, 208, 138, 0));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) var(--card-thread-delay, 0ms);
    pointer-events: none;
}
.has-card-thread.is-card-thread::before { transform: scaleX(1); }

/* The header's Play button, when this browser already has a hero: "Resume · room", in the thread's gold. */
.player-navigation .public-nav-links > .public-nav-play.is-resume { border-color: rgba(242, 208, 138, 0.6); background: rgba(48, 38, 16, 0.85); color: #fff1cc; }
@media (max-width: 400px) {
    .site-resume-room { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-thread-nav,
    .site-thread-nav-knot { transition: opacity 0.2s ease; }
    .site-thread-loader.is-loading { animation: none; transform: scaleX(0.85); }
    .has-card-thread::before { transition: none; }
}