/* Product concept studies. All motion uses the existing studio-art visibility budget. */
.product-exhibits { margin:90px 0 0; padding-top:42px; border-top:1px solid #363636; }
.product-exhibits-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:42px; }
.product-exhibits-heading h2 { margin:0; font-size:clamp(32px,4vw,54px); font-weight:450; line-height:1.1; letter-spacing:-.045em; }
.product-exhibits-heading>.product-exhibits-intro,
.product-exhibits-heading>p { max-width:300px; margin:0 0 4px; color:#a6a6a6; font-size:15px; line-height:1.7; }
.product-exhibits-heading .eyebrow { margin:0 0 23px; color:#b0b0b0; }
.product-exhibits-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px; }
.product-exhibit { min-width:0; }
.product-exhibits .product-exhibit-art { aspect-ratio:1/1; border-radius:50%; border:1px solid #383838; background:#080808; }
.product-exhibits .product-exhibit-art::before { background:radial-gradient(circle at 50% 50%,#141414,transparent 68%); }
.product-exhibits .product-exhibit-art .studio-art__scene { overflow:visible; }
.product-exhibit-copy { padding:27px 3px 10px; }
.product-exhibit-index { margin:0 0 13px; color:#999; font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.product-exhibit-copy h3 { margin:0 0 14px; color:#f5f5f5; font-size:clamp(23px,2.5vw,32px); font-weight:450; line-height:1.15; letter-spacing:-.035em; }
.product-exhibit-copy>p:last-child { max-width:46ch; margin:0; font-size:15px; line-height:1.75; color:#aaa; }
.product-exhibits .px-label { fill:#e8e8e8; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.7px; }
.product-exhibits .px-small { fill:#bbb; font:7px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.7px; }
.product-exhibits .px-tiny { fill:#aaa; font:5.5px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.45px; }
.product-exhibits .px-center-word { fill:#f5f5f5; font:700 20px Arial,Helvetica,sans-serif; letter-spacing:-.8px; }
.product-exhibits .px-card-word { fill:#fff; font:700 22px Arial,Helvetica,sans-serif; letter-spacing:-.9px; }
.product-exhibits .px-poster-word { fill:#fff; font:700 25px Arial,Helvetica,sans-serif; letter-spacing:-.85px; }
.product-exhibits .px-prompt { fill:#eee; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.2px; }
.product-exhibits .px-line { fill:none; stroke:#686868; stroke-width:.8; }
.product-exhibits .px-blue { fill:none; stroke:#0066ff; stroke-width:1.5; }
.product-exhibits .px-white { fill:#fff; }
.product-exhibits .px-white-line { stroke:#fff; stroke-width:.6; fill:none; opacity:.65; }
.product-exhibits .px-trace { fill:none; stroke:#0066ff; stroke-width:1.3; stroke-dasharray:5 15; animation:pxTrace 5s linear infinite; }
/* Shared direction: the three disciplines act on the same visual brief. */
.product-exhibits .px-direction-orbit { stroke-dasharray:100; animation:pxDirectionOrbit 10s linear infinite; }
.product-exhibits .px-direction-render { animation:pxImageRender 10s ease-in-out infinite; }
.product-exhibits .px-direction-type { animation:pxType 10s steps(12,end) infinite; }
.product-exhibits .px-writing-cursor { animation:pxCursor 1s steps(1,end) infinite; }
.product-exhibits .px-direction-camera { transform-origin:90px 65px; animation:pxFilmPush 10s ease-in-out infinite; }
.product-exhibits .px-direction-time { stroke-dasharray:100; animation:pxFilmTime 10s linear infinite; }
.product-exhibits .px-direction-image { animation:pxImageLift 10s ease-in-out infinite; }
.product-exhibits .px-direction-copy { animation:pxCopyLift 10s ease-in-out infinite; }
.product-exhibits .px-direction-film { animation:pxMotionLift 10s ease-in-out infinite; }
/* Registration: the loose media become one physical, finished campaign print. */
.product-exhibits .px-align-base { opacity:.25; }
.product-exhibits .px-align-image,
.product-exhibits .px-align-motion,
.product-exhibits .px-align-copy,
.product-exhibits .px-align-master { transform-origin:320px 260px; }
.product-exhibits .px-align-image { animation:pxAlignImage 11s cubic-bezier(.22,.7,.24,1) infinite; }
.product-exhibits .px-align-motion { animation:pxAlignMotion 11s cubic-bezier(.22,.7,.24,1) infinite; }
.product-exhibits .px-align-copy { animation:pxAlignCopy 11s cubic-bezier(.22,.7,.24,1) infinite; }
.product-exhibits .px-align-master { opacity:0; animation:pxAlignMaster 11s cubic-bezier(.22,.7,.24,1) infinite; }
.product-exhibits .px-align-guide { animation:pxRegister 11s linear infinite; }
/* A creative workbench: photography, motion and sound surround one prompt. */
.product-exhibits .px-audio-bar { transform-box:fill-box; transform-origin:center bottom; animation:pxAudio 1.8s ease-in-out infinite; }
.product-exhibits .px-expression-image { animation:pxWorkbenchImage 8s ease-in-out infinite; }
.product-exhibits .px-expression-film { animation:pxWorkbenchFilm 8s ease-in-out infinite; }
.product-exhibits .px-workbench-camera { transform-origin:90px 65px; animation:pxWorkbenchCamera 8s ease-in-out infinite; }
.product-exhibits .px-expression-audio { animation:pxAudioLift 8s ease-in-out infinite; }
/* One butterfly remains recognizable as its complete visual treatment changes. */
.product-exhibits .px-treatment-wire { clip-path:inset(0 66.666% 0 0); animation:pxWireTreatment 12s linear infinite; }
.product-exhibits .px-treatment-graphic { clip-path:inset(0 33.333% 0 33.333%); animation:pxGraphicTreatment 12s ease-in-out infinite; }
.product-exhibits .px-treatment-material { clip-path:inset(0 0 0 66.666%); animation:pxMaterialTreatment 12s ease-in-out infinite; }
.product-exhibits .px-treatment-scan { opacity:0; animation:pxTreatmentScan 12s ease-in-out infinite; }
.product-exhibits .px-treatment-choice { animation:pxTreatmentChoice 12s steps(1,end) infinite; }
.product-exhibits .px-treatment-stage { transform-origin:320px 260px; animation:pxSpecimen 12s ease-in-out infinite; }
@keyframes pxTrace { to { stroke-dashoffset:-100; } }
@keyframes pxDirectionOrbit { 0%{stroke-dashoffset:100}85%,100%{stroke-dashoffset:0} }
@keyframes pxImageRender { 0%,5%{clip-path:inset(0 0 100% 0)}35%,88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)} }
@keyframes pxType { 0%,10%{clip-path:inset(0 100% 0 0)}48%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)} }
@keyframes pxCursor { 0%,49%{opacity:1}50%,100%{opacity:0} }
@keyframes pxFilmPush { 0%,15%,100%{transform:translateX(-8px) scale(1)}65%,85%{transform:translate(7px,8px) scale(1.45)} }
@keyframes pxFilmTime { 0%,15%{stroke-dashoffset:100}75%,95%{stroke-dashoffset:0}100%{stroke-dashoffset:100} }
@keyframes pxImageLift { 0%,100%{transform:translateY(2px)}45%,65%{transform:translateY(-7px)} }
@keyframes pxCopyLift { 0%,100%{transform:translateY(-2px)}45%,65%{transform:translateY(6px)} }
@keyframes pxMotionLift { 0%,100%{transform:translateY(4px)}45%,65%{transform:translateY(-5px)} }
@keyframes pxAlignImage { 0%,22%,100%{opacity:1;transform:translate(0,0) scale(1)}52%,80%{opacity:0;transform:translate(65px,47px) scale(.82)} }
@keyframes pxAlignMotion { 0%,25%,100%{opacity:1;transform:translate(0,0) scale(1)}56%,80%{opacity:0;transform:translate(-69px,-49px) scale(.78)} }
@keyframes pxAlignCopy { 0%,28%,100%{opacity:1;transform:translate(0,0) scale(1)}59%,80%{opacity:0;transform:translate(56px,-45px) scale(.8)} }
@keyframes pxAlignMaster { 0%,37%,100%{opacity:0;transform:scale(.9)}63%,80%{opacity:1;transform:scale(1.05)}91%{opacity:0;transform:scale(1)} }
@keyframes pxRegister { 0%,15%,100%{opacity:.25;stroke-dashoffset:60}45%,70%{opacity:1}85%{opacity:.25;stroke-dashoffset:0} }
@keyframes pxAudio { 0%,100%{transform:scaleY(.45)}45%{transform:scaleY(1)}75%{transform:scaleY(.7)} }
@keyframes pxWorkbenchImage { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }
@keyframes pxWorkbenchFilm { 0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)} }
@keyframes pxWorkbenchCamera { 0%,100%{transform:translateX(-7px) scale(1)}50%{transform:translate(9px,5px) scale(1.2)} }
@keyframes pxAudioLift { 0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)} }
@keyframes pxWireTreatment { 0%,100%{clip-path:inset(0 0 0 0)} }
@keyframes pxGraphicTreatment { 0%,24%{clip-path:inset(0 100% 0 0);opacity:1}40%,91%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0} }
@keyframes pxMaterialTreatment { 0%,56%{clip-path:inset(0 100% 0 0);opacity:1}72%,91%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0} }
@keyframes pxTreatmentScan { 0%,24%{opacity:0;transform:translateX(0)}25%{opacity:1;transform:translateX(0)}40%{opacity:1;transform:translateX(380px)}43%{opacity:0;transform:translateX(380px)}56%{opacity:0;transform:translateX(0)}57%{opacity:1;transform:translateX(0)}72%{opacity:1;transform:translateX(380px)}75%,100%{opacity:0;transform:translateX(380px)} }
@keyframes pxTreatmentChoice { 0%,31%{transform:translateX(0)}32%,63%{transform:translateX(116px)}64%,96%{transform:translateX(232px)}97%,100%{transform:translateX(0)} }
@keyframes pxSpecimen { 0%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(-4px) scale(1.025)} }
@media(max-width:820px) {
  .product-exhibits { margin-top:64px; padding-top:30px; }
  .product-exhibits-heading { align-items:flex-start; flex-direction:column; gap:22px; margin-bottom:32px; }
  .product-exhibits-heading>p { max-width:40ch; }
  .product-exhibits-grid { grid-template-columns:1fr; gap:38px; }
  .product-exhibits .product-exhibit-art { max-width:590px; margin-inline:auto; }
  .product-exhibit-copy { padding-top:23px; }
  .product-exhibit-copy h3 { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) {
  .product-exhibits .studio-art__scene * { animation:none!important; transition:none!important; }
  .product-exhibits .px-align-base { opacity:1; }
  .product-exhibits .px-align-master { opacity:0; }
}