html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Kit de webs · nivell «animada»
   Només es fa servir a les webs amb "nivell": "animada". Gairebé tot depèn de la classe .anim de <html>,
   que posa js/animacio.js quan arrenca: sense JavaScript o amb «reduir el moviment», la web es veu com la bàsica. */

html.lenis{scroll-behavior:auto}

/* El títol de la portada entra paraula per paraula. Es deixa amagat perquè no es vegi un instant abans de l'animació;
   si el JavaScript no arriba, es mostra igualment al cap de 2 segons. */
.nivell-animada .hero h1{opacity:0;animation:kit-mostra 0s 2s forwards}
@keyframes kit-mostra{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.nivell-animada .hero h1{opacity:1}}

/* Capçalera: s'amaga en baixar i torna en pujar */
.anim .cap{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.anim .cap.amagada{transform:translateY(-100%)}
.anim .cap:focus-within{transform:none}

/* Cinta */
.anim .cinta .pista{will-change:transform}

/* Capítols a l'ordinador: la secció es queda fixa i cada capítol entra per sobre de l'anterior */
@media (min-width:761px){
  .anim body:not(.mon-particules) .capitols .escena{position:relative;height:100vh;overflow:hidden}
  .anim body:not(.mon-particules) .capitols ol{position:absolute;inset:0}
  .anim body:not(.mon-particules) .capitol{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(5.25rem,12vh,8rem) 0 clamp(4.5rem,10vh,6.5rem)}
  .anim body:not(.mon-particules) .capitol .paraula{will-change:transform}
  .anim body:not(.mon-particules) .capitol .foto{max-height:46vh}
  .anim body:not(.mon-particules) .capitol .foto.sencera img{max-height:46vh;width:auto;margin-left:auto}
  .anim body:not(.mon-particules) .capitols .indicador{display:flex;align-items:center;gap:0.875rem;position:absolute;z-index:5;left:max(1.25rem,calc((100% - 73.75rem) / 2));bottom:1.75rem;
    font:600 .8rem/1 var(--font-body);letter-spacing:.12em;color:#fff;mix-blend-mode:difference;font-variant-numeric:tabular-nums}
  .anim body:not(.mon-particules) .capitols .barra{width:7.5rem;height:1.5px;background:rgba(255,255,255,.3);overflow:hidden}
  .anim body:not(.mon-particules) .capitols .barra i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
}

/* Pantalla de càrrega (si la fitxa porta "animacio": {"carrega": true}). Si el JavaScript no arriba, s'amaga sola */
.carrega{position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:1fr auto;align-items:end;padding:clamp(1.25rem,4vw,3rem);background:var(--dark);color:var(--on-dark);animation:kit-amaga .4s 2.5s forwards}
.carrega-nom{display:flex;align-items:center;gap:.25em;font:var(--display-weight) calc(clamp(2.6rem,8vw,7rem) * var(--display-scale))/1 var(--font-display);letter-spacing:-.04em}
.carrega-nom img{height:.9em;width:auto}
.carrega-nom em{font-style:var(--em-style);color:var(--accent-on-dark)}
.carrega-num{font:300 clamp(2.6rem,8vw,7rem)/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--accent-on-dark)}
.carrega-barra{position:absolute;left:0;right:0;bottom:0;height:3px}
.carrega-barra i{display:block;height:100%;background:var(--accent-on-dark);transform-origin:left;transform:scaleX(0)}
@keyframes kit-amaga{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.carrega{display:none}}

/* Barra de progrés de lectura */
.progres{position:fixed;left:0;right:0;top:0;z-index:60;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* Cursor que segueix el ratolí (només ordinador; el cursor normal no s'amaga) */
.cursor{position:fixed;left:0;top:0;z-index:250;width:2.125rem;height:2.125rem;margin:-1.0625rem 0 0 -1.0625rem;border:1.5px solid #fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;opacity:0;
  transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1),background-color .35s,opacity .3s}
.cursor.actiu{opacity:1}
.cursor.sobre{width:4.75rem;height:4.75rem;margin:-2.375rem 0 0 -2.375rem;background:#fff}

/* Capçalera transparent damunt la portada fosca */
.anim .cap.fosca{background:transparent;border-bottom-color:transparent;color:var(--on-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
.anim .cap.fosca .btn-1{background:var(--accent-on-dark);color:var(--dark)}
.anim .cap.fosca.obert,.anim .cap.fosca .menu{background:var(--dark)}

/* Món de partícules en marxa: el llenç és fix darrere de tot i la portada deixa veure'l */
.particules-mon{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.anim .hero-particules .hero{background:transparent}
.anim .hero-particules .hero.viu .hero-paraula span,.anim .hero-particules .hero.viu.amb-simbol .hero-simbol{visibility:hidden}
.anim .hero-particules .hero-baixa{display:flex;align-items:center;gap:0.75rem;position:absolute;z-index:2;top:50%;right:max(1.25rem,calc((100% - 73.75rem) / 2));writing-mode:vertical-rl;
  font:600 .7rem/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft)}
.anim .hero-particules .hero-baixa i{width:1px;height:3.5rem;background:currentColor;transform-origin:top;animation:kit-baixa 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes kit-baixa{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.anim .hero-particules .hero-baixa{display:none}}
/* Capçalera del món de partícules: transparent a dalt de tot, i amb vidre fosc en baixar */
.anim .mon-particules .cap,.anim.mon .cap{background:color-mix(in srgb,var(--dark) 70%,transparent);border-bottom-color:transparent;color:var(--on-dark)}

/* Models a l'ordinador: la secció es queda fixa mentre la galeria passa de costat, i ha de cabre sencera a la pantalla */
@media (min-width:761px){
  .anim .models{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(4.75rem,10vh,6.5rem) 0 clamp(1.25rem,4vh,2.5rem)}
  .anim .models .sec-cap{gap:0.625rem;margin-bottom:clamp(1.125rem,3.5vh,2.5rem)}
  .anim .models .sec-cap h2{font-size:calc(clamp(1.8rem,5.2vh,3.2rem) * var(--display-scale));margin:0}
  .anim .models .sec-cap .intro{font-size:1rem}
  .anim .models .etiqueta{margin-bottom:0.25rem}
  .anim .model{width:clamp(20rem,calc((100vh - 26.875rem) * 1.45),40rem)}
  .anim .model a{padding:clamp(0.75rem,1.6vh,1.25rem)}
  .anim .model .foto{margin-bottom:0.75rem}
  .anim .models-avis{margin-top:clamp(0.625rem,2vh,1.5rem)}
}

/* Portada a sang viva (nivell animat): llum càlida que respira i un reflex que passa lentament, sense haver de baixar */
.anim .hero-overlay .hero.viva::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(60% 50% at 70% 25%,color-mix(in srgb,var(--accent-on-dark) 55%,transparent),transparent 70%),
             linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  background-size:100% 100%,250% 100%;animation:kit-llum 7s ease-in-out infinite alternate,kit-reflex 11s linear infinite}
@keyframes kit-llum{from{opacity:.55}to{opacity:1}}
@keyframes kit-reflex{from{background-position:0 0,150% 0}to{background-position:0 0,-150% 0}}