/* ══════════════════════════════════════════════════════════
   El marc
   Ve del primer prototip (Escritorio\Markos amb K, EFECTE-MARC.md). Allà
   l'efecte anava amb l'scroll; aquí és el pas cap a «Qui soc»: en clicar el
   Markos, la portada s'encongeix fins a quedar dins d'un marc antic i, quan
   ja hi és, la pàgina marxa.

   El truc: la foto no s'escala mai. El que es mou és EL MARC, i la foto es
   limita a ocupar sempre el seu forat. Una sola interpolació (el rectangle
   del marc) i la foto surt de franc.

     --fx --fy --fw --fh   el marc sencer
     --px --py --pw --ph   el forat = on va la foto
   ══════════════════════════════════════════════════════════ */

.marc{
  /* On cau el forat dins de la imatge del marc, en tant per u. Mesurat al
     fitxer: l'obertura va de x 174 a 1329 i de y 168 a 862, sobre una imatge
     de 1500x1031. Els números que hi havia venien del prototip i deixaven la
     foto curta per l'esquerra, la dreta i sobretot per baix, i es veia la
     vora del passe-partout.
     Aquests quatre números també són al JS (FORAT, a js/main.js): si es
     canvia de marc, s'han de tocar als dos llocs. */
  --hx: 11.600%;
  --hy: 16.295%;
  --hw: 77.000%;
  --hh: 67.313%;

  --fx: 0px; --fy: 0px; --fw: 100vw; --fh: 100svh;
  --px: 0px; --py: 0px; --pw: 100vw; --ph: 100svh;
  --vintage: 0;              /* 0 = la portada d'avui · 1 = la foto antiga */

  position: fixed;
  inset: 0;
  /* per sobre de l'escena i de la galeria, per sota del capçal (120) i del
     vel que tapa el canvi de pàgina (900) */
  z-index: 115;
  background: var(--rosa);
  /* ara és ell qui fa scroll: la portada és la primera pantalla i a sota hi
     baixa l'exposició. La pàgina de darrere es queda quieta (body.is-marc). */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.marc::-webkit-scrollbar{ display: none; }
.marc[hidden]{ display: none; }
/* Als dos caps del vol el quadre es fon amb la portada (0,35 s) en comptes
   d'aparèixer o desaparèixer de cop: la foto és la mateixa, però a sobre de
   la portada hi ha el capçal, els rètols i els degradats, i el canvi es
   notava com un tall (03/10/2026). */
.marc{ transition: opacity .35s cubic-bezier(.65,0,.35,1); }
.marc.is-fos{ opacity: 0; }

.marc__capa{ position: absolute; overflow: hidden; }
.marc__capa img{ width: 100%; height: 100%; }

/* ── la foto: sempre al forat ──
   És la portada de sempre (scene.jpg, la part de dalt de la imatge llarga).
   Amb «cover» i el rectangle de sortida igual al que ocupa ara a la
   pantalla, al primer fotograma es calca amb el que ja hi havia. */
.marc__foto{
  z-index: 1;
  left: var(--px); top: var(--py);
  width: var(--pw); height: var(--ph);
  will-change: left, top, width, height;
}
.marc__foto img{
  object-fit: cover;
  /* la foto no es mou ni s'escala: només s'envelleix. El filtre canvia a
     cada fotograma del vol: amb will-change el fa la targeta gràfica i no
     cal tornar a pintar la foto (al mòbil, el que feia batzegar el vol) */
  will-change: filter;
  filter: sepia(calc(var(--vintage) * .34))
          saturate(calc(1 - var(--vintage) * .12))
          contrast(calc(1 + var(--vintage) * .05))
          brightness(calc(1 + var(--vintage) * .03));
}

/* ── el marc: el rectangle gran, i entra a la segona meitat ── */
.marc__fusta{
  z-index: 2;
  left: var(--fx); top: var(--fy);
  width: var(--fw); height: var(--fh);
  opacity: var(--vintage);
  overflow: visible;
  will-change: filter, opacity;          /* l'ombra, també a la targeta gràfica */
  filter: drop-shadow(0 26px 55px rgba(80, 40, 30, calc(var(--vintage) * .3)));
}
/* El centre es buida amb clip-path i no amb cap PNG transparent: rectangle
   exterior i forat en un sol polígon. */
/* «fill» i no «contain»: mentre dura el viatge la caixa encara no té la
   proporció exacta del marc, i amb «contain» la imatge hi quedaria encaixada
   amb marges i el forat deixaria de coincidir amb la foto. Estirant-la, el
   forat hi cau sempre; l'estirada és de pocs per cent i just quan el marc
   comença a aparèixer, i a l'arribada ja és zero. */
.marc__fusta img{
  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)
  );
}

/* ── pàtina de foto antiga ──
   Va dins de la capa del marc, col·locada al forat amb les mateixes quatre
   constants: així no cal repetir-les una tercera vegada. */
.marc__patina{
  position: absolute;
  left: var(--hx); top: var(--hy);
  width: var(--hw); height: var(--hh);
  pointer-events: none;
  background: radial-gradient(125% 105% at 50% 42%,
              rgba(255, 240, 205, .12) 0%,
              rgba(120, 70, 30, 0) 48%,
              rgba(96, 52, 18, .34) 100%);
  mix-blend-mode: multiply;
}

/* ── la creu de tornar ──
   La mateixa de la galeria: no surt fins que el quadre és penjat del tot,
   perquè mentre viatja només hi ha d'haver la foto. */
.marc__tanca{
  /* fixa i no absoluta: si no, se n'aniria amunt en baixar per l'exposició */
  position: fixed;
  top: calc(30px + var(--sa-dalt, 0px)); right: clamp(16px, 4vw, 48px);
  z-index: 3;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--tinta); color: var(--rosa);
  display: grid; place-items: center;
  padding: 0; -webkit-appearance: none; appearance: none;
  cursor: pointer;
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.65,0,.35,1),
              transform .45s cubic-bezier(.65,0,.35,1),
              background-color .25s cubic-bezier(.65,0,.35,1);
}
.marc.is-posat .marc__tanca{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (hover: hover){ .marc.is-posat .marc__tanca:hover{ transform: rotate(90deg); background: var(--taronja); } }

/* mentre dura, la pàgina de sota no s'ha de poder moure */
body.is-marc{ overflow: hidden; }

/* (sense bloc de «reduir moviment»: el quadre vola sempre, 03/10/2026) */

/* el <picture> de la foto no fa de capsa: la imatge es mesura contra el forat */
.marc__foto picture{ display: contents; }
/* al mòbil la foto és la vertical de la portada: el JS mou l'enquadrament
   (--obj-y) de dalt de tot, com es veu a la portada, a la franja del Markos */
@media (max-width: 900px), (orientation: portrait){
  .marc__foto img{ object-position: 50% var(--obj-y, 42%); }
}