/* A single page copy dissolves through a tiled ink mask; no content fragments fly. */
:is(.comic-home, .comic-catalog) .comic-sponsors {
  position: relative;
  isolation: isolate;
  border: 1px solid #35515b;
  border-radius: 7px;
  background: radial-gradient(#51bdd114 1px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(125deg, #10232b, #040f14 70%);
  box-shadow: 4px 4px 0 #020a0d, 0 12px 30px #0004;
}
:is(.comic-home, .comic-catalog) .comic-sponsors::before,
:is(.comic-home, .comic-catalog) .comic-sponsors::after { content: ''; position: absolute; width: 28px; height: 14px; pointer-events: none; }
:is(.comic-home, .comic-catalog) .comic-sponsors::before { top: -1px; left: -1px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); border-radius: 7px 0 0; }
:is(.comic-home, .comic-catalog) .comic-sponsors::after { bottom: -1px; right: -1px; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); border-radius: 0 0 7px; }
:is(.comic-home, .comic-catalog) .comic-sponsor-heading { padding-bottom: 14px; border-bottom: 1px dashed #35515b; }
.comic-sponsors .comic-arrows { align-items: center; margin-left: auto; }
.comic-sponsors .comic-arrows button { width: 36px; height: 36px; }
.sponsor-page-number { padding-right: 6px; color: #adbec5; font: 11px/1.4 var(--mono); white-space: nowrap; }
#sponsorPause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
#sponsorPause .sponsor-play-icon { display: none; }
#sponsorPause[aria-pressed=true] .sponsor-play-icon { display: block; }
#sponsorPause[aria-pressed=true] .sponsor-pause-icon { display: none; }
.sponsor-book { position: relative; isolation: isolate; border-radius: 5px; overflow: hidden; }
.sponsor-book .comic-sponsor-grid { grid-auto-rows: minmax(132px, auto); }
.sponsor-book .comic-sponsor-card { grid-template-rows: 1fr; background: #061116; }
.sponsor-book .comic-sponsor-card .comic-icon { grid-row: 1; }
.sponsor-transition { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sponsor-transition > svg { position: absolute; inset: 0; pointer-events: none; }
.sponsor-old-page { position: absolute; inset: 0; background: #030e12; mask-repeat: no-repeat; }
.sponsor-transition mask rect { transform-box: fill-box; transform-origin: center; animation: sponsor-ink-dissolve 310ms cubic-bezier(.4,0,.2,1) var(--pixel-delay) both; }
.sponsor-ink-wave { position: absolute; z-index: 3; top: -5%; bottom: -5%; left: -18%; width: 18%; opacity: 0; background: linear-gradient(90deg, transparent, #51bdd10a 28%, #51bdd130 68%, #f9efd645 72%, #ffe23838 74%, #51bdd110 80%, transparent); animation: sponsor-ink-sweep 1050ms linear both; }
.sponsor-ink-wave::before, .sponsor-ink-wave::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #ffe238aa 0 1px, transparent 1.8px) 0 0 / 13px 17px; mask-image: linear-gradient(90deg, transparent 25%, #000 62%, transparent 85%); }
.sponsor-ink-wave::after { background: radial-gradient(circle, #51bdd199 0 1.5px, transparent 2px) 5px 9px / 19px 23px; }
.sponsor-transition.is-reverse { transform: scaleX(-1); }
.sponsor-transition.is-reverse .sponsor-old-page { transform: scaleX(-1); }
@keyframes sponsor-ink-dissolve {
  0% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: scale(.15); }
}
@keyframes sponsor-ink-sweep {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: .85; }
  80% { opacity: .85; }
  100% { transform: translateX(660%); opacity: 0; }
}
@media (max-width: 700px) {
  :is(.comic-home, .comic-catalog) .comic-sponsor-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
  :is(.comic-home, .comic-catalog) .comic-sponsor-heading h2 { justify-self: start; max-width: 100%; font-size: 22px; }
  :is(.comic-home, .comic-catalog) .comic-sponsor-heading > span { display: none; }
  :is(.comic-home, .comic-catalog) .comic-sponsors .comic-arrows { width: 100%; gap: 8px; margin: 0; justify-content: flex-end; }
  :is(.comic-home, .comic-catalog) .sponsor-page-number { margin-right: auto; padding-right: 0; font-size: 12px; }
  :is(.comic-home, .comic-catalog) .comic-sponsors .comic-arrows button { width: 44px; height: 44px; flex: 0 0 44px; }
  :is(.comic-home, .comic-catalog) .sponsor-book .comic-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
  :is(.comic-home, .comic-catalog) .sponsor-book .comic-sponsor-card { min-width: 0; min-height: 168px; padding: 14px 12px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px auto 1fr; gap: 10px; align-items: start; }
  :is(.comic-home, .comic-catalog) .sponsor-book .comic-sponsor-card .comic-icon { grid-column: 1; grid-row: 1; width: 32px; height: 32px; }
  :is(.comic-home, .comic-catalog) .comic-sponsor-copy { display: contents; }
  :is(.comic-home, .comic-catalog) .comic-sponsor-copy h3 { grid-column: 1; grid-row: 2; margin: 0; padding: 0; font-size: 18px; line-height: 1.25; overflow-wrap: normal; }
  :is(.comic-home, .comic-catalog) .comic-sponsor-copy p { grid-column: 1; grid-row: 3; margin: 0; font-size: 14px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-book .sponsor-transition { display: none; }
}