/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


@layer base {
  :root {
    --accent-color: hsl(61 90% 67%);
  }
}

@layer utilities {
  /* --- Customer Logo Ticker --- */
  .logo-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      white 10%,
      white 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      white 10%,
      white 90%,
      transparent 100%
    );
  }

  .logo-track-container {
    display: flex;
    width: fit-content;
    animation: scroll 20s linear infinite;
  }

  .logo-track-container img {
    height: 48px; /* h-12 */
    margin: 0 32px; /* mx-8 */
    filter: grayscale(1);
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-80%);
    }
  }
}