/* Phase 7: editorial motion for the Paper buying-guides index. */
.paper-guides { overflow: clip; padding-top: 0; }

.paper-guides__hero {
  position: relative;
  isolation: isolate;
  margin: 1rem 0 3.25rem;
  padding: clamp(3rem, 7vw, 5.75rem) clamp(1.25rem, 6vw, 5rem);
  overflow: hidden;
  border-radius: 1.1rem;
  color: #fff8f2;
  background:
    radial-gradient(circle at 85% 10%, rgb(255 175 1 / 27%), transparent 28%),
    linear-gradient(132deg, #29150d 0%, #562810 62%, #7a310e 100%);
  box-shadow: 0 2rem 4.5rem rgb(72 34 14 / 16%);
}

.paper-guides__hero::before,
.paper-guides__hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  content: "";
}

.paper-guides__hero::before { width: 21rem; height: 21rem; top: -11rem; right: -4rem; }
.paper-guides__hero::after { width: 13rem; height: 13rem; right: 3rem; bottom: -8rem; }

.paper-guides__hero h1 { max-width: 48rem; margin-inline: auto; color: #fff; }
.paper-guides__hero p { max-width: 46rem; color: rgb(255 248 242 / 78%); }

.paper-guides__eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: #ffbd42;
  font: 800 .72rem/1.2 var(--blog-font-body);
  letter-spacing: .18em;
}

.paper-guides__topics { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.paper-guides__topics span { padding: .42rem .8rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; color: rgb(255 255 255 / 86%); background: rgb(255 255 255 / 6%); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

.paper-guides .blog-list__grid { gap: clamp(1.4rem, 2.5vw, 2rem); }
.paper-guides .blog-list-card { position: relative; border-radius: .85rem; box-shadow: 0 .75rem 2rem rgb(78 40 19 / 6%); }
.paper-guides .blog-list-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 cubic-bezier(.16, 1, .3, 1); }
.paper-guides .blog-list-card:hover::after { transform: scaleX(1); }
.paper-guides .blog-list-card:hover { box-shadow: 0 1.35rem 2.8rem rgb(73 35 15 / 15%); transform: translateY(-.4rem); }
.paper-guides .blog-list-card__image { position: relative; }
.paper-guides .blog-list-card__image img { transition: transform 850ms cubic-bezier(.2, .7, .2, 1); }
.paper-guides .blog-list-card:hover .blog-list-card__image img { transform: scale(1.045); }
.paper-guides__placeholder { display: grid; place-content: center; gap: .55rem; width: 100%; height: 100%; background: radial-gradient(circle at 72% 25%, rgb(255 175 1 / 32%), transparent 24%), linear-gradient(145deg, #fff2df, #f4d6b4); }
.paper-guides__placeholder span { display: block; width: clamp(7rem, 15vw, 10rem); height: .3rem; border-radius: 999px; background: rgb(110 50 17 / 20%); }
.paper-guides__placeholder span:nth-child(2) { width: 72%; }
.paper-guides__placeholder span:nth-child(3) { width: 48%; }
.paper-guides__image-shade { position: absolute; inset: 0; background: linear-gradient(115deg, #f4e6d8 0 48%, #fff3e7 52% 100%); transform: translateX(105%); transform-origin: right; pointer-events: none; }
.paper-guides .blog-list-card__body { padding: 1.45rem; }
.paper-guides .blog-list-card__link i { display: inline-block; font-style: normal; transition: transform 320ms ease; }
.paper-guides .blog-list-card:hover .blog-list-card__link i { transform: translateX(.3rem); }

.guides-motion-ready [data-guides-reveal] { opacity: 0; transform: translateY(2.5rem); }
.guides-motion-ready [data-guides-reveal="hero"] { transform: translateY(1.6rem) scale(.99); transition: opacity 950ms ease, transform 1200ms cubic-bezier(.16, 1, .3, 1); }
.guides-motion-ready [data-guides-reveal="card"] { transition: opacity 820ms ease, transform 1050ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms ease; transition-delay: var(--guide-card-delay, 0ms); }
.guides-motion-ready [data-guides-reveal="card"]:nth-child(3n + 1) { transform: translateY(2.5rem) rotate(-.45deg); }
.guides-motion-ready [data-guides-reveal="card"]:nth-child(3n) { transform: translateY(2.5rem) rotate(.45deg); }
.guides-motion-ready [data-guides-reveal="pagination"],
.guides-motion-ready [data-guides-reveal="empty"] { transition: opacity 800ms ease, transform 1000ms cubic-bezier(.16, 1, .3, 1); }
.guides-motion-ready [data-guides-reveal].guides-is-visible { opacity: 1; transform: none; }

.guides-motion-ready [data-guide-card-item] { opacity: 0; transform: translateY(.8rem); transition: opacity 600ms ease, transform 760ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(360ms + var(--guide-card-delay, 0ms) + var(--guide-item-delay, 0ms)); }
.guides-motion-ready .guides-is-visible [data-guide-card-item] { opacity: 1; transform: none; }
.guides-motion-ready .paper-guides__image-shade { transform: translateX(0); }
.guides-motion-ready .guides-is-visible .paper-guides__image-shade { animation: guide-image-curtain 1200ms cubic-bezier(.16, 1, .3, 1) calc(130ms + var(--guide-card-delay, 0ms)) both; }
.guides-motion-ready .guides-is-visible.paper-guides__hero::before { animation: guide-orbit 18s linear infinite; }

@keyframes guide-image-curtain { to { transform: translateX(105%); } }
@keyframes guide-orbit { to { transform: rotate(360deg); } }

@media (max-width: 39.99rem) {
  .paper-guides__hero { margin-inline: -.25rem; padding-block: 3.4rem; }
  .paper-guides__topics { gap: .4rem; }
  .guides-motion-ready [data-guides-reveal="card"]:nth-child(n) { transform: translateY(2rem); }
  .guides-motion-ready [data-guides-reveal="card"].guides-is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-guides *,
  .paper-guides *::before,
  .paper-guides *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .guides-motion-ready [data-guides-reveal],
  .guides-motion-ready [data-guide-card-item] { opacity: 1; transform: none; }
  .paper-guides__image-shade { display: none; }
}