/* =====================================================================
   Marquesina — palabra gigante, tenue, que corre de lado en el fondo de
   una sección (carrusel infinito) y aparece con scroll reveal.

   Es un componente COMPARTIDO por las páginas públicas (index.html,
   dealerstudio.html…), que son independientes entre sí y no comparten
   hoja: por eso no trae colores ni tipografía propios. Todo se hereda de
   la página por variables CSS, con un valor de respaldo.

   USO
     <section class="sec marq-sec" style="--marq-top:30px">
       <div class="marq" data-texto="FUNCIONES" aria-hidden="true"></div>
       <div class="wrap"> …contenido… </div>
     </section>
     <link rel="stylesheet" href="componentes/marquesina.css">
     <script src="componentes/marquesina.js" defer></script>

   VARIABLES (se pueden poner en la sección o en :root)
     --marq-fuente    tipografía              (por defecto: la de la página)
     --marq-peso      grosor                  (700)
     --marq-tam       tamaño de letra         (clamp(120px, 19vw, 300px))
     --marq-top       separación desde arriba (0)
     --marq-trazo     color del contorno      (violeta al 22%)
     --marq-relleno   color de arriba del degradado de relleno
     --marq-sep       el adorno entre repeticiones — se pone por data-sep
   ATRIBUTOS
     data-texto       la palabra (obligatorio)
     data-sep         adorno entre repeticiones (por defecto "✦"; "" = ninguno)
     data-velocidad   px por segundo (por defecto 38; más bajo = más lento)
     data-sentido     "inverso" para que corra hacia la derecha

   Sin el JS la marquesina no se ve, y está bien: es adorno puro (por eso
   aria-hidden). Con prefers-reduced-motion se ve quieta y sin reveal.
   ===================================================================== */

/* La sección que la aloja recorta lo que se sale y pone su contenido
   por encima de la palabra. */
.marq-sec{position:relative;overflow:hidden}
.marq-sec > :not(.marq){position:relative;z-index:1}

.marq{position:absolute;left:0;right:0;top:var(--marq-top,0);z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}

.marq-pista{display:flex;width:max-content;animation:marq-corre var(--marq-dur,70s) linear infinite}
.marq[data-sentido="inverso"] .marq-pista{animation-direction:reverse}
.marq-grupo{display:flex;flex:none;align-items:center}

/* Contorno fino + relleno que se desvanece hacia abajo: elegante y tenue
   a la vez. El degradado va recortado al texto; el trazo lo dibuja encima. */
.marq-t{flex:none;padding:0 .2em;white-space:nowrap;line-height:1;
  font-family:var(--marq-fuente,inherit);font-weight:var(--marq-peso,700);
  font-size:var(--marq-tam,clamp(120px,19vw,300px));letter-spacing:.05em;
  color:transparent;
  background:linear-gradient(180deg,var(--marq-relleno,rgba(154,123,255,.16)) 0%,transparent 88%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px var(--marq-trazo,rgba(154,123,255,.24))}
.marq-sep{flex:none;font-size:calc(var(--marq-tam,clamp(120px,19vw,300px)) * .3);line-height:1;
  color:var(--marq-trazo,rgba(154,123,255,.24))}

@keyframes marq-corre{to{transform:translateX(-50%)}}

/* Reveal: el JS arma la marquesina con .marq-js; entra al verse la sección.
   .marq-fuera la pausa cuando sale de pantalla (no gasta frames de balde). */
@media(prefers-reduced-motion:no-preference){
  .marq.marq-js{opacity:0;transform:translateY(46px)}
  .marq.marq-js.marq-vis{opacity:1;transform:none;
    transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
  .marq.marq-fuera .marq-pista{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
  .marq-pista{animation:none}
}