/*
 * Utilitats de layout compartides entre components (no pertanyen a cap
 * secció concreta - veure .claude/context/project-context.md).
 */

:root {
  /* Marge lateral del contingut. Interpola de forma CONTÍNUA entre els dos
     valors que ja tenia el disseny (24px a mòbil, 144px a l'amplada de
     referència del mock, ~1600px) en comptes de saltar de l'un a l'altre a
     992px: la recta passa exactament per 24px a 576px i per 144px a 1600px
     (pendent 120px / 1024px = 11.71875vw), i el clamp la deixa plana fora
     d'aquest rang. Així el disseny d'escriptori a ≥1600px queda EXACTAMENT
     igual que abans (144px, alineat amb el .container de 1320px de Bootstrap)
     però desapareix el precipici del breakpoint: abans, just a 992px, el
     contingut perdia 240px d'amplada de cop (288px de padding dins d'un
     viewport de 992) i tant la fila del header com la columna del hero es
     quedaven sense espai (menú a 3 línies amb el logo aixafat a 0px, H1 a 5
     línies). Valors resultants: 46px @768, 73px @992, 97px @1200, 117px
     @1366, 144px @1600. */
  --edge-padding: clamp(24px, 11.71875vw - 43.5px, 144px);
}

/* Native smooth scroll for in-page anchor links (nav menu -> #section-id).
   Scoped to html rather than a class since it's a document-wide behaviour,
   not a component to opt into. */
html {
  scroll-behavior: smooth;
}

/* Marge lateral fluid als costats del contingut, en comptes del gutter
   petit (12px) i el max-width limitat (960/1140/1320px) que aplica
   Bootstrap per defecte a ".container". Aplicar-la sobre ".container" (a més
   de la pròpia, p.ex. "container h-100 container-edge") en comptes de
   substituir-la, perquè aquesta classe només toca el padding, no el max-width
   ni el comportament de columnes de Bootstrap.
   Ja no hi ha @media: --edge-padding (a dalt) ja porta el valor de mòbil com a
   mínim del clamp, així que una sola declaració cobreix tot el rang i cap
   amplada intermèdia queda sense definir. */
.container-edge {
  padding-left: var(--edge-padding);
  padding-right: var(--edge-padding);
}

/* Fletxa animada dels indicadors "continua fent scroll" (peu de
   #process-donut i #services-scroll): SVG inline a la plantilla amb un
   rebot vertical suau i continu. La mida es fixa aquí (i no amb els
   atributs width/height de l'SVG) perquè vagi a joc amb el text de 13px
   dels dos peus. */
.scroll-hint-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow {
    animation: none;
  }
}