/* lab.css — CASE_04 / TU SILLITA (arena #ffe8b5 · petróleo #0d141a · naranja #d88633) */
.lab{background:#ffe8b5;color:#0d141a;padding:0;min-height:100vh;min-height:100dvh}
.city-frame{min-height:100vh;min-height:100dvh;position:relative;padding:100px 4vw 80px;overflow:hidden}
.city-head{position:relative;z-index:3}.city-head h2{font:clamp(44px,5.2vw,96px)/.84 var(--display);letter-spacing:-.075em;margin:42px 0 0}.city-head h2 em{font-family:var(--serif);font-weight:400;color:#d88633}
.city-map{position:absolute;right:-4vw;bottom:5vh;width:65vw;height:80vh}
.city-map svg{width:100%;height:100%}.coast{fill:none;stroke:#0d4f66;stroke-width:6}.streets{display:none}
.map-label{position:absolute;font-size:8px;color:rgba(74,46,0,.7)}.map-label--a{top:8%;right:10%}
.lab-copy{position:absolute;left:4vw;bottom:7vh;z-index:3;width:35vw}.lab-copy p{font-size:clamp(20px,1.8vw,28px);line-height:1.05;margin:0 0 30px}.lab-link{font-size:9px;border-bottom:1px solid #d88633;padding-bottom:6px}

/* mar: línea ondulada multiplicada y animada */
.sea use{fill:none;stroke:#0d4f66;stroke-width:3;opacity:.5;animation:wave-drift 5.5s ease-in-out infinite alternate}
.sea use:nth-child(2){opacity:.42;animation-delay:-.9s}
.sea use:nth-child(3){opacity:.34;animation-delay:-1.8s}
.sea use:nth-child(4){opacity:.26;animation-delay:-2.7s}
.sea use:nth-child(5){opacity:.18;animation-delay:-3.6s}
.sea use:nth-child(6){opacity:.12;animation-delay:-4.5s}
@keyframes wave-drift{from{transform:translateX(-10px)}to{transform:translateX(12px)}}

/* entrada + nodos + huésped + silla */
.lab .city-map{opacity:0;transform:translateY(34px);transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.lab.is-in .city-map{opacity:1;transform:none}
.coast{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 2s cubic-bezier(.16,1,.3,1) .1s}
.lab.is-in .coast{stroke-dashoffset:0}
.guest{fill:#d88633;stroke:#ffe8b5;stroke-width:3}
.silla{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3);transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.silla.is-chair{opacity:1;transform:scale(1);animation:silla-idle 3.2s ease-in-out infinite}
@keyframes silla-idle{0%,100%{transform:scale(1)}50%{transform:scale(1.06) translateY(-3px)}}
.lab:not(.is-in) .sea use,.lab:not(.is-in) .silla{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .silla{opacity:1;transform:none}
}

@media(max-width:900px){
  .city-frame{min-height:100svh;padding:64px 18px 36px}.city-head h2{font-size:10.5vw}.city-map{width:120vw;height:56vh;right:-8vw;bottom:10vh}.lab-copy{left:18px;bottom:6vh;width:76vw}.lab-copy p{font-size:5.6vw}
}