.optical-workshop{--optical-duration:650ms;position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;margin:0 auto 50px;max-width:1240px;padding:0 20px 35px;background:radial-gradient(ellipse at 50% 38%,#26394345,transparent 65%)}
.optical-axis{position:absolute;inset:46% 3% auto;height:1px;background:linear-gradient(90deg,transparent,#a79c7855 20%,#a79c7855 80%,transparent);z-index:-1;pointer-events:none}
.optical-axis span{position:absolute;left:50%;top:-4px;width:9px;height:9px;border:1px solid #968c6d;transform:rotate(45deg);background:#070c10}
.optical-choice{display:block;min-width:0;text-align:center;text-decoration:none;padding:0 12px 25px;border-radius:4px;position:relative;outline-offset:0}
.optical-choice::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse at 50% 50%,#ac98721a,transparent 66%);transition:opacity .3s}
.optical-choice:hover::before,.optical-choice:focus-visible::before{opacity:1}
.optical-object{width:100%;height:auto;display:block;overflow:visible}
.optical-machine{transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.optical-choice:hover .optical-machine,.optical-choice:focus-visible .optical-machine{transform:translateY(-4px)}
.optical-caption h2{font:500 clamp(19px,2vw,28px)/1.3 Arial,sans-serif;letter-spacing:.13em;margin:0 0 14px;color:#e2e3da}
.optical-caption>span{display:inline-flex;gap:30px;align-items:center;color:#c3b48a;font-size:12px;letter-spacing:.13em}
.optical-caption>span::after{content:'';position:absolute;bottom:8px;left:calc(50% - 25px);width:50px;height:1px;background:#a18e64;transform:scaleX(.4);opacity:.5;transition:transform .25s,opacity .25s}
.optical-choice:hover .optical-caption>span::after,.optical-choice:focus-visible .optical-caption>span::after{transform:scaleX(1);opacity:1}
.optical-choice:hover h2,.optical-choice:focus-visible h2{color:#fff1ce}
.optical-blade{transform-origin:266px 197px}
.optical-pupil{transform-origin:266px 197px}
.optical-choice:is(:hover,:focus-visible) .optical-blade{animation:optical-shutter var(--optical-duration) ease-in-out}
.optical-choice:is(:hover,:focus-visible) .optical-pupil{animation:optical-pupil var(--optical-duration) ease-in-out}
.optical-choice:is(:hover,:focus-visible) .optical-reflection{animation:optical-glint var(--optical-duration) ease-in-out}
.optical-choice:is(:hover,:focus-visible) .optical-film{animation:optical-film 600ms cubic-bezier(.4,0,.2,1)}
.optical-choice:is(:hover,:focus-visible) .optical-record{fill:#ead59a;filter:drop-shadow(0 0 4px #d5bc78)}
.optical-choice:is(:hover,:focus-visible) .optical-video-reflection{animation:optical-glint 700ms ease-out}
.optical-choice:active .optical-machine{transform:translateY(1px) scale(.985)}
@keyframes optical-shutter{0%,100%{transform:rotate(0) translateY(0)}45%{transform:rotate(22deg) translateY(17px)}}
@keyframes optical-pupil{0%,100%{transform:scale(1)}45%{transform:scale(.16)}}
@keyframes optical-glint{0%,100%{opacity:.5}45%{opacity:1;transform:translateX(5px)}}
@keyframes optical-film{0%{transform:translateX(0)}100%{transform:translateX(-35px)}}
@media(max-width:700px){.optical-workshop{grid-template-columns:1fr;padding:0;margin-bottom:30px}.optical-choice{padding:0 5px 36px}.optical-object{max-width:460px;margin:auto}.optical-caption h2{font-size:22px}.optical-axis{inset:10% auto 10% 50%;width:1px;height:auto;background:linear-gradient(transparent,#a79c7830,transparent)}.optical-axis span{top:50%;left:-4px}.optical-choice+.optical-choice{margin-top:25px}.optical-caption>span::after{bottom:19px}}
@media(hover:none),(prefers-reduced-motion:reduce){.optical-choice *{animation:none!important;transition:none!important}.optical-choice:hover .optical-machine{transform:none}}