/* ═══════════════════════════════════════════════
   Enric Roca · Preweb — estils base + animació inicial
   ═══════════════════════════════════════════════ */

@font-face{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/roboto-400-latin.woff2') format('woff2');
}
@font-face{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/roboto-500-latin.woff2') format('woff2');
}

:root{
  --sans: 'Roboto', 'Segoe UI', system-ui, Arial, sans-serif;
  --cream: #FAF7F1;          /* blanc trencat / crema */
  --ink:   #131313;          /* negre tinta */
  --logo-h: clamp(110px, 16vw, 175px);   /* alçada de la R a la intro */
  --header-logo-h: 34px;                 /* alçada de la R al header */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

@media (max-width: 700px){
  :root{ --logo-h: clamp(56px, 13vw, 110px); }
}

html, body{ background: var(--cream); }
body{
  font-family: "MingLiU-ExtB", "PMingLiU-ExtB", "Times New Roman", serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
body.is-intro{ overflow: hidden; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ─── Lockup del logo (compartit intro / header) ─── */
.lockup{
  --lh: var(--logo-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lh) * .30);
}
.lockup .isotype{
  height: var(--lh);
  width: calc(var(--lh) * 1.9674);   /* proporció 844/429 */
  flex: none;
  display: block;
}
.ink{ fill: var(--ink); }
.word{
  font-size: calc(var(--lh) * .66);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  transform: translateY(calc(var(--lh) * -.045));
}
.lockup--header{ --lh: var(--header-logo-h); }

/* Kerning òptic d'ENRIC: MingLiU-ExtB és monoespaiada en llatí i la I
   deixa buits desiguals — correccions mesurades sobre la tinta real
   perquè tots els parells tinguin el mateix buit que ROCA (0.057em) */
.k-n{ margin-left: .007em; }
.k-r{ margin-left: .007em; }
.k-i{ margin-left: -.103em; }
.k-c{ margin-left: -.118em; }

/* ─── Header ─── */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(250, 247, 241, .72);   /* crema semitranslúcid */
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  padding: 15px 0;
  visibility: hidden;
}
body.done .site-header{ visibility: visible; }

/* ─── Contingut: galeria ─── */
/* el retall horitzontal va al BODY: si fos a l'html, trencaria la
   propagació de l'overflow:hidden del body i el scroll no es blocaria */
html{ scrollbar-gutter: stable; }
body{ overflow-x: clip; }
body.landing{ overflow: hidden; }

.site-content{
  min-height: 100svh;
  padding-top: 70px;
}
.rise{
  transform: translateY(108vh);   /* el "tren" comença sota la pantalla */
  will-change: transform;
}

.gallery{
  max-width: 1200px;
  margin: 0 auto;
  padding: 2vh 0 0;
}
.piece{ margin: 0; overflow: hidden; }   /* marc que retalla el parallax intern */
.piece img{
  width: 100%; height: auto; display: block;
  transform: scale(1.12);   /* folgança perquè la imatge pugui derivar dins el marc */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .piece img{ transform: none; }
}

/* 1 · Veler i Boies — ample, acaba passat de llarg rere el header */
.p-veler{ width: 78%; margin: 0 auto 7%; }

/* 2 · fila títol/S'Alguer + Barca i Roques */
.duo{ display: flex; align-items: flex-start; }
.duo-left{ width: 52%; padding-left: 7%; }
.duo-right{ width: 39%; margin-left: auto; margin-right: 4%; }
.p-salguer{ width: 100%; margin-top: 7%; }

.cb-head{ margin: 2% 0 0 8%; }
.cb-title{
  font-size: clamp(46px, 9.6vw, 120px);
  line-height: .97;
  font-weight: 400;
  letter-spacing: .02em;
}
.cb-ind{ padding-left: .55em; }
.cb-sub{
  font-family: var(--sans);
  font-size: clamp(11px, 1.3vw, 16px);
  color: #3e3e3e;
  letter-spacing: .05em;
  margin: 1.4em 0 0 .3em;
}
.cb-dots{ color: #8a97a8; margin-right: .45em; letter-spacing: .12em; }

/* 3 · Tamariu dins la columna dreta, sota Barca i Roques,
      creixent fins a la vora de la pantalla (i sobresortint un pèl) */
.p-tamariu{ width: max(110%, calc(50vw - 70px)); max-width: none; margin-top: 14%; }
.p-llafranc{ width: 74%; margin: 7% 0 0 1%; }

/* ─── L'Artista ─── */
.artista{
  position: relative;
  max-width: 1440px;
  margin: 8% auto 18vh;
  padding-bottom: 6%;
}
.art-body{ margin-left: 26%; width: 52%; }   /* columna més ampla, acaba abans de la foto dreta */
.art-title{
  font-weight: 400;
  font-size: clamp(48px, 5.3vw, 100px);   /* text HTML: escala sol i mai es talla (abans SVG amb font de Windows) */
  line-height: 1;
  letter-spacing: .04em;
  margin-bottom: .5em;
}
.art-body p{
  font-family: var(--sans);
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1.65;
  color: #333;
  margin-bottom: 1em;
}
.art-sign{
  display: block;
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin: 1.6em 0 0 auto;   /* firma a la dreta, sota el text */
}
.art-photo-right{
  position: absolute;
  top: 0;
  left: 84.2%;                          /* ancorada a prop del text… */
  right: calc((100% - 100vw) / 2);    /* …i creix fins a la vora dreta de la pantalla */
  width: auto;
}
.art-photo-left{
  position: absolute;
  bottom: -9%;
  left: calc((100% - 100vw) / 2);   /* sagna fins a la vora esquerra de la pantalla */
  right: 78.4%;                      /* …i creix cap al text en pantalles grans */
  width: auto;
}

/* ─── Peces enllaçables: hover + cursor "VEURE" ─── */
.zoom{ display: block; transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine){
  .hoverable{ cursor: none; }
  .hoverable:hover .zoom{ transform: scale(1.03); }
}
.cursor-badge{
  position: fixed;
  left: 0; top: 0;
  z-index: 200;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(250, 247, 241, .72);          /* mateix material que el header */
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.cursor-badge.on{ opacity: 1; }

/* ─── Fitxa de quadre ─── */
body.detail-open{ overflow: hidden; }
body.detail-open .rise{
  opacity: 0;
  pointer-events: none;
}
.rise{ transition: opacity .45s ease; }
.lockup--header{ cursor: pointer; }

.fly{
  position: fixed;
  z-index: 45;                       /* per sota del header translúcid */
  overflow: hidden;
  will-change: transform;
}
.fly img{ width: 100%; height: auto; display: block; }

.detail{
  position: fixed;
  inset: 0;                         /* l'amplada real (per cobrir el gutter reservat) es fixa per JS a window.innerWidth */
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;                 /* la fitxa té el seu propi scroll */
  scrollbar-gutter: stable;         /* mateixa reserva que el document → el header no es mou */
  overscroll-behavior: contain;
  background: var(--cream);
}
body.detail-open .detail{
  pointer-events: auto;
}
.d-hero{
  position: relative;
  height: 100vh;
  border-bottom: 1px solid #ddd6cc;   /* línia fina que tanca el primer plafó */
}

/* seccions extra: el quadre a la paret i el detall de la pinzellada */
.d-extra{ padding-bottom: 9vh; }
.d-mock{ margin: 0; }
.d-mock img{ width: 100%; height: auto; display: block; }
.d-mock-1{ width: 36.4%; margin: 8vh 3% 0 45%; }
.d-mock-2{ width: 42%; margin: 8vh 0 0 8%; }
.d-mock{ transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
.d-mock.pend{ opacity: 0; transform: translateY(46px); }   /* ocult fins revelar (treure .pend) */
.detail .anim{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.detail.open .anim{ opacity: 1; transform: none; }
.detail.open .d-tech{  transition-delay: .08s; }
.detail.open .d-price{ transition-delay: .16s; }
.detail.open .d-row{   transition-delay: .16s; }
.detail.open .d-row + .d-row{ transition-delay: .24s; }

.d-head{
  position: absolute;
  left: 6vw;
  top: 16vh;
  max-width: 26vw;
}
.d-title{
  font-size: clamp(38px, 5.6vw, 118px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.d-tech{
  font-family: var(--sans);
  font-size: clamp(14px, 1.35vw, 26px);
  color: #1e1e1e;
  margin-top: 1.1em;
}
.d-price{
  position: absolute;
  left: 6vw;
  bottom: 5vh;
  font-family: var(--sans);
  font-size: clamp(20px, 1.8vw, 34px);
  color: var(--ink);
}
.d-cur{ color: #8f8f8f; font-size: .72em; margin-right: .3em; }
.d-meta{
  position: absolute;
  left: 67vw;
  bottom: 5vh;
  font-family: var(--sans);
  font-size: clamp(14px, 1.3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 1.15em;
}
.d-row{ display: flex; align-items: center; }
.d-lab{ color: #9c9c9c; margin-right: .85em; }
.d-corner{
  display: inline-block;
  width: .5em; height: .5em;
  border-left: 2px solid #9c9c9c;
  border-top: 2px solid #9c9c9c;
  margin-right: .85em;
}

/* ── Layout per a quadres HORITZONTALS ── */
.detail.is-landscape .d-head{ max-width: 60vw; }
.detail.is-landscape .d-price{
  left: auto; right: 6vw; top: 20vh; bottom: auto;
}
.detail.is-landscape .d-meta{
  left: 6vw; right: auto; top: auto; bottom: 6vh;
}

/* Revelat en scroll dels elements sota el plec */
.pend{ opacity: 0; transform: translateY(46px); }
.pend.in{
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}

/* ─── Capa d'intro ─── */
.intro{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;   /* la pàgina ja és crema; transparent deixa veure la galeria pujant per darrere */
  display: grid;
  place-items: center;
}
/* mentre la galeria puja (solapada amb el push), la intro no ha de capturar clics */
body.rising .intro{ pointer-events: none; }
body.done .intro{ display: none; }
.intro .lockup{ will-change: transform; }

/* Paraules: surten del centre cap als extrems.
   Només transform/opacity — animar letter-spacing canvia el layout
   i fa tremolar la R (el flex es recentra a cada frame). */
.lockup--intro .word{
  opacity: 0;
}
.lockup--intro .word--left{
  transform: translate(calc(var(--lh) * .52), calc(var(--lh) * -.045));
}
.lockup--intro .word--right{
  transform: translate(calc(var(--lh) * -.52), calc(var(--lh) * -.045));
}
.lockup--intro.words-in .word{
  opacity: 1;
  transform: translate(0, calc(var(--lh) * -.045));
  transition:
    transform 1.05s var(--ease-out),
    opacity .6s ease-out;
}

/* ─── Traços de pinzell (màscares) ─── */
.sw-curl{ stroke-width: 94; }
.sw-base{ stroke-width: 112; }
.sw-dash{ stroke-width: 80; }
.sw-dot { stroke-width: 78; }

.ms{
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ms.draw{
  animation: erDraw var(--dd, 900ms) cubic-bezier(.55, .06, .35, .95) forwards;
}
.ms--curl{ --dd: 630ms; }
.ms--base{ --dd: 770ms; }
.ms--dash{ --dd: 225ms; }
.ms--dot { --dd: 210ms; }

@keyframes erDraw{ to{ stroke-dashoffset: 0; } }

/* Mode ?full — logo dibuixat del tot, sense animació */
body.full .ms{
  animation: none;
  stroke-dashoffset: 0;
}

/* Mode ?debug — recorreguts del pinzell en vermell */
.dbg{ display: none; }
body.debug .dbg{ display: block; }
.dbgs{
  fill: none;
  stroke: rgba(215, 40, 40, .38);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════
   VERSIÓ MÒBIL  ·  només afecta ≤700px  ·  no toca res d'escriptori
   (bloc al final del fitxer → guanya per ordre de font a igual especificitat)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px){

  /* ── Galeria: una sola columna, imatges amples i centrades ── */
  .gallery{ padding: 1vh 6vw 0; }
  .p-veler{ width: 100%; margin: 0 auto 9%; }

  .duo{ display: block; }                      /* trenca les dues columnes */
  .duo-left, .duo-right{ width: 100%; margin: 0; padding: 0; }

  .cb-head{ margin: 8% 0 6% 0; }
  .cb-title{ font-size: clamp(56px, 18vw, 92px); }
  .cb-sub{ font-size: 13px; margin: 1.1em 0 0 .2em; }

  .p-salguer{ width: 76%; margin: 0 auto 12%; }
  .p-barca{ width: 76%; margin: 10% auto 12%; }
  .p-tamariu{ width: 100%; max-width: 100%; margin: 0 auto 12%; }
  .p-llafranc{ width: 100%; margin: 0 auto 12%; }

  /* ── L'Artista: apilat (foto · text · foto) ── */
  .artista{ max-width: none; margin: 14% 0 12vh; padding: 0 6vw; }
  .art-body{ width: 100%; margin: 7% 0 0; }
  .art-title{ font-size: clamp(38px, 12vw, 54px); margin-bottom: .5em; }
  .art-body p{ font-size: 15px; line-height: 1.62; }
  .art-sign{ width: 66px; margin: 1.6em auto 0; }
  .art-photo-right, .art-photo-left{
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; margin: 0;
  }
  .art-photo-left{ margin-top: 9%; }

  /* ── Fitxa de quadre: títol · imatge · preu/ref apilats ── */
  .d-title{ font-size: clamp(34px, 9vw, 54px); }
  .detail.is-landscape .d-head, .detail.is-portrait .d-head{
    top: 10vh; left: 6vw; right: 6vw; max-width: none;
  }
  .d-tech{ font-size: 15px; margin-top: .7em; }
  .detail.is-landscape .d-price, .detail.is-portrait .d-price{
    left: 6vw; right: auto; top: auto; bottom: 4vh; font-size: 22px;
  }
  .detail.is-landscape .d-meta, .detail.is-portrait .d-meta{
    left: auto; right: 6vw; top: auto; bottom: 4vh; font-size: 15px; gap: .7em;
  }
  .d-mock-1, .d-mock-2{ width: 84%; margin: 7vh auto 0; }
  .d-extra{ padding-bottom: 12vh; }
}