/* White-and-black motion controls: exhibition auto-scroll switch and the homepage slideshow. */

/* Auto-scroll switch: native checkbox with role=switch, optically centred label. */
.exhibition-controls{align-items:center}
.autoscroll-label{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 18px 0 9px;border:1px solid #11111129;border-radius:999px;background:#fff;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.autoscroll-label:hover{border-color:var(--ink)}
.autoscroll-label:has(input:checked){color:var(--ink)}
.autoscroll-label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:4px}
.autoscroll-label:has(input:disabled){opacity:.5;cursor:not-allowed}
.autoscroll-label>span{display:block;text-box:trim-both cap alphabetic}
.autoscroll-label input{-webkit-appearance:none;appearance:none;flex:0 0 40px;width:40px;height:24px;min-height:0;margin:0;border:1px solid #8c8c8c;border-radius:999px;background:#fff radial-gradient(circle closest-side,#8c8c8c 85%,transparent 100%) no-repeat 3px 50%/16px 16px;cursor:inherit;transition:background-color .24s ease,background-position .24s cubic-bezier(.32,.72,0,1),border-color .24s ease}
.autoscroll-label input:checked{border-color:var(--gold);background-color:var(--gold);background-image:radial-gradient(circle closest-side,#fff 85%,transparent 100%);background-position:calc(100% - 3px) 50%}
.autoscroll-label input:focus-visible{outline:none}
.scroll-hint{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--muted)}
:lang(zh-CN) .autoscroll-label,:lang(zh-CN) .scroll-hint{font-size:12px;letter-spacing:.06em}

/* Homepage slideshow: fixed 3:2 frame; every slide fills it, cropped around the focal point stored with the image.
   Controls are their own grid item (dense flow) so the caption rail still ends on the image's bottom edge.
   Mobile keeps every caption in one grid cell so the arrow and the page below never jump. */
#hero-photo-open .hero-stage{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--green)}
#hero-photo-open .hero-slide{position:absolute;inset:0;display:block;background-color:inherit;opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
#hero-photo-open .hero-slide.is-active{opacity:1}
#hero-photo-open .hero-slide img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero:has(>.hero-rotation){grid-auto-flow:row dense}
.hero-rotation{grid-column:1;order:2;display:flex;align-items:center;gap:14px;margin-top:14px}
.hero-rotation[hidden]{display:none}
.hero-rotation-toggle{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #11111159;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.hero-rotation-toggle:hover{border-color:var(--gold);background:var(--gold);color:#fff}
.hero-rotation-toggle:active{transform:scale(.94)}
.hero-rotation-toggle svg{display:block;width:10px;height:10px}
.hero-rotation-steps{display:flex;flex:1 1 auto;gap:6px;min-width:0}
.hero-rotation-step{flex:1 1 0;min-width:0;height:32px;padding:0;display:flex;align-items:center;border:0;background:none;cursor:pointer}
.hero-rotation-step>span{position:relative;display:block;width:100%;height:2px;overflow:hidden;background:#1111111f;transition:background-color .2s ease}
.hero-rotation-step>span::after{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--progress,0));transform-origin:left center}
.hero-rotation-step[aria-current=true]>span{background:#11111133}
.hero-rotation-step:hover>span{background:#11111166}
.hero-rotation-step:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hero-caption-stack{display:grid}
.hero-slide-caption{grid-area:1/1;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.hero-slide-caption.is-active{opacity:1;visibility:visible;transition:opacity .6s ease .25s,visibility 0s}
.hero-slide-title{font-size:24px;line-height:1.35;font-weight:500;color:var(--ink)}
/* Desktop: the rail sits on the image's bottom edge, so it hugs the active caption (as before); outgoing captions fade out of flow. */
@media(min-width:761px){.hero-caption-stack{display:block;position:relative}.hero-slide-caption:not(.is-active){position:absolute;left:0;right:0;bottom:0}}
@media(max-width:1100px){.hero-slide-title{font-size:20px}}
@media(max-width:760px){.hero-slide-title{line-height:1.4}.hero-slide-caption{gap:7px}.hero-rotation{margin-top:10px}}
@media(max-width:380px){.hero-slide-title{font-size:19px}}
@media(prefers-reduced-motion:reduce){#hero-photo-open .hero-slide,.hero-slide-caption,.hero-slide-caption.is-active,.autoscroll-label,.autoscroll-label input,.hero-rotation-toggle,.hero-rotation-step>span{transition:none!important}}
@media(forced-colors:active){.autoscroll-label input{border-color:ButtonText;background-image:radial-gradient(circle closest-side,ButtonText 85%,transparent 100%)}.autoscroll-label input:checked{background-color:Highlight}.hero-rotation-step>span{background:GrayText}.hero-rotation-step>span::after{background:Highlight}}