/* ==========================================================================
   Componentes usados en el Home: enlace subrayado y marquesinas.
   ========================================================================== */

@layer components {
  /* --- Enlace subrayado (Framer "Underline Link") --- */
  .underline-link {
    position: relative;
    display: inline-flex;
    padding-bottom: 2px;
    color: var(--color-text-soft);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: var(--color-text-soft);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.5s cubic-bezier(0.12, 0.23, 0.5, 1);
    }

    &:hover::after,
    &:focus-visible::after {
      transform: scaleX(1);
    }
  }

  /* --- Marquesina genérica (Framer "Ticker", 50 px/s) ---
     La lista se duplica; cada copia se desplaza su propio ancho en bucle.
     La duración la calcula assets/js/modules/marquee.js según el ancho real. */
  .marquee {
    --marquee-gap: 54px;
    --marquee-duration: 40s;

    display: flex;
    width: 100%;
    overflow: hidden;
  }

  .marquee__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--marquee-gap);
    padding-right: var(--marquee-gap);
    animation: marquee var(--marquee-duration) linear infinite;
  }

  @keyframes marquee {
    to {
      transform: translateX(-100%);
    }
  }

  /* --- Logos de clientes (Framer "TikerLogos") --- */
  .logo-ticker {
    height: 80px;
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }

  .logo-ticker__item {
    flex: none;
  }

  .logo-ticker__logo {
    width: auto;
    height: 42px;
    max-width: 145px;
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee {
      flex-wrap: wrap;
      height: auto;
      mask-image: none;
    }

    .marquee__track {
      flex-wrap: wrap;
      animation: none;

      &[aria-hidden="true"] {
        display: none;
      }
    }
  }
}