/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-credibility.css
   Layer: Credibility Module (Intro + Tiers + Logo Field)
   Version: 3.0
========================================================= */

/* #region 0) MODULE TOKENS */
.milo-credibility {
  /* Divider */
  --milo-cred-rule: var(--milo-divider);
  --milo-cred-rule-soft: var(--milo-divider-soft);
  --milo-cred-rule-background: var(--milo-rule-center-base);
  --milo-cred-rule-background-glow: var(--milo-rule-center-glow);
  --milo-cred-rule-width: 640px;
  --milo-cred-rule-y: 0px;
  --milo-cred-rule-left: 50%;
  --milo-cred-rule-transform: translateX(-50%);
  --milo-cred-rule-opacity: var(--milo-o-70);
  --milo-cred-rule-sheen-opacity: 0.45;
  --milo-cred-rule-sheen-animation: milo-divider-sweep 22s ease-in-out infinite;

  /* Spacing */
  --milo-cred-intro-gap: var(--milo-space-sm);
  --milo-cred-tier-gap: var(--milo-space-md);
  --milo-cred-section-gap: clamp(28px, 4vw, 48px);
  --milo-cred-logos-gap: clamp(28px, 4vw, 48px);
  --milo-cred-tier-label-margin-bottom: var(--milo-space-sm);
  --milo-cred-margin-top: var(--milo-space-lg);

  /* Intro */
  --milo-cred-intro-max: 720px;
  --milo-cred-intro-display: flex;
  --milo-cred-intro-width: auto;
  --milo-cred-intro-margin-inline: 0;
  --milo-cred-intro-align: flex-start;
  --milo-cred-intro-padding-top: 0;
  --milo-cred-intro-text-align: left;

  /* Type */
  --milo-cred-label-color: var(--milo-text-muted);
  --milo-cred-tier-label-opacity: 0.7;
  --milo-cred-title-max: none;
  --milo-cred-title-size: inherit;
  --milo-cred-title-line-height: inherit;
  --milo-cred-title-align: left;
  --milo-cred-label-align: center;

  /* Logos */
  --milo-cred-logos-align: center;
  --milo-cred-logos-justify: initial;
  --milo-cred-logos-justify-items: initial;
  --milo-cred-logos-max: none;
  --milo-cred-logos-margin-inline: 0;
  --milo-cred-logos-padding-top: 0;
  --milo-gap-grid: var(--milo-cred-logos-gap);
  --milo-halo-radial-glow:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.025) 28%,
      rgba(255, 255, 255, 0.015) 42%,
      transparent 60%
    ),
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 55%
    );

  /* Shared logo sizing */
  --milo-cred-logo-size-featured: var(--milo-logo-h-featured);
  --milo-cred-logo-size-client: var(--milo-logo-h-client);
  --milo-cred-logo-size-compact-featured: var(--milo-logo-h-compact-featured);
  --milo-cred-logo-size-compact-client: var(--milo-logo-h-compact-client);

  /* Featured / clients grid definitions */
  --milo-cred-featured-row1-cols: initial;
  --milo-cred-featured-row2-cols: initial;
  --milo-cred-clients-cols: initial;

  /* Motion */
  --milo-cred-logo-transition-dur: 0.35s;
  --milo-cred-logo-transition-ease: var(--milo-ease);
  --milo-cred-logo-halo-transition-dur: 0.45s;
  --milo-cred-logo-hover-offset: -3px;
  --milo-cred-logo-float: -2px;
  --milo-cred-logo-float-animation: none;

  /* Logo halo */
  --milo-cred-logo-halo-inset: -6px;
  --milo-cred-logo-halo-opacity: 0;
  --milo-cred-logo-halo-opacity-hover: 0.9;
  --milo-cred-logo-halo-scale: 0.92;
  --milo-cred-logo-halo-scale-hover: 1.05;
}
/* #endregion */

/* #region 1) BASE MODULE */
.milo-credibility__wrap {
  gap: var(--milo-cred-section-gap);
}

.milo-credibility__intro {
  display: var(--milo-cred-intro-display);
  flex-direction: column;
  gap: var(--milo-cred-intro-gap);
  max-width: var(--milo-cred-intro-max);
  width: var(--milo-cred-intro-width);
  margin-inline: var(--milo-cred-intro-margin-inline);
  align-items: var(--milo-cred-intro-align);
  padding-top: var(--milo-cred-intro-padding-top);
  text-align: var(--milo-cred-intro-text-align);
}

.milo-credibility__tier {
  gap: var(--milo-cred-tier-gap);
}

.milo-credibility__title,
.milo-credibility__label,
.milo-credibility__tier-label {
  margin: 0;
}

.milo-credibility__label {
  color: inherit;
}

.milo-credibility__title h2 {
  max-width: var(--milo-cred-title-max);
  font-size: var(--milo-cred-title-size);
  line-height: var(--milo-cred-title-line-height);
  text-align: var(--milo-cred-title-align);
}

.milo-credibility__tier-label {
  margin-bottom: var(--milo-cred-tier-label-margin-bottom);
  color: var(--milo-cred-label-color);
  opacity: var(--milo-cred-tier-label-opacity);
  text-align: var(--milo-cred-label-align);
}

.milo-credibility__logos {
  align-items: var(--milo-cred-logos-align);
  justify-content: var(--milo-cred-logos-justify);
  justify-items: var(--milo-cred-logos-justify-items);
  max-width: var(--milo-cred-logos-max);
  margin-inline: var(--milo-cred-logos-margin-inline);
  padding-top: var(--milo-cred-logos-padding-top);
  --milo-gap-grid: var(--milo-cred-logos-gap);
}

.milo-credibility__logos--featured {
  margin-top: var(--milo-cred-margin-top);
}
/* #endregion */

/* #region 2) SHARED LOGO SIZE MAPPING */
.milo-credibility
  :is(
    .milo-credibility__logos--featured-row1,
    .milo-credibility__logos--featured-row2,
    .milo-credibility__logos--featured
  )
  .milo-logo {
  --milo-logo-size-current: var(--milo-cred-logo-size-featured);
}

.milo-credibility .milo-credibility__logos--clients .milo-logo {
  --milo-logo-size-current: var(--milo-cred-logo-size-client);
}
/* #endregion */

/* #region 3) DIVIDER RULE BETWEEN TIERS */
.milo-credibility__tier--clients {
  position: relative;
  z-index: 0;
  border-top: none;
}

.milo-credibility__tier--clients::before,
.milo-credibility__tier--clients::after {
  position: absolute;
  top: var(--milo-cred-rule-y);
  left: var(--milo-cred-rule-left);
  transform: var(--milo-cred-rule-transform);
  width: min(var(--milo-cred-rule-width), 100%);
  height: 1px;
  pointer-events: none;
}

.milo-credibility__tier--clients::before {
  content: "";
  z-index: 1;
  opacity: var(--milo-cred-rule-opacity);
  background: var(--milo-cred-rule-background);
}

.milo-credibility__tier--clients::after {
  content: "";
  z-index: 2;
  opacity: var(--milo-cred-rule-sheen-opacity);
  background: var(--milo-cred-rule-background-glow);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: var(--milo-cred-rule-sheen-animation);
}
/* #endregion */

/* #region 4) VARIANT: HOME */
.milo-credibility--home {
  --milo-cred-rule-left: 50%;
  --milo-cred-rule-transform: translateX(-50%);

  --milo-cred-intro-display: inline-flex;
  --milo-cred-intro-width: max-content;
  --milo-cred-intro-margin-inline: auto;
  --milo-cred-intro-align: flex-start;

  --milo-cred-title-align: start;

  --milo-cred-logos-justify: center;
  --milo-cred-logos-justify-items: center;

  --milo-cred-featured-row1-cols: repeat(4, max-content);
  --milo-cred-featured-row2-cols: repeat(3, max-content);
  --milo-cred-clients-cols: repeat(6, max-content);

  --milo-cred-logo-float-animation: milo-logo-float 10s ease-in-out infinite;
}

.milo-credibility--home .milo-credibility__logos--featured-row1 {
  --milo-grid-cols-def: var(--milo-cred-featured-row1-cols);
  --milo-grid-justify: var(--milo-cred-logos-justify);
  --milo-grid-justify-items: var(--milo-cred-logos-justify-items);
}

.milo-credibility--home .milo-credibility__logos--featured-row2 {
  --milo-grid-cols-def: var(--milo-cred-featured-row2-cols);
  --milo-grid-justify: var(--milo-cred-logos-justify);
  --milo-grid-justify-items: var(--milo-cred-logos-justify-items);
}

.milo-credibility--home .milo-credibility__logos--clients {
  --milo-grid-cols-def: var(--milo-cred-clients-cols);
}
/* #endregion */

/* #region 5) VARIANT: COMPACT */
.milo-credibility--compact {
  --milo-cred-rule-width: 100%;
  --milo-cred-rule-left: 0;
  --milo-cred-rule-transform: none;
  --milo-cred-rule-y: -30px;
  --milo-cred-rule-opacity: var(--milo-o-55);
  --milo-cred-rule-sheen-animation: none;

  --milo-cred-section-gap: clamp(24px, 3vw, 36px);
  --milo-cred-tier-gap: var(--milo-space-sm);

  --milo-cred-intro-align: flex-start;
  --milo-cred-intro-margin-inline: 0;
  --milo-cred-intro-padding-top: var(--milo-space-sm);
  --milo-cred-intro-text-align: left;

  --milo-cred-title-max: 18ch;
  --milo-cred-title-size: clamp(28px, 3.2vw, 42px);
  --milo-cred-title-line-height: 1.14;
  --milo-cred-title-align: left;

  --milo-cred-margin-top: var(--milo-space-sm);

  --milo-cred-logos-justify: start;
  --milo-cred-logos-justify-items: start;

  --milo-cred-featured-row1-cols: repeat(6, max-content);
  --milo-cred-featured-row2-cols: repeat(6, max-content);
  --milo-cred-clients-cols: repeat(6, max-content);

  --milo-cred-logo-size-featured: var(--milo-cred-logo-size-compact-featured);
  --milo-cred-logo-size-client: var(--milo-cred-logo-size-compact-client);
}

.milo-credibility--compact .milo-credibility__tier--featured,
.milo-credibility--compact .milo-credibility__tier--clients {
  margin-top: var(--milo-cred-margin-top);
}

.milo-credibility--compact
  :is(.milo-credibility__logos--featured, .milo-credibility__logos--clients) {
  --milo-grid-cols-def: var(--milo-cred-clients-cols);
  --milo-grid-justify: var(--milo-cred-logos-justify);
  --milo-grid-justify-items: var(--milo-cred-logos-justify-items);
}
/* #endregion */

/* #region 6) LOGO MICRO-MOTION + HALO */
.milo-credibility .milo-logo {
  position: relative;
  isolation: isolate;
  transition: transform var(--milo-cred-logo-transition-dur)
    var(--milo-cred-logo-transition-ease);
  animation: var(--milo-cred-logo-float-animation);
}

.milo-credibility--home .milo-logo {
  will-change: transform;
  --milo-logo-float: -2px;
}

.milo-credibility--home .milo-logo:nth-child(2) {
  animation-delay: 0.6s;
  animation-duration: 11s;
  --milo-logo-float: -2.5px;
}

.milo-credibility--home .milo-logo:nth-child(3) {
  animation-delay: 1.2s;
  animation-duration: 9s;
  --milo-logo-float: -1.5px;
}

.milo-credibility--home .milo-logo:nth-child(4) {
  animation-delay: 1.8s;
  animation-duration: 10.5s;
  --milo-logo-float: -2.2px;
}

.milo-credibility--home .milo-logo:nth-child(5) {
  animation-delay: 2.4s;
  animation-duration: 9.5s;
  --milo-logo-float: -1.8px;
}

.milo-credibility--home .milo-logo:nth-child(6) {
  animation-delay: 3s;
  animation-duration: 11.2s;
  --milo-logo-float: -2.3px;
}

.milo-credibility .milo-logo::after {
  content: "";
  position: absolute;
  inset: var(--milo-cred-logo-halo-inset);
  z-index: -1;
  pointer-events: none;
  background: var(--milo-halo-radial-glow);
  opacity: var(--milo-cred-logo-halo-opacity);
  transform: scale(var(--milo-cred-logo-halo-scale));
  transition:
    opacity var(--milo-cred-logo-transition-dur)
      var(--milo-cred-logo-transition-ease),
    transform var(--milo-cred-logo-halo-transition-dur)
      var(--milo-cred-logo-transition-ease);
}

.milo-credibility .milo-logo:hover {
  transform: translateY(var(--milo-cred-logo-hover-offset));
}

.milo-credibility .milo-logo:hover::after {
  opacity: var(--milo-cred-logo-halo-opacity-hover);
  transform: scale(var(--milo-cred-logo-halo-scale-hover));
}
/* #endregion */

/* #region 7) RESPONSIVE */
@media (max-width: 1024px) {
  .milo-credibility {
    --milo-cred-rule-width: 620px;
  }

  .milo-credibility--home {
    --milo-cred-clients-cols: repeat(3, max-content);
  }

  .milo-credibility--compact {
    --milo-cred-logos-max: 90%;
    --milo-cred-logos-padding-top: 5px;
  }

  .milo-credibility--compact
    :is(
      .milo-credibility__logos--featured.e-con,
      .milo-credibility__logos--clients.e-con
    ) {
    --milo-grid-cols-def: repeat(3, max-content);
    column-gap: clamp(55px, 6vw, 80px);
    row-gap: 4px;
    max-width: var(--milo-cred-logos-max);
    padding-top: var(--milo-cred-logos-padding-top);
    margin: auto;
  }
}

@media (max-width: 767.98px) {
  .milo-credibility {
    --milo-cred-rule-width: 100%;
    --milo-cred-logos-gap: clamp(20px, 2vw, var(--milo-space-sm))
      clamp(30px, 4vw, var(--milo-space-xl));
  }

  .milo-credibility--home {
    --milo-cred-title-max: 22ch;
  }

  .milo-credibility--compact {
    --milo-cred-logos-gap: clamp(10px, 2vw, var(--milo-space-sm))
      clamp(20px, 4vw, var(--milo-space-lg));
    --milo-cred-title-size: clamp(24px, 8vw, 34px);
    --milo-cred-rule-opacity: var(--milo-o-55);
  }

  .milo-credibility
    :is(
      .milo-credibility__logos--featured-row1.e-con,
      .milo-credibility__logos--featured-row2.e-con,
      .milo-credibility__logos--clients.e-con
    ),
  .milo-credibility--compact
    :is(
      .milo-credibility__logos--featured.e-con,
      .milo-credibility__logos--clients.e-con
    ) {
    --milo-grid-cols-def: repeat(2, max-content);
    column-gap: clamp(25px, 8vw, 100px);
  }
}
/* #endregion */

/* #region 8) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-credibility .milo-logo,
  .milo-credibility .milo-logo::after,
  .milo-credibility__tier--clients::after {
    transition: none !important;
    animation: none !important;
  }

  .milo-credibility .milo-logo:hover {
    transform: none !important;
  }

  .milo-credibility .milo-logo:hover::after {
    opacity: var(--milo-cred-logo-halo-opacity);
    transform: scale(var(--milo-cred-logo-halo-scale));
  }
}
/* #endregion */