/* theme 2.7 — motion and interaction (phase 3). Everything here respects prefers-reduced-motion. */

/* page transitions: the header stays put, the page cross-fades */
.hd{view-transition-name:alm-hd}
::view-transition-old(root){animation:alm-vt-out .22s ease both}
::view-transition-new(root){animation:alm-vt-in .32s ease both}
@keyframes alm-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes alm-vt-in{from{opacity:0;transform:translateY(10px)}}

/* reading progress */
.fx-prog{position:fixed;inset-inline:0;top:0;height:3px;z-index:999;pointer-events:none;background:linear-gradient(90deg,#F4AC1E,var(--btn));transform-origin:right;transform:scaleX(var(--p,0))}

/* hero glow follows the pointer */
.hero{--mx:70%;--my:30%}
.fx .hero>.wrap{position:relative;z-index:1}
.fx .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,#F4AC1E 16%,transparent),transparent 70%);transition:background .2s}

/* live Musa card in the hero */
a.fl2.musa-live{color:inherit;text-decoration:none;cursor:pointer;max-width:270px;transition:transform .25s,box-shadow .25s,border-color .25s}
a.fl2.musa-live:hover,a.fl2.musa-live:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:0 18px 40px -18px rgba(88,25,112,.5)}
.musa-live .tw{display:block;margin-top:8px;padding:8px 12px;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--acc) 10%,transparent);font-size:13.5px;min-height:1.6em;color:var(--ink)}
.musa-live .tw::after{content:"";display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:-2px;background:currentColor;animation:alm-blink 1s steps(1) infinite}
.musa-live .ask{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--acc)}
@keyframes alm-blink{50%{opacity:0}}

/* departments map (/musa/) */
.dmap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:28px}
.dmap svg{width:100%;height:auto;display:block;overflow:visible}
.dm-ring{fill:none;stroke:var(--line2);stroke-dasharray:3 6}
.dm-ring.hub{stroke-dasharray:none;stroke:color-mix(in srgb,var(--acc) 22%,transparent);stroke-width:1.5}
.dm-ln{stroke:var(--line2);stroke-width:1.2;transition:stroke .3s,stroke-width .3s}
.dm-ln.on{stroke:#F4AC1E;stroke-width:2.4}
.dm-pulse{fill:#F4AC1E;opacity:0}
.dm-nd{cursor:pointer;outline:none}
.dm-nd circle{transition:transform .3s,stroke-width .3s;transform-box:fill-box;transform-origin:center;stroke:var(--paper);stroke-width:3}
.dm-nd.ex circle{fill:var(--btn)}
.dm-nd.sh circle{fill:#F4AC1E}
.dm-nd text{font-family:Sora,sans-serif;font-weight:700;font-size:13px;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.dm-nd.sh text{fill:#2A0A36}
.dm-nd:hover circle,.dm-nd:focus-visible circle,.dm-nd.on circle{transform:scale(1.22);stroke:#F4AC1E;stroke-width:4}
.dm-c circle{fill:var(--dark)}
.dm-c text{font-family:Sora,sans-serif;font-weight:800;font-size:30px;fill:#F4AC1E;text-anchor:middle;dominant-baseline:central}
.dm-c .halo{fill:none;stroke:#F4AC1E;opacity:.35}
.dm-panel{padding:26px;border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);min-height:260px}
.dm-panel .k{display:flex;align-items:center;gap:10px;font-family:Sora,sans-serif;font-size:12px;color:var(--mute)}
.dm-panel .k i{width:10px;height:10px;border-radius:50%;background:var(--btn)}
.dm-panel .k i.sh{background:#F4AC1E}
.dm-panel h3{margin:12px 0 8px;font-size:24px;line-height:1.4}
.dm-panel .n{font-family:Sora,sans-serif;font-weight:800;font-size:44px;color:var(--acc);line-height:1}
.dm-panel .n small{font-family:inherit;font-size:14px;font-weight:600;color:var(--mute);margin-inline-start:8px}
.dm-panel ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dm-panel li{padding:6px 12px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);font-size:13.5px}
.dm-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;font-size:13px;color:var(--mute)}
.dm-legend span{display:inline-flex;align-items:center;gap:8px}
.dm-legend i{width:10px;height:10px;border-radius:50%;background:var(--btn)}
.dm-legend i.sh{background:#F4AC1E}
.dm-list{display:flex;justify-content:center;margin:6px 0 18px}
.dg.dm-hide{display:none}
.dc.dm-hl{border-color:#F4AC1E;transform:translateY(-3px)}
@media (max-width:900px){.dmap,.dm-list{display:none}.dg.dm-hide{display:grid}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .fx .hero::after,.fx-prog{display:none}
  .musa-live .tw::after,.dm-pulse{animation:none;display:none}
  .dm-nd circle,a.fl2.musa-live{transition:none}
}