/* ══════════════════════════════════════════════════════════
   L'exposició — «Qui soc»
   El quadre que ve de la portada és l'obra 0, l'autoretrat, i a sota hi
   baixa la resta de la sala. Tot viu dins del .marc, que passa a ser el
   contenidor que fa scroll: així la creu de tornar es queda fixa i la
   portada segueix sent seva, amb els seus --fx/--fy de sempre.

   Els quadres de les obres fan servir la mateixa fusta i el mateix forat
   (--hx…--hh, a css/marc.css): el marc és la imatge sencera amb el centre
   buidat per clip-path, i la foto va al forat.
   ══════════════════════════════════════════════════════════ */

.expo{
  position: relative;
  min-height: 100%;
  padding-bottom: clamp(60px, 12svh, 140px);
  /* El marge de l'exposició: el punt on acaba la K més un respir. No fa
     servir el --carril-k de la resta del lloc perquè allà el buit és de
     74px, pensat per a text petit, i amb quadres tan grossos quedava massa
     ample. El quadre de la portada i les obres comparteixen aquesta xifra. */
  --carril-quadre: calc(var(--k-fi) + clamp(14px, 2vw, 34px));
}

/* ---- la portada: el quadre i el seu cartell ---- */
.expo__portada{
  position: relative;
  height: 100svh;
  /* On comença el quadre, per al JS. Les capes van en absolut, així que
     aquest coixí no mou res: només serveix perquè marcFinal() pugui llegir el
     valor ja resolt en píxels (un var() dins d'un calc() no es pot llegir tal
     qual des del JS). Va aquí i no al .marc perquè allà desplaçava tota
     l'exposició cap a la dreta. */
  padding-left: var(--carril-quadre);
}

/* Amb només les dues frases hi ha espai de sobres: el text s'eixampla i
   creix, que és el que demana una portada. */
/* El text va enganxat al quadre, no a la vora dreta de la pantalla: en
   pantalles amples, anant per la dreta quedava a 250 px de la foto. Es
   col·loca a partir de la vora dreta del quadre (--fx + --fw, que el JS
   deixa al #marc en coordenades de pantalla) més un respir, i l'amplada
   és la que hi càpiga sense passar de 560 ni tocar la vora. */
.expo__intro{
  --respir: clamp(40px, 4vw, 80px);
  position: absolute;
  z-index: 3;
  left: calc(var(--fx) + var(--fw) + var(--respir));
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, calc(100vw - var(--fx) - var(--fw) - var(--respir) - clamp(16px, 4vw, 56px)));
  opacity: 0;
  transition: opacity .6s cubic-bezier(.65,0,.35,1) .15s;
}
.marc.is-posat .expo__intro{ opacity: 1; }
.expo__lead{
  margin-bottom: .7em !important;
  font-family: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.9vw, 2.9rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
}
/* amb la mateixa força que «.expo p», que va més avall i si no la guanyava */
.expo .expo__intro p{
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.5;
}

/* ---- el títol de cada obra ----
   El mateix gest que la frase gran de la portada: només títol i text, sense
   cartell de museu. */
.obra__titol, .expo__fi .obra__titol{
  margin: 0 0 .55em;
  font-family: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--tinta);
}

.expo p{
  margin: 0 0 .9em;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--tinta);
}
.expo p:last-child{ margin-bottom: 0; }

/* ---- les obres ---- */
.expo__obres{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Les obres i el tancament que són fora de la pantalla no es dibuixen ni es
   compten: el vol del quadre (que mou la portada i, amb ella, tot el que ve
   a sota) només refà el que es veu. Al mòbil és la diferència entre un vol
   fluid i un vol a batzegades.
   Un element així no pinta res fora de la seva caixa: l'obra porta 48 px de
   coixí per on hi cap l'ombra del quadre, i el mateix de marge negatiu
   perquè res no es mogui de lloc (content-box: l'amplada màxima és la del
   contingut, com abans). */
.obra, .expo__fi{
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.obra{
  display: grid;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  /* el mateix marge que el quadre de la portada */
  box-sizing: content-box;
  max-width: min(1180px, 100% - var(--carril-quadre) * 2);
  padding: 48px;
  margin: -48px auto calc(clamp(70px, 14svh, 160px) - 48px);
}
/* Alternades: el quadre canvia de banda i el text també. La columna ampla
   va sempre amb el quadre, que si no els d'una banda sortien més petits que
   els de l'altra. */
.obra--esquerra{ grid-template-columns: 1.15fr .85fr; }
.obra--dreta{ grid-template-columns: .85fr 1.15fr; }
/* La fila, explícita. Sense això, quan el quadre va a la columna 2 i el text
   a la 1, la graella no retrocedeix: col·loca el quadre i empeny el text a la
   fila de sota. Per això el text quedava molt per sota del quadre, amb un
   forat buit al costat. */
.obra--esquerra .quadre{ grid-column: 1; grid-row: 1; }
.obra--esquerra .obra__text{ grid-column: 2; grid-row: 1; }
.obra--dreta .quadre{ grid-column: 2; grid-row: 1; }
.obra--dreta .obra__text{ grid-column: 1; grid-row: 1; }

/* ---- el quadre: la mateixa fusta i el mateix forat que la portada ---- */
.quadre{
  position: relative;
  margin: 0;
  aspect-ratio: 1500 / 1031;
  filter: drop-shadow(0 22px 40px rgba(80, 40, 30, .26));
}
.quadre__foto{
  position: absolute;
  /* un pel més gran que el forat: el marc va a sobre i el tapa, i així els
     arrodoniments no deixen cap fil del passe-partout a la vista */
  left: calc(var(--hx) - .25%); top: calc(var(--hy) - .35%);
  width: calc(var(--hw) + .5%); height: calc(var(--hh) + .7%);
  overflow: hidden;
  background: #cbb9ad;
}
.quadre__foto img{
  width: 100%; height: 100%;
  object-fit: cover;
  /* el mateix to antic que la portada */
  filter: sepia(.34) saturate(.88) contrast(1.05) brightness(1.03);
}

/* ---- els quadres vius: un vídeo en comptes de la foto ----
   El videoclip de YouTube (youtube-nocookie), mut, en bucle i sense
   controls, ocupant el forat com ho fa la foto. El forat és una mica més
   estret que el 16:9 del vídeo: l'iframe es fa prou gran per cobrir-lo en
   totes dues direccions (unitats de contenidor) i un 12% més, que retalla
   les vores on YouTube hi posa el títol i el logo. L'iframe no rep el
   ratolí (és un quadre, no un reproductor): tocar el quadre o la píndola
   «Mira'l amb so» obre la sala de projecció, amb so i controls. */
.quadre__video{ container-type: size; }
.quadre__video img{ position: absolute; inset: 0; }
.quadre__video iframe{
  position: absolute;
  left: 50%; top: 50%;
  /* sempre a mida d'ordinador i escalat (--k el posa el JS): així els
     rètols de YouTube queden petits i el 12% de més se'ls emporta també al
     mòbil */
  width: 640px;
  height: 360px;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  border: 0;
  pointer-events: none;
  /* el mateix to antic que les fotos dels altres quadres */
  filter: sepia(.34) saturate(.88) contrast(1.05) brightness(1.03);
  /* No es veu fins que el vídeo corre de debò (el JS posa .is-viu al quadre
     quan YouTube diu PLAYING). Fins llavors hi ha la foto: si el mòbil no
     deixa arrencar el vídeo sol (iPhone en mode d'estalvi, per exemple), es
     queda la foto amb la píndola i no la portada de YouTube amb el seu botó
     vermell i el títol. */
  opacity: 0;
  transition: opacity .6s cubic-bezier(.65,0,.35,1);
}
.quadre__video.is-viu iframe{ opacity: 1; }
.quadre__video{ cursor: pointer; }

/* el botó del quadre viu: una píndola fosca a baix, centrada */
.quadre__play{
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 10px;
  translate: -50% 0;                    /* va a part del transform del hover */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px;
  border: 0; border-radius: 999px;
  background: var(--tinta); color: var(--rosa);
  font: 700 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 6px 18px rgba(20, 10, 5, .3);
  transition: background-color .3s cubic-bezier(.65,0,.35,1), transform .3s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){
  .quadre__video:hover .quadre__play{ background: var(--taronja); transform: translateY(-2px); }
}

/* ---- la sala de projecció ----
   El videoclip amb so i amb els controls de YouTube, sobre una cortina
   fosca. Entra i surt amb fos; l'iframe es posa en obrir i es treu en
   tancar, que és el que para el so de debò. */
.cine{
  position: fixed;
  inset: 0;
  z-index: 130;                  /* per sobre del capçal (120) i del quadre (115) */
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 80px);
  background: rgba(44, 26, 22, .94);
  opacity: 0;
  transition: opacity .45s cubic-bezier(.65,0,.35,1);
}
.cine[hidden]{ display: none; }
.cine.is-obert{ opacity: 1; }
.cine__pantalla{
  width: min(100%, calc((100svh - 2 * clamp(16px, 5vw, 80px)) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.96);
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.cine.is-obert .cine__pantalla{ transform: none; }
.cine__pantalla iframe{ display: block; width: 100%; height: 100%; border: 0; }
.cine__tanca{
  position: absolute;
  top: calc(30px + var(--sa-dalt, 0px)); right: clamp(16px, 4vw, 48px);
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  padding: 0; -webkit-appearance: none; appearance: none;
  background: var(--rosa); color: var(--tinta);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){ .cine__tanca:hover{ transform: rotate(90deg); background: var(--taronja); } }

/* ---- el quadre vertical ----
   La mateixa fusta girada 90° (assets/frame-vertical.jpg) i el forat
   recalculat al fitxer girat. Amb l'amplada de la columna seria altíssim:
   es limita perquè hi càpiga a la pantalla i perquè l'embed d'Instagram
   (que no passa de 540 px) cobreixi el forat. */
.quadre--vertical{
  aspect-ratio: 1031 / 1500;
  --hx: 16.392%; --hy: 11.600%; --hw: 67.313%; --hh: 77.000%;
  width: min(100%, calc(78svh * 1031 / 1500), 560px);
  justify-self: center;
}

/* ---- l'embed d'Instagram dins del forat ----
   Instagram dibuixa una capçalera de 54 px, una caixa 4:5 amb el vídeo 9:16
   centrat a dins (amb franges negres) i un peu. L'iframe es fa prou gran
   perquè el vídeo cobreixi el forat i es desplaça perquè la capçalera, les
   franges i el peu quedin fora. Mesurat en un Chrome de debò: la caixa fa
   l'amplada de l'iframe i 1,25 vegades d'alt. L'iframe sí que rep el toc:
   es toca i el vídeo es reprodueix allà mateix, amb so. */
.quadre__ig{ container-type: size; }
.quadre__ig img{ position: absolute; inset: 0; }
.quadre__ig iframe{
  /* Al Chrome d'ordinador l'embed reserva 15 px de barra de desplaçament a la
     dreta i la caixa del vídeo (--igm) fa l'iframe menys 15; als mòbils
     (iPhone, Android) la barra flota i la caixa fa l'iframe sencer. Dins
     d'aquesta caixa 4:5 el vídeo 9:16 queda centrat i ocupa el 70,3% de
     l'amplada. Per anar bé als dos llocs: la caixa és 1,44 vegades el forat
     i 16 px més (el vídeo sobra una mica per cada costat) i l'iframe es
     col·loca al mig de tots dos casos (3,75 px de diferència a cada banda),
     així el vídeo cobreix el forat tant si hi ha barra com si no. */
  --igm: max(311px, calc(144cqw + 16px));
  position: absolute;
  left: calc(50% - var(--igm) / 2 - 3.75px);
  top: calc(-54px - (var(--igm) * 1.25 - 100cqh) / 2);
  width: calc(var(--igm) + 15px);
  height: calc(54px + var(--igm) * 1.25 + 480px);
  border: 0;
  filter: sepia(.34) saturate(.88) contrast(1.05) brightness(1.03);
  /* fins que no ha carregat hi ha la foto (el JS posa .is-carregat) */
  opacity: 0;
  transition: opacity .6s cubic-bezier(.65,0,.35,1);
}
.quadre__ig.is-carregat iframe{ opacity: 1; }

/* «fill» i no «contain», com a la portada: la caixa ja té la proporció de la
   fusta i així el forat hi cau sempre */
.quadre__fusta{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, 0% 100%,
    0% var(--hy),
    var(--hx) var(--hy),
    var(--hx) calc(var(--hy) + var(--hh)),
    calc(var(--hx) + var(--hw)) calc(var(--hy) + var(--hh)),
    calc(var(--hx) + var(--hw)) var(--hy),
    0% var(--hy)
  );
}

/* ---- el tancament ---- */
.expo__fi{
  max-width: min(620px, 100% - var(--carril-quadre) * 2);
  margin: 0 auto;
  padding: 0 0 clamp(40px, 8svh, 100px);
  text-align: center;
}
.expo__cta{
  display: inline-block;
  margin-top: 22px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--rosa);
  font-family: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .3s cubic-bezier(.65,0,.35,1),
              transform .35s cubic-bezier(.65,0,.35,1);
}
.expo__cta:hover{ background: var(--taronja); transform: translateY(-2px); }

/* ---- el traç sota el que importa ----
   Un subratllat fet a mà, com el de «Les xifres, a dia d'avui»: és un fons
   que creix d'amplada, o sigui que en aparèixer no mou res de lloc. Aquí va
   en taronja, que és el nostre accent; el de les xifres és el rosa d'ella.
   Es dibuixa quan l'obra entra; si el revelat no s'arriba a activar, el traç
   ja hi és des del primer moment. */
.expo .ralla{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M5 14C55 6 92 17 143 10c48-6 85 6 152-1' stroke='%23C4501F' stroke-width='11' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% .34em;
  padding-bottom: .08em;
  transition: background-size 1s cubic-bezier(.22,.61,.24,1) .45s;
}
.expo.reveal-on .ralla{ background-size: 0 .34em; }
.expo.reveal-on [data-obra].is-vista .ralla{ background-size: 100% .34em; }
/* les de la portada no són dins de cap [data-obra]: es dibuixen quan el
   quadre queda penjat */
.marc.is-posat .expo.reveal-on .expo__intro .ralla{ background-size: 100% .34em; }

/* ---- entrada: cada obra puja quan li toca ----
   Amagar-les va lligat a «.expo.reveal-on», que el posa el JS just abans de
   mirar-les. Si el codi no arriba a executar-se, o l'observador no dispara,
   les obres es veuen igualment: val més perdre l'entrada que quedar-se amb
   una pàgina en blanc. */
.expo.reveal-on [data-obra]{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .6s cubic-bezier(.65,0,.35,1),
              transform .8s cubic-bezier(.65,0,.35,1);
}
.expo.reveal-on [data-obra].is-vista{ opacity: 1; transform: none; }

@media (max-width: 900px), (orientation: portrait){
  /* En estret la portada es fa a capes: el quadre va en absolut a dalt (el
     JS li dona --fx/--fy/--fw/--fh al #marc) i el text, en flux, comença
     just on el quadre s'acaba. Abans el text anava a dalt de tot, sota el
     capçal i sota el quadre, i la primera obra pujava fins a trepitjar-lo:
     amb «height: auto» la portada no comptava l'alçada del quadre. */
  /* a ras del quadre: el mateix marge que el marc (--fx, que el JS deixa al
     #marc), a l'esquerra i a la dreta */
  .expo__intro{
    position: static;
    transform: none;
    width: auto;
    padding: 0 var(--fx, clamp(16px, 5vw, 40px));
  }
  /* El buit per al quadre va com a coixí de la portada i no com a marge del
     text: un marge de dalt s'escapa per fusió (la portada no té vora ni
     coixí) i empenyia la portada sencera, quadre inclòs, 370 px avall. El
     coixí no mou les capes en absolut, que es col·loquen des de la vora. */
  .expo__portada{
    height: auto;
    padding-top: calc(var(--fy, 0px) + var(--fh, 0px) + 28px);
    padding-left: 0;                /* el carril de la K no hi cap */
    padding-bottom: clamp(30px, 6svh, 60px);
  }
  /* en estret el carril no hi cap: torna a ser un marge normal, el mateix
     7vw del quadre de la portada (marcFinal() el fa del 86% de l'amplada,
     centrat), perquè tots els quadres facin la mateixa amplada i caiguin al
     mateix eix */
  .obra{
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: none;
    margin-inline: 0;
    padding-inline: 7vw;            /* l'ombra la talla la vora de la pantalla */
  }
  .expo__fi{ max-width: none; margin-inline: 7vw; }
  .obra--esquerra .quadre, .obra--dreta .quadre{ grid-column: 1; grid-row: 1; }
  .obra--esquerra .obra__text, .obra--dreta .obra__text{ grid-column: 1; grid-row: 2; }
}

/* (sense bloc de «reduir moviment»: les obres i els traços s'animen sempre) */