/* Independent artwork carousel, between selected projects and services. */
#works { padding-bottom: 72px; }
.visual-experiments { position: relative; isolation: isolate; overflow: hidden; padding: 32px 0 44px; border-top: 1px solid var(--line); background: #101010; }
.exploration-heading { position: relative; z-index: 1; padding: 0 var(--gutter); text-align: center; }
.exploration-heading .eyebrow { margin-bottom: 10px; }
.exploration-heading h2 { font-size: clamp(28px, 2.5vw, 36px); }
.exploration-intro { max-width: 650px; margin: 12px auto 0; font-size: 12px; line-height: 1.7; color: #aaa9a3; text-wrap: pretty; }
.exploration-stage { --art-height: clamp(260px, calc(100svh - 500px), 560px); --slide-shift: calc(var(--art-height) * .98); position: relative; height: calc(var(--art-height) + 20px); margin-top: 22px; perspective: 1500px; touch-action: pan-y; outline-offset: -6px; }
.exploration-stage::after { content: ''; position: absolute; z-index: 5; inset: 0; background: linear-gradient(90deg, #101010 0%, transparent 14%, transparent 86%, #101010 100%); pointer-events: none; }
.exploration-stage:not(.is-ready) { display: flex; gap: 20px; padding: 16px var(--gutter); overflow-x: auto; }
.exploration-slide { position: relative; flex: none; display: block; width: calc(var(--art-height) * var(--art-ratio)); height: var(--art-height); background: transparent; border: 0; padding: 0; border-radius: 12px; -webkit-user-select: none; user-select: none; }
.is-ready .exploration-slide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(calc(var(--slide-shift) * 2)) scale(.7); opacity: 0; visibility: hidden; filter: brightness(.4); transition: transform .68s cubic-bezier(.22, 1, .36, 1), opacity .55s ease, filter .55s ease; }
.is-ready .exploration-slide[data-position="before"] { transform: translate(-50%, -50%) translateX(calc(var(--slide-shift) * -2)) scale(.7); }
.is-ready .exploration-slide[data-position="previous"] { z-index: 1; visibility: visible; opacity: .68; transform: translate(-50%, -50%) translateX(calc(var(--slide-shift) * -1)) rotateY(25deg) scale(.84); }
.is-ready .exploration-slide[data-position="next"] { z-index: 1; visibility: visible; opacity: .68; transform: translate(-50%, -50%) translateX(var(--slide-shift)) rotateY(-25deg) scale(.84); }
.is-ready .exploration-slide[data-position="active"] { z-index: 3; visibility: visible; opacity: 1; filter: none; transform: translate(-50%, -50%); cursor: default; }
.is-ready .exploration-slide[data-position="previous"]:hover, .is-ready .exploration-slide[data-position="next"]:hover { filter: brightness(.7); }
.exploration-art { position: absolute; inset: 0; overflow: hidden; border-radius: var(--art-radius, 12px); background: #171717; box-shadow: 0 24px 60px #0004; }
.exploration-art img { position: absolute; max-width: none; object-fit: fill; pointer-events: none; }
.exploration-art video { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#151515; }
.exploration-slide.exploration-video { --video-height:min(var(--art-height),calc((100vw - 64px) / (var(--art-ratio)))); width:calc(var(--video-height) * var(--art-ratio)); height:var(--video-height); }
.exploration-video-select { display:none; position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; align-items:center; justify-content:center; flex-direction:column; gap:9px; color:#fff; background:#0002; font-size:11px; letter-spacing:.08em; }
.exploration-video-select>span:first-child { display:grid; place-items:center; width:48px; height:48px; border:1px solid #ffffff80; border-radius:50%; background:#10101066; font-size:16px; padding-left:3px; }
.is-ready .exploration-video:not([data-position="active"]) .exploration-video-select { display:flex; }
.is-ready .exploration-video:not([data-position="active"]) video { pointer-events:none; }
.exploration-video video:focus-visible { outline:2px solid #4169ff; outline-offset:-3px; }
.exploration-caption { position: relative; z-index: 6; padding: 0 24px; margin-top: 12px; text-align: center; }
.exploration-kind { font-size: 10px; letter-spacing: .09em; color: #85857f; margin-bottom: 8px; }
.exploration-caption h3 { font-size: clamp(22px, 1.8vw, 27px); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.exploration-description { max-width: 650px; min-height: 3.6em; margin: 8px auto 0; font-size: 13px; line-height: 1.8; color: #aaa9a3; text-wrap: pretty; }
.exploration-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 12px; }
.exploration-controls[hidden] { display: none; }
.exploration-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #3b3b38; border-radius: 50%; background: #252523; color: #f1eee6; font-size: 20px; transition: background-color .2s, border-color .2s; }
.exploration-controls button:hover { background: #285cff; border-color: #285cff; }
.exploration-counter { min-width: 60px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .12em; color: #a5a59d; }
html[data-motion="reduce"] .exploration-slide { transition: none; }
@media (max-width: 767px) {
  #works { padding-bottom: 48px; }
  .visual-experiments { padding: 46px 0 56px; }
  .exploration-heading { padding: 0 24px; }
  .exploration-intro { font-size: 12px; max-width: 440px; }
  .exploration-stage { --art-height: min(104vw, 460px); --slide-shift: 78vw; margin-top: 24px; }
  .exploration-stage::after { background: linear-gradient(90deg, #10101088, transparent 9%, transparent 91%, #10101088); }
  .exploration-caption { margin-top: 12px; }
  .exploration-description { font-size: 12px; min-height: 5.4em; max-width: 430px; }
}