/* OPTIONAL ENHANCEMENT: loaded only with _data/ui.yml -> effects: true.
   Text, sizes and data are identical to the clean version. No permanent motion. */
.effects-on .research-card,
.effects-on .project-card {
  --surface-x: 50%;
  --surface-y: 30%;
  isolation: isolate;
  background: radial-gradient(240px circle at var(--surface-x) var(--surface-y),rgba(144,178,233,.10),transparent 90%),linear-gradient(150deg,#ffffff 10%,#f7faff 75%,#faf7ff);
  border-color: #d9e3f3;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 -1px #edf1f8, 0 12px 28px #36527c0d;
}
.effects-on .area-icon {
  background: linear-gradient(145deg,#ffffff,#eef3ff);
  border-color: #dbe3f4;
  box-shadow: inset 0 1px 2px #fff, inset 0 -2px 3px #c1cfea40, 0 7px 12px -6px #5d74a354;
}
.effects-on .project-area {
  background: linear-gradient(165deg,#ffffff,#f0f5fe 85%);
  border: 1px solid #d8e2f1;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e9eef6, 0 5px 10px #5368850a;
}
.effects-on .project-role-badge {
  background: linear-gradient(145deg,#f4f8ff,#e9edff 48%,#efe5fb);
  box-shadow: inset 0 1px 0 #ffffffdc, 0 2px 0 -1px #c8badd, 0 7px 14px #6a56941a;
}
.effects-on .publication-figure {
  box-shadow: 0 9px 0 -5px #dbe5f4, 0 21px 30px -13px #38517445, inset 0 1px 0 #fff;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .effects-on .research-card,
  .effects-on .project-card,
  .effects-on .publication-figure { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .effects-on .research-card:hover { transform: translateY(-3px); border-color: #bacce8; box-shadow: inset 0 1px 0 #fff, 0 3px 0 -1px #e7edf7, 0 19px 34px #36527c16; }
  .effects-on .project-card:hover { transform: translateY(-2px); border-color: #c0cfe8; }
  .effects-on .publication-figure:hover { transform: perspective(700px) rotateY(-2deg) translateY(-2px); }
  .effects-on .portrait-halo { transform: translate(var(--px),var(--py)); transition: transform .4s ease-out; }
}
@media (prefers-reduced-motion: no-preference) {
  .effects-on .is-entered { animation: surface-enter .42s ease-out both; }
  @keyframes surface-enter { from { opacity: .84; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .effects-on .research-card, .effects-on .project-card, .effects-on .publication-figure, .effects-on .portrait-halo { transform: none !important; translate: none !important; }
}
@media print {
  .effects-on .research-card, .effects-on .project-card, .effects-on .publication-figure, .effects-on .project-role-badge, .effects-on .project-area { box-shadow: none; background: white; transform: none; translate: none; }
}

/* =========================================================
   Softer enhanced surfaces
   ========================================================= */

.effects-on .research-card,
.effects-on .project-card {
  background:
    radial-gradient(
      260px circle at var(--surface-x) var(--surface-y),
      rgba(130, 168, 226, 0.028),
      transparent 92%
    ),
    linear-gradient(
      150deg,
      #ffffff 12%,
      #fcfdff 78%,
      #fefcff
    );

  border-color: #e6ebf3;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 23px rgba(54,82,124,.035);
}


.effects-on .area-icon {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafbff
    );

  border-color: #e7ecf3;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 9px rgba(69,91,125,.025);
}


.effects-on .project-area {
  background: rgba(250,252,255,.9);

  border-color: #e5eaf2;

  box-shadow:
    0 2px 7px rgba(58,77,105,.018);
}


.effects-on .project-role-badge {
  background:
    linear-gradient(
      145deg,
      #fcfdff,
      #faf8ff
    );

  border-color: #e1dbee;

  box-shadow:
    0 3px 9px rgba(89,70,122,.025);
}


@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .effects-on .research-card:hover {
    transform: translateY(-3px);

    border-color: #d4ddea;

    box-shadow:
      0 13px 27px rgba(54,82,124,.055);
  }

  .effects-on .project-card:hover {
    transform: translateY(-2px);

    border-color: #d5ddea;

    box-shadow:
      0 12px 26px rgba(54,82,124,.05);
  }
}