/* Observe source studies: motion graphics built from HTML and SVG, with no generated photography. */
.capture-stage{border-radius:12px}
.capture-stage:after{display:none}
.capture-stage.has-photo:after{display:block;z-index:3;background:linear-gradient(180deg,rgba(20,33,42,.1),transparent 35%)}
.source-stack>button{position:relative}
.observe.is-cycling .source-stack>button[aria-pressed="true"]:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--amber);transform-origin:left;animation:capture-dwell 6.5s linear both}
@keyframes capture-dwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.glasses-annotation{position:absolute;top:0;bottom:0;left:50%;width:min(45%,540px);z-index:2;transform:translateX(-50%);pointer-events:none}
.glasses-annotation span{position:absolute;left:5%;top:16%;padding:8px 10px;border-left:2px solid #d3a052;background:rgba(17,30,38,.86);color:#fffaf0;font-family:"Arial Narrow",Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.glasses-annotation i{position:absolute;left:31%;top:20.5%;width:8%;height:1px;background:#d3a052}
.glasses-annotation i:after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border:1px solid #d3a052;border-radius:50%;background:rgba(17,30,38,.7)}
.motion-panel{overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.files-panel{background:#14212a;color:#fffaf0}
.cad-panel{background:#e8e1d2;color:#14212a}
.motion-header,.motion-bottom{position:absolute;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:"Arial Narrow",Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;z-index:4}
.motion-header{top:25px;padding-bottom:16px;border-bottom:1px solid currentColor}
.files-panel .motion-header,.files-panel .motion-bottom{color:#e4d8be}
.cad-panel .motion-header,.cad-panel .motion-bottom{color:#56646c}
.motion-header span:last-child{text-align:right;opacity:.7}
.motion-panel h3{position:absolute;z-index:4;left:27px;top:73px;margin:0;font-size:clamp(27px,3.15vw,43px);line-height:.96;letter-spacing:-.055em;font-weight:500}
.motion-scene{position:absolute;left:27px;right:27px;top:188px;bottom:81px;overflow:hidden}
.motion-grid{position:absolute;inset:0;opacity:.24;pointer-events:none;background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(0deg,transparent,#000 34%,#000 76%,transparent)}
.files-panel .motion-grid{color:#526873}.cad-panel .motion-grid{color:#849197;opacity:.28}
.motion-bottom{bottom:48px;white-space:nowrap}
.motion-bottom span:last-child{text-align:right;color:#d2a25b}
.cad-panel .motion-bottom span:last-child{color:#a37637}
.motion-rail{position:absolute;left:27px;right:27px;bottom:15px;height:20px;border-top:1px solid currentColor;z-index:4;color:#718089}
.motion-rail:before{content:"";position:absolute;top:7px;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 13px);opacity:.55}
.motion-rail .rail-fill{position:absolute;left:0;top:-2px;height:3px;width:0;background:#d3a052}
.motion-panel.is-active .motion-rail .rail-fill{animation:rail-progress 8s linear infinite}
.motion-rail>i{position:absolute;top:-10px;left:0;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #d3a052;transform:translateX(-50%)}
.motion-panel.is-active .motion-rail>i{animation:rail-pointer 8s linear infinite}
.motion-rail .rail-labels{position:absolute;left:0;right:0;top:10px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;text-transform:uppercase;font-style:normal;font-weight:700}
.motion-rail em{font-style:normal}
@keyframes rail-progress{0%{width:0}90%{width:100%}100%{width:100%}}
@keyframes rail-pointer{0%{left:0}90%{left:100%}100%{left:100%}}

/* 03: only the source files, with one quiet emphasis moving between them. */
.files-panel{background:#10171d;color:#d9e0df}
.file-gallery{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:30px}
.file-gallery:before{content:"";position:absolute;left:30px;right:30px;top:50%;border-top:1px solid rgba(180,197,202,.2)}
.gallery-file{position:relative;flex:1;max-width:130px;height:205px;min-width:0;padding:14px;border:1px solid #65747c;background:#14212a;box-shadow:0 18px 28px rgba(0,0,0,.18);transform:translateY(0)}
.gallery-file:before{content:"";position:absolute;right:-1px;top:-1px;width:20px;height:20px;border-left:1px solid #65747c;border-bottom:1px solid #65747c;background:#10171d;transform:translate(1px,-1px) skew(0deg)}
.gallery-ext{position:relative;z-index:1;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;color:#b8c6c7}
.gallery-file svg{width:100%;height:calc(100% - 22px);margin-top:5px;fill:none;stroke:#aebdc0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.files-panel.is-active .gallery-file{animation:file-study 8s ease-in-out infinite;animation-delay:calc(var(--n)*-2s)}
.files-panel.is-active .gallery-file svg{animation:file-ink 8s ease-in-out infinite;animation-delay:calc(var(--n)*-2s)}
@keyframes file-study{0%,100%{border-color:#65747c;transform:translateY(0)}12%,22%{border-color:#d3a052;transform:translateY(-13px)}35%{border-color:#65747c;transform:translateY(0)}}
@keyframes file-ink{0%,100%{stroke:#aebdc0}12%,22%{stroke:#f0c37c}35%{stroke:#aebdc0}}

/* 04: an actual Blender model and its corresponding orthographic drawing. */
.cad-file-panel{background:#171e23}
.cad-file-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:17px;padding:30px}
.cad-drawing-card,.cad-viewport-card{position:relative;flex:0 0 auto;overflow:hidden;box-shadow:0 18px 28px rgba(0,0,0,.18)}
.cad-drawing-card{width:42%;max-width:275px;aspect-ratio:500/625;border:1px solid #9caeb1;background:#f2f2ed}
.cad-drawing-card img{height:100%;object-fit:fill}
.cad-viewport-card{width:53%;max-width:340px;aspect-ratio:1;border:1px solid #64747b;background:#34383b}
.cad-file-panel .cad-viewport-card video{position:static;display:block;width:100%;height:100%;object-fit:cover}
.cad-viewport-card:after{content:"";position:absolute;inset:0;border:12px solid rgba(17,24,28,.16);pointer-events:none}

@media(max-width:950px){.motion-panel h3{font-size:clamp(32px,6vw,48px)}}
@media(max-width:620px){.motion-panel h3{top:68px;font-size:clamp(28px,7vw,39px)}.motion-scene{top:165px;bottom:68px;left:18px;right:18px}.motion-header,.motion-bottom,.motion-rail{left:18px;right:18px}.motion-bottom{bottom:40px;font-size:8px;white-space:normal}.motion-bottom span:last-child{max-width:39%}.motion-rail{bottom:10px}.file-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,115px);gap:12px;padding:20px}.gallery-file{height:115px;max-width:none;width:100%}.gallery-file svg{height:calc(100% - 20px);margin-top:0}.gallery-ext{font-size:9px}.cad-file-stage{gap:10px;padding:14px}.cad-drawing-card{width:42%}.cad-viewport-card{width:53%}}
@media(prefers-reduced-motion:reduce){.motion-panel *{animation:none!important;transition:none!important}.files-panel .gallery-file{animation:none!important}.files-panel .gallery-file svg{animation:none!important}.cad-viewport-card{background:#34383b url("machined-bracket-poster.jpg") center/cover no-repeat}.observe.is-cycling .source-stack>button[aria-pressed="true"]:after{animation:none}}