/*
 * Card → Detail shared element transition.
 *
 * The list card itself grows from its real position into the reading surface,
 * so the reader keeps seeing one single object instead of "a new page".
 * Opening 430ms / closing 380ms, no overshoot, detail content enters while the
 * container is still expanding (never after it, that is where white frames
 * come from).
 */

.shared-card-backdrop {
  position: fixed;
  z-index: 900;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 430ms ease;
}

.shared-card-backdrop.is-open { opacity: 1; }

.shared-card {
  --sc-open-duration: 430ms;
  --sc-open-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sc-radius-ease: cubic-bezier(0.55, 0.06, 0.3, 1);
  position: fixed;
  z-index: 1000;
  top: var(--sc-top);
  left: var(--sc-left);
  width: var(--sc-width);
  height: var(--sc-height);
  overflow: hidden;
  border-radius: var(--sc-radius);
  /* Starts as the tapped card (same fill, same shadow) so nothing pops. */
  background: var(--card);
  box-shadow: var(--shadow);
  will-change: top, left, width, height, border-radius;
  transition:
    top var(--sc-open-duration) var(--sc-open-ease),
    left var(--sc-open-duration) var(--sc-open-ease),
    width var(--sc-open-duration) var(--sc-open-ease),
    height var(--sc-open-duration) var(--sc-open-ease),
    border-radius var(--sc-open-duration) var(--sc-radius-ease),
    box-shadow 250ms ease;
}

.shared-card.is-open {
  top: 0;
  left: 0;
  width: var(--sc-viewport-width);
  height: var(--sc-viewport-height);
  border-radius: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.shared-card.is-settled { will-change: auto; }

/* Closing is a little more direct than opening. */
.shared-card.is-closing {
  transition-duration: 380ms;
  transition-timing-function: cubic-bezier(0.32, 0, 0.2, 1);
}

/* One-frame viewport sync (rotation, URL bar) without animating geometry. */
.shared-card.is-static { transition: none !important; }
.shared-card:focus { outline: none; }

.shared-card-source {
  /*
   * Pinned to the viewport, not to the container: the tapped card has to stay
   * exactly where the finger was while the reading surface grows around it.
   * (A fixed child is not clipped by the container, and it paints above the
   * container background but below the detail layer.)
   */
  position: fixed;
  top: var(--sc-source-top);
  left: var(--sc-source-left);
  width: var(--sc-source-width);
  height: var(--sc-source-height);
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  /* Own layer: the card copy is rastered once and only faded afterwards. */
  will-change: opacity;
  transition: opacity 140ms ease 70ms;
}

.shared-card.is-open .shared-card-source { opacity: 0; }

.shared-card.is-closing .shared-card-source {
  opacity: 1;
  transition-duration: 160ms;
  transition-delay: 70ms;
}

.shared-card-source .story-card {
  height: 100%;
  margin: 0;
  animation: none !important;
  box-shadow: none;
}

/*
 * The reading surface is laid out once at its final size and clipped by the
 * growing container: no reflow, no text distortion while the card expands.
 */
.shared-card-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sc-viewport-width);
  height: var(--sc-viewport-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  opacity: 0;
  /*
   * Own layer as well. Clipping a rastered layer is a compositor job, so the
   * growing container never re-rasterizes the reading surface (text included).
   */
  will-change: transform, opacity;
  transition: opacity 160ms ease 80ms;
}

.shared-card.is-open .shared-card-detail { opacity: 1; }

/* Closing: the reading surface starts leaving immediately. */
.shared-card.is-closing .shared-card-detail {
  transition-duration: 150ms;
  transition-delay: 0ms;
}

.shared-card-detail .discussion-story,
.shared-card-detail .discussion-heading,
.shared-card-detail .comment-list {
  transition-property: opacity, transform;
  transition-duration: 220ms;
  transition-timing-function: ease;
}

/* Weak stagger (20–50ms apart): readable, never a "playing animation" feel. */
.shared-card-detail .discussion-story,
.shared-card-detail .discussion-heading,
.shared-card-detail .comment-list {
  opacity: 0;
  transform: translateY(10px);
  transition-duration: 180ms, 240ms;
  transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 100ms;
}

.shared-card-detail .discussion-heading { transition-delay: 150ms; }
.shared-card-detail .comment-list { transition-delay: 180ms; }

.shared-card.is-open .shared-card-detail .discussion-story,
.shared-card.is-open .shared-card-detail .discussion-heading,
.shared-card.is-open .shared-card-detail .comment-list {
  opacity: 1;
  transform: none;
}

/* Closing: fade only, right away, no stagger. */
.shared-card.is-closing .shared-card-detail .discussion-story,
.shared-card.is-closing .shared-card-detail .discussion-heading,
.shared-card.is-closing .shared-card-detail .comment-list {
  transform: none;
  transition-duration: 150ms;
  transition-delay: 0ms;
}

.shared-card-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
  padding: 7px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  opacity: 0;
  transition: opacity 160ms ease 100ms, background 200ms ease;
}

.shared-card.is-settled .shared-card-nav {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px);
}

.shared-card.is-open .shared-card-nav { opacity: 1; }

.shared-card-nav-actions { display: flex; align-items: center; gap: 4px; }
.shared-card-nav .icon-button { width: 42px; height: 42px; }

.shared-card-close {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 140ms ease 130ms, transform 200ms cubic-bezier(0.22, 1, 0.36, 1) 130ms;
}

.shared-card.is-open .shared-card-close { opacity: 1; transform: none; }

.shared-card.is-closing .shared-card-nav,
.shared-card.is-closing .shared-card-close {
  opacity: 0;
  transform: none;
  transition-duration: 120ms;
  transition-delay: 0ms;
}

.shared-card-main { min-height: 100%; }

.shared-card .discussion-error { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .shared-card-nav { min-height: 52px; }
  .shared-card-nav .shared-card-theme { display: none; }
  .shared-card-main { padding: 14px 11px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .shared-card.is-open .shared-card-detail,
  .shared-card.is-closing .shared-card-detail {
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }
}