/* Motion study 03: Head / Glare / Still. */
.motion-control{display:flex;align-items:center;gap:7px;color:var(--faint);font:9px var(--mono)}
.motion-control select{font:10px var(--mono);color:var(--accent);border:1px solid var(--line);border-radius:4px;background:var(--side);padding:6px 5px;cursor:pointer}
.motion-control select:disabled{color:var(--muted);cursor:default}
#navigation{position:relative}
.nav-tracer{position:absolute;left:-22px;top:0;width:2px;border-radius:2px;background:var(--accent);pointer-events:none;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.attention-sensor{width:52px;height:52px;color:var(--accent);margin-bottom:16px}
.attention-sensor svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:.7}
.attention-sensor .sensor-orbit{stroke-dasharray:2 5;opacity:.55;transform-origin:center}
.sensor-needle{transform:rotate(var(--needle-angle,0deg));transform-origin:30px 30px}
.sensor-needle circle{fill:currentColor;stroke:var(--side);stroke-width:1}
.attention-readout{font:9px/1.9 var(--mono);margin-bottom:20px}
.attention-caption{display:block;font-size:7px;letter-spacing:1.3px;color:var(--faint)}
#attention-target{display:block;color:var(--accent);max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-note{padding-top:40px;margin-bottom:24px}
.portrait{perspective:800px;isolation:isolate}
.portrait-rig{position:relative;width:266px;height:266px;transform-style:preserve-3d;z-index:1;pointer-events:none}
.portrait-rig img{width:100%;height:100%;object-fit:contain}
.head-canvas{width:100%;height:100%;display:block}
.flat-logo{position:absolute;inset:0;display:none}
.flat-logo img{display:block}
.lens-reflections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.reflection-soft{opacity:var(--glare-a,.10)}
.reflection-sharp{opacity:var(--glare-b,.10)}
[data-motion=quiet] .head-canvas,[data-motion=off] .head-canvas{display:none}
[data-motion=quiet] .flat-logo,[data-motion=off] .flat-logo{display:block}
[data-motion=off] .lens-reflections{display:none}
.portrait-rig{width:270px;height:282px;transform:none!important}
.portrait-meta,.portrait .stamp{z-index:3}
.portrait .stamp{background:#0009}
.portrait-meta .portrait-state{font-size:7px;letter-spacing:1.1px;color:#b5b0b8}
.portrait-field{position:absolute;inset:0;pointer-events:none;opacity:.28}
.field-orbit{position:absolute;width:250px;height:250px;top:50%;left:50%;margin:-125px 0 0 -125px;border:1px dashed #5c3348;border-radius:50%}
.field-orbit:before{content:'';position:absolute;inset:20px;border:1px solid #34232d;border-radius:50%}
.field-axis{position:absolute;background:#40303a}
.axis-x{height:1px;top:50%;left:18px;right:18px}
.axis-y{width:1px;left:50%;top:18px;bottom:18px}
.project{position:relative;isolation:isolate;overflow:hidden}
.project:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(220px circle at var(--spot-x,50%) var(--spot-y,50%),color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
.project:after{content:'';position:absolute;right:10px;bottom:10px;width:8px;height:8px;border:solid var(--accent);border-width:0 1px 1px 0;opacity:0;pointer-events:none}
.project:focus-visible:after{opacity:.8}
.project:focus-visible:before{opacity:1}
.research-row{position:relative}
.research-row:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent);opacity:0;pointer-events:none}
.research-row:hover:before,.research-row:focus-visible:before{opacity:1}
.motion-running[data-motion=aware] .nav-tracer{transition:transform 300ms cubic-bezier(.2,.7,.3,1),height 300ms}
.motion-running[data-motion=aware] .attention-sensor .sensor-orbit{animation:sensor-orbit 24s linear infinite}
.motion-running[data-motion=aware] .portrait.in-view .field-orbit{animation:sensor-orbit 45s linear infinite}
.motion-running .project{transition:transform .25s,border-color .25s,background .25s}
.motion-running .project:before,.motion-running .project:after{transition:opacity .3s}
.motion-running .project:hover{transform:translateY(-3px)}
.motion-running .project:hover:before,.motion-running .project:hover:after{opacity:1}
@keyframes sensor-orbit{to{transform:rotate(360deg)}}
@media(min-width:1700px){.portrait-rig{width:300px;height:300px}}
@media(max-width:1200px){.portrait-rig{width:240px;height:240px}.nav-tracer{left:-16px}.motion-control{font-size:8px}.top-actions{gap:15px}}
@media(max-width:950px){.portrait-rig{width:220px;height:220px}.attention-readout{font-size:8px}.attention-sensor{width:40px;height:40px}.sidebar-note{margin-bottom:18px}.motion-control>span{display:none}.top-actions{gap:12px}}
@media(max-width:700px){.portrait-rig{width:235px;height:235px}.motion-control select{font-size:8px;padding:5px 2px;max-width:64px}.topbar{gap:12px;padding:0 18px}.top-actions{gap:10px}.breadcrumbs{gap:7px;font-size:8px}.motion-control{gap:0}.sidebar-note{padding-top:20px}.portrait-meta .portrait-state{font-size:6px}.attention-readout{margin-bottom:14px}}
@media(max-width:350px){.verdict-pill{font-size:6px}.breadcrumbs{gap:5px}.topbar{padding:0 14px;gap:9px}.top-actions{gap:6px}.motion-control select{max-width:58px}}

/* Glare changes only the opacity of stationary lens highlights. No head or texture moves. */
[data-motion=quiet] .portrait-field{opacity:.16}
[data-motion=quiet] .portrait-rig{transform:none}
[data-motion=off] .portrait-field{opacity:.16}
@media(prefers-reduced-motion:reduce){.portrait-rig{transform:none!important}.reflection-soft,.reflection-sharp{transition:none!important}}

/* Match the source artwork color in the still, glare, and volume versions. */
.flat-logo img{filter:none}

.head-loading .head-canvas{opacity:0}.head-loading .flat-logo{display:block!important}
.head-canvas{background:#000}

/* A symmetric, themed control uses native radio keyboard behaviour. */
.motion-control select[hidden]{display:none}
.motion-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;gap:3px;border:1px solid var(--line);border-radius:8px;background:var(--side)}
.motion-segments label{position:relative;min-width:43px;cursor:pointer;text-align:center}
.motion-segments input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.motion-segments label>span{display:flex;align-items:center;justify-content:center;min-height:30px;padding:4px 8px;border:1px solid transparent;border-radius:5px;color:var(--muted);font:10px var(--mono)}
.motion-segments input:checked+span{color:var(--accent);border-color:var(--line);background:var(--raised)}
.motion-segments input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.motion-segments input:disabled+span{opacity:.4;cursor:not-allowed}
.portrait{background:transparent;border-color:transparent}
.portrait:before,.portrait:after{content:none}
.portrait-field{display:none}
.portrait .stamp{background:transparent;color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.head-canvas{background:transparent}
.portrait-meta,.portrait-meta .portrait-state{color:var(--faint)}
@media(max-width:1200px){.motion-control>span{display:none}}
@media(max-width:700px){.top-actions .verdict-pill{display:none}.motion-segments label{min-width:40px}.motion-segments label>span{min-height:34px;padding:4px 6px}}
@media(max-width:500px){.breadcrumbs>span:first-child,.breadcrumbs>span:nth-child(2){display:none}.topbar{gap:12px}.motion-segments label{min-width:36px}}