/* Abstract, full-card publication backgrounds. */
.publication-card[data-paper] {
  --paper-accent: 27, 110, 126;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  min-width: 0;
  padding: 1.2rem;
  isolation: isolate;
  background: #faf7ee;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.publication-card[data-paper="thermal"] { --paper-accent: 157, 83, 132; }
.publication-card[data-paper="pacdp"] { --paper-accent: 139, 104, 62; }
.publication-card[data-paper="retarget"] { --paper-accent: 65, 96, 137; }
.publication-card[data-paper="conflow"] { --paper-accent: 67, 114, 104; }
.publication-card[data-paper="barrier"] { --paper-accent: 32, 119, 91; }
.publication-card[data-paper="diplo"] { --paper-accent: 38, 112, 220; }
.publication-card[data-paper]:is(:hover, :focus-within) {
  border-color: rgba(var(--paper-accent), 0.65);
  box-shadow: 7px 7px 0 rgba(var(--paper-accent), 0.13);
}
.publication-card[data-paper]::before { z-index: 2; pointer-events: none; }
.publication-card[data-paper] > :is(.pub-meta, h3, p, a) { position: relative; z-index: 1; grid-column: 1; }
.publication-card[data-paper] .pub-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  min-height: 3.2rem; color: var(--ink-2); font-size: 0.62rem;
}
.publication-card[data-paper] .venue-logo {
  display: block; width: 6.8rem; height: 3.2rem;
  object-fit: contain; object-position: left center; margin-right: 0.2rem;
}
.publication-card[data-paper] .venue-logo-ras { width: 7.5rem; }
.publication-card[data-paper] .venue-logo-arxiv { width: 5.8rem; }
.publication-card[data-paper] h3 { font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.2; }
.publication-card[data-paper] p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.publication-card[data-paper] > a { justify-self: start; min-height: 2.5rem; margin-top: 0.1rem; }
.publication-card[data-paper] > a:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 4px; }

/* Clip only the decoration, leaving keyboard focus outlines visible. */
.paper-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.18; transition: opacity 450ms ease; }
.publication-card[data-paper]:is(:hover, :focus-within) .paper-background { opacity: 1; }
.paper-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(250, 247, 238, 0.48), rgba(250, 247, 238, 0.12)); }
.effect-layer { position: absolute; inset: -30%; }

/* DiPLO: blue laser sheets sweep across a softly holographic surface. */
[data-paper="diplo"] .paper-background { background: linear-gradient(125deg, #e6eeff, #e1f4ff 58%, #e8eaff); }
[data-paper="diplo"] .layer-a {
  background: linear-gradient(115deg, transparent 37%, rgba(55, 128, 255, 0.12) 43%, rgba(68, 152, 255, 0.32) 47%, rgba(215, 248, 255, 0.95) 49%, rgba(54, 147, 255, 0.65) 50%, rgba(106, 182, 255, 0.22) 53%, transparent 59%);
  transform: translateX(-24%);
}
[data-paper="diplo"] .layer-b {
  background: linear-gradient(72deg, transparent 33%, rgba(67, 99, 235, 0.08) 42%, rgba(72, 153, 255, 0.32) 48%, rgba(225, 250, 255, 0.85) 49.5%, rgba(98, 170, 255, 0.3) 51%, transparent 60%);
  transform: translateX(20%);
}
[data-paper="diplo"] .layer-c {
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(45, 116, 235, 0.08) 8px, transparent 9px 16px);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 75%, transparent);
  opacity: 0.55;
}
[data-paper="diplo"]:is(:hover, :focus-within) .layer-a { animation: paper-laser-sweep 6s ease-in-out infinite alternate; }
[data-paper="diplo"]:is(:hover, :focus-within) .layer-b { animation: paper-laser-counter-sweep 7.5s ease-in-out infinite alternate; }
[data-paper="diplo"]:is(:hover, :focus-within) .layer-c { animation: paper-laser-scan 4s linear infinite; }
@keyframes paper-laser-sweep { to { transform: translateX(24%); } }
@keyframes paper-laser-counter-sweep { to { transform: translateX(-20%); } }
@keyframes paper-laser-scan { to { background-position: 0 16px; } }

/* Diffusion: noisy dots settle into rows and stretch into continuous stripes. */
.diffusion-field { position: absolute; inset: 0; background: linear-gradient(120deg, #e5eee8, #ebf3f0 55%, #d4e8ec); }
.diffusion-field span {
  position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px;
  border-radius: 50%; background: rgba(27, 110, 126, 0.3);
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
}
.publication-card[data-paper="diffusion"]:is(:hover, :focus-within) .diffusion-field span { animation: paper-dots-to-stripes 5.4s ease-in-out infinite; animation-delay: var(--lag); }
@keyframes paper-dots-to-stripes {
  0%, 12%, 100% { width: 4px; height: 4px; border-radius: 50%; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }
  42% { width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); }
  66%, 82% { width: calc(100% / 14 + 2px); height: 2px; border-radius: 1px; transform: translate(-50%, -50%); }
}

/* PAC-Bayes: diffuse probability textures concentrate into a softer, tighter cloud. */
[data-paper="pacdp"] .paper-background { background: linear-gradient(120deg, #f1e7d5, #eee7e4 55%, #e9e3ed); }
[data-paper="pacdp"] .layer-a {
  background: radial-gradient(ellipse at 30% 35%, rgba(188, 145, 77, 0.42), transparent 42%), radial-gradient(ellipse at 72% 60%, rgba(148, 123, 170, 0.38), transparent 45%), radial-gradient(ellipse at 48% 70%, rgba(212, 176, 113, 0.45), transparent 38%);
  filter: blur(20px);
  transform: scaleX(1.25);
}
[data-paper="pacdp"] .layer-b {
  background: radial-gradient(circle, rgba(139, 104, 62, 0.3) 0 1px, transparent 1.5px) 0 0 / 13px 17px, radial-gradient(circle, rgba(130, 107, 153, 0.28) 0 1px, transparent 1.5px) 6px 9px / 19px 23px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 65%);
  transform: scaleX(1.2) translateX(-3%);
}
[data-paper="pacdp"]:is(:hover, :focus-within) .layer-a { animation: paper-pac-cloud 6.4s ease-in-out infinite alternate; }
[data-paper="pacdp"]:is(:hover, :focus-within) .layer-b { animation: paper-pac-concentrate 6.4s ease-in-out infinite alternate; }
@keyframes paper-pac-cloud { from { transform: scaleX(1.25); opacity: 0.6; } to { transform: scaleX(0.65); opacity: 1; } }
@keyframes paper-pac-concentrate { from { transform: scaleX(1.2) translateX(-3%); opacity: 0.4; } to { transform: scaleX(0.7) translateX(6%); opacity: 0.85; } }

/* Thermal: drifting spectral color fields behind the whole text surface. */
[data-paper="thermal"] .layer-a {
  background: radial-gradient(ellipse at 22% 25%, #edb0cd 0, transparent 48%), radial-gradient(ellipse at 78% 20%, #afc4f0 0, transparent 48%), radial-gradient(ellipse at 70% 80%, #f3d68e 0, transparent 45%), radial-gradient(ellipse at 25% 85%, #a5ddd8 0, transparent 50%), #e9ddee;
  filter: blur(22px);
}
[data-paper="thermal"] .layer-b { background: conic-gradient(from 30deg at 50% 50%, #f3dc9d, #efb0c4, #bcb5ed, #a4d9df, #f3dc9d); opacity: 0.45; filter: blur(38px); mix-blend-mode: soft-light; }
[data-paper="thermal"]:is(:hover, :focus-within) .layer-a { animation: paper-thermal-spectrum 8s ease-in-out infinite alternate; }
[data-paper="thermal"]:is(:hover, :focus-within) .layer-b { animation: paper-iridescence 12s linear infinite; }
@keyframes paper-thermal-spectrum { from { transform: translate(-8%, -7%) rotate(-12deg) scale(1.05); } to { transform: translate(8%, 7%) rotate(12deg) scale(1.18); } }
@keyframes paper-iridescence { to { transform: rotate(360deg) scale(1.2); } }

/* Retargeting: offset coordinate textures synchronize into a shared grid. */
[data-paper="retarget"] .paper-background { background: linear-gradient(125deg, #e5eaf4, #eee8f3); }
[data-paper="retarget"] .effect-layer { background: linear-gradient(rgba(65, 96, 137, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 96, 137, 0.18) 1px, transparent 1px); background-size: 38px 38px; }
[data-paper="retarget"] .layer-b { background-image: linear-gradient(rgba(145, 100, 157, 0.21) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 100, 157, 0.21) 1px, transparent 1px); transform: translate(17px, 11px) skewX(-7deg) rotate(3deg); }
[data-paper="retarget"]:is(:hover, :focus-within) .layer-a { animation: paper-grid-drift 6s ease-in-out infinite alternate; }
[data-paper="retarget"]:is(:hover, :focus-within) .layer-b { animation: paper-grid-align 6s ease-in-out infinite alternate; }
@keyframes paper-grid-drift { to { transform: translate(19px, 19px); } }
@keyframes paper-grid-align { 0%, 15% { transform: translate(17px, 11px) skewX(-7deg) rotate(3deg); } 75%, 100% { transform: translate(19px, 19px) skewX(0) rotate(0); } }

/* Constrained flow: curved bands stream through a softly bounded field. */
[data-paper="conflow"] .paper-background { background: linear-gradient(130deg, #e4eee8, #e0eeee); }
[data-paper="conflow"] .layer-a { inset: -70% -30%; background: repeating-radial-gradient(ellipse at 15% 0%, transparent 0 26px, rgba(67, 114, 104, 0.2) 27px 29px, transparent 30px 55px); transform: rotate(-14deg); }
[data-paper="conflow"] .layer-b { background: linear-gradient(115deg, transparent 25%, rgba(139, 185, 167, 0.5) 40%, rgba(157, 201, 209, 0.45) 50%, transparent 65%); filter: blur(18px); }
[data-paper="conflow"]:is(:hover, :focus-within) .layer-a { animation: paper-flow-bands 7s ease-in-out infinite alternate; }
[data-paper="conflow"]:is(:hover, :focus-within) .layer-b { animation: paper-flow-wash 6s ease-in-out infinite alternate; }
@keyframes paper-flow-bands { to { transform: translate(8%, 6%) rotate(-8deg) scale(1.08); } }
@keyframes paper-flow-wash { from { transform: translateX(-25%); } to { transform: translateX(25%); } }

/* Barrier functions: nested contours breathe as an abstract protective field. */
[data-paper="barrier"] .paper-background { background: linear-gradient(125deg, #e4eee5, #e2eee7); }
[data-paper="barrier"] .layer-a { inset: -55%; background: repeating-radial-gradient(ellipse at 75% 60%, transparent 0 24px, rgba(32, 119, 91, 0.18) 25px 26px, transparent 27px 48px); }
[data-paper="barrier"] .layer-b { background: radial-gradient(ellipse at 75% 60%, rgba(140, 199, 166, 0.55), transparent 60%); }
[data-paper="barrier"]:is(:hover, :focus-within) .layer-a { animation: paper-barrier-breathe 4.8s ease-in-out infinite alternate; }
[data-paper="barrier"]:is(:hover, :focus-within) .layer-b { animation: paper-barrier-glow 4.8s ease-in-out infinite alternate; }
@keyframes paper-barrier-breathe { from { transform: scale(0.88); } to { transform: scale(1.12); } }
@keyframes paper-barrier-glow { from { opacity: 0.3; transform: translate(-4%, -3%); } to { opacity: 0.9; transform: translate(4%, 3%); } }

@media (max-width: 640px) {
  .publication-card[data-paper] { gap: 0.85rem; padding: 1rem; }
  .publication-card[data-paper] .pub-meta { gap: 0.4rem 0.7rem; }
  .publication-card[data-paper] h3 { font-size: 1.3rem; }
  .portrait-meta { gap: 0.25rem; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .publication-card[data-paper] .paper-background * { animation: none !important; }
  .publication-card[data-paper], .paper-background { transition: none; }
  .publication-card[data-paper] .paper-background { opacity: 0.22; }
}