/* Trabajos en la home · escenas que se abren con el scroll (6/9/26)
   Cada trabajo es una escena: entra como una tarjeta pequeña y, conforme el
   visitante avanza, se abre hasta ocupar toda la pantalla; el título se separa
   hacia los lados y se funde, y al final aparece el pie con nombre y tipo.

   Principios:
   · El scroll NUNCA se secuestra. El progreso (--p, de 0 a 1) sale de la posición
     real de scroll; el visitante siempre puede seguir bajando. La referencia de
     la que partimos (ScrollExpandMedia) bloqueaba la rueda hasta terminar la
     expansión, y eso es fricción — justo lo contrario de Clear Flow.
   · Solo se anima lo que el compositor pinta gratis: clip-path, transform y
     opacity. Nada de width/height, que obligan a recalcular el layout.
   · La escena se sostiene con position:sticky, sin JavaScript de posicionado. */

.xp{display:block;position:relative;height:200svh;text-decoration:none;color:var(--bone,#F6F5F3);
  --w0:min(46vw,760px);--h0:54svh;--r0:22px;--p:0}
.xp-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}

/* El marco: siempre a pantalla completa, recortado con clip-path según --p.
   Así el "crecimiento" es un recorte que se abre, no un elemento que cambia de tamaño. */
.xp-media{position:absolute;inset:0;margin:0;overflow:hidden;
  clip-path:inset(
    calc((100svh - var(--h0)) / 2 * (1 - var(--p)))
    calc((100vw - var(--w0)) / 2 * (1 - var(--p)))
    calc((100svh - var(--h0)) / 2 * (1 - var(--p)))
    calc((100vw - var(--w0)) / 2 * (1 - var(--p)))
    round calc(var(--r0) * (1 - var(--p))));
  will-change:clip-path}
.xp-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.16 - .16 * var(--p)));will-change:transform}
/* velo que se retira a medida que la imagen gana pantalla */
.xp-media::after{content:"";position:absolute;inset:0;background:#0B0B0B;
  opacity:calc(.46 - .36 * var(--p));pointer-events:none}

/* El título se abre: la primera parte hacia la izquierda, la segunda hacia la derecha. */
.xp-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.02em;pointer-events:none;
  font-size:clamp(38px,7.4vw,118px);line-height:.96;letter-spacing:-.035em;font-weight:400;
  color:#fff;text-shadow:0 2px 44px rgba(0,0,0,.42);text-align:center;
  opacity:calc(1 - var(--p) * 1.3)}
.xp-a{transform:translateX(calc(var(--p) * -24vw))}
.xp-b{transform:translateX(calc(var(--p) * 24vw))}

/* Pie: aparece cuando la escena ya está abierta. El enlace "Ver el caso" lleva
   el efecto de scramble.css (subrayado, naranja y flecha al pasar por la escena). */
.xp-cap{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:clamp(24px,4vh,44px);z-index:3;
  margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  opacity:clamp(0, calc((var(--p) - .8) / .2), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .8) / .2), 1)) * 12px))}
.xp-cap span{font-family:var(--f-label);font-size:clamp(14px,1.3vw,18px);letter-spacing:.02em;color:#fff}
.xp-cap em{font-style:normal;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.xp-cap i{font-style:normal;font-family:var(--f-label);font-size:12px;letter-spacing:.06em;color:#fff;margin-left:auto}

/* La pista bajo la tarjeta, solo al principio. */
.xp-hint{position:absolute;left:50%;top:calc(50% + var(--h0) / 2 + 22px);transform:translateX(-50%);z-index:2;
  margin:0;font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-3,rgba(246,245,243,.55));white-space:nowrap;pointer-events:none;
  opacity:calc(1 - var(--p) * 3)}

/* Un respiro entre el rótulo "Trabajos" y la primera escena, y tras la última. */
.works .xp:first-of-type{margin-top:clamp(10px,3vh,40px)}
.works .xp:last-of-type{margin-bottom:clamp(40px,8vh,96px)}

@media (max-width:760px){
  .xp{--w0:82vw;--h0:44svh;--r0:16px;height:180svh}
  .xp-title{font-size:clamp(34px,11vw,64px)}
  .xp-a{transform:translateX(calc(var(--p) * -30vw))}
  .xp-b{transform:translateX(calc(var(--p) * 30vw))}
  .xp-cap{flex-direction:column;align-items:flex-start;gap:6px}
  .xp-cap i{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .xp{height:100svh;--p:1}
  .xp-title{display:none}
  .xp-hint{display:none}
}