/* St. Paul's gift preview: the pastor portraits page (review/clergy-before-after.html).
   Uses the tokens of css/base.css only. Classes start with .pt- */

/* 1. Opening: a candlelit cream hall */
.pt-hero {
  position: relative;
  padding-block: clamp(var(--sp-space-7), 10vw, var(--sp-space-9)) clamp(var(--sp-space-6), 6vw, var(--sp-space-8));
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(246, 183, 91, .30), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(185, 96, 37, .10), transparent 70%),
    linear-gradient(180deg, #f7ead3 0%, var(--sp-ivory) 100%);
  color: var(--sp-ink);
  text-align: center;
}
.pt-hero::before {
  /* thin double gilt rule at the bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: var(--sp-line) solid rgba(214, 140, 59, .6);
  border-bottom: var(--sp-line) solid rgba(112, 57, 18, .25);
  pointer-events: none;
}
.pt-hero__inner { position: relative; z-index: 6; max-width: 60rem; }
.pt-hero .sp-eyebrow { justify-content: center; color: var(--sp-bronze); }
.pt-hero .sp-eyebrow::after {
  content: "";
  flex: none;
  width: 28px;
  height: 7px;
  transform: scaleX(-1);
  background:
    linear-gradient(var(--sp-gold-500), var(--sp-gold-500)) left center / 20px 1px no-repeat,
    linear-gradient(45deg, transparent 35%, var(--sp-gold-500) 35% 65%, transparent 65%) right center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 35%, var(--sp-gold-500) 35% 65%, transparent 65%) right center / 7px 7px no-repeat;
}
.pt-title {
  margin: 0 0 var(--sp-space-4);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-display);
  font-weight: 500;
  line-height: var(--sp-lh-tight);
  letter-spacing: .01em;
  color: var(--sp-ink);
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 2px 24px rgba(246, 183, 91, .35);
}
.pt-lede {
  max-width: var(--sp-measure);
  margin: 0 auto var(--sp-space-5);
  color: var(--sp-ink);
  font-family: var(--sp-font-text);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.pt-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-3);
  max-width: 34rem;
  margin: 0 auto var(--sp-space-6);
  padding: var(--sp-space-2) var(--sp-space-4);
  border: var(--sp-line) solid rgba(112, 57, 18, .16);
  border-radius: var(--sp-radius-round);
  background: rgba(255, 253, 248, .32);
  color: var(--sp-ink);
  font: 400 var(--sp-fs-small)/1.45 var(--sp-font-label);
  text-align: left;
}
.pt-hint__knob {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--sp-gold-300);
  border-radius: 50%;
  background: var(--sp-bronze);
}
.pt-hint__knob::before, .pt-hint__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.pt-hint__knob::before { left: 4px; border-right: 5px solid var(--sp-gold-100); }
.pt-hint__knob::after { right: 4px; border-left: 5px solid var(--sp-gold-100); }
/* Touch screens read how to slide; only a computer with a mouse reads about the arrow keys. */
.pt-hint__keys { display: none; }
@media (pointer: fine) {
  .pt-hint__touch { display: none; }
  .pt-hint__keys { display: inline; }
}
.pt-hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-space-3);
  margin: 0;
}
.pt-hero .sp-btn--ghost { color: var(--sp-ink); border-color: var(--sp-bronze); }
.pt-hero .sp-btn--ghost:hover { background: rgba(214, 140, 59, .12); color: var(--sp-ink); }

/* 2. The portrait hall */
.pt-hall {
  position: relative;
  padding-block: clamp(var(--sp-space-6), 7vw, var(--sp-space-8));
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(246, 183, 91, .14), transparent 70%),
    linear-gradient(180deg, var(--sp-ivory), var(--sp-paper) 55%, var(--sp-ivory));
  color: var(--sp-ink);
}
.pt-hall.sp-grain::after { opacity: .05; mix-blend-mode: multiply; animation: none; }
.pt-hall::before {
  /* closing double gilt rule at the bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: var(--sp-line) solid rgba(214, 140, 59, .6);
  border-bottom: var(--sp-line) solid rgba(112, 57, 18, .25);
  pointer-events: none;
}
.pt-hall > .sp-wrap { position: relative; z-index: 6; }
.pt-hall__head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-2);
}
.pt-hall__rule {
  flex: 1;
  height: 7px;
  background:
    linear-gradient(var(--sp-gold-500), var(--sp-gold-500)) center / 100% 1px no-repeat;
  opacity: .7;
}
.pt-hall__title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h2);
  font-weight: 500;
  font-style: italic;
  line-height: var(--sp-lh-tight);
  color: var(--sp-ink);
  text-align: center;
  text-wrap: balance;
}
.pt-count {
  margin: 0 0 var(--sp-space-6);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.pt-fallback { text-align: center; }
/* Hold the hall's room until js/portraits.js fills it, so the notes below never jump on load */
.pt-root:has(> .pt-fallback) { min-height: 100svh; }
.pt-fallback .sp-link { color: var(--sp-link); }

.pt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-space-7), 6vw, var(--sp-space-8)) clamp(var(--sp-space-5), 3vw, var(--sp-space-6));
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
@media (min-width: 700px) {
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 3. One card: a gilt frame, a numbered seal, a brass plaque */
.pt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 22px;
  scroll-margin-top: calc(var(--sp-header-h) + 72px);
}
.pt-card__seal {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 2px solid var(--sp-gold-300);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-bronze), var(--sp-bronze-deep) 70%);
  box-shadow: 0 0 0 1px var(--sp-ivory), 0 0 0 4px rgba(214, 140, 59, .35), 0 6px 14px rgba(45, 21, 4, .3);
}
.pt-card__num {
  color: var(--sp-gold-100);
  font: 600 1.25rem/1 var(--sp-font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: .02em;
}
.pt-card__seal--star .pt-card__num { font-size: 1.1rem; }

.pt-frame.sp-frame {
  padding: 10px;
  border-color: var(--sp-gold-500);
  background: linear-gradient(135deg, #fbe7b8, var(--sp-gold-300) 30%, #e9b46a 55%, #fbe7b8 80%, var(--sp-gold-500));
  box-shadow:
    inset 0 0 0 1px rgba(112, 57, 18, .55),
    0 0 0 1px rgba(214, 140, 59, .45),
    0 4px 10px -6px rgba(45, 21, 4, .25),
    0 26px 50px -26px rgba(45, 21, 4, .45);
}
.pt-frame.sp-frame::after { inset: 10px; border-color: rgba(112, 57, 18, .45); }
/* Paper colored while a picture loads, never dark (design spec 3.3) */
.pt-frame .sp-compare { background: var(--sp-paper); }
.pt-frame .sp-compare > img { background: var(--sp-paper); }
.pt-frame .sp-compare__after { object-position: 50% 18%; }
.pt-frame .sp-compare__before { object-fit: contain; }

.pt-plaque {
  position: relative;
  margin: var(--sp-space-4) var(--sp-space-3) 0;
  padding: var(--sp-space-4) var(--sp-space-4) var(--sp-space-3);
  border: var(--sp-line) solid var(--sp-gold-500);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%),
    linear-gradient(100deg, var(--sp-gold-100) 0%, #f3d08d 45%, var(--sp-gold-100) 100%);
  box-shadow: inset 0 0 0 3px var(--sp-gold-100), inset 0 0 0 4px rgba(112, 57, 18, .45), 0 14px 28px -18px rgba(45, 21, 4, .45);
  color: var(--sp-ink);
  text-align: center;
}
.pt-plaque::before, .pt-plaque::after {
  /* two small brass rivets */
  content: "";
  position: absolute;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3d0, var(--sp-gold-500) 60%, var(--sp-bronze));
}
.pt-plaque::before { left: 10px; }
.pt-plaque::after { right: 10px; }
.pt-plaque__count {
  margin: 0 0 var(--sp-space-1);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pt-plaque__name {
  margin: 0 0 var(--sp-space-1);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
  color: var(--sp-ink);
  text-wrap: balance;
}
.pt-plaque__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px var(--sp-space-3);
  margin: 0 0 var(--sp-space-3);
  color: var(--sp-ink-soft);
  font-size: var(--sp-fs-small);
}
.pt-plaque__years {
  font-family: var(--sp-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sp-bronze);
  font-variant-numeric: lining-nums;
}
.pt-plaque__role { font-style: italic; }
.pt-plaque__role:empty { display: none; }
.pt-plaque__text {
  max-width: var(--sp-measure);
  margin: 0 auto var(--sp-space-3);
  color: var(--sp-ink-soft);
  font-size: var(--sp-fs-small);
  line-height: 1.55;
  text-align: left;
}
.pt-plaque__note { color: var(--sp-muted); }
.pt-plaque__credit { margin: 0 0 var(--sp-space-2); color: var(--sp-muted); font-size: var(--sp-fs-small); }
.pt-plaque__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-space-2);
  margin: 0 0 var(--sp-space-3);
}
.pt-plaque__source {
  margin: 0;
  color: var(--sp-muted);
  font: italic 400 var(--sp-fs-small)/1.45 var(--sp-font-text);
}
/* Two equal buttons in one row, 8 px apart */
.pt-plaque__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: var(--sp-line) solid rgba(112, 57, 18, .3);
}
.pt-action { flex: 1 1 0; min-width: min(7.5rem, 100%); min-height: var(--sp-tap); padding-inline: 10px; text-align: center; white-space: normal; }
.pt-plaque .sp-btn--ghost { border-color: var(--sp-bronze); color: var(--sp-ink); background: rgba(255, 253, 248, .5); }
.pt-plaque .sp-btn--ghost:hover { background: #fffdf8; color: var(--sp-bronze); }
/* The kind of original (drawing or photograph): a small caption that opens the file */
.pt-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sp-tap);
  margin: 0;
  padding: 0 var(--sp-space-2);
  color: var(--sp-ink-soft);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(112, 57, 18, .45);
  text-underline-offset: 3px;
}
.pt-file:hover { color: var(--sp-bronze); }
.pt-file:focus-visible { outline: 2px solid var(--sp-bronze); outline-offset: 2px; }

.pt-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-space-2);
  margin: 0 0 var(--sp-space-3);
}
.pt-switch__btn {
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  padding: 8px 14px;
  border: var(--sp-line) solid var(--sp-bronze);
  border-radius: var(--sp-radius-round);
  background: rgba(255, 253, 248, .5);
  color: var(--sp-ink);
  font: 600 .875rem/1.25 var(--sp-font-label);
  cursor: pointer;
}
.pt-switch__btn:hover { background: #fffdf8; }
.pt-switch__btn[aria-pressed="true"] {
  background: var(--sp-bronze);
  border-color: var(--sp-bronze);
  color: var(--sp-gold-100);
  box-shadow: inset 0 0 0 2px var(--sp-bronze), inset 0 0 0 3px rgba(250, 223, 162, .55);
}

/* The wide card (the papal visit picture): it takes the full row from 700 px */
@media (min-width: 700px) {
  .pt-card--wide { grid-column: 1 / -1; }
  .pt-card--wide .pt-frame { width: min(100%, 46rem); margin-inline: auto; }
  .pt-card--wide .pt-plaque { width: min(100% - 2 * var(--sp-space-3), 40rem); margin-inline: auto; }
}

/* The index of seals: one row that swipes sideways and stays under the header while the hall scrolls */
.pt-index {
  position: sticky;
  top: var(--sp-header-h);
  z-index: 20;
  margin: 0 calc(-1 * var(--sp-gutter)) var(--sp-space-6);
  padding: 6px 0;
  background: color-mix(in srgb, var(--sp-ivory) 96%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-block: var(--sp-line) solid rgba(214, 140, 59, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 20px -14px rgba(45, 21, 4, .35);
}
.pt-index::before, .pt-index::after {
  /* edge fades: they say more seals are there, and go away at each end of the row */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: 40px;
  pointer-events: none;
  transition: opacity var(--sp-dur-2) var(--sp-ease-out);
}
.pt-index::before { left: 0; background: linear-gradient(90deg, var(--sp-ivory), transparent); }
.pt-index::after { right: 0; background: linear-gradient(-90deg, var(--sp-ivory), transparent); }
.pt-index.is-start::before, .pt-index.is-end::after { opacity: 0; }
.pt-index__list {
  display: flex;
  gap: var(--sp-space-2);
  margin: 0;
  padding: 0 max(var(--sp-gutter), env(safe-area-inset-left)) 0 max(var(--sp-gutter), env(safe-area-inset-left));
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sp-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pt-index__list::-webkit-scrollbar { display: none; }
.pt-index__item { flex: none; scroll-snap-align: start; }
.pt-index__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sp-tap);
  padding: 4px 14px 4px 4px;
  border: var(--sp-line) solid rgba(112, 57, 18, .35);
  border-radius: var(--sp-radius-round);
  background: rgba(255, 253, 248, .55);
  color: var(--sp-ink);
  font: 600 .875rem/1.2 var(--sp-font-label);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.pt-index__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--sp-gold-300);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-bronze), var(--sp-bronze-deep) 70%);
  color: var(--sp-gold-100);
  font: 600 1rem/1 var(--sp-font-display);
  font-variant-numeric: lining-nums;
}
.pt-index__chip[aria-current="true"] {
  border-color: var(--sp-bronze);
  background: var(--sp-bronze);
  color: var(--sp-gold-100);
}
.pt-index__chip[aria-current="true"] .pt-index__num { box-shadow: 0 0 0 2px var(--sp-gold-300); }
.pt-index__chip:focus-visible { outline: 2px solid var(--sp-bronze); outline-offset: 2px; }
@media (hover: hover) {
  .pt-index__chip:hover { border-color: var(--sp-bronze); }
}
@media (min-width: 1100px) {
  /* on a wide screen the whole row fits, so it wraps and centers */
  .pt-index { margin-inline: 0; border-radius: var(--sp-radius-m); border-inline: var(--sp-line) solid rgba(214, 140, 59, .35); }
  .pt-index::before { border-radius: var(--sp-radius-m) 0 0 var(--sp-radius-m); }
  .pt-index::after { border-radius: 0 var(--sp-radius-m) var(--sp-radius-m) 0; }
  .pt-index__list { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; padding: 2px var(--sp-space-3); }
}
.pt-viewer-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-2);
  margin: calc(-1 * var(--sp-space-4)) auto var(--sp-space-6);
  color: var(--sp-ink-soft);
  font: italic 500 1rem/1.4 var(--sp-font-display);
  text-align: center;
  text-wrap: balance;
}
.pt-viewer-hint::before, .pt-viewer-hint::after {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--sp-gold-500);
  opacity: .7;
}

/* 4. Notes at the end */
.pt-notes {
  padding-block: clamp(var(--sp-space-7), 8vw, var(--sp-space-8));
  background: var(--sp-ivory);
  color: var(--sp-ink);
}
.pt-notes__inner {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(var(--sp-space-5), 4vw, var(--sp-space-7));
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-m);
  background: var(--sp-paper);
  box-shadow: var(--sp-shadow-1);
}
.pt-notes__title {
  margin: 0 0 var(--sp-space-4);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h2);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
  text-wrap: balance;
}
.pt-notes__list {
  margin: 0 0 var(--sp-space-5);
  padding-left: 1.2em;
  color: var(--sp-ink-soft);
  font-family: var(--sp-font-text);
  line-height: 1.6;
}
.pt-notes__list li { margin-bottom: var(--sp-space-2); }
.pt-notes__list li::marker { color: var(--sp-gold-500); }
.pt-notes__links { display: flex; flex-wrap: wrap; gap: var(--sp-space-3); margin: 0; }

/* 5. Phone */
@media (max-width: 480px) {
  /* A short opening, so the first portrait shows on the first screen. The two links stay in
     the notes at the end and in the menu. */
  .pt-hero { padding-block: var(--sp-space-5) var(--sp-space-4); }
  /* The title says the same as the small "Clergy portraits" label, so a phone shows only the title */
  .pt-hero .sp-eyebrow { display: none; }
  /* The title is two lines in every language on a phone, and its room is held, so the page
     does not move when the Vietnamese or Spanish words replace the English ones (seen: the
     title went from one line to two and moved the page 48 px, checks/fx-portraits/r2/clssrc-repeat.txt) */
  .pt-title { max-width: 5.6em; min-height: calc(2em * var(--sp-lh-tight)); margin-inline: auto; margin-bottom: var(--sp-space-2); }
  .pt-lede { margin-bottom: var(--sp-space-3); }
  .pt-hint { margin-bottom: 0; border-radius: var(--sp-radius-m); }
  /* Room for three lines of the hint and two of the double-tap line, so the page does not
     jump when the web fonts arrive (seen: 62 to 83 px and 45 to 22 px, checks/fx-portraits/fontshift.mjs) */
  .pt-hint { min-height: calc(3 * 1.45 * var(--sp-fs-small) + 2 * var(--sp-space-2) + 2px); }
  .pt-viewer-hint { min-height: 2.8rem; margin-bottom: var(--sp-space-3); }
  .pt-hero__links { display: none; }
  .pt-hall { padding-top: var(--sp-space-4); }
  .pt-hall__head { margin-bottom: 0; }
  .pt-count { margin-bottom: var(--sp-space-3); }
  .pt-index { margin-bottom: var(--sp-space-5); }
  .pt-notes__links .sp-btn { flex: 1 1 100%; }
  .pt-plaque { margin-inline: var(--sp-space-2); padding-inline: var(--sp-space-3); }
  .pt-frame.sp-frame { padding: 8px; }
  .pt-frame.sp-frame::after { inset: 8px; }
}

/* A static glow on hover (no shadow animation: only transform and opacity move) */
@media (hover: hover) {
  .pt-card:hover .pt-frame.sp-frame {
    box-shadow:
      inset 0 0 0 1px rgba(112, 57, 18, .55),
      0 0 0 1px rgba(214, 140, 59, .7),
      0 6px 14px -6px rgba(45, 21, 4, .28),
      0 32px 60px -26px rgba(45, 21, 4, .5),
      0 0 60px -20px rgba(246, 183, 91, .55);
  }
}

/* Phones: centered (Coach 2026-10-06) */
@media (max-width: 699px) {
  .pt-hint { text-align: center; }
  .pt-plaque__text { text-align: center; }
  .pt-notes__title { text-align: center; }
  .pt-notes__links { justify-content: center; }
}

.pt-card--wide .pt-plaque__text { text-align: center; margin-inline: auto; }

/* 6. The restoration sweep: as a portrait rises into view, the gold divider travels from the
   right edge to the middle with the scroll, painting the restored color in, with a candle glint
   on the line. It stops with the finger; the first touch hands the slider back (js/portraits.js). */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@keyframes pt-restore { from { --pos: 100%; } to { --pos: 50%; } }
@keyframes pt-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes pt-glint { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: no-preference) {
  .pt-switch__btn, .pt-file, .pt-index__chip { transition: transform 100ms var(--sp-ease-out), background-color var(--sp-dur-2) var(--sp-ease-out), color var(--sp-dur-2) var(--sp-ease-out); }
  .pt-switch__btn:active, .pt-file:active, .pt-index__chip:active { transform: scale(.98); }
  @supports (animation-timeline: view()) {
    .pt-card:not(.is-touched) .pt-frame .sp-compare {
      animation: pt-restore linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 50%;
    }
    .pt-card .pt-frame .sp-compare > img {
      animation: pt-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .pt-card .pt-frame .sp-compare__line::after {
      content: '';
      position: absolute;
      inset: 0 -14px;
      background: radial-gradient(closest-side, rgba(250, 223, 162, .85), transparent);
      pointer-events: none;
      opacity: 0;
      animation: pt-glint linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 50%;
    }
    .pt-card.is-touched .sp-compare__line::after { animation: none; opacity: 0; }
  }
}