/* Homepage exhibition; shared project, About and Play styles stay in style.css. */
.work-home { --accent: #b75b46; opacity: 1; animation: none; min-height: 100svh; background: #F1F2EC; color: #242625; overflow: hidden; }
.work-home main { position: relative; height: 100svh; min-height: 560px; padding: clamp(68px, 10dvh, 96px) 0 18px; overflow: hidden; isolation: isolate; box-sizing: border-box; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.work-home .header-nav { padding-inline: clamp(24px, 5.6vw, 95px); }
.work-home .header-btn { letter-spacing: 3px; }
.work-home .header-btn:hover { color: var(--accent); opacity: 1; }
.work-home .header-btn::after { background: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 2000; padding: 12px; background: #fff; color: #222; }
.skip-link:focus { top: 12px; }
.orbit-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit-track path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.orbit-track-back { stroke: #e4e8e1; }
.orbit-track-front { stroke: #d0d7cc; }
.orbit-track[hidden] { display: none; }
button.work-bubble { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.work-bubble-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 18%; font-size: clamp(22px, 3vw, 38px); line-height: 1.3; text-align: center; color: #647264; }
.work-stage { position: relative; width: 100%; min-height: 0; height: auto; touch-action: pan-y; isolation: isolate; overflow: visible; }
.work-stage.is-dragging { cursor: grabbing; }
.work-orbit { position: absolute; inset: 0; }
.work-bubble { position: absolute; left: 0; top: 0; width: var(--bubble-size); height: var(--bubble-size); border-radius: 50%; color: inherit; -webkit-user-drag: none; user-select: none; }
.work-bubble:hover { filter: saturate(1.08); }
.is-moving .work-bubble { will-change: transform; }
.work-bubble-inner { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #f5f8f1, #e0ecd9 75%, #d9e7d7); box-shadow: inset 0 1px 3px #ffffff80; transition: width 420ms ease, height 420ms ease, border-radius 420ms ease, box-shadow 420ms ease, background 420ms ease, transform 260ms ease; animation: bubble-float 6s ease-in-out infinite; }
.tone-1 .work-bubble-inner { animation-delay: -2s; background: radial-gradient(circle at 30% 20%, #fcf9ef, #f0e9cb 80%); }
.tone-2 .work-bubble-inner { animation-delay: -4s; background: radial-gradient(circle at 30% 20%, #f7f8f7, #e3e9e6 80%); }
.work-bubble-inner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 2px #ffffff60, inset -7px -9px 22px #63705c08; pointer-events: none; }
.work-icon, .work-cover { position: absolute; display: block; user-select: none; pointer-events: none; transition: opacity 300ms ease; }
.work-icon { width: 66%; height: 66%; left: 17%; top: 17%; object-fit: contain; opacity: 0.94; }
.work-icon { transition: opacity 300ms ease, transform 120ms linear; }
.work-cover { inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.is-selected .work-bubble-inner { animation: none; }
.is-selected.cover-ready .work-bubble-inner { width: var(--exhibit-width); height: var(--exhibit-height); border-radius: 0; background: transparent; box-shadow: none; }
.is-selected.cover-ready .work-bubble-inner::after { display: none; }
.is-selected.cover-ready .work-cover { opacity: 1; }
.is-selected.cover-ready .work-icon { opacity: 0; }
.is-selected.cover-ready .work-bubble-label { visibility: hidden; }
.is-selected.is-paper:not(.cover-ready) .work-bubble-inner { width: 70%; height: 94%; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px #e5e8e2, 0 12px 32px #24262508; }
.is-selected.is-paper:not(.cover-ready) .work-bubble-inner::before { content: 'RESEARCH'; position: absolute; bottom: 9%; width: 100%; text-align: center; font-size: 11px; letter-spacing: 3px; color: var(--accent); }
@keyframes bubble-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
@media (hover: hover) { .work-bubble:hover .work-bubble-inner { transform: translate(-50%, -50%) scale(1.015); animation-play-state: paused; } }
.work-arrow { position: absolute; z-index: 150; top: 49%; border: 0; background: transparent; width: 48px; height: 48px; font: 26px/1 'Space Mono', monospace; color: #8a9089; cursor: pointer; }
.work-arrow:hover { color: var(--accent); }
.work-arrow.previous { left: clamp(8px, 3vw, 55px); }
.work-arrow.next { right: clamp(8px, 3vw, 55px); }
.work-caption { position: relative; text-align: center; width: min(760px, calc(100% - 44px)); margin: 10px auto 0; min-height: 132px; transform: translateY(-24px); }
.work-position { margin: 0 0 9px; color: var(--accent); font-size: 10px; letter-spacing: 2px; }
.work-caption h2 { font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
#work-category { text-transform: uppercase; font-size: 9px; letter-spacing: 1.5px; color: #777d76; line-height: 1.5; margin: 0 0 10px; }
#work-summary { font-size: 12px; line-height: 1.65; margin: 0 auto 9px; max-width: 590px; color: #565c55; text-wrap: balance; }
.work-fallback { text-align: center; padding: 20px; }
.work-home :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.work-home main:focus { outline: none; }
@media (max-width: 600px) {
    .work-home main { padding-top: 68px; }
    .work-home .header-nav { padding-inline: 20px; gap: 0; }
    .work-home .header-nav li + li { margin-left: 14px; }
    .work-home .header-btn { letter-spacing: 1px; font-size: 12px; }
    .work-stage { min-height: 0; }
    .work-arrow { font-size: 23px; width: 40px; height: 44px; top: 90%; }
    .work-caption { margin-top: 14px; min-height: 148px; transform: translateY(-12px); }
    .work-caption h2 { font-size: 20px; }
    #work-summary { font-size: 11px; }
}
@media (max-height: 560px) {
    .work-home { overflow-y: auto; }
    .work-home main { height: auto; min-height: 560px; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .work-home *, .work-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}