/* === Feed === */
/* Owned by Agent C. The vertical column that hosts content cards.
 * Newest card prepends just below a sticky logo bar. The previously
 * active card fades to 33% opacity (stale) ~3s after a new arrival,
 * and is restored to 100% when scrolled back into view.
 *
 * The feed is the only scrolling surface in the app — body itself is
 * locked, so the points counter, sim overlay, and gradient stage all
 * sit outside this scroll context. */

/* ── Scroll surface ────────────────────────────────────────────────── */

#feed {
  position: relative;
  z-index: var(--z-feed);

  /* Own the scroll. */
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;

  /* Padding: sides + top accounts for safe area + a little breathing room.
   * Bottom reserves space for the persistent points counter (~96px) plus
   * the iOS home indicator. */
  padding:
    calc(var(--safe-top) + var(--sp-5))
    var(--sp-4)
    calc(96px + var(--safe-bottom) + var(--sp-4));

  /* Hide the scrollbar — the cards are the affordance. */
  scrollbar-width: none;
}
#feed::-webkit-scrollbar { display: none; }

#feed[hidden] { display: none; }

/* ── Sticky logo bar ───────────────────────────────────────────────── */

.feed__logo-bar {
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);

  margin: 0 calc(var(--sp-4) * -1) var(--sp-4);
  padding: calc(var(--safe-top) + var(--sp-3)) var(--sp-4) var(--sp-3);

  color: var(--text-primary);
  pointer-events: none;
}

.feed__logo {
  height: 44px;
  width: auto;
  display: block;
  /* The SVG uses currentColor; white reads on every gradient. */
  color: var(--text-primary);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

/* ── Card list ─────────────────────────────────────────────────────── */

.feed__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Card entrance / staleness states ──────────────────────────────── */

/* Initial pre-animation state set on the wrapper before the next frame
 * flips it to .feed__item--in. Spring-out from above. */
.feed__item {
  opacity: 1;
  transform: none;
  transition:
    opacity 250ms var(--ease-smooth),
    transform 500ms var(--ease-spring);
  will-change: opacity, transform;
}

.feed__item--enter {
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
}

.feed__item--in {
  opacity: 1;
  transform: none;
  transition:
    opacity 500ms var(--ease-smooth),
    transform 500ms var(--ease-spring);
}

/* Stale: previously-active card fades back to make room for the new one. */
.feed__item--stale {
  opacity: 0.33;
  transition: opacity 350ms var(--ease-smooth);
}

/* Restored when scrolled back into view (≥60% intersection). */
.feed__item--restored {
  opacity: 1;
  transition: opacity 250ms var(--ease-smooth);
}

/* ── Back-to-top pill ──────────────────────────────────────────────── */

.feed__back-to-top {
  position: fixed;
  /* Sit just above the points counter (96px tall). */
  bottom: calc(96px + var(--safe-bottom) + var(--sp-4));
  left: 50%;

  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);

  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--letterspace-label);
  text-transform: uppercase;
  color: var(--text-primary);

  background: var(--surface-card-hi);
  border: 1px solid var(--border-card-hi);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);

  cursor: pointer;
  z-index: calc(var(--z-counter) - 1);

  /* Hidden default: pushed below + invisible. translateX needs to stay so
   * we keep horizontal centering when sliding up. */
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
  transition:
    opacity 250ms var(--ease-smooth),
    transform 350ms var(--ease-spring);
}

.feed__back-to-top__arrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-1px);
}

.feed__back-to-top--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Pulse when a new event lands while the user is scrolled away. */
.feed__back-to-top--pulse {
  animation: feed-back-to-top-pulse 600ms var(--ease-spring);
}

@keyframes feed-back-to-top-pulse {
  0%   { transform: translate(-50%, 0)    scale(1); }
  35%  { transform: translate(-50%, -6px) scale(1.06); }
  70%  { transform: translate(-50%, 0)    scale(0.98); }
  100% { transform: translate(-50%, 0)    scale(1); }
}

/* ── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #feed { scroll-behavior: auto; }

  .feed__item,
  .feed__item--in,
  .feed__item--enter,
  .feed__item--stale,
  .feed__item--restored {
    transition: opacity 1ms linear !important;
    transform: none !important;
    animation: none !important;
  }

  .feed__back-to-top { transition: opacity 1ms linear; }
  .feed__back-to-top--pulse { animation: none; }
}