/* ============ VISUAL LAB ============
   El escenario es una composición de 1672 × 941. Todo se coloca en "px de diseño"
   con --p (1px de diseño = 100cqw / 1672) para que escale igual que la referencia. */

html:has(body.vlab){scroll-behavior:auto}
body.vlab{background:#efe6d6 url(assets/visual-lab/bg.webp) center top/cover no-repeat;height:100vh;height:100dvh;overflow:hidden}
.nav--solid{background:#0b0b0b;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav--solid .nav__links{position:absolute;left:calc(var(--u)*25.3);margin:0}
.nav__links a.is-active{pointer-events:none}

.stage{
  --p:calc(100cqw / 1672);
  --ink:#0b0b0b;
  position:relative;width:min(100vw,calc(100dvh*1672/941));aspect-ratio:1672/941;margin:0 auto;overflow:hidden;
  container-type:inline-size;background:none;color:var(--ink);
  isolation:isolate;
}
.stage > *{position:absolute}
.stage__bg{display:none}

/* máquina (video con alfa), alineada a la plataforma de la referencia */
.stage__machine{
  left:calc(152*var(--p));top:calc(-78*var(--p));width:calc(1400*var(--p));height:auto;z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 calc(28*var(--p)) calc(30*var(--p)) rgba(40,0,90,.35));
}

/* ---------- título ---------- */
.title{left:calc(62*var(--p));top:calc(100*var(--p));z-index:5;width:calc(360*var(--p));height:calc(330*var(--p));margin:0;font-weight:400}
.title__visual{
  position:absolute;left:calc(26*var(--p));top:0;
  font:400 calc(184*var(--p))/1 var(--display);
  -webkit-text-stroke:calc(3*var(--p)) var(--ink);
  transform:skewX(-12deg) scaleX(.64);transform-origin:left top;white-space:nowrap;
}
.title__lab{position:absolute;left:0;top:calc(144*var(--p));width:calc(330*var(--p));height:calc(175*var(--p))}
.title__lab b{
  position:absolute;left:calc(165*var(--p));top:0;font:400 calc(132*var(--p))/1 var(--display);
  color:var(--lime);-webkit-text-stroke:calc(7*var(--p)) var(--ink);paint-order:stroke fill;
  text-shadow:calc(5*var(--p)) calc(5*var(--p)) 0 rgba(11,11,11,.9);
  transform:skewX(-12deg) scaleX(.8);transform-origin:left top;
  animation:vl-lab .9s .2s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes vl-lab{from{opacity:0;translate:calc(-30*var(--p)) 0}}

.blurb{left:calc(405*var(--p));top:calc(118*var(--p));z-index:5;font:italic 400 calc(21*var(--p))/calc(27*var(--p)) var(--mono);text-align:right;width:calc(160*var(--p));white-space:nowrap}
.blurb__line{left:calc(433*var(--p));top:calc(264*var(--p));width:calc(128*var(--p));height:calc(7*var(--p));z-index:5;background:var(--lime);
  clip-path:polygon(0 60%,8% 20%,40% 35%,70% 10%,100% 30%,96% 80%,60% 70%,30% 95%,4% 85%);animation:vl-lime .8s .9s cubic-bezier(.7,0,.2,1) both}

.mantra{left:calc(71*var(--p));top:calc(452*var(--p));z-index:5;font:400 calc(19*var(--p))/1 var(--mono);letter-spacing:.12em;display:flex;flex-direction:column;gap:calc(17*var(--p))}
.mantra li{display:flex;align-items:center;gap:calc(14*var(--p))}
.mantra span{font-size:calc(24*var(--p));line-height:.6}
.mantra svg{width:calc(20*var(--p));height:calc(20*var(--p))}

/* ---------- estaciones ---------- */
.stations{right:calc(47*var(--p));top:calc(112*var(--p));z-index:6;width:calc(348*var(--p))}
.stations h2{font:700 calc(19*var(--p))/1 var(--mono);letter-spacing:.04em;margin-bottom:calc(14*var(--p))}
.st{
  position:relative;display:flex;align-items:center;height:calc(75*var(--p));margin-bottom:calc(18.5*var(--p));
  background:rgba(239,233,221,.9);border:calc(1.5*var(--p)) solid rgba(11,11,11,.18);
  box-shadow:0 calc(8*var(--p)) calc(18*var(--p)) rgba(60,20,120,.18);
  transition:transform .35s cubic-bezier(.2,.9,.2,1),background .25s,box-shadow .35s;
}
.st__img{width:calc(110*var(--p));height:100%;flex:none;display:grid;place-items:center;overflow:hidden;background:#0b0b0b;position:relative}
.st b{flex:1;padding-left:calc(22*var(--p));font:400 calc(25*var(--p))/1.02 var(--display);letter-spacing:.01em;text-transform:uppercase}
.st u{text-decoration:none;font-size:calc(30*var(--p));width:calc(60*var(--p));text-align:center;transition:transform .3s}
.st:hover{transform:translate(calc(-8*var(--p)),calc(-4*var(--p)));background:var(--lime);box-shadow:calc(6*var(--p)) calc(8*var(--p)) 0 #0b0b0b}
.st:hover u{transform:translate(calc(4*var(--p)),calc(-4*var(--p)))}
.st--type .st__img{background:
  repeating-radial-gradient(ellipse at 30% 40%,#7a2cff 0 6px,#150034 6px 12px),#150034}
.st--type .st__img::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#0b0b0b 0,transparent 45%,#0b0b0b 100%);opacity:.55}
.st--color .st__img{background:radial-gradient(120% 120% at 8% 20%,#ffd20a 0,#ff5a0a 28%,#7a2cff 62%,#0b0b0b 100%)}
.st--form .st__img{background:#0b0b0b}
.st--form svg{width:86%;height:86%}
.st--mix .st__img{background:
  repeating-linear-gradient(8deg,transparent 0 5px,rgba(200,170,255,.5) 5px 6px),
  linear-gradient(110deg,#0b0b0b,#4c10c4 55%,#7a2cff)}

/* ---------- aro de la plataforma ---------- */
.rim{display:none}
.rimsvg{inset:0;width:100%;height:100%;z-index:7;pointer-events:none;overflow:visible;filter:drop-shadow(0 calc(8*var(--p)) calc(9*var(--p)) rgba(40,0,100,.45))}
.rimsvg .tab{pointer-events:auto;cursor:pointer;outline:none}
.rimsvg .tab path{stroke:rgba(11,11,11,.55);stroke-width:1.6;stroke-linejoin:round;transition:filter .25s}
.rimsvg .tab .face{fill:url(#cream)}
.rimsvg .tab.is-on .face{fill:url(#limeg)}
.rimsvg .tab .lbl{transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.rimsvg .tab:hover .face,.rimsvg .tab:focus-visible .face{filter:brightness(1.07)}
.rimsvg .tab:hover .lbl{transform:translateY(-4px)}
.rimsvg .tab:focus-visible .face{stroke:#0b0b0b;stroke-width:3}
.rimsvg text{font:700 17px 'Archivo Narrow','Arial Narrow',sans-serif;letter-spacing:.03em;fill:#0b0b0b;text-anchor:middle}
.rimsvg .glow{fill:none;stroke:#d9ff00;stroke-width:6;stroke-linecap:round;filter:blur(2.5px);opacity:.95}

/* ---------- selected works ---------- */
.sw-slash{left:calc(57*var(--p));top:calc(688*var(--p));z-index:6;font:700 calc(26*var(--p))/1 var(--mono)}
.sw-title{left:calc(32*var(--p));top:calc(722*var(--p));z-index:6;width:calc(240*var(--p));height:calc(130*var(--p));margin:0;font-weight:400}
.sw-title span{display:block;font:400 calc(62*var(--p))/.95 var(--display);text-transform:uppercase;transform:skewX(-10deg);transform-origin:left;white-space:nowrap;animation:vl-hue 20s linear infinite}
.sw-title span:nth-child(2){animation-delay:-1.6s}
@keyframes vl-hue{0%,100%{color:#7a2cff}25%{color:#ff2e93}50%{color:#ff5a0a}75%{color:#1f6bff}}
.sw-title span:nth-child(2){margin-left:0}
.sw-arrow{position:absolute;left:calc(150*var(--p));top:calc(86*var(--p));width:calc(100*var(--p));height:auto}
.sw-line{position:absolute;left:calc(12*var(--p));top:calc(124*var(--p));width:calc(128*var(--p));height:calc(6*var(--p));background:var(--lime);clip-path:polygon(0 50%,12% 10%,60% 35%,100% 15%,96% 85%,50% 70%,10% 95%)}

.works{left:calc(283*var(--p));top:calc(714*var(--p));width:calc(1290*var(--p));height:calc(154*var(--p));z-index:6;overflow:hidden}
.sw__track{display:flex;gap:1.24%;height:100%;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none}
.sw__track::-webkit-scrollbar{display:none}
.sw__track li{flex:none;width:18.76%;height:100%;scroll-snap-align:start;transition:opacity .4s,transform .4s}
.sw__track li[hidden]{display:none}
.sw__track a{position:relative;display:block;height:100%;overflow:hidden;border-radius:calc(12*var(--p));background:#7a2cff;box-shadow:0 calc(10*var(--p)) calc(20*var(--p)) rgba(40,0,100,.3)}
.sw__track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.sw__track a:hover img{transform:scale(1.08)}
.sw__track a::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(122,44,255,.28),transparent 55%);mix-blend-mode:multiply;pointer-events:none}
/* esquinas tipo visor */
.br{position:absolute;inset:calc(12*var(--p));z-index:2;pointer-events:none;
  --c:calc(13*var(--p));
  background:
    linear-gradient(#fff,#fff) right top/var(--c) calc(2*var(--p)) no-repeat,
    linear-gradient(#fff,#fff) right top/calc(2*var(--p)) var(--c) no-repeat,
    linear-gradient(#fff,#fff) left bottom/var(--c) calc(2*var(--p)) no-repeat,
    linear-gradient(#fff,#fff) left bottom/calc(2*var(--p)) var(--c) no-repeat,
    linear-gradient(#fff,#fff) right bottom/var(--c) calc(2*var(--p)) no-repeat,
    linear-gradient(#fff,#fff) right bottom/calc(2*var(--p)) var(--c) no-repeat;
  opacity:.85}

.sw-btn{z-index:6;width:calc(52*var(--p));height:calc(52*var(--p));border-radius:50%;display:grid;place-items:center;cursor:pointer;
  right:calc(38*var(--p));transition:transform .3s,background .25s}
.sw-btn svg{width:calc(24*var(--p));height:calc(24*var(--p))}
.sw-btn--prev{top:calc(719*var(--p));background:rgba(239,233,221,.9);border:calc(1.5*var(--p)) solid rgba(11,11,11,.25);color:#0b0b0b}
.sw-btn--next{top:calc(781*var(--p));background:var(--lime);border:0;color:#0b0b0b;box-shadow:0 0 calc(18*var(--p)) rgba(217,255,0,.55)}
.sw-btn:hover{transform:scale(1.1)}
.sw-btn:focus-visible{outline:calc(3*var(--p)) solid #0b0b0b;outline-offset:calc(3*var(--p))}

.foot-l{left:calc(50*var(--p));top:calc(895*var(--p));z-index:6;font:400 calc(14.5*var(--p))/1 var(--mono);letter-spacing:.05em}
.foot-l b{color:var(--lime);-webkit-text-stroke:calc(1*var(--p)) #0b0b0b;font-size:calc(22*var(--p));letter-spacing:-.04em;margin-right:calc(10*var(--p));vertical-align:-.1em}
.foot-line{left:calc(947*var(--p));top:calc(904*var(--p));width:calc(430*var(--p));height:calc(2*var(--p));background:var(--ink);z-index:6}
.foot-r{left:calc(1399*var(--p));top:calc(895*var(--p));z-index:6;font:700 calc(16.5*var(--p))/1 var(--mono);letter-spacing:.06em;transition:transform .3s}
.foot-r:hover{transform:translateX(calc(6*var(--p)))}

/* ---------- entrada ---------- */
@media (prefers-reduced-motion:no-preference){
  .stations .st,.sw__track li{animation:vl-in .8s cubic-bezier(.2,.9,.2,1) both}
  .st:nth-of-type(1){animation-delay:.25s}.st:nth-of-type(2){animation-delay:.35s}.st:nth-of-type(3){animation-delay:.45s}.st:nth-of-type(4){animation-delay:.55s}
  .sw__track li:nth-child(n){animation-delay:.6s}
  @keyframes vl-in{from{opacity:0;translate:0 calc(26*var(--p))}}
}

/* ---------- móvil: pila vertical ---------- */
@media (max-width:900px){
  body.vlab{height:auto;overflow:auto}
  .stage{width:100%;aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;gap:22px;padding:84px 16px 40px;overflow:visible;--p:1px}
  .stage > *{position:relative;left:auto;top:auto;right:auto;inset:auto}
  .stage__machine{order:3;width:130%;max-width:none;margin:-10% -15% -14%;z-index:2}
  .title{order:0;height:auto;width:auto;display:block}
  .title__visual,.title__lab,.title__lab b,.title__lab i{position:relative;left:auto;top:auto}
  .title__visual{font-size:96px;transform:skewX(-12deg) scaleX(.75)}
  .title__lab{width:190px;height:96px;margin-top:-6px;margin-left:6px}
  .title__lab b{font-size:96px;left:30px;top:-6px;transform:skewX(-12deg) scaleX(.75);position:absolute}
  .title__lab i{position:absolute}
  .kicker{font-size:15px}
  .blurb{text-align:left;font-size:15px;width:auto;line-height:1.5}.blurb br{content:' ';display:inline}
  .blurb__line{display:none}
  .mantra{font-size:15px;gap:10px;flex-direction:row;flex-wrap:wrap;column-gap:22px}
  .stations{width:auto;order:5}
  .stations h2{font-size:14px}
  .st{height:64px;margin-bottom:12px}.st__img{width:90px}.st b{font-size:20px}.st u{font-size:24px}
  .rimsvg{display:none}
  .rim{order:4;display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto}
  .rim__t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;background:#efe9dd;color:#0b0b0b;font:700 14px var(--narrow);width:calc(33.3% - 6px);height:78px}
  .rim__t.is-on{background:var(--lime)}
  .rim__t svg{width:26px;height:26px}
  .sw-slash{display:none}
  .sw-title{order:6;height:auto;width:auto}.sw-title span{font-size:44px}.sw-arrow,.sw-line{display:none}
  .works{order:7;width:auto;height:150px}.sw__track{gap:10px}.sw__track li{width:200px}
  .sw-btn{display:none}
  .foot-l{order:8;font-size:11px;line-height:1.5}.foot-line{display:none}
  .foot-r{order:9;font-size:14px}
}