/* Focused motion and accessible exploration for the teaching/research emblems. */
.courses-hero-visual.course-emblem {
  width: clamp(280px, 25vw, 330px); filter: none; position: relative;
  padding: 18px; border: 1px solid var(--line); border-radius: 28px;
  background: linear-gradient(145deg, #fffdf8, #f2f5f4);
  box-shadow: 0 12px 36px -26px rgba(21,48,92,.28);
}
.emblem-topline, .network-topline {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.emblem-kicker, .network-kicker {
  color: var(--gold-2); font: 700 .62rem/1.4 var(--mono); letter-spacing: .13em;
}
.motion-toggle {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3);
  background: rgba(255,255,255,.8); cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.motion-toggle svg { width: 15px; height: 15px; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.motion-toggle:hover { background: #fff; color: var(--accent); border-color: var(--accent-line); }
.course-emblem-stage { position: relative; height: 230px; isolation: isolate; }
.course-emblem-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.course-emblem-art .emblem-track { fill: none; stroke: #d9ddd5; stroke-width: 1; }
.course-emblem-art .emblem-orbit { transform-origin: 150px 115px; }
.emblem-spark { fill: var(--gold-3); }
.emblem-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; align-content: center; gap: .3rem;
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 30% 15%, #385b7c, #15305c 68%);
  border: 1px solid #e2cfaa; color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(21,48,92,.5), inset 0 0 0 6px rgba(255,255,255,.04);
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
.emblem-core > svg { width: 74px; height: 58px; overflow: visible; }
.emblem-core > span { color: #f1dfbd; font: 600 .65rem/1.3 var(--sans); }
.emblem-core:hover { color: #fff; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(21,48,92,.55); }
.emblem-shortcut {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--line);
  border-radius: 14px; background: #fffefa; color: var(--accent);
  box-shadow: 0 3px 12px -8px rgba(21,48,92,.22);
  font: 650 .73rem/1.3 var(--sans); text-decoration: none;
  transition: transform 180ms var(--ease-out), border-color 150ms ease, background-color 150ms ease;
}
.emblem-shortcut b { color: var(--gold-2); font: 600 .62rem/1 var(--mono); }
.emblem-shortcut[data-course-shortcut="Graduate"] { top: 4px; left: 0; }
.emblem-shortcut[data-course-shortcut="Undergraduate"] { right: 0; bottom: 0; }
.emblem-shortcut[data-course-shortcut="Vocational"] { left: 0; bottom: 0; }
.emblem-shortcut:hover { background: var(--accent-soft); border-color: var(--accent-line); transform: translateY(-2px); text-decoration: none; }
.emblem-caption { margin: .35rem 0 0; color: var(--ink-3); text-align: center; font-size: .75rem; line-height: 1.5; }
.emblem-caption strong { color: var(--green); font-weight: 650; }

.lab-hero-visual { aspect-ratio: auto; align-items: stretch; }
.lab-constellation.research-network {
  width: 100%; max-width: 490px; aspect-ratio: auto; border-radius: 26px;
  padding: 16px; border: 1px solid #dce2dc; background: #fffefa;
  filter: none; box-shadow: 0 12px 36px -26px rgba(21,48,92,.25);
}
.research-network::before, .research-network::after { display: none; }
.network-topline { padding: 0 2px; }
.network-kicker { display: block; color: var(--accent); }
.network-subtitle { display: block; color: var(--ink-3); font-size: .73rem; margin-top: .15rem; }
.network-actions { display: flex; gap: .25rem; align-items: center; }
.network-reset {
  min-height: 44px; padding: .35rem .6rem; border: 0; border-radius: 10px;
  color: var(--ink-3); background: transparent; cursor: pointer; font: 600 .72rem var(--sans);
}
.network-reset:hover { background: var(--accent-soft); color: var(--accent); }
.network-stage { position: relative; width: 100%; aspect-ratio: 8 / 7; margin-top: .4rem; isolation: isolate; }
.network-wiring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.network-track { fill: none; stroke: #d9e1dd; stroke-width: 1; }
.network-track-inner { stroke-dasharray: 1 9; stroke: #c3d2ce; }
.network-orbit { transform-origin: 240px 210px; }
.network-orbit circle { fill: #b88a43; }
.network-connection { fill: none; stroke: #d3dfdd; stroke-width: 1.2; transition: stroke 180ms ease, opacity 180ms ease; }
.network-stage.is-engaged .network-connection { opacity: .3; }
.network-stage.is-engaged .network-connection.is-active {
  opacity: 1; stroke: #387f89; stroke-width: 2; stroke-dasharray: 5 7;
}
.network-node {
  position: absolute; left: var(--node-x); top: var(--node-y); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0;
  border: 1px solid #cbd8d5; border-radius: 50%; color: var(--accent); background: #fff;
  font: 650 .68rem/1 var(--mono); letter-spacing: .015em; text-decoration: none;
  box-shadow: 0 4px 12px -8px rgba(21,48,92,.22); cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.network-node:hover { background: #eef6f3; border-color: #6c9e97; color: #265d60; text-decoration: none; }
.network-node[aria-pressed="true"] {
  border-color: #2c727a; background: #23636c; color: #fff;
  box-shadow: 0 0 0 5px #e5f0eb, 0 5px 15px -8px #23636c;
}
.network-node:focus-visible, .network-hub:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 5px; }
.network-node[data-lab-node="hpc"] { --node-x: 50%; --node-y: 14.286%; }
.network-node[data-lab-node="hda"] { --node-x: 70.087%; --node-y: 22.64%; }
.network-node[data-lab-node="esc"] { --node-x: 80.775%; --node-y: 43.798%; }
.network-node[data-lab-node="dai"] { --node-x: 77.063%; --node-y: 67.857%; }
.network-node[data-lab-node="dsp"] { --node-x: 60.688%; --node-y: 83.56%; }
.network-node[data-lab-node="cep"] { --node-x: 39.312%; --node-y: 83.56%; }
.network-node[data-lab-node="efcc"] { --node-x: 22.937%; --node-y: 67.857%; }
.network-node[data-lab-node="wsan"] { --node-x: 19.225%; --node-y: 43.798%; }
.network-node[data-lab-node="sec"] { --node-x: 29.913%; --node-y: 22.64%; }
.network-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  width: 100px; height: 100px; border-radius: 50%; border: 1px solid #dfc79b;
  background: radial-gradient(circle at 30% 20%, #416585, #15305c 70%); color: #fff;
  box-shadow: 0 0 0 8px #edf2ed, 0 9px 20px -10px rgba(21,48,92,.5); cursor: pointer;
}
.network-hub strong { font: 500 1.3rem/1.2 var(--serif); letter-spacing: -.02em; }
.network-hub span { color: #dfcba8; font: 600 .52rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.network-details {
  padding: 1rem; border: 1px solid #e0e5db; border-radius: 18px;
  background: linear-gradient(125deg, #f2f7f3, #fbf8f0); min-height: 202px;
}
.network-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.network-detail-code { color: #306469; font: 700 .62rem/1.4 var(--mono); letter-spacing: .12em; }
.network-detail-index { color: var(--ink-3); font: 500 .6rem/1.4 var(--mono); }
.network-detail-title { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.3; }
.network-detail-description { min-height: 4.7em; margin: 0 0 .6rem; color: var(--ink-2); font-size: .83rem; line-height: 1.6; }
.network-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.network-detail-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .8rem; font-weight: 650; }
.network-detail-link svg { width: 15px; height: 15px; flex: none; }
.network-stepper { display: flex; gap: .35rem; flex: none; }
.network-stepper button {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d1dcd5;
  border-radius: 50%; background: #fffefa; color: var(--accent); font-size: 1.1rem; cursor: pointer;
}
.network-stepper button:hover { border-color: #7ca399; background: #eaf3ed; }
.network-help { margin: .7rem 0 0; text-align: center; color: var(--ink-3); font-size: .69rem; line-height: 1.5; }
.no-js .network-help, .no-js .network-stepper, .no-js .network-reset,
.no-js .motion-toggle { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .course-emblem .emblem-orbit { animation: emblemOrbit 30s linear infinite; animation-play-state: paused; }
  .course-emblem .emblem-cap { animation: emblemFloat 4.8s ease-in-out infinite; animation-play-state: paused; }
  .course-emblem .emblem-tassel { transform-origin: 250px 95px; animation: emblemTassel 4.8s ease-in-out infinite; animation-play-state: paused; }
  .course-emblem.is-motion-visible .emblem-orbit,
  .course-emblem.is-motion-visible .emblem-cap,
  .course-emblem.is-motion-visible .emblem-tassel { animation-play-state: running; }
  .research-network .network-orbit { animation: networkOrbit 40s linear infinite !important; animation-play-state: paused !important; }
  .research-network .network-stage.is-engaged .network-connection.is-active { animation: networkFlow 2.4s linear infinite !important; animation-play-state: paused !important; }
  .research-network.is-motion-visible .network-orbit,
  .research-network.is-motion-visible .network-stage.is-engaged .network-connection.is-active { animation-play-state: running !important; }
}
@keyframes emblemOrbit { to { transform: rotate(360deg); } }
@keyframes emblemFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes emblemTassel { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } }
@keyframes networkOrbit { to { transform: rotate(360deg); } }
@keyframes networkFlow { to { stroke-dashoffset: -48; } }
@media (max-width: 1140px) {
  .lab-hero-visual { width: min(100%, 490px); max-width: 490px; }
  .courses-hero-visual.course-emblem { order: 0; width: min(100%, 330px); margin-inline: auto; }
}
@media (min-width: 760px) and (max-width: 1140px) {
  .courses-hero-inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; }
  .courses-hero-visual.course-emblem { width: 300px; }
}
@media (max-width: 640px) {
  .lab-hero-visual { width: 100%; }
  .lab-constellation.research-network { padding: 12px; border-radius: 22px; }
  .network-node { width: 46px; height: 46px; font-size: .66rem; }
  .network-hub { width: 76px; height: 76px; box-shadow: 0 0 0 6px #edf2ed; }
  .network-hub strong { font-size: 1.12rem; }
  .network-hub span { font-size: .48rem; }
  .network-kicker { font-size: .59rem; }
  .network-details { padding: .85rem; min-height: 250px; }
  .network-detail-title { font-size: 1.1rem; }
  .network-detail-description { font-size: .85rem; min-height: 5em; }
  .network-reset { padding-inline: .35rem; }
  .network-stepper { gap: .2rem; }
  .network-detail-footer { flex-wrap: wrap; }
  .network-subtitle { font-size: .7rem; }
  .courses-hero-visual.course-emblem { max-width: 300px; padding: 14px; }
  .course-emblem-stage { height: 220px; }
}
@media (max-width: 350px) {
  .network-hub { width: 64px; height: 64px; }
  .network-node { width: 44px; height: 44px; font-size: .61rem; }
  .network-hub span { letter-spacing: .05em; }
  .network-subtitle { max-width: 100px; }
  .emblem-shortcut { font-size: .68rem; padding-inline: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .course-emblem *, .research-network *, .research-network.is-motion-visible .network-orbit,
  .research-network.is-motion-visible .network-stage.is-engaged .network-connection.is-active {
    animation: none !important; transition: none !important;
  }
  .motion-toggle { display: none; }
}
@media print {
  .motion-toggle, .network-stepper, .network-reset, .network-help { display: none; }
  .course-emblem *, .research-network *, .research-network .network-orbit,
  .research-network .network-stage.is-engaged .network-connection.is-active { animation: none !important; }
}