/* MDP · Logo "Cinturón" · component reusable
 * Source: clients/mdp/brand/brand-book/ — lockup principal + variantes A/B
 * Anatomía: letras Helvetica Bold 900 con BANDA horizontal del color del bg
 *           cortando visualmente las letras, descriptor centered en la banda.
 *
 * Uso:
 *   <span class="mdp-logo" style="--logo-size: 80px;">
 *     <span class="mdp-letters">MDP</span>
 *     <span class="mdp-band">
 *       <span class="mdp-descriptor">Desarrollos · Inmobiliarios</span>
 *     </span>
 *   </span>
 *
 * Modificadores:
 *   .mdp-logo--reverse   → sobre paper bg (ink-on-paper)
 *   .mdp-logo--wordmark  → sin banda ni descriptor (variant A · usos chicos)
 *   .mdp-logo--building  → estados intermedios para scroll-driven animation
 */

@import url("./tokens.css");

.mdp-logo {
  /* defaults — overridable inline o por modifier */
  --logo-size:   80px;
  --logo-fg:     var(--paper-on-dark);
  --logo-bg:     var(--carbon);
  --logo-hair:   var(--hair-on-dark);
  --logo-band-h: calc(var(--logo-size) * 0.16);   /* 32pt sobre 200pt = 16% */
  --logo-desc-size: calc(var(--logo-size) * 0.058);
  --logo-stage: 5;  /* 1..5 · controla la animación scroll-build */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: var(--logo-size);
  line-height: 0.85;
  letter-spacing: var(--tr-display);
  color: var(--logo-fg);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  white-space: nowrap;
  isolation: isolate;
}

/* ============ LETRAS · M D P ============
   Las letras se RECORTAN en la franja media donde va la banda (mask-image).
   Esto replica el brand book: la banda corta visualmente las letras MDP. */
.mdp-logo .mdp-letters {
  display: inline-flex;
  gap: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: 1em;
  line-height: 0.85;
  letter-spacing: inherit;
  color: var(--logo-fg);
  position: relative;
  z-index: 1;

  /* MASCARA · oculta la franja media exacta donde se posa la banda */
  --letters-mask-stop-a: calc(50% - var(--logo-band-h) / 2);
  --letters-mask-stop-b: calc(50% + var(--logo-band-h) / 2);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 var(--letters-mask-stop-a),
    transparent var(--letters-mask-stop-a),
    transparent var(--letters-mask-stop-b),
    #000 var(--letters-mask-stop-b),
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 var(--letters-mask-stop-a),
    transparent var(--letters-mask-stop-a),
    transparent var(--letters-mask-stop-b),
    #000 var(--letters-mask-stop-b),
    #000 100%
  );
}
.mdp-logo .mdp-letters .ltr {
  display: inline-block;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ============ BANDA HORIZONTAL · corta las letras ============
   width controlado por la variable --logo-band-w (default 105% de las letras).
   Cuando el descriptor necesita más espacio (chrome small), bumpear --logo-band-w. */
.mdp-logo {
  --logo-band-w: 108%;
}
.mdp-logo .mdp-band {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--logo-band-w);
  max-width: 100vw;                 /* nunca sale del viewport */
  height: var(--logo-band-h);
  background: var(--logo-bg);
  border-top:    1px solid var(--logo-hair);
  border-bottom: 1px solid var(--logo-hair);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  overflow: hidden;
}

/* ============ DESCRIPTOR · dentro de la banda ============ */
.mdp-logo .mdp-descriptor {
  font-family: var(--sans-body);
  font-weight: 800;
  font-size: var(--logo-desc-size);
  letter-spacing: var(--tr-descriptor);
  text-indent: var(--tr-descriptor);      /* compensa tracking, centra óptico */
  text-transform: uppercase;
  text-align: center;
  color: var(--logo-fg);
  line-height: 1;
  white-space: nowrap;
}

/* =================================================================
   MODIFICADORES
   ================================================================= */

/* Variant B · ink-on-paper · sobre crema/hueso */
.mdp-logo--reverse {
  --logo-fg:   var(--ink);
  --logo-bg:   var(--paper);
  --logo-hair: var(--hair-on-paper);
}

/* Variant A · wordmark solo · sin banda · usos chicos (favicons, avatars) */
.mdp-logo--wordmark .mdp-band { display: none; }

/* =================================================================
   SCROLL-BUILD ANIMATION · stages 1..5
   Driven por JS toggling --logo-stage en el elemento.
   ================================================================= */

/* base · todos los pieces hidden hasta su stage */
.mdp-logo--building .mdp-letters .ltr {
  opacity: 0;
  transform: translateY(48px) scale(0.94);
  transition: opacity var(--dur-cinema) var(--ease-cinematic),
              transform var(--dur-cinema) var(--ease-cinematic);
}
.mdp-logo--building .mdp-band {
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
  transition: transform 1400ms var(--ease-cine-strong);
}
.mdp-logo--building .mdp-descriptor {
  opacity: 0;
  transition: opacity 800ms var(--ease-out-expo) 200ms;
}

/* Stage 2 → M entra */
.mdp-logo--building[data-stage="2"] .mdp-letters .ltr:nth-child(1),
.mdp-logo--building[data-stage="3"] .mdp-letters .ltr:nth-child(1),
.mdp-logo--building[data-stage="4"] .mdp-letters .ltr:nth-child(1),
.mdp-logo--building[data-stage="5"] .mdp-letters .ltr:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mdp-logo--building .mdp-letters .ltr:nth-child(1) { transition-delay: 0ms; }

/* Stage 2 also → D entra (staggered en el mismo stage) */
.mdp-logo--building[data-stage="2"] .mdp-letters .ltr:nth-child(2),
.mdp-logo--building[data-stage="3"] .mdp-letters .ltr:nth-child(2),
.mdp-logo--building[data-stage="4"] .mdp-letters .ltr:nth-child(2),
.mdp-logo--building[data-stage="5"] .mdp-letters .ltr:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mdp-logo--building .mdp-letters .ltr:nth-child(2) { transition-delay: 240ms; }

/* Stage 2 also → P entra (más delay) */
.mdp-logo--building[data-stage="2"] .mdp-letters .ltr:nth-child(3),
.mdp-logo--building[data-stage="3"] .mdp-letters .ltr:nth-child(3),
.mdp-logo--building[data-stage="4"] .mdp-letters .ltr:nth-child(3),
.mdp-logo--building[data-stage="5"] .mdp-letters .ltr:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mdp-logo--building .mdp-letters .ltr:nth-child(3) { transition-delay: 480ms; }

/* Stage 3 → banda se dibuja (scaleX 0 → 1 desde center) */
.mdp-logo--building[data-stage="3"] .mdp-band,
.mdp-logo--building[data-stage="4"] .mdp-band,
.mdp-logo--building[data-stage="5"] .mdp-band {
  transform: translate(-50%, -50%) scaleX(1);
}

/* Stage 4 → descriptor fadeIn dentro de la banda */
.mdp-logo--building[data-stage="4"] .mdp-descriptor,
.mdp-logo--building[data-stage="5"] .mdp-descriptor {
  opacity: 1;
}

/* Stage 5 → settled · sin cambios visuales adicionales (todo ya está) */