/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-logos.css
   Layer: Logo System
   Version: 3.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s logo treatment system:
   - Shared size tiers for featured, client, compact, and base logos
   - Monochrome logo normalization for SVG-based marks
   - Opacity, filter, and path-fill treatment
   - Hover polish for logo grids and proof strips
   - Subtle ambient logo float / breathe motion

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Logo sizing via localized token knobs
   - SVG/logo normalization
   - Base opacity/filter treatment
   - Hover treatment for logos and paths
   - Logo-specific animation behavior

   Does NOT own:
   - Grid/layout structure
   - Section spacing
   - Module-specific logo composition
   - Typography or surrounding label styles
   - Canonical color derivation for logo tones

   ARCHITECTURE
   ----------------------------------------------------------------
   - Canonical logo tones should live in milo-tokens.css
   - .milo-logo consumes those global tones via local aliases
   - Per-logo override supported via --milo-logo-size-current
   - Float motion is token-driven and can be desynced per usage context

   EXPECTED GLOBAL TOKENS
   ----------------------------------------------------------------
   Move these into milo-tokens.css:
   - --milo-icon-featured
   - --milo-icon-muted
   - --milo-icon-hover

========================================================= */

/* #region 0) LOCALIZED DEFAULTS (knobs) */
.milo-logo {
  /* #region Size knobs */
  --milo-logo-size-featured: var(--milo-logo-h-featured);
  --milo-logo-size-client: var(--milo-logo-h-client);
  --milo-logo-size-compact-featured: var(--milo-logo-h-compact-featured);
  --milo-logo-size-compact-client: var(--milo-logo-h-compact-client);
  --milo-logo-size-current: var(--milo-logo-h);
  /* #endregion Size knobs */

  /* #region Opacity knobs */
  --milo-logo-opacity-featured: var(--milo-o-78);
  --milo-logo-opacity-client: var(--milo-o-62);
  --milo-logo-opacity-hover: var(--milo-o-90);
  --milo-logo-opacity-current: var(--milo-logo-opacity-client);
  /* #endregion Opacity knobs */

  /* #region Filter knobs */
  --milo-logo-filter-base: var(--milo-filter-mono);
  --milo-logo-filter-hover: var(--milo-filter-mono-hover);
  /* #endregion Filter knobs */

  /* #region Path fill knobs */
  --milo-logo-path-featured: var(--milo-icon-featured, var(--milo-white));
  --milo-logo-path-client: var(--milo-icon-muted, var(--milo-off-white));
  --milo-logo-path-hover: var(--milo-icon-hover, var(--milo-white));
  --milo-logo-path-current: var(--milo-logo-path-client);
  /* #endregion Path fill knobs */

  /* #region Motion knobs */
  --milo-logo-transition-dur: var(--milo-med);
  --milo-logo-transition-ease: var(--milo-ease);

  --milo-logo-float-offset: -2px;
  --milo-logo-hover-offset: 0px;
  --milo-logo-float-dur: 7.2s;
  --milo-logo-float-delay: 0s;
  --milo-logo-float-ease: ease-in-out;
  --milo-logo-float-play: running;
  /* #endregion Motion knobs */
}

/* #endregion 0) LOCALIZED DEFAULTS (knobs) */

/* #region 1) SHARED KEYFRAMES */
@keyframes milo-logo-float {
  0% {
    transform: translateY(calc(0px + var(--milo-logo-hover-offset)));
  }

  50% {
    transform: translateY(
      calc(var(--milo-logo-float-offset, -2px) + var(--milo-logo-hover-offset))
    );
  }

  100% {
    transform: translateY(calc(0px + var(--milo-logo-hover-offset)));
  }
}
/* #endregion 1) SHARED KEYFRAMES */

/* #region 2) SAFETY */
.milo-logo,
.milo-logo * {
  box-sizing: border-box;
}

.milo-logo .elementor-widget-icon,
.milo-logo .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.milo-logo .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
/* #endregion 2) SAFETY */

/* #region 3) SIZE SYSTEM */
.milo-logo .elementor-icon {
  font-size: var(--milo-logo-size-current) !important;
}
/* #endregion 3) SIZE SYSTEM */

/* #region 4) SVG NORMALIZATION */
.milo-logo .elementor-icon {
  color: var(--milo-logo-path-current);
  animation: milo-logo-float var(--milo-logo-float-dur)
    var(--milo-logo-float-ease) infinite;
  animation-delay: var(--milo-logo-float-delay);
  animation-play-state: var(--milo-logo-float-play);
  will-change: transform;

  transition:
    color var(--milo-logo-transition-dur) var(--milo-logo-transition-ease),
    transform var(--milo-logo-transition-dur) var(--milo-logo-transition-ease);
}

.milo-logo .elementor-icon svg {
  display: block;
  width: auto;
  height: 1em;

  opacity: var(--milo-logo-opacity-current);
  filter: var(--milo-logo-filter-base);

  transition:
    opacity var(--milo-logo-transition-dur) var(--milo-logo-transition-ease),
    filter var(--milo-logo-transition-dur) var(--milo-logo-transition-ease);
}
/* #endregion 4) SVG NORMALIZATION */

/* #region 5) SHAPE TREATMENT */
.milo-logo .elementor-icon svg * {
  transition:
    fill var(--milo-logo-transition-dur) var(--milo-logo-transition-ease),
    stroke var(--milo-logo-transition-dur) var(--milo-logo-transition-ease);
}

.milo-logo .elementor-icon svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.milo-logo .elementor-icon svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

.milo-logo .elementor-icon svg path,
.milo-logo .elementor-icon svg rect,
.milo-logo .elementor-icon svg circle,
.milo-logo .elementor-icon svg polygon,
.milo-logo .elementor-icon svg ellipse,
.milo-logo .elementor-icon svg line,
.milo-logo .elementor-icon svg polyline {
  fill: currentColor !important;
}
/* #endregion 5) SHAPE TREATMENT */

/* #region 6) HOVER TREATMENT */
.milo-logo .elementor-icon:hover {
  color: var(--milo-logo-path-hover);
  --milo-logo-hover-offset: -0.5px;
}

.milo-logo .elementor-icon:hover svg {
  opacity: var(--milo-logo-opacity-hover);
  filter: var(--milo-logo-filter-hover);
}
/* #endregion 6) HOVER TREATMENT */

/* #region 7) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-logo .elementor-icon,
  .milo-logo .elementor-icon svg,
  .milo-logo .elementor-icon svg * {
    transition: none !important;
    animation: none !important;
  }

  .milo-logo .elementor-icon {
    transform: none !important;
    will-change: auto;
  }
}
/* #endregion 7) REDUCED MOTION */