/* Stage 12 — visible-but-quiet research atmosphere + card-specific motifs. */

/* Section atmosphere: make the field texture noticeable without turning it into wallpaper. */
#research,
#teaching,
#methods,
#publications,
#experience,
#education {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#research::before,
#teaching::before,
#methods::before,
#publications::before,
#experience::before,
#education::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background:
    radial-gradient(ellipse 620px 235px at 92% 28%, transparent 48.2%, color-mix(in srgb,var(--motif-line) 88%,transparent) 48.7%, transparent 49.35%),
    radial-gradient(ellipse 490px 325px at 91% 31%, transparent 48.4%, color-mix(in srgb,var(--motif-line) 76%,transparent) 48.9%, transparent 49.5%),
    radial-gradient(ellipse 365px 430px at 88% 35%, transparent 48.5%, color-mix(in srgb,var(--motif-line) 58%,transparent) 49%, transparent 49.6%),
    radial-gradient(circle at 88% 33%, color-mix(in srgb,var(--accent-faint) 85%,transparent) 0, transparent 34%);
  -webkit-mask-image: linear-gradient(90deg, transparent 36%, rgba(0,0,0,.18) 52%, #000 76%, rgba(0,0,0,.35) 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 36%, rgba(0,0,0,.18) 52%, #000 76%, rgba(0,0,0,.35) 93%, transparent 100%);
}

#teaching::before,
#experience::before { transform: scaleX(-1); }

#research > *,
#teaching > *,
#methods > *,
#publications > *,
#experience > *,
#education > * {
  position: relative;
  z-index: 1;
}

html.theme-dark #research::before,
html.theme-dark #teaching::before,
html.theme-dark #methods::before,
html.theme-dark #publications::before,
html.theme-dark #experience::before,
html.theme-dark #education::before {
  opacity: .54;
}

/* Publications: every card gets a quiet texture; featured papers get the stronger treatment + star. */
#publications .publication-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}

#publications .pub-entry,
#publications .pub-entry:first-child {
  grid-column: auto !important;
  min-height: 0;
  padding: 14px 17px !important;
  background: var(--surface) !important;
  position: relative;
  overflow: hidden;
}

#publications .pub-entry::after,
#publications .pub-entry:first-child::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  right: -6%;
  top: -13%;
  width: 42%;
  height: 132%;
  opacity: .20;
  background:
    radial-gradient(circle,var(--motif-dot) 1px,transparent 1.25px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse at 68% 50%,#000 7%,rgba(0,0,0,.72) 35%,transparent 73%);
  mask-image: radial-gradient(ellipse at 68% 50%,#000 7%,rgba(0,0,0,.72) 35%,transparent 73%);
  pointer-events: none;
}

#publications .pub-entry > * { position: relative; z-index: 1; }

#publications .pub-entry:first-child::before { content: none !important; }

#publications .pub-entry.pub-featured {
  background:
    linear-gradient(102deg,var(--surface) 0 72%,color-mix(in srgb,var(--accent-soft) 68%,var(--surface)) 100%) !important;
}

#publications .pub-entry.pub-featured::after {
  opacity: .52;
  width: 46%;
  background-size: 10px 10px;
}

#publications .pub-entry.pub-featured::before {
  content: "★" !important;
  position: absolute;
  z-index: 2;
  right: 16px;
  top: 12px;
  color: var(--accent);
  font-size: .78rem;
  line-height: 1;
}

/* Teaching: page-like lines for teaching, constellation dots for supervision. */
.teaching-card {
  position: relative;
  overflow: hidden;
}
.teaching-card::before {
  content: "";
  position: absolute;
  right: -7%;
  bottom: -34%;
  width: 45%;
  height: 120%;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 100% 100%,transparent 0 15px,var(--motif-line) 16px,transparent 17px 27px);
  transform: rotate(-7deg);
}
.teaching-card:nth-child(2)::before {
  right: -3%;
  bottom: -14%;
  width: 38%;
  height: 104%;
  opacity: .30;
  background:
    radial-gradient(circle,var(--motif-dot) 1.35px,transparent 1.55px) 0 0/18px 18px,
    radial-gradient(ellipse at 80% 70%,transparent 47%,var(--motif-line) 48%,transparent 49%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 65%,#000 4%,rgba(0,0,0,.85) 35%,transparent 72%);
  mask-image: radial-gradient(ellipse at 70% 65%,#000 4%,rgba(0,0,0,.85) 35%,transparent 72%);
}
.teaching-card > * { position: relative; z-index: 1; }

/* Methods: a faint circuit/grid field replaces the plain empty corners. */
.method-card {
  position: relative;
  overflow: hidden;
}
.method-card::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: 48%;
  height: 116%;
  pointer-events: none;
  opacity: .26;
  background:
    linear-gradient(var(--motif-line) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,var(--motif-line) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(circle at 24px 24px,var(--motif-dot) 2px,transparent 2.3px) 0 0/48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 72% 65%,#000 5%,rgba(0,0,0,.72) 36%,transparent 74%);
  mask-image: radial-gradient(ellipse at 72% 65%,#000 5%,rgba(0,0,0,.72) 36%,transparent 74%);
}
.method-card::after {
  width: 112px;
  height: 112px;
  right: -48px;
  bottom: -48px;
  opacity: .42;
}
.method-card > * { position: relative; z-index: 1; }

/* Employment: a restrained timeline/network motif in the far right of each card. */
#experience-timeline > .experience-card-v4 {
  position: relative;
  overflow: hidden;
}
#experience-timeline > .experience-card-v4::after {
  content: "";
  position: absolute;
  right: -4%;
  top: 8%;
  width: 27%;
  height: 84%;
  opacity: .25;
  pointer-events: none;
  background:
    linear-gradient(90deg,transparent 10%,var(--motif-line) 10% 10.6%,transparent 10.6% 100%),
    radial-gradient(circle at 10% 18%,var(--motif-dot) 3px,transparent 3.4px),
    radial-gradient(circle at 10% 50%,var(--motif-dot) 3px,transparent 3.4px),
    radial-gradient(circle at 10% 82%,var(--motif-dot) 3px,transparent 3.4px),
    repeating-linear-gradient(-12deg,transparent 0 17px,color-mix(in srgb,var(--motif-line) 72%,transparent) 18px,transparent 19px 35px);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 32%,#000 84%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 32%,#000 84%,transparent);
}
#experience-timeline > .experience-card-v4 > * { position: relative; z-index: 1; }

/* Education: broad concentric academic/crest-like arcs. */
.education-card-v5 {
  position: relative;
  overflow: hidden;
}
.education-card-v5::after {
  content: "";
  position: absolute;
  right: -9%;
  bottom: -54%;
  width: 44%;
  height: 168%;
  opacity: .31;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 100% 100%,transparent 0 20px,var(--motif-line) 21px,transparent 22px 34px);
  transform: rotate(-5deg);
  -webkit-mask-image: radial-gradient(ellipse at 80% 74%,#000 10%,rgba(0,0,0,.8) 38%,transparent 72%);
  mask-image: radial-gradient(ellipse at 80% 74%,#000 10%,rgba(0,0,0,.8) 38%,transparent 72%);
}
.education-card-v5 > * { position: relative; z-index: 1; }

/* Dark mode: slightly strengthen local motifs because the same opacity reads softer on charcoal. */
html.theme-dark #publications .pub-entry::after { opacity: .24; }
html.theme-dark #publications .pub-entry.pub-featured::after { opacity: .48; }
html.theme-dark .teaching-card::before,
html.theme-dark .education-card-v5::after { opacity: .28; }
html.theme-dark .method-card::before,
html.theme-dark #experience-timeline > .experience-card-v4::after { opacity: .22; }

@media (max-width: 900px) {
  #publications .publication-grid { grid-template-columns: 1fr; }
  #publications .pub-entry::after { width: 36%; opacity: .16; }
  #research::before,
  #teaching::before,
  #methods::before,
  #publications::before,
  #experience::before,
  #education::before { opacity: .34; }
}

@media (max-width: 700px) {
  #publications .pub-entry,
  #publications .pub-entry:first-child { padding: 14px 15px !important; }
  #publications .pub-entry::after,
  #publications .pub-entry:first-child::after { opacity: .12; width: 32%; }
  .teaching-card::before,
  .method-card::before,
  #experience-timeline > .experience-card-v4::after,
  .education-card-v5::after { opacity: .16; }
}