/* Phase 8: calm editorial motion for Paper guide articles only. */
.poster-page--paper { --article-ease: cubic-bezier(.16, 1, .3, 1); }

.poster-page--paper .poster-article-header h1 { position: relative; }
.poster-page--paper .poster-article-header h1::after {
  display: block;
  width: min(7rem, 28vw);
  height: .2rem;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, var(--blog-primary), var(--blog-accent));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1050ms var(--article-ease) 420ms;
}

.poster-page--paper .poster-hero-media { position: relative; overflow: hidden; border-radius: .35rem; }
.poster-page--paper .poster-hero-media::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(110deg, #f5e2cf 0 48%, #fff5eb 52% 100%);
  content: "";
  pointer-events: none;
  transform: translateX(105%);
}

.poster-page--paper .poster-hero-img { transition: transform 1200ms var(--article-ease), filter 900ms ease; }
.poster-page--paper .poster-hero-media:hover .poster-hero-img { transform: scale(1.018); }

.poster-page--paper .poster-rich-text > h2,
.poster-page--paper .poster-rich-text > h3 { position: relative; }
.poster-page--paper .poster-rich-text > h2::before,
.poster-page--paper .poster-rich-text > h3::before {
  position: absolute;
  top: .12em;
  bottom: .12em;
  left: -1rem;
  width: .18rem;
  border-radius: 999px;
  background: var(--blog-primary);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 720ms var(--article-ease) 300ms;
}

.poster-page--paper .poster-rich-text blockquote { transition: box-shadow 360ms ease, transform 360ms ease; }
.poster-page--paper .poster-rich-text blockquote:hover { transform: translateX(.25rem); box-shadow: 0 .75rem 1.8rem rgb(84 42 18 / 8%); }
.poster-page--paper .poster-content-figure img { transition: transform 900ms var(--article-ease); }
.poster-page--paper .poster-content-figure:hover img { transform: scale(1.02); }

.poster-page--paper .poster-sidebar-item { opacity: 1; transition: opacity 700ms ease, transform 900ms var(--article-ease); }
.poster-page--paper .poster-sidebar-item h2 a { background-image: linear-gradient(var(--blog-primary), var(--blog-primary)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 .08rem; transition: color 220ms ease, background-size 450ms var(--article-ease); }
.poster-page--paper .poster-sidebar-item h2 a:hover { background-size: 100% .08rem; }

.poster-page--paper .poster-related-card { position: relative; }
.poster-page--paper .poster-related-card::after { position: absolute; inset: auto 0 0; height: .2rem; background: linear-gradient(90deg, var(--blog-primary), var(--blog-accent)); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--article-ease); }
.poster-page--paper .poster-related-card:hover::after { transform: scaleX(1); }
.poster-page--paper .poster-card-media img { transition: transform 900ms var(--article-ease); }

.paper-article-motion-ready [data-paper-article-reveal] { opacity: 0; transform: translateY(2rem); }
.paper-article-motion-ready [data-paper-article-reveal="meta"] { transform: translateY(-.8rem); transition: opacity 700ms ease, transform 900ms var(--article-ease); }
.paper-article-motion-ready [data-paper-article-reveal="title"] { transform: translateY(1.6rem); transition: opacity 900ms ease, transform 1100ms var(--article-ease); transition-delay: 120ms; }
.paper-article-motion-ready [data-paper-article-reveal="hero-media"] { transform: translateY(2rem) scale(.99); transition: opacity 900ms ease, transform 1200ms var(--article-ease); transition-delay: 220ms; }
.paper-article-motion-ready [data-paper-article-reveal="sidebar"] { transform: translateX(1.8rem); transition: opacity 800ms ease, transform 1050ms var(--article-ease); }
.paper-article-motion-ready [data-paper-article-reveal="reading"],
.paper-article-motion-ready [data-paper-article-reveal="reading-heading"] { transition: opacity 760ms ease, transform 980ms var(--article-ease); transition-delay: var(--article-reading-delay, 0ms); }
.paper-article-motion-ready [data-paper-article-reveal="reading-heading"] { transform: translateX(-1.25rem); }
.paper-article-motion-ready [data-paper-article-reveal="related-heading"],
.paper-article-motion-ready [data-paper-article-reveal="related-action"] { transition: opacity 800ms ease, transform 1000ms var(--article-ease); }
.paper-article-motion-ready [data-paper-article-reveal="related-card"] { transform: translateY(2.2rem) scale(.985); transition: opacity 760ms ease, transform 1000ms var(--article-ease), box-shadow 300ms ease; transition-delay: var(--article-card-delay, 0ms); }
.paper-article-motion-ready [data-paper-article-reveal].article-is-visible { opacity: 1; transform: none; }

.paper-article-motion-ready [data-paper-article-reveal="title"].article-is-visible h1::after { transform: scaleX(1); }
.paper-article-motion-ready [data-paper-article-reveal="hero-media"]::after { transform: translateX(0); }
.paper-article-motion-ready [data-paper-article-reveal="hero-media"].article-is-visible::after { animation: paper-article-curtain 1450ms var(--article-ease) 500ms both; }
.paper-article-motion-ready [data-paper-article-reveal="reading-heading"].article-is-visible::before { transform: scaleY(1); }

.paper-article-motion-ready [data-paper-article-reveal="sidebar"] .poster-sidebar-item { opacity: 0; transform: translateY(1rem); transition-delay: calc(300ms + var(--article-sidebar-delay, 0ms)); }
.paper-article-motion-ready [data-paper-article-reveal="sidebar"].article-is-visible .poster-sidebar-item { opacity: 1; transform: none; }

@keyframes paper-article-curtain { to { transform: translateX(105%); } }

@media (max-width: 63.999rem) {
  .paper-article-motion-ready [data-paper-article-reveal="sidebar"] { transform: translateY(1.5rem); }
  .paper-article-motion-ready [data-paper-article-reveal="sidebar"].article-is-visible { transform: none; }
}

@media (max-width: 35rem) {
  .poster-page--paper .poster-rich-text > h2::before,
  .poster-page--paper .poster-rich-text > h3::before { left: -.65rem; }
  .paper-article-motion-ready [data-paper-article-reveal="reading-heading"] { transform: translateY(1.4rem); }
  .paper-article-motion-ready [data-paper-article-reveal="reading-heading"].article-is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .poster-page--paper *,
  .poster-page--paper *::before,
  .poster-page--paper *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .paper-article-motion-ready [data-paper-article-reveal],
  .paper-article-motion-ready [data-paper-article-reveal="sidebar"] .poster-sidebar-item { opacity: 1; transform: none; }
  .poster-page--paper .poster-hero-media::after { display: none; }
}
