/* El que comparteixen les tres propostes: la font, els colors d'Expekar i els moviments */
@font-face {
  font-family: 'Bricolage';
  src: url('fonts/bricolage-var.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Bricolage';
  src: url('fonts/bricolage-var-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --tinta: #0f172a;
  --tinta-suau: #475569;
  --paper: #ffffff;
  --fons: #f4f6f5;
  --pas: #e6ebe8;
  --verd: #047857;
  --verd-viu: #059669;
  --verd-clar: #34d399;

  /* Els colors dels estats, els mateixos que fa servir el programa */
  --e-incomplet: #dfe3e9;
  --e-llest: #c9dcf8;
  --e-enviat: #ded5f6;
  --e-matriculat: #c6ebe7;
  --e-facturat: #c4ebcf;
  --e-perduda: #f6c9c9;
  --p-llest: #4f8fe6;
  --p-enviat: #8b6fd6;
  --p-matriculat: #2a9d8f;
  --p-facturat: #3fb164;

  --lletra: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --marge: clamp(16px, 2.4vw, 40px);
  --sortida: cubic-bezier(0.23, 1, 0.32, 1);
  --moviment: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--paper);
  color: var(--tinta);
  font: 400 clamp(16px, 0.95rem + 0.2vw, 18px)/1.55 var(--lletra);
  font-optical-sizing: auto;
  overflow-x: clip;
}
h1, h2, h3 { font-weight: 650; text-wrap: balance; letter-spacing: -0.025em; line-height: 1.02; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { font-variant-numeric: tabular-nums; }
::selection { background: var(--verd-clar); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--verd-viu); outline-offset: 3px; }
.amagat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Botó: pla, d'un sol color, amb resposta en prémer-lo */
.boto {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.35em;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms var(--sortida), background-color 200ms ease;
}
.boto:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .boto:hover { background: var(--verd); }
}

/* Entrades: el contingut és visible si el guió no corre; només es mou quan entra a la pantalla */
.js .surt > * { opacity: 0; transform: translateY(24px); }
.js .surt.dins > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--sortida), transform 700ms var(--sortida);
}
.js .surt.dins > :nth-child(2) { transition-delay: 70ms; }
.js .surt.dins > :nth-child(3) { transition-delay: 140ms; }
.js .surt.dins > :nth-child(4) { transition-delay: 210ms; }
.js .surt.dins > :nth-child(n + 5) { transition-delay: 280ms; }

/* La persiana: la imatge principal s'obre des d'una vora */
.js .persiana { clip-path: inset(0 0 100% 0); }
.js .persiana img { transform: scale(1.12); }
.js .persiana.oberta { clip-path: inset(0); transition: clip-path 1100ms var(--moviment); }
.js .persiana.oberta img { transform: none; transition: transform 1400ms var(--sortida); }

/* Els crèdits de les fotos, al peu */
.credits { max-width: 75ch; font-size: 14px; line-height: 1.5; color: var(--tinta-suau); }
.credits a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .surt > *, .js .persiana, .js .persiana img { opacity: 1; transform: none; clip-path: none; }
  .js .surt.dins > * { transition: opacity 200ms ease; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}