/* === Solo view === * Activated by `[data-view="solo"]` on . Only the most recently-prepended * card is visible, centered in the viewport. Cards fly in from the RIGHT, * outgoing cards fly out to the LEFT, with a brief empty moment in between. * Total transition time ≈ 1.6s. * * Driven entirely by CSS — no JS changes. The feed module still prepends a * card per event; the :first-child / :not(:first-child) selectors do the rest. */ [data-view="solo"] { overflow: hidden; } [data-view="solo"] #feed { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-top) + 96px) var(--sp-4) calc(var(--safe-bottom) + 120px); overflow: hidden; } [data-view="solo"] .feed__logo-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; /* Solo doesn't scroll — let the bar's own padding lift the logo clear of * the safe-area inset, matching feed view. */ padding: calc(var(--safe-top) + var(--sp-3)) var(--sp-4) var(--sp-3); } [data-view="solo"] .feed__list { position: relative; width: 100%; max-width: 480px; display: block; padding: 0; } /* Base: all items absolute, centered, ready to fly. The outgoing card uses * `transition` (animates to its exit state when it stops being :first-child). * The incoming card uses `animation` (with a delay so the outgoing card has * time to leave first). */ [data-view="solo"] .feed__list .feed__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; pointer-events: none; will-change: transform, opacity; /* outgoing slide */ transition: transform 520ms cubic-bezier(0.5, 0, 0.75, 0.2), opacity 520ms ease-in; } [data-view="solo"] .feed__list .feed__item > * { width: 100%; } /* Outgoing card — was :first-child, no longer is. Slides off to the LEFT. */ [data-view="solo"] .feed__list .feed__item:not(:first-child) { transform: translate3d(-115%, 0, 0) scale(0.92); opacity: 0; } /* Incoming card — newly-prepended :first-child. Animates in from the RIGHT * after a delay so the outgoing card has fully cleared the screen. * * Timeline within the ~1.6s transition window: * 0 – 520ms : outgoing card slides left (transition above) * 520 – 700ms : empty middle (~180ms of pure backdrop) * 700 – 1500ms: incoming card flies in from right (animation below) */ [data-view="solo"] .feed__list .feed__item:first-child { pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); opacity: 1; animation: solo-fly-in 800ms cubic-bezier(0.34, 1.18, 0.5, 1) 700ms backwards; } @keyframes solo-fly-in { 0% { transform: translate3d(115%, 0, 0) scale(0.94); opacity: 0; filter: blur(2px); } 35% { opacity: 1; filter: blur(0); } 70% { transform: translate3d(-2%, 0, 0) scale(1.01); } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); } } /* Cards in solo are never "stale" — the staleness fade is for the feed view. */ [data-view="solo"] .feed__item.feed__item--stale .card { opacity: 1 !important; filter: none; } [data-view="solo"] .feed__back-to-top { display: none !important; } /* Event progress bar */ [data-view="solo"] .solo-progress { position: fixed; left: 0; right: 0; bottom: calc(96px + var(--safe-bottom)); height: 3px; z-index: var(--z-toast); background: rgba(255, 255, 255, 0.08); pointer-events: none; } [data-view="solo"] .solo-progress__fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(var(--evt-progress, 0)); background: linear-gradient(90deg, var(--grad-active-1, var(--c-cyan)), var(--grad-active-3, var(--c-pink))); box-shadow: 0 0 14px -2px var(--grad-active-2, var(--c-cyan)); transition: transform 120ms linear; } .solo-progress { display: none; } [data-view="solo"] .solo-progress { display: block; } /* Reduced-motion fallback — no slide, no scale, no blur. Crossfade only. */ @media (prefers-reduced-motion: reduce) { [data-view="solo"] .feed__list .feed__item { transition: opacity 1ms !important; transform: none !important; } [data-view="solo"] .feed__list .feed__item:first-child { animation: none !important; opacity: 1; } [data-view="solo"] .feed__list .feed__item:not(:first-child) { opacity: 0; transform: none; } }