/* One continuous browser surface. Runtime changes update the strip below it,
   never the opacity, size or visibility of the actual browser image. */
.research-stage { position:relative;isolation:isolate;min-height:0;background:var(--bg) }
.research-mind { display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;
  gap:12px;height:74px;padding:12px 18px 12px 15px;border-top:1px solid var(--line);
  border-left:3px solid transparent;background:var(--surface) }
.research-mind[data-active="true"] { border-left-color:var(--info);background:var(--raised) }
.mind-art { width:60px;height:44px;opacity:.9;transition:opacity .24s ease }
.research-mind[data-active="true"] .mind-art { opacity:1 }
#mind-network { display:block;width:100%;height:100% }
.mind-copy { min-width:0 }
.mind-copy h3 { margin:0 0 4px;color:var(--text);font-size:14px;font-weight:600;letter-spacing:-.2px;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.mind-copy p { margin:0;color:var(--muted);font-size:12px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#mind-elapsed { min-width:0;color:var(--muted);font:10px/1.5 var(--sans);
  font-variant-numeric:tabular-nums;white-space:nowrap }
@media(max-width:640px) {
  .research-mind { grid-template-columns:44px minmax(0,1fr) auto;gap:9px;height:88px;padding:10px 12px 10px 9px }
  .mind-art { width:44px;height:36px }
  .mind-copy h3 { font-size:13px }
  .mind-copy p { font-size:11px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden }
  #mind-elapsed { align-self:start;padding-top:4px;font-size:9px }
}
@media(prefers-reduced-motion:reduce) {
  .mind-art { transition:none }
}

/* A restrained highlight follows STRAY's etched gaze during reported work.
   Fixed geometry; only transforms/opacity move, never actual browser pixels. */
.hero-cat { position:relative }
.cat-signal { position:absolute;inset:0;overflow:hidden;pointer-events:none;
  mask-mode:luminance;mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;opacity:0 }
.cat-signal i { display:block;position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 42%,rgb(255 255 255 / .14) 49%,rgb(255 255 255 / .14) 51%,transparent 58%);
  opacity:.48;transform:translateX(-100%) }
.activity-signal { display:inline-grid;gap:3px;width:18px;margin-left:2px;opacity:0;flex-shrink:0 }
.activity-signal i { display:block;width:13px;height:1px;background:var(--accent);transform-origin:left }
.activity-signal i:nth-child(2) { width:18px }
.activity-signal i:nth-child(3) { width:9px }
body[data-research-active="true"] .activity-signal { opacity:1 }
body[data-research-active="false"] .tool-capability::before,
body[data-research-active="false"] .tool-capability::after { animation:none }

@media(prefers-reduced-motion:no-preference) {
  body[data-research-active="true"] .cat-signal { opacity:1;mask-image:url('/static/stray/etched/watchful-hero-768.webp') }
  body[data-research-active="true"] .cat-signal i { animation:cat-signal-pass 8s cubic-bezier(.45,0,.2,1) infinite }
  body[data-research-active="true"] .activity-signal i { animation:activity-signal-pass 2.8s ease-in-out infinite }
  body[data-research-active="true"] .activity-signal i:nth-child(2) { animation-delay:.22s }
  body[data-research-active="true"] .activity-signal i:nth-child(3) { animation-delay:.44s }
  .tool-capability[data-active="true"]::after {
    left:20%;right:auto;width:24%;animation:ability-signal-pass 2.6s cubic-bezier(.45,0,.2,1) infinite }
}
@media(max-width:1023px) {
  .cat-signal { mask-size:cover;mask-position:72% center }
}
@media(max-width:767px) {
  .cat-signal { mask-position:72% center }
}
@keyframes cat-signal-pass {
  0%,12% { transform:translateX(-100%);opacity:0 }
  24% { opacity:.48 }
  62% { opacity:.48 }
  78%,100% { transform:translateX(100%);opacity:0 }
}
@keyframes activity-signal-pass {
  0%,100% { transform:scaleX(.45);opacity:.35 }
  45% { transform:scaleX(1);opacity:1 }
}
@keyframes ability-signal-pass {
  0%,100% { transform:translateX(0);opacity:.45 }
  50% { transform:translateX(150%);opacity:1 }
}
/* Freeze every viewer animation through the shared preference and lifecycle.
   Independent intersection states also suspend surfaces outside the viewport. */
body[data-motion-paused="true"] .cat-signal i,
body[data-motion-paused="true"] .activity-signal i,
body[data-motion-paused="true"] .tool-capability::before,
body[data-motion-paused="true"] .tool-capability::after,
.hero-art[data-motion-visible="false"] .cat-signal i,
.activity[data-motion-visible="false"] .activity-signal i,
.tool-monitor[data-motion-visible="false"] .tool-capability::before,
.tool-monitor[data-motion-visible="false"] .tool-capability::after { animation-play-state:paused }