/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PAPIK · Motion hairline · capa de vida per a la home (oct 2026)        ║
   ║  Una tècnica diferent per secció, totes del mateix repertori (gallery   ║
   ║  prompt-motion): línia que es dibuixa, lletres que pugen una a una,     ║
   ║  iris, cortina, desplegable de paper, odòmetre, píndola que s'estira,   ║
   ║  línia d'escaneig, logotip que es dibuixa, inundació de color, acordió. ║
   ║  Cap fos, cap ombra, cap degradat, cap partícula. Springs curts.         ║
   ║  Tot el moviment el calcula js/motion-hairline.js com a funció del temps ║
   ║  (o del scroll); aquí només viuen els elements auxiliars que crea.       ║
   ║  No toca contingut: tot el que afegeix és decoratiu i s'esborra en acabar║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Línia que es dibuixa d'esquerra a dreta sobre una vora que ja existeix */
.hl-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 4;
}

/* Velo (menta sobre foto, blanc sobre secció): es contrau cap a la línia */
.hl-cover {
  position: absolute;
  inset: 0;
  background: #d9e4e0;
  border-radius: inherit;
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: 3;
}
.hl-cover--page { background: #ffffff; transform-origin: 50% 0; z-index: 5; }

/* Línia d'escaneig que baixa per una columna i va revelant els elements */
.hl-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: #002819;
  pointer-events: none;
  z-index: 4;
}

/* Lletra o paraula (text que puja des de la seva pròpia línia de base: la
   màscara és el clip-path de cada unitat, que viatja amb la seva translació) */
.hl-w { white-space: nowrap; }
.hl-c { display: inline-block; }

/* Mentre la capa governa un element, cap transició CSS heretada hi interfereix */
.hl-seq, .hl-seq .rt-char__layer { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hl-line, .hl-cover, .hl-scan { display: none !important; }
}

/* Regla: hairline amb marques de mesura que es dibuixa sota una xifra i es retira */
.hl-ruler {
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  border-bottom: 1px solid currentColor;
  background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 4;
}

/* Agulla: hairline de valoració que s'omple fins a la xifra */
.hl-gauge {
  position: absolute;
  left: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* Capes del mur (SVG) mentre s'apilen */
.hl-seq.pvh-layer, .hl-seq .pvh-layer { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hl-ruler, .hl-gauge { display: none !important; }
}